diff options
Diffstat (limited to 'tests/wpt/tests/css/css-values')
8 files changed, 222 insertions, 11 deletions
diff --git a/tests/wpt/tests/css/css-values/attr-security.html b/tests/wpt/tests/css/css-values/attr-security.html index ee9b030d56f..25f0a78a328 100644 --- a/tests/wpt/tests/css/css-values/attr-security.html +++ b/tests/wpt/tests/css/css-values/attr-security.html @@ -40,9 +40,8 @@ test(() => { assert_equals(window.getComputedStyle(elem).getPropertyValue(property), - expectedValue, - "'" + property + ": " + attrString + "' with data-foo='" + attrValue + "'"); - }); + expectedValue); + }, `'${property}: ${attrString}' with data-foo="${attrValue}"`); elem.style.setProperty(property, null); } @@ -61,9 +60,8 @@ elem.style.setProperty(customPropertyName, attrString); test(() => { assert_equals(window.getComputedStyle(elem).getPropertyValue(customPropertyName), - expectedValue, - "'" + customPropertyName + ": " + attrString + "' with data-foo='" + attrValue + "'"); - }); + expectedValue); + }, `'${customPropertyName}: ${attrString}' with data-foo="${attrValue}"`); elem.style.setProperty(customPropertyName, null); } diff --git a/tests/wpt/tests/css/css-values/cap-invalidation.html b/tests/wpt/tests/css/css-values/cap-invalidation.html index 0becd0d093d..c3d7f798e11 100644 --- a/tests/wpt/tests/css/css-values/cap-invalidation.html +++ b/tests/wpt/tests/css/css-values/cap-invalidation.html @@ -21,9 +21,11 @@ <script> setup({ single_test: true }); - let old_width = div.getBoundingClientRect().width; - document.documentElement.style.fontFamily = "sans-serif"; - let new_width = div.getBoundingClientRect().width; - assert_not_equals(old_width, new_width, "expect the capital height of Ahem and sans-serif to be different"); - done(); + document.fonts.ready.then(() => { + let old_width = div.getBoundingClientRect().width; + document.documentElement.style.fontFamily = "sans-serif"; + let new_width = div.getBoundingClientRect().width; + assert_not_equals(old_width, new_width, "expect the capital height of Ahem and sans-serif to be different"); + done(); + }); </script> diff --git a/tests/wpt/tests/css/css-values/ch-unit-019.html b/tests/wpt/tests/css/css-values/ch-unit-019.html new file mode 100644 index 00000000000..1b97165d72d --- /dev/null +++ b/tests/wpt/tests/css/css-values/ch-unit-019.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Values and Units Test: support for the ch unit</title> +<link rel="author" title="Jason Leo" href="mailto:cgqaq@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-values-4/#ch"> +<link rel="match" href="reference/ch-unit-019-ref.html"> +<meta name="assert" content="The ch unit should fallback to 0.5em or 1em respectively when it's impossible to derive the width of the “0” (ZERO, U+0030) glyph in the font used to render it"> +<style> +@font-face { + font-family: "icon-font"; + src: url("data:font/woff2;base64,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") format("woff2"); +} + +div { + height: 10px; + background-color: blue; + margin-top: 10px; +} + +div::before { + content: "\e00b"; + display: none; +} + +.test { + /* 50px + 10 * (0.5em)*/ + /* 50px + 10 * (0.5 * 10px) = 100px*/ + width: calc(50px + 10ch); +} + +.test-upright { + writing-mode: vertical-rl; + text-orientation: upright; + /* 50px + 5 * (1em)*/ + /* 50px + 5 * (1 * 10px) = 100px*/ + width: calc(50px + 5ch); +} + +.ref { + width: 100px; +} +</style> +<p>The test passes if there are two blue rectangles of equal length.</p> +<!-- In the cases where it is impossible or impractical to determine + the measure of the “0” glyph, it must be assumed to be 0.5em + wide by 1em tall. Thus, the ch unit falls back to 0.5em in the general case--> +<div class="test" style="font: 10px icon-font"></div> +<!-- and to 1em when it would be typeset upright (i.e. writing-mode + is vertical-rl or vertical-lr and text-orientation is upright).--> +<div class="test-upright" style="font: 10px icon-font"></div> +<div class="ref"></div> diff --git a/tests/wpt/tests/css/css-values/ident-function-computed.html b/tests/wpt/tests/css/css-values/ident-function-computed.html new file mode 100644 index 00000000000..0a4068702e4 --- /dev/null +++ b/tests/wpt/tests/css/css-values/ident-function-computed.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>CSS Values: The ident() Function (computed values)</title> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#ident"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="target"></div> +<script> + // Any property that accepts <custom-ident> will do. + let prop = 'view-transition-name'; + + test_computed_value(prop, 'ident(myident)', 'myident'); + test_computed_value(prop, 'ident("myident")', 'myident'); + test_computed_value(prop, 'ident("myident" 3)', 'myident3'); + test_computed_value(prop, 'ident(3 "myident")', '\\33 myident'); + test_computed_value(prop, 'ident("my" "ident")', 'myident'); + test_computed_value(prop, 'ident(my "ident")', 'myident'); + test_computed_value(prop, 'ident("my" ident)', 'myident'); + test_computed_value(prop, 'ident(my ident)', 'myident'); + test_computed_value(prop, 'ident(-- myident)', '--myident'); + test_computed_value(prop, 'ident(my 3 3 3 3 ident)', 'my3333ident'); + + // Check for support in specific properties (WIP): + let actual_ident = 'ident("myident" 42)'; + let expected_ident = 'myident42'; + + // https://drafts.csswg.org/css-view-transitions/#view-transition-name-prop + test_computed_value('view-transition-name', actual_ident, expected_ident); +</script> diff --git a/tests/wpt/tests/css/css-values/ident-function-parsing.html b/tests/wpt/tests/css/css-values/ident-function-parsing.html new file mode 100644 index 00000000000..615051c78d5 --- /dev/null +++ b/tests/wpt/tests/css/css-values/ident-function-parsing.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Values: The ident() Function (parsing)</title> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#ident"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> + // Any property that accepts <custom-ident> will do. + let prop = 'view-transition-name'; + + test_invalid_value(prop, 'ident()'); + test_invalid_value(prop, 'ident( )'); + test_invalid_value(prop, 'ident(rgb(1, 2, 3))'); + test_invalid_value(prop, 'ident(5px)'); + + test_valid_value(prop, 'ident(myident)'); + test_valid_value(prop, 'ident( myident)', 'ident(myident)'); + test_valid_value(prop, 'ident(myident )', 'ident(myident)'); + test_valid_value(prop, 'ident("myident")'); + test_valid_value(prop, 'ident("myident" 3)'); + test_valid_value(prop, 'ident(3 "myident")'); + test_valid_value(prop, 'ident("my" "ident")'); + test_valid_value(prop, 'ident(my "ident")'); + test_valid_value(prop, 'ident("my" ident)'); + test_valid_value(prop, 'ident(my ident)'); + test_valid_value(prop, 'ident(-- myident)'); + test_valid_value(prop, 'ident(my 3 3 3 3 ident)') + + // Check for support in specific properties (WIP): + let ident = 'ident("myident" 42)'; + + // https://drafts.csswg.org/css-view-transitions/#view-transition-name-prop + test_valid_value('view-transition-name', ident); +</script> diff --git a/tests/wpt/tests/css/css-values/reference/ch-unit-019-ref.html b/tests/wpt/tests/css/css-values/reference/ch-unit-019-ref.html new file mode 100644 index 00000000000..f73a3c6e1d8 --- /dev/null +++ b/tests/wpt/tests/css/css-values/reference/ch-unit-019-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Values and Units Test Reference File</title> +<link rel="author" title="Jason Leo" href="mailto:cgqaq@chromium.org"> +<style> +div { + height: 10px; + background-color: blue; + margin-top: 10px; + width: 100px; +} +</style> +<p>The test passes if there are two blue rectangles of equal length.</p> +<div></div> +<div></div> +<div></div> diff --git a/tests/wpt/tests/css/css-values/sign-in-keyframes-with-relative-units.html b/tests/wpt/tests/css/css-values/sign-in-keyframes-with-relative-units.html new file mode 100644 index 00000000000..5431c7c6241 --- /dev/null +++ b/tests/wpt/tests/css/css-values/sign-in-keyframes-with-relative-units.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>CSS Values Test: sign() in keyframes with relative units and font-size change</title> +<link rel="help" href="https://drafts.csswg.org/css-values/#sign-funcs"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes --a { + from { + scale: calc(1.5 + sign(1em - 10px)); + rotate: calc(1.5deg + sign(1em - 10px) * 1deg); + text-size-adjust: calc(1.5% + sign(1em - 10px) * 1%); + font-weight: calc((1.5 + sign(1em - 10px)) * 100); + } + to { + scale: 1; + rotate: 1deg; + text-size-adjust: 1%; + font-weight: 100; + } + } + #target { + animation-name: --a; + animation-duration: 1000s; + animation-timing-function: steps(2, start); + width: 100px; + height: 100px; + background: teal; + font-size: 8px; + } +</style> +<div id="target"></div> +<script> + test(() => { + assert_equals(getComputedStyle(target).scale, "0.75"); + assert_equals(getComputedStyle(target).rotate, "0.75deg"); + assert_equals(getComputedStyle(target).textSizeAdjust, "0.75%"); + assert_equals(getComputedStyle(target).fontWeight, "75"); + }, "Initially, the font-size is 8px for #target, so the result is 0.75"); + + test(() => { + target.style.fontSize = "16px"; + assert_equals(getComputedStyle(target).scale, "1.75"); + assert_equals(getComputedStyle(target).rotate, "1.75deg"); + assert_equals(getComputedStyle(target).textSizeAdjust, "1.75%"); + assert_equals(getComputedStyle(target).fontWeight, "175"); + }, "Changing the font-size of #target changes the start point, so the result should be 1.75"); +</script> diff --git a/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-transform-dynamic.html b/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-transform-dynamic.html new file mode 100644 index 00000000000..4dce7f6a82e --- /dev/null +++ b/tests/wpt/tests/css/css-values/tree-counting/sibling-index-keyframe-transform-dynamic.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Values and Units Test: sibling-index() changing transform 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 { + transform: translateX(calc(10px * sibling-index())); + } + to { + transform: none; + } + } + #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).transform, "matrix(1, 0, 0, 1, 30, 0)"); + }, "Initially, the sibling-index() is 3 for #target"); + + test(() => { + rm.remove(); + assert_equals(getComputedStyle(target).transform, "matrix(1, 0, 0, 1, 20, 0)"); + }, "Removing a preceding sibling of #target reduces the sibling-index()"); + +</script> |