blob: 7525f674503343832560e62bced2a78b484851d8 (
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
79
80
81
82
|
<!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.
This is the reverse of clip-path-animation-custom-timing-fumction.html,
and tests extrapolation in the negative direction
-->
<style>
@keyframes clippath {
0% {
clip-path: inset(45% 45%);
}
25% {
clip-path: inset(49% 459);
}
50% {
clip-path: inset(45% 45%);
}
75% {
clip-path: inset(40% 40%);
animation-timing-function: cubic-bezier(0, -9, 1, -9);
/* Test that the correct keyframe's timing function is being used. */
}
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 -8750000s
/* halfway between the second to last and last keyframes.*/
;
}
</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>
|
