Skip to content

Commit 48d0b26

Browse files
noamrchromium-wpt-export-bot
noamr
authored and
chromium-wpt-export-bot
committed
Implement clip-path: path()
Extended StylePath to contain windRule. Extended path CSS property parser to account for wind-rule, e.g. path(oddeven, '...'). Pass through a zoom parameter when requesting a path for a ShapeClipPath. Allow PathInterpolationFunction to try to handle clip-path animations, when the shape is a path. Patched the necessary bits to allow CSSPathValue in clip-path. Unskipped relevant WPT tests, and added 3 new ones to handle page zoom. Those tests use zoom css property, in lieu of page-zoom support in WPT Bug: 880983 Change-Id: I0bf8d7a4ec746f656c33c0f99c37e0af1e3ff7e9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2442797 Commit-Queue: Fredrik Söderquist <[email protected]> Reviewed-by: Fredrik Söderquist <[email protected]> Cr-Commit-Position: refs/heads/master@{#817421}
1 parent 399db71 commit 48d0b26

5 files changed

+100
-0
lines changed

‎css/css-masking/clip-path/clip-path-path-interpolation-with-zoom.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>CSS Masking: Test clip-path nonzero path interpolation with zoom</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path">
5+
<link rel="match" href="reference/clip-path-path-interpolation-with-zoom-ref.html">
6+
<meta name="assert" content="The clip-path property takes the basic shape
7+
'path()' for clipping. Test the interpolation of nonzero
8+
path function.">
9+
<style>
10+
@keyframes anim {
11+
from {
12+
clip-path: path(nonzero, 'M20,20h60 v60 h-60z M30,30 h40 v40 h-40z');
13+
}
14+
to {
15+
clip-path: path(nonzero, 'M50,50h50 v50 h-50z M20,20 h50 v50 h-50z');
16+
}
17+
}
18+
#rect {
19+
width: 100px;
20+
zoom: 3;
21+
height: 100px;
22+
background-color: green;
23+
animation: anim 10s -5s paused linear;
24+
}
25+
</style>
26+
<div id="rect"></div>
27+
</html>

‎css/css-masking/clip-path/clip-path-path-with-zoom-hittest.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<title>CSS Masking: Test clip-path property hit-testing when the page is zoomed</title>
3+
<link rel="author" title="Noam Rosenthal" href="mailto:[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path">
5+
<meta name="assert" content="The zoomed path is hit-tested correctly">
6+
<script src="/resources/testharness.js"></script>
7+
<script src="/resources/testharnessreport.js"></script>
8+
<style>
9+
#triangle {
10+
width: 100px;
11+
height: 100px;
12+
background-color: green;
13+
clip-path: path(nonzero, 'M0 0, L100 0, L0 100, L 0 0');
14+
zoom: 2;
15+
}
16+
</style>
17+
<div id="triangle"></div>
18+
<script>
19+
test(() => {
20+
assert_equals(document.elementFromPoint(20, 20).id, 'triangle')
21+
assert_equals(document.elementFromPoint(150, 20).id, 'triangle')
22+
assert_equals(document.elementFromPoint(180, 180).tagName, 'BODY')
23+
}, 'clip-path: path() hit-test takes zoom into account');
24+
25+
</script>

‎css/css-masking/clip-path/clip-path-path-with-zoom.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<title>CSS Masking: Test clip-path property when the page is zoomed</title>
3+
<link rel="author" title="Noam Rosenthal" href="mailto:[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path">
5+
<link rel="match" href="reference/clip-path-path-with-zoom-ref.html">
6+
<meta name="assert" content="The path gets zoomed together with the content">
7+
<style>
8+
#red {
9+
position: absolute;
10+
width: 100px;
11+
height: 100px;
12+
background: red;
13+
}
14+
#rect {
15+
width: 100px;
16+
height: 100px;
17+
background-color: green;
18+
clip-path: path(nonzero, 'M0 0, L100 0, L0 100, L 0 0');
19+
zoom: 2;
20+
}
21+
</style>
22+
<div id="red"></div>
23+
<div id="rect"></div>

‎css/css-masking/clip-path/reference/clip-path-path-interpolation-with-zoom-ref.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<title>CSS Masking: Test clip-path nonzero path interpolation with zoom</title>
3+
<style type="text/css">
4+
#rect {
5+
width: 300px;
6+
height: 300px;
7+
background-color: green;
8+
clip-path: path('M105,105 H270 V270 H105Z M75,75 H210 V210 H75Z');
9+
}
10+
11+
</style>
12+
<div id="rect"></div>

‎css/css-masking/clip-path/reference/clip-path-path-with-zoom-ref.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>CSS Masking: Test clip-path property when the page is zoomed</title>
4+
<style>
5+
#rect {
6+
width: 200px;
7+
height: 200px;
8+
background: green;
9+
clip-path: path(nonzero, 'M0 0, L200 0, L0 200');
10+
}
11+
</style>
12+
<div id="rect"></div>
13+
</html>

0 commit comments

Comments
 (0)