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
|
<!DOCTYPE html>
<meta charset="UTF-8">
<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">
<meta name="assert" content="clip-path supports animation">
<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.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.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.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 small, 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 1vh, 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)'},
]);
</script>
</body>
|
