Skip to content

Commit 4c516db

Browse files
ericwilligerschromium-wpt-export-bot
ericwilligers
authored and
chromium-wpt-export-bot
committed
CSS: WPT for offset-path animation
Web platform tests for animation of path() strings and rays. Spec: https://drafts.fxtf.org/motion-1/#offset-path-property CSS WG discussion: w3c/fxtf-drafts#225 RESOLVED: Computed-value normalize case of path commands (to the absolute version). BUG=696395,696412 Change-Id: If084ed01addf86546e89efae8fe5053f5b87a282 Reviewed-on: https://chromium-review.googlesource.com/790012 Commit-Queue: Eric Willigers <[email protected]> Reviewed-by: Darren Shen <[email protected]> Cr-Commit-Position: refs/heads/master@{#519236}
1 parent 7a6e0b2 commit 4c516db

5 files changed

+525
-0
lines changed

‎css/motion/animation/offset-path-interpolation-001.html

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>offset-distance interpolation</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
8+
<meta name="assert" content="offset-distance supports animation.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/interpolation-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
'use strict';
16+
17+
// Distinct number of path segments
18+
test_no_interpolation({
19+
property: 'offset-path',
20+
from: "path('M 0 0 H 1 H 2')",
21+
to: "path('M 0 0 H 3')"
22+
});
23+
24+
test_no_interpolation({
25+
property: 'offset-path',
26+
from: "path('M 1 2 L 3 4 Z')",
27+
to: "none"
28+
});
29+
30+
// Distinct segment types
31+
test_no_interpolation({
32+
property: 'offset-path',
33+
from: "path('M 10 0 H 11')",
34+
to: "path('M 20 0 V 2')"
35+
});
36+
37+
test_no_interpolation({
38+
property: 'offset-path',
39+
from: "path('M 1 2 L 4 6 Z')",
40+
to: "path('M 1 2 H 4 V 6')"
41+
});
42+
43+
// Exercise each segment type
44+
test_interpolation({
45+
property: 'offset-path',
46+
from: "path('M 0 0 Z')",
47+
to: "path('M 0 0 Z')"
48+
}, [
49+
{at: -1, expect: "path('M 0 0 Z')"},
50+
{at: 0, expect: "path('M 0 0 Z')"},
51+
{at: 0.125, expect: "path('M 0 0 Z')"},
52+
{at: 0.875, expect: "path('M 0 0 Z')"},
53+
{at: 1, expect: "path('M 0 0 Z')"},
54+
{at: 2, expect: "path('M 0 0 Z')"}
55+
]);
56+
57+
test_interpolation({
58+
property: 'offset-path',
59+
from: "path('M 20 70')",
60+
to: "path('M 100 30')"
61+
}, [
62+
{at: -1, expect: "path('M -60 110')"},
63+
{at: 0, expect: "path('M 20 70')"},
64+
{at: 0.125, expect: "path('M 30 65')"},
65+
{at: 0.875, expect: "path('M 90 35')"},
66+
{at: 1, expect: "path('M 100 30')"},
67+
{at: 2, expect: "path('M 180 -10')"}
68+
]);
69+
70+
test_interpolation({
71+
property: 'offset-path',
72+
from: "path('m 20 70')",
73+
to: "path('m 100 30')"
74+
}, [
75+
{at: -1, expect: "path('M -60 110')"},
76+
{at: 0, expect: "path('M 20 70')"},
77+
{at: 0.125, expect: "path('M 30 65')"},
78+
{at: 0.875, expect: "path('M 90 35')"},
79+
{at: 1, expect: "path('M 100 30')"},
80+
{at: 2, expect: "path('M 180 -10')"}
81+
]);
82+
83+
test_interpolation({
84+
property: 'offset-path',
85+
from: "path('m 100 200 L 120 270')",
86+
to: "path('m 100 200 L 200 230')"
87+
}, [
88+
{at: -1, expect: "path('M 100 200 L 40 310')"},
89+
{at: 0, expect: "path('M 100 200 L 120 270')"},
90+
{at: 0.125, expect: "path('M 100 200 L 130 265')"},
91+
{at: 0.875, expect: "path('M 100 200 L 190 235')"},
92+
{at: 1, expect: "path('M 100 200 L 200 230')"},
93+
{at: 2, expect: "path('M 100 200 L 280 190')"}
94+
]);
95+
96+
test_interpolation({
97+
property: 'offset-path',
98+
from: "path('m 100 200 l 20 70')",
99+
to: "path('m 100 200 l 100 30')"
100+
}, [
101+
{at: -1, expect: "path('M 100 200 L 40 310')"},
102+
{at: 0, expect: "path('M 100 200 L 120 270')"},
103+
{at: 0.125, expect: "path('M 100 200 L 130 265')"},
104+
{at: 0.875, expect: "path('M 100 200 L 190 235')"},
105+
{at: 1, expect: "path('M 100 200 L 200 230')"},
106+
{at: 2, expect: "path('M 100 200 L 280 190')"}
107+
]);
108+
</script>
109+
</body>
110+
</html>

‎css/motion/animation/offset-path-interpolation-002.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>offset-distance interpolation</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
8+
<meta name="assert" content="offset-distance supports animation.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/interpolation-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
'use strict';
16+
17+
test_interpolation({
18+
property: 'offset-path',
19+
from: "path('M 20 10 C 32 42 52 62 120 2200')",
20+
to: "path('M 20 10 C 40 50 60 70 200 3000')",
21+
}, [
22+
{at: -1, expect: "path('M 20 10 C 24 34 44 54 40 1400')"},
23+
{at: 0, expect: "path('M 20 10 C 32 42 52 62 120 2200')"},
24+
{at: 0.125, expect: "path('M 20 10 C 33 43 53 63 130 2300')"},
25+
{at: 0.875, expect: "path('M 20 10 C 39 49 59 69 190 2900')"},
26+
{at: 1, expect: "path('M 20 10 C 40 50 60 70 200 3000')"},
27+
{at: 2, expect: "path('M 20 10 C 48 58 68 78 280 3800')"}
28+
]);
29+
test_interpolation({
30+
property: 'offset-path',
31+
from: "path('m 20 10 c 12 32 32 52 100 2190')",
32+
to: "path('m 20 10 c 20 40 40 60 180 2990')"
33+
}, [
34+
{at: -1, expect: "path('M 20 10 C 24 34 44 54 40 1400')"},
35+
{at: 0, expect: "path('M 20 10 C 32 42 52 62 120 2200')"},
36+
{at: 0.125, expect: "path('M 20 10 C 33 43 53 63 130 2300')"},
37+
{at: 0.875, expect: "path('M 20 10 C 39 49 59 69 190 2900')"},
38+
{at: 1, expect: "path('M 20 10 C 40 50 60 70 200 3000')"},
39+
{at: 2, expect: "path('M 20 10 C 48 58 68 78 280 3800')"}
40+
]);
41+
42+
test_interpolation({
43+
property: 'offset-path',
44+
from: "path('M 20 10 Q 32 42 120 2200')",
45+
to: "path('M 20 10 Q 40 50 200 3000')"
46+
}, [
47+
{at: -1, expect: "path('M 20 10 Q 24 34 40 1400')"},
48+
{at: 0, expect: "path('M 20 10 Q 32 42 120 2200')"},
49+
{at: 0.125, expect: "path('M 20 10 Q 33 43 130 2300')"},
50+
{at: 0.875, expect: "path('M 20 10 Q 39 49 190 2900')"},
51+
{at: 1, expect: "path('M 20 10 Q 40 50 200 3000')"},
52+
{at: 2, expect: "path('M 20 10 Q 48 58 280 3800')"}
53+
]);
54+
test_interpolation({
55+
property: 'offset-path',
56+
from: "path('m 20 10 q 12 32 100 2190')",
57+
to: "path('m 20 10 q 20 40 180 2990')"
58+
}, [
59+
{at: -1, expect: "path('M 20 10 Q 24 34 40 1400')"},
60+
{at: 0, expect: "path('M 20 10 Q 32 42 120 2200')"},
61+
{at: 0.125, expect: "path('M 20 10 Q 33 43 130 2300')"},
62+
{at: 0.875, expect: "path('M 20 10 Q 39 49 190 2900')"},
63+
{at: 1, expect: "path('M 20 10 Q 40 50 200 3000')"},
64+
{at: 2, expect: "path('M 20 10 Q 48 58 280 3800')"}
65+
]);
66+
67+
test_interpolation({
68+
property: 'offset-path',
69+
from: "path('M 100 400 A 10 20 30 1 0 140 450')",
70+
to: "path('M 300 200 A 50 60 70 0 1 380 290')"
71+
}, [
72+
{at: -1, expect: "path('M -100 600 A -30 -20 -10 1 0 -100 610')"},
73+
{at: 0, expect: "path('M 100 400 A 10 20 30 1 0 140 450')"},
74+
{at: 0.125, expect: "path('M 125 375 A 15 25 35 1 0 170 430')"},
75+
{at: 0.875, expect: "path('M 275 225 A 45 55 65 0 1 350 310')"},
76+
{at: 1, expect: "path('M 300 200 A 50 60 70 0 1 380 290')"},
77+
{at: 2, expect: "path('M 500 0 A 90 100 110 0 1 620 130')"}
78+
]);
79+
test_interpolation({
80+
property: 'offset-path',
81+
from: "path('m 100 400 a 10 20 30 1 0 40 50')",
82+
to: "path('m 300 200 a 50 60 70 0 1 80 90')"
83+
}, [
84+
{at: -1, expect: "path('M -100 600 A -30 -20 -10 1 0 -100 610')"},
85+
{at: 0, expect: "path('M 100 400 A 10 20 30 1 0 140 450')"},
86+
{at: 0.125, expect: "path('M 125 375 A 15 25 35 1 0 170 430')"},
87+
{at: 0.875, expect: "path('M 275 225 A 45 55 65 0 1 350 310')"},
88+
{at: 1, expect: "path('M 300 200 A 50 60 70 0 1 380 290')"},
89+
{at: 2, expect: "path('M 500 0 A 90 100 110 0 1 620 130')"}
90+
]);
91+
</script>
92+
</body>
93+
</html>

‎css/motion/animation/offset-path-interpolation-003.html

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>offset-distance interpolation</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
8+
<meta name="assert" content="offset-distance supports animation.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/interpolation-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
'use strict';
16+
17+
test_interpolation({
18+
property: 'offset-path',
19+
from: "path('M 50 60 H 70')",
20+
to: "path('M 10 140 H 270')"
21+
}, [
22+
{at: -1, expect: "path('M 90 -20 H -130')"},
23+
{at: 0, expect: "path('M 50 60 H 70')"},
24+
{at: 0.125, expect: "path('M 45 70 H 95')"},
25+
{at: 0.875, expect: "path('M 15 130 H 245')"},
26+
{at: 1, expect: "path('M 10 140 H 270')"},
27+
{at: 2, expect: "path('M -30 220 H 470')"}
28+
]);
29+
test_interpolation({
30+
property: 'offset-path',
31+
from: "path('m 50 60 h 20')",
32+
to: "path('m 10 140 h 260')"
33+
}, [
34+
{at: -1, expect: "path('M 90 -20 H -130')"},
35+
{at: 0, expect: "path('M 50 60 H 70')"},
36+
{at: 0.125, expect: "path('M 45 70 H 95')"},
37+
{at: 0.875, expect: "path('M 15 130 H 245')"},
38+
{at: 1, expect: "path('M 10 140 H 270')"},
39+
{at: 2, expect: "path('M -30 220 H 470')"}
40+
]);
41+
42+
test_interpolation({
43+
property: 'offset-path',
44+
from: "path('M 50 60 V 70')",
45+
to: "path('M 10 140 V 270')"
46+
}, [
47+
{at: -1, expect: "path('M 90 -20 V -130')"},
48+
{at: 0, expect: "path('M 50 60 V 70')"},
49+
{at: 0.125, expect: "path('M 45 70 V 95')"},
50+
{at: 0.875, expect: "path('M 15 130 V 245')"},
51+
{at: 1, expect: "path('M 10 140 V 270')"},
52+
{at: 2, expect: "path('M -30 220 V 470')"}
53+
]);
54+
test_interpolation({
55+
property: 'offset-path',
56+
from: "path('m 50 60 v 10')",
57+
to: "path('m 10 140 v 130')"
58+
}, [
59+
{at: -1, expect: "path('M 90 -20 V -130')"},
60+
{at: 0, expect: "path('M 50 60 V 70')"},
61+
{at: 0.125, expect: "path('M 45 70 V 95')"},
62+
{at: 0.875, expect: "path('M 15 130 V 245')"},
63+
{at: 1, expect: "path('M 10 140 V 270')"},
64+
{at: 2, expect: "path('M -30 220 V 470')"}
65+
]);
66+
67+
test_interpolation({
68+
property: 'offset-path',
69+
from: "path('M 12 34 S 45 67 89 123')",
70+
to: "path('M 20 26 S 61 51 113 99')"
71+
}, [
72+
{at: -1, expect: "path('M 4 42 S 29 83 65 147')"},
73+
{at: 0, expect: "path('M 12 34 S 45 67 89 123')"},
74+
{at: 0.125, expect: "path('M 13 33 S 47 65 92 120')"},
75+
{at: 0.875, expect: "path('M 19 27 S 59 53 110 102')"},
76+
{at: 1, expect: "path('M 20 26 S 61 51 113 99')"},
77+
{at: 2, expect: "path('M 28 18 S 77 35 137 75')"},
78+
]);
79+
test_interpolation({
80+
property: 'offset-path',
81+
from: "path('m 12 34 s 33 33 77 89')",
82+
to: "path('m 20 26 s 41 25 93 73')"
83+
}, [
84+
{at: -1, expect: "path('M 4 42 S 29 83 65 147')"},
85+
{at: 0, expect: "path('M 12 34 S 45 67 89 123')"},
86+
{at: 0.125, expect: "path('M 13 33 S 47 65 92 120')"},
87+
{at: 0.875, expect: "path('M 19 27 S 59 53 110 102')"},
88+
{at: 1, expect: "path('M 20 26 S 61 51 113 99')"},
89+
{at: 2, expect: "path('M 28 18 S 77 35 137 75')"},
90+
]);
91+
92+
test_interpolation({
93+
property: 'offset-path',
94+
from: "path('M 12 34 T 45 67')",
95+
to: "path('M 20 26 T 61 51')"
96+
}, [
97+
{at: -1, expect: "path('M 4 42 T 29 83')"},
98+
{at: 0, expect: "path('M 12 34 T 45 67')"},
99+
{at: 0.125, expect: "path('M 13 33 T 47 65')"},
100+
{at: 0.875, expect: "path('M 19 27 T 59 53')"},
101+
{at: 1, expect: "path('M 20 26 T 61 51')"},
102+
{at: 2, expect: "path('M 28 18 T 77 35')"},
103+
]);
104+
test_interpolation({
105+
property: 'offset-path',
106+
from: "path('m 12 34 t 33 33')",
107+
to: "path('m 20 26 t 41 25')"
108+
}, [
109+
{at: -1, expect: "path('M 4 42 T 29 83')"},
110+
{at: 0, expect: "path('M 12 34 T 45 67')"},
111+
{at: 0.125, expect: "path('M 13 33 T 47 65')"},
112+
{at: 0.875, expect: "path('M 19 27 T 59 53')"},
113+
{at: 1, expect: "path('M 20 26 T 61 51')"},
114+
{at: 2, expect: "path('M 28 18 T 77 35')"},
115+
]);
116+
</script>
117+
</body>
118+
</html>

0 commit comments

Comments
 (0)