diff options
Diffstat (limited to 'tests/wpt/tests/css/css-values')
9 files changed, 311 insertions, 6 deletions
diff --git a/tests/wpt/tests/css/css-values/attr-cycle.html b/tests/wpt/tests/css/css-values/attr-cycle.html index 1db82c4cad2..c876f77a835 100644 --- a/tests/wpt/tests/css/css-values/attr-cycle.html +++ b/tests/wpt/tests/css/css-values/attr-cycle.html @@ -96,18 +96,21 @@ attrElem.style.setProperty('--x', null); attrElem.removeAttribute('data-bar'); - /* Cycle in fallback */ - test_attr_cycle('--y', 'attr(data-foo type(*), var(--y))', '3'); - test_attr_cycle('--y', 'attr(data-foo type(*), attr(data-foo))', '3'); + /* Cycle in unused fallbacks */ + test_attr_no_cycle('--y', 'attr(data-foo type(*), var(--y))', '3', '3'); + test_attr_no_cycle('--y', 'attr(data-foo type(*), attr(data-foo))', '3', '3'); attrElem.style.setProperty('--x', 'var(--y)'); - test_attr_cycle('--y', 'attr(data-foo type(*), var(--x))', '3'); + test_attr_no_cycle('--y', 'attr(data-foo type(*), var(--x))', '3', '3'); attrElem.style.setProperty('--x', null); attrElem.setAttribute('data-bar', 'attr(data-foo type(*))'); - test_attr_cycle('--y', 'attr(data-foo type(*), attr(data-bar type(*)))', '3'); + test_attr_no_cycle('--y', 'attr(data-foo type(*), attr(data-bar type(*)))', '3', '3'); attrElem.removeAttribute('data-bar'); + /* Cycle in fallback */ + test_attr_cycle('--y', 'attr(data-unknown type(*), var(--y))', '3'); + /* No cycle, use raw CSS string without substitution */ attrElem.setAttribute('data-bar', 'var(--y)'); test_attr_no_cycle('--y', 'attr(data-foo type(<string>))', 'attr(data-bar type(<string>))', ''); diff --git a/tests/wpt/tests/css/css-values/if-cycle.html b/tests/wpt/tests/css/css-values/if-cycle.html index 74d56dc9ed7..ac3ff7df4ee 100644 --- a/tests/wpt/tests/css/css-values/if-cycle.html +++ b/tests/wpt/tests/css/css-values/if-cycle.html @@ -182,7 +182,7 @@ test_if(`if(style(--x: attr(data-foo, var(--y))): true_value; else: false_value)`, [['--x', '"30px"'], ['--y', 'var(--y)']], - 'false_value'); + 'true_value'); // self cycle in unused condition test_if(`if(style(--x: 0): value1; style(--prop): value2)`, diff --git a/tests/wpt/tests/css/css-values/tree-counting/sibling-function-descriptors.tentative.html b/tests/wpt/tests/css/css-values/tree-counting/sibling-function-descriptors.tentative.html index 76d2ff8ee4d..8f597aa92e4 100644 --- a/tests/wpt/tests/css/css-values/tree-counting/sibling-function-descriptors.tentative.html +++ b/tests/wpt/tests/css/css-values/tree-counting/sibling-function-descriptors.tentative.html @@ -83,6 +83,16 @@ symbols: linear-gradient(red calc(20px * sibling-count()), pink); } </style> +<style id="font_features_sheet"> + @font-feature-values foo { + @swash { pretty: 1; } + @swash { pretty: calc(max(sibling-index(), 2)); } + } + @font-feature-values bar { + @swash { pretty: 1; } + @swash { pretty: calc(max(sibling-count(), 2)); } + } +</style> <script> const page_rules = page_sheet.sheet.cssRules; @@ -140,4 +150,17 @@ assert_equals(counter_style_rules[1].symbols, "--pass"); }, "sibling-count() should not be allowed in @counter-style descriptors"); + + const font_features_rules = font_features_sheet.sheet.cssRules; + + test(() => { + const swash = font_features_rules[0].swash; + assert_equals(swash.get("pretty")[0], 1); + }, "sibling-index() should not be allowed in @font-feature-values descriptors"); + + test(() => { + const swash = font_features_rules[1].swash; + assert_equals(swash.get("pretty")[0], 1); + }, "sibling-count() should not be allowed in @font-feature-values descriptors"); + </script> diff --git a/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-font-variation-settings-dynamic.html b/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-font-variation-settings-dynamic.html new file mode 100644 index 00000000000..d98a72a2fb2 --- /dev/null +++ b/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-font-variation-settings-dynamic.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Values and Units Test: sibling-index() changing font-variation-settings during @keyframes animation</title> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes --anim { + from { + font-variation-settings: "wght" sibling-index(); + } + to { + font-variation-settings: "wght" 10; + } + } + #target { + animation: --anim 1000s step-end; + } +</style> +<div> + <div id="rm"></div> + <div></div> + <div id="target"></div> +</div> +<script> + test(() => { + assert_equals(getComputedStyle(target).fontVariationSettings, '"wght" 3'); + }, "Initially, the sibling-index() is 3 for #target"); + + test(() => { + rm.remove(); + assert_equals(getComputedStyle(target).fontVariationSettings, '"wght" 2'); + }, "Removing a preceding sibling of #target reduces the sibling-index()"); + +</script> diff --git a/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-font-weight-dynamic.html b/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-font-weight-dynamic.html new file mode 100644 index 00000000000..99fe0b3b2e1 --- /dev/null +++ b/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-font-weight-dynamic.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Values and Units Test: sibling-index() changing font-weight during @keyframes animation</title> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes --anim { + from { + font-weight: calc(100 * sibling-index()); + } + to { + font-weight: 600; + } + } + #target { + animation: --anim 1000s step-end; + } +</style> +<div> + <div id="rm"></div> + <div></div> + <div id="target"></div> +</div> +<script> + test(() => { + assert_equals(getComputedStyle(target).fontWeight, "300"); + }, "Initially, the sibling-index() is 3 for #target"); + + test(() => { + rm.remove(); + assert_equals(getComputedStyle(target).fontWeight, "200"); + }, "Removing a preceding sibling of #target reduces the sibling-index()"); + +</script> diff --git a/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-percent-dynamic.html b/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-percent-dynamic.html new file mode 100644 index 00000000000..58d1e7990d3 --- /dev/null +++ b/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-percent-dynamic.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Values and Units Test: sibling-index() changing percentage during @keyframes animation</title> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes --anim { + from { + text-size-adjust: calc(50% * sibling-index()); + } + to { + text-size-adjust: 90%; + } + } + #target { + animation: --anim 1000s step-end; + } +</style> +<div> + <div id="rm"></div> + <div></div> + <div id="target"></div> +</div> +<script> + test(() => { + assert_equals(getComputedStyle(target).textSizeAdjust, "150%"); + }, "Initially, the sibling-index() is 3 for #target"); + + test(() => { + rm.remove(); + assert_equals(getComputedStyle(target).textSizeAdjust, "100%"); + }, "Removing a preceding sibling of #target reduces the sibling-index()"); + +</script> diff --git a/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-registered-properties-dynamic.html b/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-registered-properties-dynamic.html new file mode 100644 index 00000000000..77af5434a1c --- /dev/null +++ b/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-registered-properties-dynamic.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<title>CSS Values and Units Test: sibling-index() changing registered custom property values during @keyframes animation</title> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @property --time { syntax: "<time>"; initial-value: 0s; inherits: false; } + @property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; } + @property --resolution { syntax: "<resolution>"; initial-value: 1dppx; inherits: false; } + @property --percentage { syntax: "<percentage>"; initial-value: 0%; inherits: false; } + @property --number { syntax: "<number>"; initial-value: 0; inherits: false; } + @property --integer { syntax: "<integer>"; initial-value: 0; inherits: false; } + @property --length { syntax: "<length>"; initial-value: 0px; inherits: false; } + @property --length-percentage { syntax: "<length-percentage>"; initial-value: 0px; inherits: false; } + @property --color { syntax: "<color>"; initial-value: black; inherits: false; } + + @keyframes --anim { + from { + --time: calc(2s * sibling-index()); + --angle: calc(30deg * sibling-index()); + --resolution: calc(1dppx * sibling-index()); + --percentage: calc(50% * sibling-index()); + --number: sibling-index(); + --integer: sibling-index(); + --length: calc(sibling-index() * 7px); + --length-percentage: calc((sibling-index() * 8px) + (sibling-count() * 5%)); + --color: color(srgb 0 calc(0.2 * sibling-index()) 0); + } + to { + --time: 13s; + --angle: 13deg; + --resolution: 1dppx; + --percentage: 13%; + --number: 13; + --integer: 13; + --length: 13px; + --length-percentage: calc(13px + 7%); + --color: red; + } + } + #target { + animation: --anim 1000s step-end; + } +</style> +<div> + <div id="rm"></div> + <div></div> + <div id="target"></div> +</div> +<script> + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--time"), "6s"); + }, "Initially, the sibling-index() is 3 for --time"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--angle"), "90deg"); + }, "Initially, the sibling-index() is 3 for --angle"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--resolution"), "3dppx"); + }, "Initially, the sibling-index() is 3 for --resolution"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--percentage"), "150%"); + }, "Initially, the sibling-index() is 3 for --percentage"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--number"), "3"); + }, "Initially, the sibling-index() is 3 for --number"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--integer"), "3"); + }, "Initially, the sibling-index() is 3 for --integer"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--length"), "21px"); + }, "Initially, the sibling-index() is 3 for --length"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--length-percentage"), "calc(15% + 24px)"); + }, "Initially, the sibling-index() is 3 for --length-percentage"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--color"), "color(srgb 0 0.6 0)"); + }, "Initially, the sibling-index() is 3 for --color"); + + rm.remove(); + + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--time"), "4s"); + }, "Removing a preceding sibling of #target reduces the sibling-index() for --time"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--angle"), "60deg"); + }, "Removing a preceding sibling of #target reduces the sibling-index() for --angle"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--resolution"), "2dppx"); + }, "Removing a preceding sibling of #target reduces the sibling-index() for --resolution"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--percentage"), "100%"); + }, "Removing a preceding sibling of #target reduces the sibling-index() for --percentage"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--number"), "2"); + }, "Removing a preceding sibling of #target reduces the sibling-index() for --number"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--integer"), "2"); + }, "Removing a preceding sibling of #target reduces the sibling-index() for --integer"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--length"), "14px"); + }, "Removing a preceding sibling of #target reduces the sibling-index() for --length"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--length-percentage"), "calc(10% + 16px)"); + }, "Removing a preceding sibling of #target reduces the sibling-index() for --length-percentage"); + test(() => { + assert_equals(getComputedStyle(target).getPropertyValue("--color"), "color(srgb 0 0.4 0)"); + }, "Removing a preceding sibling of #target reduces the sibling-index() for --color"); + +</script> diff --git a/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-rotate-dynamic.html b/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-rotate-dynamic.html new file mode 100644 index 00000000000..67df9c01d19 --- /dev/null +++ b/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-rotate-dynamic.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Values and Units Test: sibling-index() changing rotate during @keyframes animation</title> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes --anim { + from { + rotate: x calc(10deg * sibling-index()); + } + to { + rotate: x 90deg; + } + } + #target { + animation: --anim 1000s step-end; + } +</style> +<div> + <div id="rm"></div> + <div></div> + <div id="target"></div> +</div> +<script> + test(() => { + assert_equals(getComputedStyle(target).rotate, "x 30deg"); + }, "Initially, the sibling-index() is 3 for #target"); + + test(() => { + rm.remove(); + assert_equals(getComputedStyle(target).rotate, "x 20deg"); + }, "Removing a preceding sibling of #target reduces the sibling-index()"); + +</script> diff --git a/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-scale-dynamic.html b/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-scale-dynamic.html new file mode 100644 index 00000000000..8b3fe6f7532 --- /dev/null +++ b/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-scale-dynamic.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Values and Units Test: sibling-index() changing scale during @keyframes animation</title> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes --anim { + from { + scale: 0.7 calc(0.2 * sibling-index()); + } + to { + scale: 0.3 2; + } + } + #target { + animation: --anim 1000s step-end; + } +</style> +<div> + <div id="rm"></div> + <div></div> + <div id="target"></div> +</div> +<script> + test(() => { + assert_equals(getComputedStyle(target).scale, "0.7 0.6"); + }, "Initially, the sibling-index() is 3 for #target"); + + test(() => { + rm.remove(); + assert_equals(getComputedStyle(target).scale, "0.7 0.4"); + }, "Removing a preceding sibling of #target reduces the sibling-index()"); + +</script> |