diff options
Diffstat (limited to 'tests/wpt/web-platform-tests/css')
57 files changed, 998 insertions, 101 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-contain/container-queries/style-query-with-unknown-width.html b/tests/wpt/web-platform-tests/css/css-contain/container-queries/style-query-with-unknown-width.html new file mode 100644 index 00000000000..8b05d6c1120 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-contain/container-queries/style-query-with-unknown-width.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS Container Queries Test: style and size query against container without a principal box</title> +<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/cq-testcommon.js"></script> +<style> + #container { + container-type: inline-size; + display: contents; + --foo: bar; + } + @container (width >= 0px) or style(--foo: bar) { + #target { color: green; } + } +</style> +<div id="container"> + <div id="target">Should be green</div> +</div> +<script> + setup(() => assert_implements_container_queries()); + + test(() => { + assert_equals(getComputedStyle(target).color, "rgb(0, 128, 0)"); + }, "width query should evaluate to unknown and style query to true"); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-fonts/parsing/font-variant-invalid.html b/tests/wpt/web-platform-tests/css/css-fonts/parsing/font-variant-invalid.html index c591acc3fcd..93c7d6bb56e 100644 --- a/tests/wpt/web-platform-tests/css/css-fonts/parsing/font-variant-invalid.html +++ b/tests/wpt/web-platform-tests/css/css-fonts/parsing/font-variant-invalid.html @@ -12,6 +12,11 @@ <body> <script> test_invalid_value('font-variant', 'normal none'); +test_invalid_value('font-variant', 'none normal'); +test_invalid_value('font-variant', 'small-caps normal'); +test_invalid_value('font-variant', 'normal small-caps'); +test_invalid_value('font-variant', 'small-caps none'); +test_invalid_value('font-variant', 'none small-caps'); // <common-lig-values> test_invalid_value('font-variant', 'common-ligatures no-common-ligatures'); diff --git a/tests/wpt/web-platform-tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize-ref.html b/tests/wpt/web-platform-tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize-ref.html new file mode 100644 index 00000000000..71968864924 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + +<head> +<meta charset="utf-8"> +<link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<meta name="assert" content="When the height of an element in the grid changes, ensure the grid is properly resized"> +</head> + +<style> + grid { + display: grid; + grid-template-rows: masonry; + grid-template-columns: auto; + grid-gap: 10px; + border: 10px; + border-style: solid; + } + item1 { + background-color: grey; + height: 125px; + width: 250px; + } + item2 { + background-color: grey; + height: 250px; + width: 250px; + } +</style> +</head> +<body> + <grid> + <item1>1</item1> + <item2>2</item2> + </grid> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize.html b/tests/wpt/web-platform-tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize.html new file mode 100644 index 00000000000..06c2901f27b --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + +<head> +<meta charset="utf-8"> +<link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="masonry-track-sizing-check-grid-height-on-resize-ref.html"> +<meta name="assert" content="When the height of an element in the grid changes, ensure the grid is properly resized"> +</head> + +<style> + grid { + display: grid; + grid-template-rows: masonry; + grid-template-columns: auto; + grid-gap: 10px; + border: 10px; + border-style: solid; + } + item { + background-color: grey; + height: 250px; + width: 250px; + } +</style> +</head> +<body> + <grid> + <item>1</item> + <item>2</item> + </grid> +</body> +<script> + /* Force a relayout */ + document.body.offsetHeight; + document.querySelector("item").style["height"] = "125px"; +</script> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-highlight-api/painting/css-highlight-painting-underline-offset-001.html b/tests/wpt/web-platform-tests/css/css-highlight-api/painting/css-highlight-painting-underline-offset-001.html index 14b238ce170..534438089ca 100644 --- a/tests/wpt/web-platform-tests/css/css-highlight-api/painting/css-highlight-painting-underline-offset-001.html +++ b/tests/wpt/web-platform-tests/css/css-highlight-api/painting/css-highlight-painting-underline-offset-001.html @@ -5,6 +5,7 @@ <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> <link rel="match" href="css-highlight-painting-underline-offset-001-ref.html"> <meta name="assert" content="Verify that text-underline-offset works in a ::highlight pseudo-element."> +<meta name="fuzzy" content="0-56;0-10"> <style> ::highlight(example) { text-decoration: wavy underline green 5px; diff --git a/tests/wpt/web-platform-tests/css/css-highlight-api/painting/css-target-text-decoration-001-ref.html b/tests/wpt/web-platform-tests/css/css-highlight-api/painting/css-target-text-decoration-001-ref.html new file mode 100644 index 00000000000..5e9ef645798 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-highlight-api/painting/css-target-text-decoration-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Highlight API Test: ::target-text text-decoration - reference</title> +<style> + #target-text { + text-decoration: wavy underline overline green 5px; + text-underline-offset: 20px; + } + div { + border: solid 1px black; + padding: 50px; + } +</style> +<div id="upper">The word <span id="target-text">remain</span> has under/over lines.</div> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-highlight-api/painting/css-target-text-decoration-001.html b/tests/wpt/web-platform-tests/css/css-highlight-api/painting/css-target-text-decoration-001.html new file mode 100644 index 00000000000..fa76c0bc4e7 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-highlight-api/painting/css-target-text-decoration-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Highlight API Test: ::target-text text-decoration</title> +<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> +<link rel="match" href="css-target-text-decoration-001-ref.html"> +<meta name="assert" content="This test checks that text-decorations of target text are fully rendered."> +<meta name="fuzzy" content="0-60;0-32"> +<script src="/common/reftest-wait.js"></script> +<style> + ::target-text { + text-decoration: wavy underline overline green 5px; + text-underline-offset: 20px; + background-color: transparent; + } + div { + border: solid 1px black; + padding: 50px; + } +</style> +<div id="upper">The word remain has under/over lines.</div> +<script> + window.location.href = `css-target-text-decoration-001.html#:~:text=remain`; + requestAnimationFrame(() => takeScreenshot()); +</script> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-highlight-api/painting/invalidation/css-highlight-invalidation-001-ref.html b/tests/wpt/web-platform-tests/css/css-highlight-api/painting/invalidation/css-highlight-invalidation-001-ref.html new file mode 100644 index 00000000000..a5ec6a59ae0 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-highlight-api/painting/invalidation/css-highlight-invalidation-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Highlight API Test: ::highlight dynamic remove text decoration - reference</title> +<style> + #upper { + text-decoration: wavy underline overline green 5px; + text-underline-offset: 20px; + } + div { + border: solid 1px black; + padding: 50px; + } +</style> +<div id="upper">This line starts with under/over lines that remain.</div> +<div id="lower">This line starts with under/over lines that are removed.</div> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-highlight-api/painting/invalidation/css-highlight-invalidation-001.html b/tests/wpt/web-platform-tests/css/css-highlight-api/painting/invalidation/css-highlight-invalidation-001.html new file mode 100644 index 00000000000..d885424765d --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-highlight-api/painting/invalidation/css-highlight-invalidation-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Highlight API Test: ::highlight dynamic change text-decoration</title> +<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> +<link rel="match" href="css-highlight-invalidation-001-ref.html"> +<meta name="assert" content="This test checks that it's possible to modify dynamically the text-decoration of a custom highlight through ::highlight pseudo-element."> +<meta name="fuzzy" content="0-56;0-10"> +<script src="/common/reftest-wait.js"></script> +<style> + ::highlight(example) { + text-decoration: wavy underline overline green 5px; + text-underline-offset: 20px; + } + div { + border: solid 1px black; + padding: 50px; + } +</style> +<div id="upper">This line starts with under/over lines that remain.</div> +<div id="lower">This line starts with under/over lines that are removed.</div> +<script> + let range_upper = new Range(); + range_upper.setStart(upper, 0); + range_upper.setEnd(upper, 1); + let range_lower = new Range(); + range_lower.setStart(lower, 0); + range_lower.setEnd(lower, 1); + CSS.highlights.set(`example`, new Highlight(range_lower)); + + requestAnimationFrame(() => requestAnimationFrame(() => { + CSS.highlights.set(`example`, new Highlight(range_upper)); + requestAnimationFrame(() => takeScreenshot()); + })); +</script> +</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-lists/parsing/list-style-computed.sub.html b/tests/wpt/web-platform-tests/css/css-lists/parsing/list-style-computed.sub.html index 611fae5bf93..f86915831e0 100644 --- a/tests/wpt/web-platform-tests/css/css-lists/parsing/list-style-computed.sub.html +++ b/tests/wpt/web-platform-tests/css/css-lists/parsing/list-style-computed.sub.html @@ -12,11 +12,11 @@ <body> <div id="target"></div> <script> -test_computed_value('list-style', 'none', 'outside none none'); +test_computed_value('list-style', 'outside none none', 'none'); -test_computed_value('list-style', 'inside', 'inside none disc'); -test_computed_value('list-style', 'url("https://{{host}}/")', 'outside url("https://{{host}}/") disc'); -test_computed_value('list-style', 'square', 'outside none square'); +test_computed_value('list-style', 'inside none disc', 'inside'); +test_computed_value('list-style', 'outside url("https://{{host}}/") disc', 'url("https://{{host}}/")'); +test_computed_value('list-style', 'outside none square', 'square'); test_computed_value('list-style', 'inside url("https://{{host}}/") square'); </script> diff --git a/tests/wpt/web-platform-tests/css/css-masking/animations/clip-path-composition.html b/tests/wpt/web-platform-tests/css/css-masking/animations/clip-path-composition.html index 2275ae70a33..42c5988e045 100644 --- a/tests/wpt/web-platform-tests/css/css-masking/animations/clip-path-composition.html +++ b/tests/wpt/web-platform-tests/css/css-masking/animations/clip-path-composition.html @@ -92,8 +92,8 @@ test_composition({ addFrom: 'ellipse()', addTo: 'ellipse(closest-side farthest-side)', }, [ - {at: 0.25, expect: 'ellipse(at 50% 50%)'}, - {at: 0.75, expect: 'ellipse(closest-side farthest-side at 50% 50%)'}, + {at: 0.25, expect: 'ellipse()'}, + {at: 0.75, expect: 'ellipse(closest-side farthest-side)'}, ]); test_composition({ diff --git a/tests/wpt/web-platform-tests/css/css-masking/clip-path/interpolation.html b/tests/wpt/web-platform-tests/css/css-masking/clip-path/interpolation.html index da3981feed6..f580de9c769 100644 --- a/tests/wpt/web-platform-tests/css/css-masking/clip-path/interpolation.html +++ b/tests/wpt/web-platform-tests/css/css-masking/clip-path/interpolation.html @@ -28,7 +28,7 @@ test(function(t) { getComputedStyle(div).clipPath; div.style.clipPath = 'circle(26px)'; - assert_equals(getComputedStyle(div).clipPath, 'circle(0px at 50% 50%)', + assert_equals(getComputedStyle(div).clipPath, 'circle(0px)', 'The radius of circle is clamped to zero at 61%'); }, 'Test circle with negative easing on clip-path'); @@ -40,7 +40,7 @@ test(function(t) { getComputedStyle(div).clipPath; div.style.clipPath = 'ellipse(26px 26px)'; - assert_equals(getComputedStyle(div).clipPath, 'ellipse(0px 0px at 50% 50%)', + assert_equals(getComputedStyle(div).clipPath, 'ellipse(0px 0px)', 'The radius of ellipse is clamped to zero at 61%'); }, 'Test ellipse with negative easing on clip-path'); diff --git a/tests/wpt/web-platform-tests/css/css-masking/parsing/clip-path-valid.html b/tests/wpt/web-platform-tests/css/css-masking/parsing/clip-path-valid.html index 895cdfacac6..fd268b42916 100644 --- a/tests/wpt/web-platform-tests/css/css-masking/parsing/clip-path-valid.html +++ b/tests/wpt/web-platform-tests/css/css-masking/parsing/clip-path-valid.html @@ -25,15 +25,15 @@ test_valid_value("clip-path", "inset(0px round 0px 1px 2%)"); test_valid_value("clip-path", "inset(0px round 0px 1px 2% 3em)"); test_valid_value("clip-path", "inset(10px round 20% / 0px 1px 2% 3em)"); -test_valid_value("clip-path", "circle()", "circle(at 50% 50%)"); -test_valid_value("clip-path", "circle(1px)", "circle(1px at 50% 50%)"); -test_valid_value("clip-path", "circle(closest-side)", "circle(at 50% 50%)"); +test_valid_value("clip-path", "circle()"); +test_valid_value("clip-path", "circle(1px)", "circle(1px)"); +test_valid_value("clip-path", "circle(closest-side)", "circle()"); test_valid_value("clip-path", "circle(at 10% 20%)"); test_valid_value("clip-path", "circle(farthest-side at center top)", "circle(farthest-side at 50% 0%)"); test_valid_value("clip-path", "circle(4% at top right)", "circle(4% at 100% 0%)"); -test_valid_value("clip-path", "ellipse()", "ellipse(at 50% 50%)"); -test_valid_value("clip-path", "ellipse(1px closest-side)", "ellipse(1px closest-side at 50% 50%)"); +test_valid_value("clip-path", "ellipse()"); +test_valid_value("clip-path", "ellipse(1px closest-side)"); test_valid_value("clip-path", "ellipse(at 10% 20%)"); test_valid_value("clip-path", "ellipse(closest-side closest-side at 10% 20%)", "ellipse(at 10% 20%)"); test_valid_value("clip-path", "ellipse(farthest-side 4% at bottom left)", "ellipse(farthest-side 4% at 0% 100%)"); diff --git a/tests/wpt/web-platform-tests/css/css-position/overlay/overlay-user-agent-rules.html b/tests/wpt/web-platform-tests/css/css-position/overlay/overlay-user-agent-rules.html new file mode 100644 index 00000000000..427eb8f7e40 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-position/overlay/overlay-user-agent-rules.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/whatwg/html/pull/9093"> +<link rel=help href="https://drafts.csswg.org/css-position-4/#overlay"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<title>CSS Position Test: User agent style for overlay</title> + +<style> +div { + overlay: auto; +} +</style> + +<body> +<script> +test(() => { + const div = document.createElement('div'); + document.body.appendChild(div); + div.style.overlay = 'auto'; + assert_equals(getComputedStyle(div).overlay, 'none'); +}, 'HTML elements should have overlay:none !important from the user-agent.'); + +test(() => { + const svg = document.createElement('svg'); + document.body.appendChild(svg); + svg.style.overlay = 'auto'; + assert_equals(getComputedStyle(svg).overlay, 'none'); +}, 'SVG elements should have overlay:none !important from the user-agent.'); + +test(() => { + const nullNamespace = document.createElementNS(null, 'div'); + document.body.appendChild(nullNamespace); + assert_equals(getComputedStyle(nullNamespace).overlay, 'none'); +}, 'Null namespace elements should have overlay:none !important from the user-agent.'); + +test(() => { + const weirdNamespace = document.createElementNS('hello world', 'div'); + document.body.appendChild(weirdNamespace); + assert_equals(getComputedStyle(weirdNamespace).overlay, 'none'); +}, 'Arbitrary namespace elements should have overlay:none !important from the user-agent.'); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-pseudo/first-letter-digraph.html b/tests/wpt/web-platform-tests/css/css-pseudo/first-letter-digraph.html index b9bc10016d7..b539457cf0c 100644 --- a/tests/wpt/web-platform-tests/css/css-pseudo/first-letter-digraph.html +++ b/tests/wpt/web-platform-tests/css/css-pseudo/first-letter-digraph.html @@ -26,7 +26,6 @@ <p>IJsselmeer</p> <p>ijsselmeer</p> <p>“IJsselmeer”</p> - <p>Ijsselmeer</p> <!-- mixed case within the digraph is unlikely in practice --> </div> <div lang="en"> <p lang="nl-NL">IJsselmeer</p> <!-- lang tag with country code should also work --> @@ -37,7 +36,9 @@ <p>IJsselmeer</p> <p>ijsselmeer</p> <p>“IJsselmeer”</p> - <p>Ijsselmeer</p> + </div> + <div lang="nl"> + <p>Ijotalen</p> <!-- mixed case not treated as digraph --> </div> </body> </html> diff --git a/tests/wpt/web-platform-tests/css/css-pseudo/reference/first-letter-digraph-ref.html b/tests/wpt/web-platform-tests/css/css-pseudo/reference/first-letter-digraph-ref.html index 7dbefc9dbdb..4eef817d706 100644 --- a/tests/wpt/web-platform-tests/css/css-pseudo/reference/first-letter-digraph-ref.html +++ b/tests/wpt/web-platform-tests/css/css-pseudo/reference/first-letter-digraph-ref.html @@ -23,7 +23,6 @@ <p><span>IJ</span>sselmeer</p> <p><span>ij</span>sselmeer</p> <p><span>“IJ</span>sselmeer”</p> - <p><span>Ij</span>sselmeer</p> </div> <div lang="en"> <p lang="nl-NL"><span>IJ</span>sselmeer</p> @@ -34,7 +33,9 @@ <p><span>I</span>Jsselmeer</p> <p><span>i</span>jsselmeer</p> <p><span>“I</span>Jsselmeer”</p> - <p><span>I</span>jsselmeer</p> + </div> + <div lang="nl"> + <p><span>I</span>jotalen</p> <!-- mixed case not treated as digraph --> </div> </body> </html> diff --git a/tests/wpt/web-platform-tests/css/css-scroll-anchoring/adjustments-in-scroll-event-handler.tentative.html b/tests/wpt/web-platform-tests/css/css-scroll-anchoring/adjustments-in-scroll-event-handler.tentative.html new file mode 100644 index 00000000000..84fd79cbcb9 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-scroll-anchoring/adjustments-in-scroll-event-handler.tentative.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/"> +<style> + body { margin: 0 } + .content { + height: 200px; + background: lightblue; + } + .spacer { + height: 300vh; + } +</style> +<div class="content"></div> +<div class="content" style="background: green"></div> +<div class="spacer"></div> +<script> +const anchor = document.querySelectorAll(".content")[1]; + +const t = async_test("Scroll adjustments happen even if it's triggered from scroll event listeners"); +window.addEventListener("scroll", t.step_func(function() { + // Forcibly flush layout, this will flush the pending the node insertion. + let scrollPosition = window.scrollY; + + requestAnimationFrame(t.step_func(function() { + requestAnimationFrame(t.step_func(function() { + assert_equals(window.scrollY, 400); + t.done(); + })); + })); +}), { once: true }); + +window.onload = t.step_func(function() { + requestAnimationFrame(t.step_func(function() { + // Scroll to the anchor node in a requestAnimationFrame callback so that + // it queues a scroll event which will be fired in the next event loop. + anchor.scrollIntoView({ behavior: "instant" }); + + // Then in a setTimeout callback insert an element just right before the + // anchor node, it will run before firing the scroll event. + t.step_timeout(function() { + const content = document.createElement("div"); + content.classList.add("content"); + content.style.background = "red"; + anchor.before(content); + }, 0); + })); +}); + +</script> diff --git a/tests/wpt/web-platform-tests/css/css-scroll-anchoring/infinite-scroll-event.tentative.html b/tests/wpt/web-platform-tests/css/css-scroll-anchoring/infinite-scroll-event.tentative.html index 4bc222f4e72..e2a2998c52b 100644 --- a/tests/wpt/web-platform-tests/css/css-scroll-anchoring/infinite-scroll-event.tentative.html +++ b/tests/wpt/web-platform-tests/css/css-scroll-anchoring/infinite-scroll-event.tentative.html @@ -18,20 +18,23 @@ <div class="content"></div> <div class="content"></div> <script> -let first = true; -const t = async_test("Scroll adjustments don't happen if triggered from scroll event listeners"); +let count = 0; +const t = async_test("Scroll adjustments don't keep happening with 0-length adjustments triggered by a single scroll operation"); onscroll = t.step_func(function() { - assert_true(first, "Should only get one event"); - first = false; + ++count; hidden.style.display = "block"; hidden.offsetTop; hidden.style.display = "none"; + let currentCount = count; requestAnimationFrame(t.step_func(function() { requestAnimationFrame(t.step_func(function() { - t.done(); + if (currentCount == count) { + t.done(); + } })); })); }); + window.onload = t.step_func(function() { window.scrollTo(0, document.documentElement.scrollHeight); window.scrollBy(0, -200); diff --git a/tests/wpt/web-platform-tests/css/css-scrollbars/input-scrollbar-color-ref.html b/tests/wpt/web-platform-tests/css/css-scrollbars/input-scrollbar-color-ref.html new file mode 100644 index 00000000000..389cf34b716 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-scrollbars/input-scrollbar-color-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Reference</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev"> +<input> diff --git a/tests/wpt/web-platform-tests/css/css-scrollbars/input-scrollbar-color.html b/tests/wpt/web-platform-tests/css/css-scrollbars/input-scrollbar-color.html new file mode 100644 index 00000000000..fa03b1391e4 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-scrollbars/input-scrollbar-color.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Test: scrollbar-color shouldn't cause scrollbars in inputs</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev"> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color"> +<link rel="match" href="input-scrollbar-color-ref.html"> +<style> + :root { + scrollbar-color: red yellow; + } +</style> +<input> diff --git a/tests/wpt/web-platform-tests/css/css-scrollbars/scrollbar-width-009.html b/tests/wpt/web-platform-tests/css/css-scrollbars/scrollbar-width-009.html new file mode 100644 index 00000000000..494ffe34469 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-scrollbars/scrollbar-width-009.html @@ -0,0 +1,60 @@ +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width on the body is not propagated quirks mode</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + :root { + /* CSS scrollbar properties applied to the root element + will be propagated to the viewport. */ + scrollbar-width: thin; + overflow: visible; + } + + body { + /* overflow is propagated as well */ + overflow: scroll; + /* but CSS scrollbar properties applied to the body are not propagated */ + scrollbar-width: none; + } + + :root, + body { + margin: 0; + padding: 0; + } + + #content { + height: 10vh; + width: 100%; + background: lightsalmon; + } + + #expander { + /* force vertical scroll */ + height: 200vh; + width: 300px; + background: gray; + } +</style> + +<body> + + <div id="content"></div> + + <div id="expander"></div> + + <script> + test(function () { + let root = document.documentElement; + let body = document.body; + let content = document.getElementById('content'); + + assert_less_than(root.offsetWidth, window.innerWidth, "viewport has a scrollbar"); + assert_equals(body.offsetWidth, root.offsetWidth, "body matches root"); + assert_equals(content.offsetWidth, body.offsetWidth, "content matches body"); + }, "viewport displays a scrollbar"); + </script> +</body> diff --git a/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-outside-composition.html b/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-outside-composition.html index 0115148ec1a..c1c29f1aa94 100644 --- a/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-outside-composition.html +++ b/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-outside-composition.html @@ -92,8 +92,8 @@ test_composition({ addFrom: 'ellipse()', addTo: 'ellipse(closest-side farthest-side)', }, [ - {at: 0.25, expect: 'ellipse(at 50% 50%)'}, - {at: 0.75, expect: 'ellipse(closest-side farthest-side at 50% 50%)'}, + {at: 0.25, expect: 'ellipse()'}, + {at: 0.75, expect: 'ellipse(closest-side farthest-side)'}, ]); test_composition({ diff --git a/tests/wpt/web-platform-tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html b/tests/wpt/web-platform-tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html index 5e4842d234f..715593d47b1 100644 --- a/tests/wpt/web-platform-tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html +++ b/tests/wpt/web-platform-tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html @@ -25,14 +25,14 @@ checkEquals("ellipse(at right calc(10% + 5px))", "ellipse(at 100% calc(10% + 5px))"); // Only 2 or 4 value form allowed -checkEquals("circle()", "circle(at 50% 50%)"); -checkEquals("circle(0px)", "circle(0px at 50% 50%)"); -checkEquals("circle(closest-side)", "circle(at 50% 50%)"); +checkEquals("circle()", "circle()"); +checkEquals("circle(0px)", "circle(0px)"); +checkEquals("circle(closest-side)", "circle()"); checkEquals("circle(farthest-side)", - "circle(farthest-side at 50% 50%)"); -checkEquals("ellipse()", "ellipse(at 50% 50%)"); + "circle(farthest-side)"); +checkEquals("ellipse()", "ellipse()"); checkEquals("ellipse(closest-side farthest-side)", - "ellipse(closest-side farthest-side at 50% 50%)"); + "ellipse(closest-side farthest-side)"); checkEquals("circle(at top 0% right 5px)", "circle(at right 5px top 0%)"); diff --git a/tests/wpt/web-platform-tests/css/css-shapes/basic-shape-interpolation.html b/tests/wpt/web-platform-tests/css/css-shapes/basic-shape-interpolation.html index beea230697f..5617ea28634 100644 --- a/tests/wpt/web-platform-tests/css/css-shapes/basic-shape-interpolation.html +++ b/tests/wpt/web-platform-tests/css/css-shapes/basic-shape-interpolation.html @@ -29,7 +29,7 @@ test(function(t) { getComputedStyle(div).shapeOutside; div.style.shapeOutside = 'circle(26px)'; - assert_equals(getComputedStyle(div).shapeOutside, 'circle(0px at 50% 50%)', + assert_equals(getComputedStyle(div).shapeOutside, 'circle(0px)', 'The radius of circle is clamped to zero at 61%'); }, 'Test circle with negative easing on shape-outside'); @@ -42,7 +42,7 @@ test(function(t) { div.style.shapeOutside = 'ellipse(26px 26px)'; assert_equals(getComputedStyle(div).shapeOutside, - 'ellipse(0px 0px at 50% 50%)', + 'ellipse(0px 0px)', 'The radius of ellipse is clamped to zero at 61%'); }, 'Test ellipse with negative easing on shape-outside'); diff --git a/tests/wpt/web-platform-tests/css/css-shapes/parsing/shape-outside-valid.html b/tests/wpt/web-platform-tests/css/css-shapes/parsing/shape-outside-valid.html index c48974406b2..e5587c6b233 100644 --- a/tests/wpt/web-platform-tests/css/css-shapes/parsing/shape-outside-valid.html +++ b/tests/wpt/web-platform-tests/css/css-shapes/parsing/shape-outside-valid.html @@ -25,17 +25,17 @@ test_valid_value("shape-outside", "inset(0px round 0px 1px 2%)"); test_valid_value("shape-outside", "inset(0px round 0px 1px 2% 3em)"); test_valid_value("shape-outside", "inset(10px round 20% / 0px 1px 2% 3em)"); -test_valid_value("shape-outside", "circle()", "circle(at 50% 50%)"); -test_valid_value("shape-outside", "circle(1px)", "circle(1px at 50% 50%)"); -test_valid_value("shape-outside", "circle(closest-side)", "circle(at 50% 50%)"); +test_valid_value("shape-outside", "circle()"); +test_valid_value("shape-outside", "circle(1px)"); +test_valid_value("shape-outside", "circle(closest-side)", "circle()"); test_valid_value("shape-outside", "circle(at 10% 20%)"); test_valid_value("shape-outside", "circle(farthest-side at center top)", "circle(farthest-side at 50% 0%)"); test_valid_value("shape-outside", "circle(4% at top right)", "circle(4% at 100% 0%)"); -test_valid_value("shape-outside", "ellipse()", "ellipse(at 50% 50%)"); -test_valid_value("shape-outside", "ellipse(3% 2%)", "ellipse(3% 2% at 50% 50%)"); -test_valid_value("shape-outside", "ellipse(closest-side 1px)", "ellipse(closest-side 1px at 50% 50%)"); -test_valid_value("shape-outside", "ellipse(10% closest-side)", "ellipse(10% closest-side at 50% 50%)"); +test_valid_value("shape-outside", "ellipse()", "ellipse()"); +test_valid_value("shape-outside", "ellipse(3% 2%)"); +test_valid_value("shape-outside", "ellipse(closest-side 1px)"); +test_valid_value("shape-outside", "ellipse(10% closest-side)"); test_valid_value("shape-outside", "ellipse(closest-side closest-side at 60% 70%)", "ellipse(at 60% 70%)"); test_valid_value("shape-outside", "ellipse(at 10% 20%)"); test_valid_value("shape-outside", "ellipse(farthest-side 4% at bottom left)", "ellipse(farthest-side 4% at 0% 100%)"); diff --git a/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-circle-000.html b/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-circle-000.html index a13570c1ff2..e2c735b3bbf 100644 --- a/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-circle-000.html +++ b/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-circle-000.html @@ -21,14 +21,14 @@ { "name": "No arguments", "actual": "circle()", - "expected_inline": "circle(at 50% 50%)", - "expected_computed": "circle(at 50% 50%)" + "expected_inline": "circle()", + "expected_computed": "circle()" }, { "name": "Radial argument only", "actual": "circle(50px)", - "expected_inline": "circle(50px at 50% 50%)", - "expected_computed": "circle(50px at 50% 50%)" + "expected_inline": "circle(50px)", + "expected_computed": "circle(50px)" }, { "name": "Position argument only", diff --git a/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html b/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html index 2fe988d6268..15308ed9d12 100644 --- a/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html +++ b/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html @@ -20,44 +20,84 @@ <script type="text/javascript"> var valid_circle_radii_tests = [ { - "actual": "circle(+10px)", + "actual": "circle(+10px at 50% 50%)", "expected_inline": "circle(10px at 50% 50%)", "expected_computed": "circle(10px at 50% 50%)" }, { - "actual": "circle(+10.00px)", + "actual": "circle(+10.00px at 50% 50%)", "expected_inline": "circle(10px at 50% 50%)", "expected_computed": "circle(10px at 50% 50%)" }, { - "actual": "circle(+20.340px)", + "actual": "circle(+20.340px at 50% 50%)", "expected_inline": "circle(20.34px at 50% 50%)", "expected_computed": "circle(20.34px at 50% 50%)" }, { - "actual": "circle(+30.5px)", + "actual": "circle(+30.5px at 50% 50%)", "expected_inline": "circle(30.5px at 50% 50%)", "expected_computed": "circle(30.5px at 50% 50%)" }, { - "actual": "circle(+10%)", + "actual": "circle(+10% at 50% 50%)", "expected_inline": "circle(10% at 50% 50%)", "expected_computed": "circle(10% at 50% 50%)" }, { - "actual": "circle(+10.00%)", + "actual": "circle(+10.00% at 50% 50%)", "expected_inline": "circle(10% at 50% 50%)", "expected_computed": "circle(10% at 50% 50%)" }, { - "actual": "circle(+20.350%)", + "actual": "circle(+20.350% at 50% 50%)", "expected_inline": "circle(20.35% at 50% 50%)", "expected_computed": "circle(20.35% at 50% 50%)" }, { - "actual": "circle(+30.5%)", + "actual": "circle(+30.5% at 50% 50%)", "expected_inline": "circle(30.5% at 50% 50%)", "expected_computed": "circle(30.5% at 50% 50%)" + }, + { + "actual": "circle(+10px)", + "expected_inline": "circle(10px)", + "expected_computed": "circle(10px)" + }, + { + "actual": "circle(+10.00px)", + "expected_inline": "circle(10px)", + "expected_computed": "circle(10px)" + }, + { + "actual": "circle(+20.340px)", + "expected_inline": "circle(20.34px)", + "expected_computed": "circle(20.34px)" + }, + { + "actual": "circle(+30.5px)", + "expected_inline": "circle(30.5px)", + "expected_computed": "circle(30.5px)" + }, + { + "actual": "circle(+10%)", + "expected_inline": "circle(10%)", + "expected_computed": "circle(10%)" + }, + { + "actual": "circle(+10.00%)", + "expected_inline": "circle(10%)", + "expected_computed": "circle(10%)" + }, + { + "actual": "circle(+20.350%)", + "expected_inline": "circle(20.35%)", + "expected_computed": "circle(20.35%)" + }, + { + "actual": "circle(+30.5%)", + "expected_inline": "circle(30.5%)", + "expected_computed": "circle(30.5%)" } ]; invalid_circle_radii_tests = [ diff --git a/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-circle-010.html b/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-circle-010.html index 6d6c11a7071..609632e11ac 100644 --- a/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-circle-010.html +++ b/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-circle-010.html @@ -20,7 +20,7 @@ <script type="text/javascript"> var circle_calc_tests = []; ParsingUtils.calcTestValues.forEach(function(value) { - testCase = ['circle('+ value[0] +')', 'circle('+ value[1] + ' at 50% 50%)']; + testCase = ['circle('+ value[0] + ' at 50% 50%)', 'circle('+ value[1] + ' at 50% 50%)']; if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { testCase.push([ 'circle('+ value[2][0] + ' at 50% 50%)', 'circle('+ value[2][1] + ' at 50% 50%)']); } else { diff --git a/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-000.html b/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-000.html index 532f794448c..d74ed97a766 100644 --- a/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-000.html +++ b/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-000.html @@ -21,14 +21,14 @@ { "name": "No arguments", "actual": "ellipse()", - "expected_inline": "ellipse(at 50% 50%)", - "expected_computed": "ellipse(at 50% 50%)" + "expected_inline": "ellipse()", + "expected_computed": "ellipse()" }, { "name": "Radial arguments", "actual": "ellipse(50px 50px)", - "expected_inline": "ellipse(50px 50px at 50% 50%)", - "expected_computed": "ellipse(50px 50px at 50% 50%)" + "expected_inline": "ellipse(50px 50px)", + "expected_computed": "ellipse(50px 50px)" }, { "name": "Position argument", diff --git a/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html b/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html index 4bd75a445a6..69cd8aca78b 100644 --- a/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html +++ b/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html @@ -21,61 +21,121 @@ var valid_ellipse_radii_tests = [ { "actual": "ellipse(+10px +20px)", + "expected_inline": "ellipse(10px 20px)", + "expected_computed": "ellipse(10px 20px)" + }, + { + "actual": "ellipse(+30px 40px)", + "expected_inline": "ellipse(30px 40px)", + "expected_computed": "ellipse(30px 40px)" + }, + { + "actual": "ellipse(50px +60px)", + "expected_inline": "ellipse(50px 60px)", + "expected_computed": "ellipse(50px 60px)" + }, + { + "actual": "ellipse(+10.00px +20.230px)", + "expected_inline": "ellipse(10px 20.23px)", + "expected_computed": "ellipse(10px 20.23px)" + }, + { + "actual": "ellipse(+30.00px 40.567px)", + "expected_inline": "ellipse(30px 40.567px)", + "expected_computed": "ellipse(30px 40.567px)" + }, + { + "actual": "ellipse(50.10px +60.7px)", + "expected_inline": "ellipse(50.1px 60.7px)", + "expected_computed": "ellipse(50.1px 60.7px)" + }, + { + "actual": "ellipse(+10% +20%)", + "expected_inline": "ellipse(10% 20%)", + "expected_computed": "ellipse(10% 20%)" + }, + { + "actual": "ellipse(+30% 40%)", + "expected_inline": "ellipse(30% 40%)", + "expected_computed": "ellipse(30% 40%)" + }, + { + "actual": "ellipse(+50% +60%)", + "expected_inline": "ellipse(50% 60%)", + "expected_computed": "ellipse(50% 60%)" + }, + { + "actual": "ellipse(+10.00% +20.230%)", + "expected_inline": "ellipse(10% 20.23%)", + "expected_computed": "ellipse(10% 20.23%)" + }, + { + "actual": "ellipse(+30.00% 40.567%)", + "expected_inline": "ellipse(30% 40.567%)", + "expected_computed": "ellipse(30% 40.567%)" + }, + { + "actual": "ellipse(50.10% +60.7%)", + "expected_inline": "ellipse(50.1% 60.7%)", + "expected_computed": "ellipse(50.1% 60.7%)" + }, + { + "actual": "ellipse(+10px +20px at 50% 50%)", "expected_inline": "ellipse(10px 20px at 50% 50%)", "expected_computed": "ellipse(10px 20px at 50% 50%)" }, { - "actual": "ellipse(+30px 40px)", + "actual": "ellipse(+30px 40px at 50% 50%)", "expected_inline": "ellipse(30px 40px at 50% 50%)", "expected_computed": "ellipse(30px 40px at 50% 50%)" }, { - "actual": "ellipse(50px +60px)", + "actual": "ellipse(50px +60px at 50% 50%)", "expected_inline": "ellipse(50px 60px at 50% 50%)", "expected_computed": "ellipse(50px 60px at 50% 50%)" }, { - "actual": "ellipse(+10.00px +20.230px)", + "actual": "ellipse(+10.00px +20.230px at 50% 50%)", "expected_inline": "ellipse(10px 20.23px at 50% 50%)", "expected_computed": "ellipse(10px 20.23px at 50% 50%)" }, { - "actual": "ellipse(+30.00px 40.567px)", + "actual": "ellipse(+30.00px 40.567px at 50% 50%)", "expected_inline": "ellipse(30px 40.567px at 50% 50%)", "expected_computed": "ellipse(30px 40.567px at 50% 50%)" }, { - "actual": "ellipse(50.10px +60.7px)", + "actual": "ellipse(50.10px +60.7px at 50% 50%)", "expected_inline": "ellipse(50.1px 60.7px at 50% 50%)", "expected_computed": "ellipse(50.1px 60.7px at 50% 50%)" }, { - "actual": "ellipse(+10% +20%)", + "actual": "ellipse(+10% +20% at 50% 50%)", "expected_inline": "ellipse(10% 20% at 50% 50%)", "expected_computed": "ellipse(10% 20% at 50% 50%)" }, { - "actual": "ellipse(+30% 40%)", + "actual": "ellipse(+30% 40% at 50% 50%)", "expected_inline": "ellipse(30% 40% at 50% 50%)", "expected_computed": "ellipse(30% 40% at 50% 50%)" }, { - "actual": "ellipse(+50% +60%)", + "actual": "ellipse(+50% +60% at 50% 50%)", "expected_inline": "ellipse(50% 60% at 50% 50%)", "expected_computed": "ellipse(50% 60% at 50% 50%)" }, { - "actual": "ellipse(+10.00% +20.230%)", + "actual": "ellipse(+10.00% +20.230% at 50% 50%)", "expected_inline": "ellipse(10% 20.23% at 50% 50%)", "expected_computed": "ellipse(10% 20.23% at 50% 50%)" }, { - "actual": "ellipse(+30.00% 40.567%)", + "actual": "ellipse(+30.00% 40.567% at 50% 50%)", "expected_inline": "ellipse(30% 40.567% at 50% 50%)", "expected_computed": "ellipse(30% 40.567% at 50% 50%)" }, { - "actual": "ellipse(50.10% +60.7%)", + "actual": "ellipse(50.10% +60.7% at 50% 50%)", "expected_inline": "ellipse(50.1% 60.7% at 50% 50%)", "expected_computed": "ellipse(50.1% 60.7% at 50% 50%)" } diff --git a/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-010.html b/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-010.html index 07cd1e593b7..430d2621baf 100644 --- a/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-010.html +++ b/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-010.html @@ -21,7 +21,7 @@ var ellipse_calc_tests = []; var defaultPosition = ' at 50% 50%'; ParsingUtils.calcTestValues.forEach(function(value) { - testCase = ['ellipse(farthest-side '+ value[0] +')', + testCase = ['ellipse(farthest-side '+ value[0] + defaultPosition + ')', 'ellipse(farthest-side '+ value[1] + defaultPosition +')']; if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { testCase.push([ @@ -34,7 +34,7 @@ ellipse_calc_tests.push(testCase); }); ParsingUtils.calcTestValues.forEach(function(value) { - testCase = ['ellipse('+ value[0] +' '+ value[0] +')', + testCase = ['ellipse('+ value[0] +' '+ value[0] + defaultPosition + ')', 'ellipse('+ value[1] +' '+ value[1] + defaultPosition +')']; if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { testCase.push([ diff --git a/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/support/parsing-utils.js b/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/support/parsing-utils.js index b7c637746e0..354a64b53f5 100644 --- a/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/support/parsing-utils.js +++ b/tests/wpt/web-platform-tests/css/css-shapes/shape-outside/values/support/parsing-utils.js @@ -735,31 +735,54 @@ var invalidPositions = [ // valid radii values for circle + ellipse // [value, expected_inline, [expected_computed?]] var validCircleRadii = [ - ['', 'at 50% 50%', 'at 50% 50%'], - ['50u1', '50u1 at 50% 50%'], - ['50%', '50% at 50% 50%'], - ['closest-side', 'at 50% 50%'], - ['farthest-side', 'farthest-side at 50% 50%'] + ['at 50% 50%', 'at 50% 50%'], + ['50u1 at 50% 50%', '50u1 at 50% 50%'], + ['50% at 50% 50%', '50% at 50% 50%'], + ['closest-side at 50% 50%', 'at 50% 50%'], + ['farthest-side at 50% 50%', 'farthest-side at 50% 50%'], + ['', ''], + ['50u1', '50u1'], + ['50%', '50%'], + ['closest-side', ''], + ['farthest-side', 'farthest-side'] ] var validEllipseRadii = [ - ['', 'at 50% 50%', 'at 50% 50%'], - ['50u1 100u1', '50u1 100u1 at 50% 50%'], - ['100u1 100px', '100u1 100px at 50% 50%'], - ['25% 50%', '25% 50% at 50% 50%'], - ['50u1 25%', '50u1 25% at 50% 50%'], - ['25% 50u1', '25% 50u1 at 50% 50%'], - ['25% closest-side', '25% closest-side at 50% 50%'], - ['25u1 closest-side', '25u1 closest-side at 50% 50%'], - ['closest-side 75%', 'closest-side 75% at 50% 50%'], - ['closest-side 75u1', 'closest-side 75u1 at 50% 50%'], - ['25% farthest-side', '25% farthest-side at 50% 50%'], - ['25u1 farthest-side', '25u1 farthest-side at 50% 50%'], - ['farthest-side 75%', 'farthest-side 75% at 50% 50%'], - ['farthest-side 75u1', 'farthest-side 75u1 at 50% 50%'], - ['closest-side closest-side', 'at 50% 50%'], - ['farthest-side farthest-side', 'farthest-side farthest-side at 50% 50%'], - ['closest-side farthest-side', 'closest-side farthest-side at 50% 50%'], - ['farthest-side closest-side', 'farthest-side closest-side at 50% 50%'] + ['at 50% 50%', 'at 50% 50%', 'at 50% 50%'], + ['50u1 100u1 at 50% 50%', '50u1 100u1 at 50% 50%'], + ['100u1 100px at 50% 50%', '100u1 100px at 50% 50%'], + ['25% 50% at 50% 50%', '25% 50% at 50% 50%'], + ['50u1 25% at 50% 50%', '50u1 25% at 50% 50%'], + ['25% 50u1 at 50% 50%', '25% 50u1 at 50% 50%'], + ['25% closest-side at 50% 50%', '25% closest-side at 50% 50%'], + ['25u1 closest-side at 50% 50%', '25u1 closest-side at 50% 50%'], + ['closest-side 75% at 50% 50%', 'closest-side 75% at 50% 50%'], + ['closest-side 75u1 at 50% 50%', 'closest-side 75u1 at 50% 50%'], + ['25% farthest-side at 50% 50%', '25% farthest-side at 50% 50%'], + ['25u1 farthest-side at 50% 50%', '25u1 farthest-side at 50% 50%'], + ['farthest-side 75% at 50% 50%', 'farthest-side 75% at 50% 50%'], + ['farthest-side 75u1 at 50% 50%', 'farthest-side 75u1 at 50% 50%'], + ['closest-side closest-side at 50% 50%', 'at 50% 50%'], + ['farthest-side farthest-side at 50% 50%', 'farthest-side farthest-side at 50% 50%'], + ['closest-side farthest-side at 50% 50%', 'closest-side farthest-side at 50% 50%'], + ['farthest-side closest-side at 50% 50%', 'farthest-side closest-side at 50% 50%'], + ['', ''], + ['50u1 100u1', '50u1 100u1'], + ['100u1 100px', '100u1 100px'], + ['25% 50%', '25% 50%'], + ['50u1 25%', '50u1 25%'], + ['25% 50u1', '25% 50u1'], + ['25% closest-side', '25% closest-side'], + ['25u1 closest-side', '25u1 closest-side'], + ['closest-side 75%', 'closest-side 75%'], + ['closest-side 75u1', 'closest-side 75u1'], + ['25% farthest-side', '25% farthest-side'], + ['25u1 farthest-side', '25u1 farthest-side'], + ['farthest-side 75%', 'farthest-side 75%'], + ['farthest-side 75u1', 'farthest-side 75u1'], + ['closest-side closest-side', ''], + ['farthest-side farthest-side', 'farthest-side farthest-side'], + ['closest-side farthest-side', 'closest-side farthest-side'], + ['farthest-side closest-side', 'farthest-side closest-side'] ] var validInsets = [ diff --git a/tests/wpt/web-platform-tests/css/motion/animation/offset-path-interpolation-005.html b/tests/wpt/web-platform-tests/css/motion/animation/offset-path-interpolation-005.html index 9924106f4b7..13de65d8a73 100644 --- a/tests/wpt/web-platform-tests/css/motion/animation/offset-path-interpolation-005.html +++ b/tests/wpt/web-platform-tests/css/motion/animation/offset-path-interpolation-005.html @@ -110,6 +110,32 @@ {at: 2, expect: 'ray(-90deg farthest-corner)'}, ]); + test_interpolation({ + property: 'offset-path', + from: 'ray(-10deg farthest-corner at 0% 0px)', + to: 'ray(-50deg farthest-corner at 100% 100px)' + }, [ + {at: -1, expect: 'ray(30deg farthest-corner at -100% -100px)'}, + {at: 0, expect: 'ray(-10deg farthest-corner at 0% 0px)'}, + {at: 0.125, expect: 'ray(-15deg farthest-corner at 12.5% 12.5px)'}, + {at: 0.875, expect: 'ray(-45deg farthest-corner at 87.5% 87.5px)'}, + {at: 1, expect: 'ray(-50deg farthest-corner at 100% 100px)'}, + {at: 2, expect: 'ray(-90deg farthest-corner at 200% 200px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'ray(-10deg farthest-corner)', + to: 'ray(-50deg farthest-corner at 100% 100%)' + }, [ + {at: -1, expect: 'ray(30deg farthest-corner at 0% 0%)'}, + {at: 0, expect: 'ray(-10deg farthest-corner)'}, + {at: 0.125, expect: 'ray(-15deg farthest-corner at 56.25% 56.25%)'}, + {at: 0.875, expect: 'ray(-45deg farthest-corner at 93.75% 93.75%)'}, + {at: 1, expect: 'ray(-50deg farthest-corner at 100% 100%)'}, + {at: 2, expect: 'ray(-90deg farthest-corner at 150% 150%)'}, + ]); + // No interpolation between different sizes and/or different containment. test_no_interpolation({ property: 'offset-path', diff --git a/tests/wpt/web-platform-tests/css/motion/animation/offset-path-interpolation-006.html b/tests/wpt/web-platform-tests/css/motion/animation/offset-path-interpolation-006.html index a19908e4fff..5b95501909c 100644 --- a/tests/wpt/web-platform-tests/css/motion/animation/offset-path-interpolation-006.html +++ b/tests/wpt/web-platform-tests/css/motion/animation/offset-path-interpolation-006.html @@ -62,7 +62,7 @@ to: 'ellipse(40% 50% at 25% 25%)', }, [ {at: -0.3, expect: 'ellipse(1% 0% at 57.5% 57.5%)'}, - {at: 0, expect: 'ellipse(10% 10% at 50% 50%)'}, + {at: 0, expect: 'ellipse(10% 10%)'}, {at: 0.3, expect: 'ellipse(19% 22% at 42.5% 42.5%)'}, {at: 0.6, expect: 'ellipse(28% 34% at 35% 35%)'}, {at: 1, expect: 'ellipse(40% 50% at 25% 25%)'}, diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-001-ref.html b/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-001-ref.html index 679b43fe705..e9a7fbb808f 100644 --- a/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-001-ref.html +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-001-ref.html @@ -15,7 +15,10 @@ } #box { background-color: green; - transform: translate(483.441px, 19.1699px) rotate(37.2267deg); + position: relative; + top: 100px; + left: 100px; + transform: translate(378.441px, -85.8301px) rotate(37.2267deg); width: 100px; height: 100px; } diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-001.html b/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-001.html index 527459c6fdd..d8392607569 100644 --- a/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-001.html +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-001.html @@ -17,6 +17,8 @@ } #box { background-color: green; + top: 100px; + left: 100px; position: relative; offset-path: border-box; offset-distance: 15%; diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-002-ref.html b/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-002-ref.html index a722ec3bd3e..aad79d40d03 100644 --- a/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-002-ref.html +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-002-ref.html @@ -14,7 +14,10 @@ } #box { background-color: green; - transform: translate(250px, -50px); + position: relative; + top: 100px; + left: 100px; + transform: translate(145px, -155px); width: 100px; height: 100px; } diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-002.html b/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-002.html index 0abe4169400..0446e2caa16 100644 --- a/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-002.html +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-002.html @@ -17,6 +17,8 @@ #box { background-color: green; position: relative; + top: 100px; + left: 100px; offset-path: padding-box; offset-distance: 15%; width: 100px; diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-003-ref.html b/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-003-ref.html index f6e6203f4a0..bf896aafac2 100644 --- a/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-003-ref.html +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-003-ref.html @@ -15,7 +15,10 @@ } #box { background-color: green; - transform: translate(250px, -50px); + position: relative; + top: 100px; + left: 100px; + transform: translate(135px, -165px); width: 100px; height: 100px; } diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-003.html b/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-003.html index 6605d8e9a0d..d3ea7f92a8e 100644 --- a/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-003.html +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-coord-box-003.html @@ -17,6 +17,8 @@ } #box { background-color: green; + top: 100px; + left: 100px; position: relative; offset-path: content-box; offset-distance: 15%; diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-geometry-box-ref.html b/tests/wpt/web-platform-tests/css/motion/offset-path-geometry-box-ref.html index eb7646db662..60870c815e1 100644 --- a/tests/wpt/web-platform-tests/css/motion/offset-path-geometry-box-ref.html +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-geometry-box-ref.html @@ -11,7 +11,7 @@ height: 200px; background-color: lime; transform-origin: 0px 0px; - transform: translate(0px, 0px); + transform: translate(-300px, 0px); } </style> </head> diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-ray-011-ref.html b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-011-ref.html new file mode 100644 index 00000000000..9a477b26968 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-011-ref.html @@ -0,0 +1,27 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Motion Path test reference: ray() path with offset-position: normal</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> + +<style> + #outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; + } + #box { + background-color: green; + position: relative; + transform: translate(300px, 200px) translateX(10px) rotate(-90deg) translate(50px, -50px); + width: 100px; + height: 100px; + } +</style> + +<div id="outer"> + <div id="inner"> + <div id="box"></div> + </div> +</div> diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-ray-011.html b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-011.html new file mode 100644 index 00000000000..cf01e2b86ec --- /dev/null +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-011.html @@ -0,0 +1,29 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Motion Path test: ray() path with offset-position: normal</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> +<link rel="match" href="offset-path-ray-011-ref.html"> +<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function"> + +<style> + #outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; + } + #box { + background-color: green; + position: relative; + offset-path: ray(90deg); + offset-distance: 10px; + offset-position: normal; + width: 100px; + height: 100px; + } +</style> + +<div id="outer"> + <div id="box"></div> +</div> diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-ray-012-ref.html b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-012-ref.html new file mode 100644 index 00000000000..dfb34bf784f --- /dev/null +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-012-ref.html @@ -0,0 +1,27 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Motion Path test reference: ray() path with offset-position specified with position</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> + +<style> + #outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; + } + #box { + background-color: green; + position: relative; + transform: translate(-40px, 320px); + width: 100px; + height: 100px; + } +</style> + +<div id="outer"> + <div id="inner"> + <div id="box"></div> + </div> +</div> diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-ray-012.html b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-012.html new file mode 100644 index 00000000000..7c921cfac85 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-012.html @@ -0,0 +1,31 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Motion Path test: ray() path with offset-position specified with position</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> +<link rel="match" href="offset-path-ray-012-ref.html"> +<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function"> + +<style> + #outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; + } + #box { + background-color: green; + position: relative; + top: 100px; + left: 100px; + offset-path: ray(180deg closest-side); + offset-distance: 100%; + offset-position: 10px 90%; + width: 100px; + height: 100px; + } +</style> + +<div id="outer"> + <div id="box"></div> +</div> diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-ray-013-ref.html b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-013-ref.html new file mode 100644 index 00000000000..d6bf4c037ba --- /dev/null +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-013-ref.html @@ -0,0 +1,29 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Motion Path test reference: ray() path with position and offset-position</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> + +<style> + #outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; + } + #box { + background-color: green; + position: relative; + top: 100px; + left: 100px; + transform: translate(-50px, -130px); + width: 100px; + height: 100px; + } +</style> + +<div id="outer"> + <div id="inner"> + <div id="box"></div> + </div> +</div> diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-ray-013.html b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-013.html new file mode 100644 index 00000000000..196ff4efd6f --- /dev/null +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-013.html @@ -0,0 +1,31 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Motion Path test: ray() path with position and offset-position</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> +<link rel="match" href="offset-path-ray-013-ref.html"> +<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function"> + +<style> + #outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; + } + #box { + background-color: green; + position: relative; + top: 100px; + left: 100px; + offset-path: ray(0deg closest-side at 100px 30%); + offset-distance: 100%; + offset-position: 10px 90%; + width: 100px; + height: 100px; + } +</style> + +<div id="outer"> + <div id="box"></div> +</div> diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-ray-014-ref.html b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-014-ref.html new file mode 100644 index 00000000000..cd0fab44c36 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-014-ref.html @@ -0,0 +1,29 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Motion Path test reference: ray() path with default position</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> + +<style> + #outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; + } + #box { + background-color: green; + position: relative; + top: 100px; + left: 100px; + transform: translate(150px, -150px); + width: 100px; + height: 100px; + } +</style> + +<div id="outer"> + <div id="inner"> + <div id="box"></div> + </div> +</div> diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-ray-014.html b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-014.html new file mode 100644 index 00000000000..42e431de354 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-ray-014.html @@ -0,0 +1,31 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Motion Path test: ray() path with default position</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> +<link rel="match" href="offset-path-ray-014-ref.html"> +<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function"> + +<style> + #outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; + } + #box { + background-color: green; + position: relative; + top: 100px; + left: 100px; + offset-path: ray(0deg closest-side); + offset-distance: 100%; + offset-position: normal; + width: 100px; + height: 100px; + } +</style> + +<div id="outer"> + <div id="box"></div> +</div> diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-shape-circle-005-ref.html b/tests/wpt/web-platform-tests/css/motion/offset-path-shape-circle-005-ref.html new file mode 100644 index 00000000000..77fc954ad95 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-shape-circle-005-ref.html @@ -0,0 +1,27 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Motion Path test reference: <basic-shape> circle() path with offset-position</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> + +<style> +#outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; +} +#box { + background-color: green; + position: relative; + transform: translate(300px, 200px) translate(50px, -50px); + width: 100px; + height: 100px; +} +</style> + +<div id="outer"> + <div id="inner"> + <div id="box"></div> + </div> +</div> diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-shape-circle-005.html b/tests/wpt/web-platform-tests/css/motion/offset-path-shape-circle-005.html new file mode 100644 index 00000000000..0ca93306c60 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-shape-circle-005.html @@ -0,0 +1,28 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Motion Path test: <basic-shape> circle() path with offset-position</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> +<link rel="match" href="offset-path-shape-circle-005-ref.html"> +<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape"> + +<style> +#outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; +} +#box { + background-color: green; + position: relative; + offset-path: circle(100px); + offset-position: normal; + width: 100px; + height: 100px; +} +</style> + +<div id="outer"> + <div id="box"></div> +</div> diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-shape-ellipse-005-ref.html b/tests/wpt/web-platform-tests/css/motion/offset-path-shape-ellipse-005-ref.html new file mode 100644 index 00000000000..98504d1a385 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-shape-ellipse-005-ref.html @@ -0,0 +1,27 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Motion Path test reference: <basic-shape> ellipse() path with offset-position</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> + +<style> +#outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; +} +#box { + background-color: green; + position: relative; + transform: translate(300px, 200px) translate(50px, -50px); + width: 100px; + height: 100px; +} +</style> + +<div id="outer"> + <div id="inner"> + <div id="box"></div> + </div> +</div> diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-shape-ellipse-005.html b/tests/wpt/web-platform-tests/css/motion/offset-path-shape-ellipse-005.html new file mode 100644 index 00000000000..27eae4a5c49 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-shape-ellipse-005.html @@ -0,0 +1,28 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Motion Path test: <basic-shape> ellipse() path with offset-position</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> +<link rel="match" href="offset-path-shape-ellipse-005-ref.html"> +<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape"> + +<style> +#outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; +} +#box { + background-color: green; + position: relative; + offset-path: ellipse(100px 100px); + offset-position: normal; + width: 100px; + height: 100px; +} +</style> + +<div id="outer"> + <div id="box"></div> +</div> diff --git a/tests/wpt/web-platform-tests/css/motion/offset-path-shape-inset-001.html b/tests/wpt/web-platform-tests/css/motion/offset-path-shape-inset-001.html index dd96c42ebb3..27f5e3fc7d6 100644 --- a/tests/wpt/web-platform-tests/css/motion/offset-path-shape-inset-001.html +++ b/tests/wpt/web-platform-tests/css/motion/offset-path-shape-inset-001.html @@ -17,6 +17,7 @@ #box { background-color: green; position: relative; + top: 100px; offset-path: inset(10px 10px 10px 10px); offset-distance: 60%; border-radius: 50% 50% 0 0; diff --git a/tests/wpt/web-platform-tests/css/motion/parsing/offset-path-parsing-valid.html b/tests/wpt/web-platform-tests/css/motion/parsing/offset-path-parsing-valid.html index 59a64b2116d..8a22b9420ee 100644 --- a/tests/wpt/web-platform-tests/css/motion/parsing/offset-path-parsing-valid.html +++ b/tests/wpt/web-platform-tests/css/motion/parsing/offset-path-parsing-valid.html @@ -21,6 +21,11 @@ test_valid_value("offset-path", "ray(200grad farthest-side)"); test_valid_value("offset-path", "ray(270deg farthest-corner contain)"); test_valid_value("offset-path", "ray(-720deg sides)"); test_valid_value("offset-path", "ray(calc(180deg - 45deg) farthest-side)", "ray(calc(135deg) farthest-side)"); +test_valid_value("offset-path", "ray(0deg at 100px 100px)"); +test_valid_value("offset-path", "ray(0deg sides at center center)"); +test_valid_value("offset-path", "ray(0deg at center center sides)", "ray(0deg sides at center center)"); +test_valid_value("offset-path", "ray(0deg at center center contain)", "ray(0deg contain at center center)"); +test_valid_value("offset-path", "ray(at 10px 10px 0deg contain)", "ray(0deg contain at 10px 10px)"); test_valid_value("offset-path", 'path("m 20 0 h -100")'); test_valid_value("offset-path", 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z")'); @@ -44,10 +49,12 @@ test_valid_value("offset-path", test_valid_value("offset-path", 'url("http://www.example.com/index.html#polyline1")'); -test_valid_value("offset-path", "circle(100px)", "circle(100px at 50% 50%)"); -test_valid_value("offset-path", "margin-box"); +test_valid_value("offset-path", "circle(100px)"); +test_valid_value("offset-path", "circle(100px at 50% 50%)"); +test_valid_value("offset-path", "border-box"); test_valid_value("offset-path", "inset(10% 20% 30% 40%) border-box"); test_valid_value("offset-path", "fill-box ellipse(50% 60%)", "ellipse(50% 60%) fill-box"); +test_valid_value("offset-path", "content-box ellipse(50% 60% at 50% 50%)", "ellipse(50% 60% at 50% 50%) content-box"); </script> </body> </html> diff --git a/tests/wpt/web-platform-tests/css/motion/parsing/offset-position-computed.html b/tests/wpt/web-platform-tests/css/motion/parsing/offset-position-computed.html index 1cbdbdb0fe2..ebb8023e6c5 100644 --- a/tests/wpt/web-platform-tests/css/motion/parsing/offset-position-computed.html +++ b/tests/wpt/web-platform-tests/css/motion/parsing/offset-position-computed.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>Motion Path Module Level 1: getComputedStyle().offsetPosition</title> <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property"> -<meta name="assert" content="offset-position is 'auto' or a computed position."> +<meta name="assert" content="offset-position is 'auto', 'normal', or a computed position."> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/computed-testcommon.js"></script> @@ -18,6 +18,7 @@ <div id="target"></div> <script> test_computed_value("offset-position", "auto"); +test_computed_value("offset-position", "normal"); test_computed_value("offset-position", "left bottom", "0% 100%"); test_computed_value("offset-position", "center center", "50% 50%"); diff --git a/tests/wpt/web-platform-tests/css/motion/parsing/offset-position-parsing-valid.html b/tests/wpt/web-platform-tests/css/motion/parsing/offset-position-parsing-valid.html index f71730f89eb..bc0d19a460f 100644 --- a/tests/wpt/web-platform-tests/css/motion/parsing/offset-position-parsing-valid.html +++ b/tests/wpt/web-platform-tests/css/motion/parsing/offset-position-parsing-valid.html @@ -5,7 +5,7 @@ <title>Motion Path Module Level 1: parsing offset-position with valid values</title> <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property"> -<meta name="assert" content="offset-position supports the full grammar 'auto | <position>'."> +<meta name="assert" content="offset-position supports the full grammar 'auto | normal | <position>'."> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/parsing-testcommon.js"></script> @@ -13,6 +13,7 @@ <body> <script> test_valid_value("offset-position", "auto"); +test_valid_value("offset-position", "normal"); test_valid_value("offset-position", "left bottom"); test_valid_value("offset-position", "center center"); |