Bug 1941545 [wpt PR 50068] - CSS shape() - Set WindRule when emitting path, a=testonly

Automatic update from web-platform-tests
CSS shape() - Set WindRule when emitting path

Bug: 384605099
Change-Id: I0ad8563f6dcba405b4cd517709725146f0828e5b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6172369
Commit-Queue: Noam Rosenthal <nrosenthal@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/main@{#1405999}

--

wpt-commits: 97e933ecb5a7fdb0f231fa669444d6c99619850a
wpt-pr: 50068
This commit is contained in:
Noam Rosenthal
2025-01-15 17:17:51 +00:00
committed by moz-wptsync-bot
parent fc556dc166
commit b336072796
2 changed files with 54 additions and 0 deletions

View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Masking: Test clip-path property and shape function with nonzero fill</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape">
<link rel="match" href="reference/clip-path-path-winding-ref.html">
<meta name="assert" content="The clip-path property takes the basic shape
'shape()' for clipping, with evenodd winding. On pass you should
see a green square with an empty white square inside it.">
</head>
<style>
#rect {
width: 100px;
height: 100px;
background-color: green;
clip-path: shape(evenodd from 10px 10px,
hline by 80px, vline by 80%, hline by -80%, close,
move to 25px 25px, hline by 50px, vline by 50px, hline by -50%, close);
}
</style>
<body>
<p>The test passes if there is a green rect with an empty white rect inside it.</p>
<div id="rect"></div>
</body>
</html>

View File

@@ -0,0 +1,29 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>CSS Masking: Reference for clip-path's path function with evenodd</title>
<style type="text/css">
#rect {
width: 100px;
height: 100px;
background-color: green;
clip-path: url("#clip");
}
</style>
</head>
<body>
<p>The test passes if there is a green rect with an empty white rect inside it.</p>
<div id="rect"></div>
<svg height="0" width="0">
<defs>
<clipPath id="clip">
<path clip-rule="evenodd" d="M10,10h80v80h-80zM25,25h50v50h-50z"/>
</clipPath>
</defs>
</svg>
</body>
</html>