XLinfini/sousa-gecko
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
caec8eadf94de1a1028c08b72ca34210649755d2
sousa-gecko/testing/web-platform/tests/css/motion/parsing/offset-path-parsing-valid.html
T
Jason Leo d33d0f5b55 Bug 2044437 [wpt PR 60345] - [css-shapes] Implement polygon() round modifier, a=testonly 
Automatic update from web-platform-tests
[css-shapes] Implement polygon() round modifier (#60345)

* [css-shapes] Implement polygon() round modifier

Implement the CSS Shapes `polygon(round <length>, ...)` syntax behind
the CSSPolygonRounding runtime flag.

This adds parsing and serialization for the optional round modifier,
stores the radius on polygon basic shapes, includes it in equality and
interpolation, and generates rounded polygon paths for clip-path,
offset-path, and related basic-shape consumers.

For shape-outside, rounded polygons now rasterize from the rounded path
instead of the sharp vertex list so float exclusion follows the rounded
outline.

Add unit tests, a clip-path rendering test, and WPT coverage for parsing
and computed values.

ChromeStatusEntry: https://chromestatus.com/feature/6636392944893952
Spec: https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape
Bug: 329302249
Change-Id: I4ffb0f4c7efcdb243c8dc1f547f4b84194264634
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7716742
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Commit-Queue: Jason Leo <cgqaq@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1611220}

* ove the the changes (new tests added) in css/css-shapes/shape-functions/polygon-function-* to separate files

* put the files in the right features

---------

Co-authored-by: Jason Leo <cgqaq@chromium.org>
--

wpt-commits: 0070273c9cabb3e87b7395d103d15832478085b0
wpt-pr: 60345
2026-06-09 18:48:01 +00:00

119 lines
6.2 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Motion Path Module Level 1: parsing offset-path 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-path-property">
<meta name="assert" content="offset-path supports the full grammar from the spec.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("offset-path", "none");
test_valid_value("offset-path", "ray(0deg)");
test_valid_value("offset-path", "ray(0rad closest-side)", "ray(0rad)");
test_valid_value("offset-path", "ray(0.25turn closest-corner contain)");
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")');
test_valid_value("offset-path", 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")');
test_valid_value("offset-path", 'path("M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z")');
test_valid_value("offset-path", 'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")');
test_valid_value("offset-path", 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 z c 9 8 7 6 5 4")', 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 Z c 9 8 7 6 5 4")');
test_valid_value("offset-path", 'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")');
test_valid_value("offset-path",
'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")',
'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")'
);
test_valid_value("offset-path",
'path("m 10.0 170.0 h 90.00 v 30.00 m 0 0 s 1 2 3 4 z c 9 8 7 6 5 4")',
'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 Z c 9 8 7 6 5 4")'
);
test_valid_value("offset-path",
' path( "m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50" ) ',
'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")'
);
test_valid_value("offset-path", 'url("http://www.example.com/index.html#polyline1")');
// https://drafts.csswg.org/css-shapes-1/#basic-shape-serialization
test_valid_value("offset-path", "inset(100%)");
test_valid_value("offset-path", "inset(0 1px)", "inset(0px 1px)");
test_valid_value("offset-path", "inset(0px 1px 2%)");
test_valid_value("offset-path", "inset(0px 1px 2% 3em)");
test_valid_value("offset-path", "inset(0px round 100%)");
test_valid_value("offset-path", "inset(0px round 0 1px)", "inset(0px round 0px 1px)");
test_valid_value("offset-path", "inset(0px round 0px 1px 2%)");
test_valid_value("offset-path", "inset(0px round 0px 1px 2% 3em)");
test_valid_value("offset-path", "inset(10px round 20% / 0px 1px 2% 3em)");
test_valid_value("offset-path", "circle()");
test_valid_value("offset-path", "circle(100px)");
test_valid_value("offset-path", "circle(closest-side)", "circle()");
test_valid_value("offset-path", "circle(at 50% 50%)");
test_valid_value("offset-path", "circle(100px at 50% 50%)");
test_valid_value("offset-path", "circle(farthest-side at 0% 0%)");
test_valid_value("offset-path", "ellipse()");
test_valid_value("offset-path", "ellipse(1px closest-side)");
test_valid_value("offset-path", "ellipse(at 50% 50%)");
test_valid_value("offset-path", "ellipse(closest-side closest-side at 10% 20%)", "ellipse(at 10% 20%)");
test_valid_value("offset-path", "ellipse(farthest-side 4% at 0% 100%)");
test_valid_value("offset-path", "polygon(1% 2%)");
test_valid_value("offset-path", "polygon(1px 2px, 3em 4em)");
test_valid_value(
"offset-path",
"polygon(round 0px, 1px 2px, 3px 4px)",
"polygon(1px 2px, 3px 4px)");
test_valid_value("offset-path", "polygon(round 1px, 1% 2%)");
test_valid_value(
"offset-path",
"polygon(nonzero round 1px, 1px 2px, 3em 4em)",
"polygon(round 1px, 1px 2px, 3em 4em)");
test_valid_value(
"offset-path",
"polygon(evenodd round 1px, 1px 2px, 3em 4em, 5pt 6%)");
test_valid_value(
"offset-path",
"polygon(round calc(1em + 2px), 1px 2px, 3px 4px)");
test_valid_value("offset-path", "xywh(0 1% 2px 3em)", "xywh(0px 1% 2px 3em)");
test_valid_value("offset-path", "xywh(0px 1% 2px 3em round 0)", "xywh(0px 1% 2px 3em)");
test_valid_value("offset-path", "xywh(0px 1% 2px 3em round 0 1px)", "xywh(0px 1% 2px 3em round 0px 1px)");
test_valid_value("offset-path", "xywh(0px 1% 2px 3em round 0px 1px 2%)");
test_valid_value("offset-path", "xywh(0px 1% 2px 3em round 0px 1px 2% 3em)");
test_valid_value("offset-path", "rect(0 100% 200px 4em)", "rect(0px 100% 200px 4em)");
test_valid_value("offset-path", "rect(auto auto auto auto)");
test_valid_value("offset-path", "rect(0px 100% auto 4em round 0)", "rect(0px 100% auto 4em)");
test_valid_value("offset-path", "rect(0px 100% auto 4em round 0 1px)", "rect(0px 100% auto 4em round 0px 1px)");
test_valid_value("offset-path", "rect(0px 100% auto 4em round 0px 1px 2%)");
test_valid_value("offset-path", "rect(0px 100% auto 4em round 0px 1px 2% 3em)");
test_valid_value("offset-path", "content-box");
test_valid_value("offset-path", "border-box");
test_valid_value("offset-path", "view-box");
test_valid_value("offset-path", "inset(10% 20% 30% 40%) border-box", "inset(10% 20% 30% 40%)");
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");
test_valid_value("offset-path", "ray(0deg) stroke-box");
test_valid_value("offset-path", 'path("m 20 0 h -100") view-box');
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink