Jason Leo
d33d0f5b55
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
11 lines
813 B
HTML
11 lines
813 B
HTML
<!DOCTYPE html>
|
|
<title>CSS Masking: clip-path polygon() with round</title>
|
|
<link rel="author" title="Jason Leo" href="mailto:cgqaq@chromium.org">
|
|
<link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-clip-path">
|
|
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-polygon">
|
|
<link rel="match" href="reference/clip-path-polygon-014-ref.html">
|
|
<meta name="assert" content="The clip-path property accepts polygon() with round for rounding polygon vertices. The test passes if there is a green rounded rectangle.">
|
|
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-100">
|
|
<p>The test passes if there is a green rounded rectangle.</p>
|
|
<div style="width: 200px; height: 200px; background: green; clip-path: polygon(round 40px, 0 0, 100% 0, 100% 100%, 0 100%)"></div>
|