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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
|
<!DOCTYPE html>
<meta charset="UTF-8">
<title>clip-path-interpolation</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path">
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#interpolating-shape">
<meta name="assert" content="clip-path supports animation for shape()">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
html {
font-size: 16px;
font-family: Ahem;
}
.parent {
clip-path: shape(from -5px 5px, move to 5% 1px);
padding: 10px;
}
.target {
display: inline-block;
width: 100px;
height: 100px;
background-color: black;
clip-path: shape(from 5px 5px, line to 10px 10%);
}
.expected {
background-color: green;
}
</style>
<body>
<script>
test_interpolation({
property: 'clip-path',
from: neutralKeyframe,
to: 'shape(from -5px 5px, line to 20px 20%)',
}, [
{at: -0.3, expect: 'shape(from 8px 5px, line to 7px 7%)'},
{at: 0, expect: 'shape(from 5px 5px, line to 10px 10%)'},
{at: 0.6, expect: 'shape(from -1px 5px, line to 16px 16%)'},
{at: 1, expect: 'shape(from -5px 5px, line to 20px 20%)'},
{at: 1.5, expect: 'shape(from -10px 5px, line to 25px 25%)'},
]);
test_no_interpolation({
property: 'clip-path',
from: 'initial',
to: 'shape(from 8px 5px, line to 7px 7%)',
});
test_interpolation({
property: 'clip-path',
from: 'inherit',
to: 'shape(from 15% 15px, move to 20% -10px)',
}, [
{at: -0.3, expect: 'shape(from calc(-4.5% - 6.5px) 2px, move to 0.5% 4.3px)'},
{at: 0, expect: 'shape(from calc(0% - 5px) 5px, move to 5% 1px)'},
{at: 0.5, expect: 'shape(from calc(7.5% - 2.5px) 10px, move to 12.5% -4.5px)'},
{at: 1, expect: 'shape(from 15% 15px, move to 20% -10px'},
{at: 1.5, expect: 'shape(from calc(22.5% + 2.5px) 20px, move to 27.5% -15.5px)'},
]);
test_no_interpolation({
property: 'clip-path',
from: 'unset',
to: 'shape(from 10px 10px, close)',
});
test_no_interpolation({
property: 'clip-path',
from: 'none',
to: 'shape(from 10px 10px, close)',
});
test_no_interpolation({
property: 'clip-path',
from: 'shape(from 10px 10px, move to 10% 10%)',
to: 'shape(from 10px 10px, close)',
});
test_interpolation({
property: 'clip-path',
from: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)',
to: 'shape(from 15% 15px, hline to 25%, vline to -15px, close)',
}, [
{at: -0.3, expect: 'shape(from 2% 2px, hline to -1%, vline to -2px, close)'},
{at: 0, expect: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)'},
{at: 0.5, expect: 'shape(from 10% 10px, hline to 15% , vline to -10px, close)'},
{at: 1, expect: 'shape(from 15% 15px, hline to 25%, vline to -15px, close)'},
{at: 1.5, expect: 'shape(from 20% 20px, hline to 35%, vline to -20px, close)'},
]);
test_interpolation({
property: 'clip-path',
from: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)',
to: 'shape(from 15% 15px, curve to 20% 0px via 10% 60px, curve to 20% 30px via 30% 40px -5% 100px)',
}, [
{at: -0.3, expect: 'shape(from 2% 2px, curve to 7% 13px via -3% 86px, curve to 33% 17px via 17% 53px 34% 61px)'},
{at: 0, expect: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)'},
{at: 0.5, expect: 'shape(from 10% 10px, curve to 15% 5px via 5% 70px, curve to 25% 25px via 25% 45px 10% 85px)'},
{at: 1, expect: 'shape(from 15% 15px, curve to 20% 0px via 10% 60px, curve to 20% 30px via 30% 40px -5% 100px)'},
{at: 1.5, expect: 'shape(from 20% 20px, curve to 25% -5px via 15% 50px, curve to 15% 35px via 35% 35px -20% 115px)'},
]);
test_interpolation({
property: 'clip-path',
from: 'shape(from 5% 5px, curve by 10% 10px via 0% 80px, curve by 30% 20px via 20% 50px 25% 70px)',
to: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)',
}, [
{at: -0.3, expect: 'shape(from 2% 2px, curve by 7% 13px via -3% 86px, curve by 33% 17px via 17% 53px 34% 61px)'},
{at: 0, expect: 'shape(from 5% 5px, curve by 10% 10px via 0% 80px, curve by 30% 20px via 20% 50px 25% 70px)'},
{at: 0.5, expect: 'shape(from 10% 10px, curve by 15% 5px via 5% 70px, curve by 25% 25px via 25% 45px 10% 85px)'},
{at: 1, expect: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)'},
{at: 1.5, expect: 'shape(from 20% 20px, curve by 25% -5px via 15% 50px, curve by 15% 35px via 35% 35px -20% 115px)'},
]);
test_interpolation({
property: 'clip-path',
from: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)',
to: 'shape(from 15% 15px, smooth to 20% 0px via 10% 60px, smooth to 20% 30px)',
}, [
{at: -0.3, expect: 'shape(from 2% 2px, smooth to 7% 13px via -3% 86px, smooth to 33% 17px)'},
{at: 0, expect: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)'},
{at: 0.5, expect: 'shape(from 10% 10px, smooth to 15% 5px via 5% 70px, smooth to 25% 25px)'},
{at: 1, expect: 'shape(from 15% 15px, smooth to 20% 0px via 10% 60px, smooth to 20% 30px)'},
{at: 1.5, expect: 'shape(from 20% 20px, smooth to 25% -5px via 15% 50px, smooth to 15% 35px)'},
]);
test_interpolation({
property: 'clip-path',
from: 'shape(from 5% 5px, smooth by 10% 10px via 0% 80px, smooth by 30% 20px)',
to: 'shape(from 15% 15px, smooth by 20% 0px via 10% 60px, smooth by 20% 30px)',
}, [
{at: -0.3, expect: 'shape(from 2% 2px, smooth by 7% 13px via -3% 86px, smooth by 33% 17px)'},
{at: 0, expect: 'shape(from 5% 5px, smooth by 10% 10px via 0% 80px, smooth by 30% 20px)'},
{at: 0.5, expect: 'shape(from 10% 10px, smooth by 15% 5px via 5% 70px, smooth by 25% 25px)'},
{at: 1, expect: 'shape(from 15% 15px, smooth by 20% 0px via 10% 60px, smooth by 20% 30px)'},
{at: 1.5, expect: 'shape(from 20% 20px, smooth by 25% -5px via 15% 50px, smooth by 15% 35px)'},
]);
test_interpolation({
property: 'clip-path',
from: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)',
to: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px cw rotate 270deg small, arc to 25% 20px of 10px 5px small cw)'
}, [
{at: -0.3, expect: 'shape(from 2% 2px, arc to 18% -12px of 7px 17px ccw small, arc by 12% -2px of 33px 33px rotate -42deg cw large , arc to 25% 20px of 10px 5px ccw small)'},
{at: 0, expect: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)'},
{at: 0.3, expect: 'shape(from 8% 8px, arc to 12% -18px of 13px 23px ccw small, arc by 18% -8px of 27px 27px rotate 102deg cw large, arc to 25% 20px of 10px 5px ccw small )'},
{at: 0.5, expect: 'shape(from 10% 10px, arc to 10% -20px of 15px 25px ccw small, arc by 20% -10px of 25px rotate 150deg cw large, arc to 25% 20px of 10px 5px cw small)'},
{at: 1, expect: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px rotate 270deg cw small, arc to 25% 20px of 10px 5px cw small)'},
{at: 1.5, expect: 'shape(from 20% 20px, arc to 0% -30px of 25px 35px ccw small, arc by 30% -20px of 15px rotate 390deg cw small, arc to 25% 20px of 10px 5px cw small)'},
]);
test_interpolation({
property: 'clip-path',
from: 'shape(from 5px -5%, hline to 10px, vline by 10rem, hline by 8.25px, close, vline by 3pt)',
to: 'shape(from -5px 5px, hline to 20px, vline by 10%, hline by 1em, close, vline by 6pt)',
}, [
{at: -0.3, expect: 'shape(from 8px calc(-6.5% - 1.5px), hline to 7px, vline by calc(-3% + 208px), hline by 5.92px, close, vline by 2.8px)'},
{at: 0, expect: 'shape(from 5px -5%, hline to 10px, vline by calc(0% + 160px), hline by 8.25px, close, vline by 4px)'},
{at: 0.6, expect: 'shape(from -1px calc(-2% + 3px), hline to 16px, vline by calc(6% + 64px), hline by 12.9px, close ,vline by 6.4px)'},
{at: 1, expect: 'shape(from -5px calc(0% + 5px), hline to 20px, vline by 10%, hline by 16px, close, vline by 8px)'},
{at: 1.5, expect: 'shape(from -10px calc(2.5% + 7.5px), hline to 25px, vline by calc(15% - 80px), hline by 19.88px, close, vline by 10px)'},
]);
test_no_interpolation({
property: 'clip-path',
from: 'shape(from 10px 10px, move to 10% 10%)',
to: 'path("M10 10 z")',
});
test_no_interpolation({
property: 'clip-path',
from: 'path("M10 10 M10 10")',
to: 'shape(from 10px 10px, close)',
});
test_no_interpolation({
property: 'clip-path',
from: 'path("M10 10 h 5")',
to: 'shape(from 10px 10px, hline to 5px)',
});
test_no_interpolation({
property: 'clip-path',
from: 'shape(nonzero from 10px 10px, move to 10% 10%)',
to: 'path(evenodd, "M0 0 M20 20")',
});
test_interpolation({
property: 'clip-path',
from: 'shape(from 5px 5px, hline to 5px, vline to -5px, close)',
to: 'path("M 15 15 H 25 V -15 Z")',
}, [
{at: -0.3, expect: 'shape(from 2px 2px, hline to -1px, vline to -2px, close)'},
{at: 0, expect: 'shape(from 5px 5px, hline to 5px, vline to -5px, close)'},
{at: 0.5, expect: 'shape(from 10px 10px, hline to 15px, vline to -10px, close)'},
{at: 1, expect: 'shape(from 15px 15px, hline to 25px, vline to -15px, close)'},
{at: 1.5, expect: 'shape(from 20px 20px, hline to 35px, vline to -20px, close)'},
]);
test_interpolation({
property: 'clip-path',
from: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)',
to: 'path("M 15 15 Q 10 60 20 0 C 30 40 -5 100 20 30")',
}, [
{at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, curve to calc(13% - 6px) 13px via calc(0% - 3px) 86px, curve to calc(39% - 6px) 17px via calc(26% - 9px) 53px calc(32.5% + 1.5px) 61px)'},
{at: 0, expect: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)'},
{at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, curve to calc(5% + 10px) 5px via calc(0% + 5px) 70px, curve to calc(15% + 10px) 25px via calc(10% + 15px) 45px calc(12.5% - 2.5px) 85px)'},
{at: 1, expect: 'shape(from calc(0% + 15px) 15px, curve to calc(0% + 20px) 0px via calc(0% + 10px) 60px, curve to calc(0% + 20px) 30px via calc(0% + 30px) 40px calc(0% - 5px) 100px)'},
{at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, curve to calc(-5% + 30px) -5px via calc(0% + 15px) 50px, curve to calc(-15% + 30px) 35px via calc(-10% + 45px) 35px calc(-12.5% - 7.5px) 115px)'},
]);
test_interpolation({
property: 'clip-path',
from: 'path("M 5 5 q 0 80 10 10 c 20 50 25 70 30 20")',
to: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)',
}, [
{at: -0.3, expect: 'shape(from calc(-4.5% + 6.5px) 2px, curve by calc(-6% + 13px) 13px via -3% 86px, curve by calc(-6% + 39px) 17px via calc(-9% + 26px) 53px calc(1.5% + 32.5px) 61px)'},
{at: 0, expect: 'shape(from calc(0% + 5px) 5px, curve by calc(0% + 10px) 10px via 0% 80px, curve by calc(0% + 30px) 20px via calc(0% + 20px) 50px calc(0% + 25px) 70px)'},
{at: 0.5, expect: 'shape(from calc(7.5% + 2.5px) 10px, curve by calc(10% + 5px) 5px via 5% 70px, curve by calc(10% + 15px) 25px via calc(15% + 10px) 45px calc(-2.5% + 12.5px) 85px)'},
{at: 1, expect: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)'},
{at: 1.5, expect: 'shape(from calc(22.5% - 2.5px) 20px, curve by calc(30% - 5px) -5px via 15% 50px, curve by calc(30% - 15px) 35px via calc(45% - 10px) 35px calc(-7.5% - 12.5px) 115px)'},
]);
test_interpolation({
property: 'clip-path',
from: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)',
to: 'path("M 15 15 S 10 60 20 0 T 20 30")',
}, [
{at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, smooth to calc(13% - 6px) 13px via calc(0% - 3px) 86px, smooth to calc(39% - 6px) 17px)'},
{at: 0, expect: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)'},
{at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, smooth to calc(5% + 10px) 5px via calc(0% + 5px) 70px, smooth to calc(15% + 10px) 25px)'},
{at: 1, expect: 'shape(from calc(0% + 15px) 15px, smooth to calc(0% + 20px) 0px via calc(0% + 10px) 60px, smooth to calc(0% + 20px) 30px)'},
{at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, smooth to calc(-5% + 30px) -5px via calc(0% + 15px) 50px, smooth to calc(-15% + 30px) 35px)'},
]);
test_interpolation({
property: 'clip-path',
from: 'path("M 5 5 s 0 80 10 10 t 30 20")',
to: 'shape(from 15px 15px, smooth by 20px 0px via 10px 60px, smooth by 20px 30px)',
}, [
{at: -0.3, expect: 'shape(from 2px 2px, smooth by 7px 13px via -3px 86px, smooth by 33px 17px)'},
{at: 0, expect: 'shape(from 5px 5px, smooth by 10px 10px via 0px 80px, smooth by 30px 20px)'},
{at: 0.5, expect: 'shape(from 10px 10px, smooth by 15px 5px via 5px 70px, smooth by 25px 25px)'},
{at: 1, expect: 'shape(from 15px 15px, smooth by 20px 0px via 10px 60px, smooth by 20px 30px)'},
{at: 1.5, expect: 'shape(from 20px 20px, smooth by 25px -5px via 15px 50px, smooth by 15px 35px)'},
]);
test_interpolation({
property: 'clip-path',
from: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)',
to: 'path("M 15 15 A 20,30 0 0,0 5,-25 a 20,20 270 0,1 25,-15 A 10,5 0 0,0 25 20")',
}, [
{at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, arc to calc(19.5% - 1.5px) -12px of 7px 17px, arc by calc(19.5% - 7.5px) -2px of 33px cw large rotate -42deg, arc to calc(32.5% - 7.5px) 20px of 10px 5px)'},
{at: 0, expect: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)'},
{at: 0.3, expect: 'shape(from calc(3.5% + 4.5px) 8px, arc to calc(10.5% + 1.5px) -18px of 13px 23px, arc by calc(10.5% + 7.5px) -8px of 27px cw large rotate 102deg, arc to calc(17.5% + 7.5px) 20px of 10px 5px)'},
{at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, arc to calc(7.5% + 2.5px) -20px of 15px 25px, arc by calc(7.5% + 12.5px) -10px of 25px cw large rotate 150deg, arc to calc(12.5% + 12.5px) 20px of 10px 5px)'},
{at: 1, expect: 'shape(from calc(0% + 15px) 15px, arc to calc(0% + 5px) -25px of 20px 30px, arc by calc(0% + 25px) -15px of 20px cw rotate 270deg, arc to calc(0% + 25px) 20px of 10px 5px)'},
{at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, arc to calc(-7.5% + 7.5px) -30px of 25px 35px, arc by calc(-7.5% + 37.5px) -20px of 15px cw rotate 390deg, arc to calc(-12.5% + 37.5px) 20px of 10px 5px)'},
]);
test_interpolation({
property: 'clip-path',
from: 'path("M 5 5 A 10,20 0 0,0 15,-15 a 30,30 30 1,1 15,-5 A 10,5 0 0,0 25 20")',
to: 'shape(from 15px 15px, arc to 5px -25px of 20px 30px, arc by 25px -15px of 20px cw rotate 270deg small, arc to 25px 20px of 10px 5px small cw)'
}, [
{at: -0.3, expect: 'shape(from 2px 2px, arc to 18px -12px of 7px 17px ccw small, arc by 12px -2px of 33px 33px rotate -42deg cw large , arc to 25px 20px of 10px 5px ccw small)'},
{at: 0, expect: 'shape(from 5px 5px, arc to 15px -15px of 10px 20px, arc by 15px -5px of 30px cw rotate 30deg large, arc to 25px 20px of 10px 5px small)'},
{at: 0.3, expect: 'shape(from 8px 8px, arc to 12px -18px of 13px 23px ccw small, arc by 18px -8px of 27px 27px rotate 102deg cw large, arc to 25px 20px of 10px 5px ccw small )'},
{at: 0.5, expect: 'shape(from 10px 10px, arc to 10px -20px of 15px 25px ccw small, arc by 20px -10px of 25px rotate 150deg cw large, arc to 25px 20px of 10px 5px cw small)'},
{at: 1, expect: 'shape(from 15px 15px, arc to 5px -25px of 20px 30px, arc by 25px -15px of 20px rotate 270deg cw small, arc to 25px 20px of 10px 5px cw small)'},
{at: 1.5, expect: 'shape(from 20px 20px, arc to 0px -30px of 25px 35px ccw small, arc by 30px -20px of 15px rotate 390deg cw small, arc to 25px 20px of 10px 5px cw small)'},
]);
</script>
</body>
|
