blob: e73f01bc40316de43594f049dca353f7269917e8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
<link rel="match" href="clip-path-animation-custom-timing-function-ref.html">
<!--
Test that ensures that the bounding rect for a clip path animation is not
limited to the size of the largest keyframe.
Test is done by occulsion to prevent flakes. Test succeeds if the extrapolated
clip area (green) is large enough to occlude the entire red area.
-->
<style>
@keyframes clippath {
0% {
clip-path: inset(45% 45%);
}
25% {
clip-path: inset(40% 40%);
}
50% {
clip-path: inset(45% 45%);
}
75% {
clip-path: inset(40% 40%);
}
100% {
clip-path: inset(45% 45%);
}
}
.green {
background-color: green;
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 200px;
}
/* for this test to succeed, the red rect needs to be entirely
occluded by the inner green rect, requiring extrapolation
beyond the largest keyframe. */
.red {
background-color: red;
position: fixed;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
}
.anim {
animation: clippath 10000000s -1250000s
/* halfway between the first and second keyframes. */
;
animation-timing-function: cubic-bezier(0, 9, 1, 9);
}
</style>
<script src="/common/reftest-wait.js"></script>
<body>
<div class="green">
<div class="red">
<div class="green anim"></div>
</div>
</div>
<script>
document.getAnimations()[0].ready.then(takeScreenshot);
</script>
</body>
</html>
|
