Skip to content

Commit d2d3fa1

Browse files
Claire Chamberschromium-wpt-export-bot
Claire Chambers
authored and
chromium-wpt-export-bot
committed
[CompositeClipPathAnimation] Fix crash with non-shape clip path delays
This CL fixes a crash that would occur with clip-path animations started on elements that already had a clip path of type geometry box, or of reference. This change forces a fallback in the latter case, and ensures proper calculation of the clip path in the former case. Two tests are added to guard against regression. Change-Id: I8e3fbcad6f9a566ab0d394b972d51dda680b09cc Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6385543 Reviewed-by: Kevin Ellis <[email protected]> Commit-Queue: Claire Chambers <[email protected]> Cr-Commit-Position: refs/heads/main@{#1438895}
1 parent 6f85fa4 commit d2d3fa1

File tree

3 files changed

+126
-0
lines changed

3 files changed

+126
-0
lines changed

‎css/css-masking/clip-path/animations/clip-path-animation-geometry-box-delay.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
4+
<link rel="match" href="clip-path-animation-non-shape-delay-ref.html">
5+
<style>
6+
.container {
7+
width: 100px;
8+
height: 100px;
9+
background-color: green;
10+
animation: clippath 1s 10s;
11+
animation-fill-mode: none;
12+
clip-path: border-box;
13+
position: absolute;
14+
left: 10px;
15+
top: 10px;
16+
}
17+
18+
.child {
19+
width: 10px;
20+
height: 10px;
21+
background-color: blue;
22+
left: 150px;
23+
position: absolute;
24+
}
25+
26+
@keyframes clippath {
27+
0% {
28+
clip-path: circle(50% at 50% 50%);
29+
}
30+
31+
100% {
32+
clip-path: circle(35% at 35% 35%);
33+
}
34+
}
35+
</style>
36+
<script src="/common/reftest-wait.js"></script>
37+
<script src="../../../../web-animations/resources/timing-utils.js"></script>
38+
39+
<body>
40+
This test passes if the blue child is occluded by the clip-path during the animation delay.
41+
<div class="container">
42+
<div class="child"></div>
43+
</div>
44+
45+
<script>
46+
document.getAnimations()[0].ready.then(() => requestAnimationFrame(takeScreenshot));
47+
</script>
48+
</body>
49+
50+
</html>

‎css/css-masking/clip-path/animations/clip-path-animation-non-shape-delay-ref.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<style>
3+
.container {
4+
width: 100px;
5+
height: 100px;
6+
background-color: green;
7+
position: absolute;
8+
left: 10px;
9+
top: 10px;
10+
}
11+
</style>
12+
<body>
13+
This test passes if the blue child is occluded by the clip-path during the animation delay.
14+
<div class="container">
15+
</div>
16+
</body>
17+
</html>

‎css/css-masking/clip-path/animations/clip-path-animation-reference-delay.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
4+
<link rel="match" href="clip-path-animation-non-shape-delay-ref.html">
5+
<style>
6+
.container {
7+
width: 100px;
8+
height: 100px;
9+
background-color: green;
10+
animation: clippath 1s 10s;
11+
animation-fill-mode: none;
12+
clip-path: url(#path);
13+
position: absolute;
14+
left: 10px;
15+
top: 10px;
16+
}
17+
18+
.child {
19+
width: 10px;
20+
height: 10px;
21+
background-color: blue;
22+
left: 150px;
23+
position: absolute;
24+
}
25+
26+
@keyframes clippath {
27+
0% {
28+
clip-path: circle(50% at 50% 50%);
29+
}
30+
31+
100% {
32+
clip-path: circle(35% at 35% 35%);
33+
}
34+
}
35+
</style>
36+
<script src="/common/reftest-wait.js"></script>
37+
<script src="../../../../web-animations/resources/timing-utils.js"></script>
38+
39+
<body>
40+
This test passes if the blue child is occluded by the clip-path during the animation delay.
41+
<svg style="position:absolute; left: 0">
42+
<defs>
43+
<clipPath id="path">
44+
<rect x="0" y="0" width="100" height="100"/>
45+
<!-- Adding an empty text node to force mask-based clipping. -->
46+
<text></text>
47+
</clipPath>
48+
</defs>
49+
</svg>
50+
<div class="container">
51+
<div class="child"></div>
52+
</div>
53+
54+
<script>
55+
document.getAnimations()[0].ready.then(() => requestAnimationFrame(takeScreenshot));
56+
</script>
57+
</body>
58+
59+
</html>

0 commit comments

Comments
 (0)