Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(85)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/interpolation/offset-path-interpolation.html

Issue 2720653002: CSS Motion Path: Implement animation for the offset-path property
Patch Set: move Created 3 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <meta charset="UTF-8"> 2 <meta charset="UTF-8">
3 <style>
4 .parent {
5 cx: 100px;
6 }
7 .target {
8 font-size: 16px;
9 cx: 50px;
10 }
11 .expected {
12 fill: green;
13 }
14 </style>
15 <body> 3 <body>
16 <template id="target-template"> 4 <template id="target-template">
17 <svg width="90" height="90"> 5 <div></div>
18 <path class="target" />
19 </svg>
20 </template> 6 </template>
21 <script src="resources/interpolation-test.js"></script> 7 <script src="resources/interpolation-test.js"></script>
22 <script> 8 <script>
23 'use strict'; 9 'use strict';
24 10
25 // Distinct number of path segments 11 // Distinct number of path segments
26 assertNoInterpolation({ 12 assertNoInterpolation({
27 property: 'd', 13 property: 'offset-path',
28 from: "path('m 0 0 h 1 h 2')", 14 from: "path('m 0 0 h 1 h 2')",
29 to: "path('m 0 0 h 3')" 15 to: "path('m 0 0 h 3')"
30 }); 16 });
31 17
32 assertNoInterpolation({ 18 assertNoInterpolation({
33 property: 'd', 19 property: 'offset-path',
34 from: "path('M 1 2 L 3 4 Z')", 20 from: "path('M 1 2 L 3 4 Z')",
35 to: "none" 21 to: "none"
36 }); 22 });
37 23
38 // Distinct segment types 24 // Distinct segment types
39 assertNoInterpolation({ 25 assertNoInterpolation({
40 property: 'd', 26 property: 'offset-path',
41 from: "path('m 10 0 h 1')", 27 from: "path('m 10 0 h 1')",
42 to: "path('m 20 0 v 2')" 28 to: "path('m 20 0 v 2')"
43 }); 29 });
44 30
45 assertNoInterpolation({ 31 assertNoInterpolation({
46 property: 'd', 32 property: 'offset-path',
47 from: "path('m 1 2 l 3 4 Z')", 33 from: "path('m 1 2 l 3 4 Z')",
48 to: "path('m 1 2 l 3 4')" 34 to: "path('m 1 2 l 3 4')"
49 }); 35 });
50 36
51 // Exercise each segment type 37 // Exercise each segment type
52 assertInterpolation({ 38 assertInterpolation({
53 property: 'd', 39 property: 'offset-path',
54 from: "path('m 0 0 Z')", 40 from: "path('m 0 0 Z')",
55 to: "path('m 0 0 Z')" 41 to: "path('m 0 0 Z')"
56 }, [ 42 }, [
57 {at: -0.4, is: "path('m 0 0 Z')"}, 43 {at: -0.4, is: "path('m 0 0 Z')"},
58 {at: 0, is: "path('m 0 0 Z')"}, 44 {at: 0, is: "path('m 0 0 Z')"},
59 {at: 0.2, is: "path('m 0 0 Z')"}, 45 {at: 0.2, is: "path('m 0 0 Z')"},
60 {at: 0.6, is: "path('m 0 0 Z')"}, 46 {at: 0.6, is: "path('m 0 0 Z')"},
61 {at: 1, is: "path('m 0 0 Z')"}, 47 {at: 1, is: "path('m 0 0 Z')"},
62 {at: 1.4, is: "path('m 0 0 Z')"} 48 {at: 1.4, is: "path('m 0 0 Z')"}
63 ]); 49 ]);
64 50
65 assertInterpolation({ 51 assertInterpolation({
66 property: 'd', 52 property: 'offset-path',
67 from: "path('M 20 50')", 53 from: "path('M 20 50')",
68 to: "path('M 30 70')" 54 to: "path('M 30 70')"
69 }, [ 55 }, [
70 {at: -0.4, is: "path('M 16 42')"}, 56 {at: -0.4, is: "path('M 16 42')"},
71 {at: 0, is: "path('M 20 50')"}, 57 {at: 0, is: "path('M 20 50')"},
72 {at: 0.2, is: "path('M 22 54')"}, 58 {at: 0.2, is: "path('M 22 54')"},
73 {at: 0.6, is: "path('M 26 62')"}, 59 {at: 0.6, is: "path('M 26 62')"},
74 {at: 1, is: "path('M 30 70')"}, 60 {at: 1, is: "path('M 30 70')"},
75 {at: 1.4, is: "path('M 34 78')"} 61 {at: 1.4, is: "path('M 34 78')"}
76 ]); 62 ]);
77 63
78 assertInterpolation({ 64 assertInterpolation({
79 property: 'd', 65 property: 'offset-path',
80 from: "path('m 20 50')", 66 from: "path('m 20 50')",
81 to: "path('m 30 70')" 67 to: "path('m 30 70')"
82 }, [ 68 }, [
83 {at: -0.4, is: "path('m 16 42')"}, 69 {at: -0.4, is: "path('m 16 42')"},
84 {at: 0, is: "path('m 20 50')"}, 70 {at: 0, is: "path('m 20 50')"},
85 {at: 0.2, is: "path('m 22 54')"}, 71 {at: 0.2, is: "path('m 22 54')"},
86 {at: 0.6, is: "path('m 26 62')"}, 72 {at: 0.6, is: "path('m 26 62')"},
87 {at: 1, is: "path('m 30 70')"}, 73 {at: 1, is: "path('m 30 70')"},
88 {at: 1.4, is: "path('m 34 78')"} 74 {at: 1.4, is: "path('m 34 78')"}
89 ]); 75 ]);
90 76
91 assertInterpolation({ 77 assertInterpolation({
92 property: 'd', 78 property: 'offset-path',
93 from: "path('m 0 0 L 20 50')", 79 from: "path('m 0 0 L 20 50')",
94 to: "path('m 0 0 L 30 70')" 80 to: "path('m 0 0 L 30 70')"
95 }, [ 81 }, [
96 {at: -0.4, is: "path('m 0 0 L 16 42')"}, 82 {at: -0.4, is: "path('m 0 0 L 16 42')"},
97 {at: 0, is: "path('m 0 0 L 20 50')"}, 83 {at: 0, is: "path('m 0 0 L 20 50')"},
98 {at: 0.2, is: "path('m 0 0 L 22 54')"}, 84 {at: 0.2, is: "path('m 0 0 L 22 54')"},
99 {at: 0.6, is: "path('m 0 0 L 26 62')"}, 85 {at: 0.6, is: "path('m 0 0 L 26 62')"},
100 {at: 1, is: "path('m 0 0 L 30 70')"}, 86 {at: 1, is: "path('m 0 0 L 30 70')"},
101 {at: 1.4, is: "path('m 0 0 L 34 78')"} 87 {at: 1.4, is: "path('m 0 0 L 34 78')"}
102 ]); 88 ]);
103 89
104 assertInterpolation({ 90 assertInterpolation({
105 property: 'd', 91 property: 'offset-path',
106 from: "path('m 0 0 l 20 50')", 92 from: "path('m 0 0 l 20 50')",
107 to: "path('m 0 0 l 30 70')" 93 to: "path('m 0 0 l 30 70')"
108 }, [ 94 }, [
109 {at: -0.4, is: "path('m 0 0 l 16 42')"}, 95 {at: -0.4, is: "path('m 0 0 l 16 42')"},
110 {at: 0, is: "path('m 0 0 l 20 50')"}, 96 {at: 0, is: "path('m 0 0 l 20 50')"},
111 {at: 0.2, is: "path('m 0 0 l 22 54')"}, 97 {at: 0.2, is: "path('m 0 0 l 22 54')"},
112 {at: 0.6, is: "path('m 0 0 l 26 62')"}, 98 {at: 0.6, is: "path('m 0 0 l 26 62')"},
113 {at: 1, is: "path('m 0 0 l 30 70')"}, 99 {at: 1, is: "path('m 0 0 l 30 70')"},
114 {at: 1.4, is: "path('m 0 0 l 34 78')"} 100 {at: 1.4, is: "path('m 0 0 l 34 78')"}
115 ]); 101 ]);
116 102
117 assertInterpolation({ 103 assertInterpolation({
118 property: 'd', 104 property: 'offset-path',
119 from: "path('m 0 0 C 32 42 52 62 12 22')", 105 from: "path('m 0 0 C 32 42 52 62 12 22')",
120 to: "path('m 0 0 C 37 47 57 67 17 27')", 106 to: "path('m 0 0 C 37 47 57 67 17 27')",
121 }, [ 107 }, [
122 {at: -0.4, is: "path('m 0 0 C 30 40 50 60 10 20')"}, 108 {at: -0.4, is: "path('m 0 0 C 30 40 50 60 10 20')"},
123 {at: 0, is: "path('m 0 0 C 32 42 52 62 12 22')"}, 109 {at: 0, is: "path('m 0 0 C 32 42 52 62 12 22')"},
124 {at: 0.2, is: "path('m 0 0 C 33 43 53 63 13 23')"}, 110 {at: 0.2, is: "path('m 0 0 C 33 43 53 63 13 23')"},
125 {at: 0.6, is: "path('m 0 0 C 35 45 55 65 15 25')"}, 111 {at: 0.6, is: "path('m 0 0 C 35 45 55 65 15 25')"},
126 {at: 1, is: "path('m 0 0 C 37 47 57 67 17 27')"}, 112 {at: 1, is: "path('m 0 0 C 37 47 57 67 17 27')"},
127 {at: 1.4, is: "path('m 0 0 C 39 49 59 69 19 29')"} 113 {at: 1.4, is: "path('m 0 0 C 39 49 59 69 19 29')"}
128 ]); 114 ]);
129 115
130 assertInterpolation({ 116 assertInterpolation({
131 property: 'd', 117 property: 'offset-path',
132 from: "path('m 0 0 c 32 42 52 62 12 22')", 118 from: "path('m 0 0 c 32 42 52 62 12 22')",
133 to: "path('m 0 0 c 37 47 57 67 17 27')" 119 to: "path('m 0 0 c 37 47 57 67 17 27')"
134 }, [ 120 }, [
135 {at: -0.4, is: "path('m 0 0 c 30 40 50 60 10 20')"}, 121 {at: -0.4, is: "path('m 0 0 c 30 40 50 60 10 20')"},
136 {at: 0, is: "path('m 0 0 c 32 42 52 62 12 22')"}, 122 {at: 0, is: "path('m 0 0 c 32 42 52 62 12 22')"},
137 {at: 0.2, is: "path('m 0 0 c 33 43 53 63 13 23')"}, 123 {at: 0.2, is: "path('m 0 0 c 33 43 53 63 13 23')"},
138 {at: 0.6, is: "path('m 0 0 c 35 45 55 65 15 25')"}, 124 {at: 0.6, is: "path('m 0 0 c 35 45 55 65 15 25')"},
139 {at: 1, is: "path('m 0 0 c 37 47 57 67 17 27')"}, 125 {at: 1, is: "path('m 0 0 c 37 47 57 67 17 27')"},
140 {at: 1.4, is: "path('m 0 0 c 39 49 59 69 19 29')"} 126 {at: 1.4, is: "path('m 0 0 c 39 49 59 69 19 29')"}
141 ]); 127 ]);
142 128
143 assertInterpolation({ 129 assertInterpolation({
144 property: 'd', 130 property: 'offset-path',
145 from: "path('m 0 0 Q 32 42 52 62')", 131 from: "path('m 0 0 Q 32 42 52 62')",
146 to: "path('m 0 0 Q 37 47 57 67')" 132 to: "path('m 0 0 Q 37 47 57 67')"
147 }, [ 133 }, [
148 {at: -0.4, is: "path('m 0 0 Q 30 40 50 60')"}, 134 {at: -0.4, is: "path('m 0 0 Q 30 40 50 60')"},
149 {at: 0, is: "path('m 0 0 Q 32 42 52 62')"}, 135 {at: 0, is: "path('m 0 0 Q 32 42 52 62')"},
150 {at: 0.2, is: "path('m 0 0 Q 33 43 53 63')"}, 136 {at: 0.2, is: "path('m 0 0 Q 33 43 53 63')"},
151 {at: 0.6, is: "path('m 0 0 Q 35 45 55 65')"}, 137 {at: 0.6, is: "path('m 0 0 Q 35 45 55 65')"},
152 {at: 1, is: "path('m 0 0 Q 37 47 57 67')"}, 138 {at: 1, is: "path('m 0 0 Q 37 47 57 67')"},
153 {at: 1.4, is: "path('m 0 0 Q 39 49 59 69')"} 139 {at: 1.4, is: "path('m 0 0 Q 39 49 59 69')"}
154 ]); 140 ]);
155 141
156 assertInterpolation({ 142 assertInterpolation({
157 property: 'd', 143 property: 'offset-path',
158 from: "path('m 0 0 q 32 42 52 62')", 144 from: "path('m 0 0 q 32 42 52 62')",
159 to: "path('m 0 0 q 37 47 57 67')" 145 to: "path('m 0 0 q 37 47 57 67')"
160 }, [ 146 }, [
161 {at: -0.4, is: "path('m 0 0 q 30 40 50 60')"}, 147 {at: -0.4, is: "path('m 0 0 q 30 40 50 60')"},
162 {at: 0, is: "path('m 0 0 q 32 42 52 62')"}, 148 {at: 0, is: "path('m 0 0 q 32 42 52 62')"},
163 {at: 0.2, is: "path('m 0 0 q 33 43 53 63')"}, 149 {at: 0.2, is: "path('m 0 0 q 33 43 53 63')"},
164 {at: 0.6, is: "path('m 0 0 q 35 45 55 65')"}, 150 {at: 0.6, is: "path('m 0 0 q 35 45 55 65')"},
165 {at: 1, is: "path('m 0 0 q 37 47 57 67')"}, 151 {at: 1, is: "path('m 0 0 q 37 47 57 67')"},
166 {at: 1.4, is: "path('m 0 0 q 39 49 59 69')"} 152 {at: 1.4, is: "path('m 0 0 q 39 49 59 69')"}
167 ]); 153 ]);
168 154
169 assertInterpolation({ 155 assertInterpolation({
170 property: 'd', 156 property: 'offset-path',
171 from: "path('m 0 0 A 10 20 30 1 0 40 50')", 157 from: "path('m 0 0 A 10 20 30 1 0 40 50')",
172 to: "path('m 0 0 A 60 70 80 0 1 90 100')" 158 to: "path('m 0 0 A 60 70 80 0 1 90 100')"
173 }, [ 159 }, [
174 {at: -0.4, is: "path('m 0 0 A -10 0 10 1 0 20 30')"}, 160 {at: -0.4, is: "path('m 0 0 A -10 0 10 1 0 20 30')"},
175 {at: 0, is: "path('m 0 0 A 10 20 30 1 0 40 50')"}, 161 {at: 0, is: "path('m 0 0 A 10 20 30 1 0 40 50')"},
176 {at: 0.2, is: "path('m 0 0 A 20 30 40 1 0 50 60')"}, 162 {at: 0.2, is: "path('m 0 0 A 20 30 40 1 0 50 60')"},
177 {at: 0.6, is: "path('m 0 0 A 40 50 60 0 1 70 80')"}, 163 {at: 0.6, is: "path('m 0 0 A 40 50 60 0 1 70 80')"},
178 {at: 1, is: "path('m 0 0 A 60 70 80 0 1 90 100')"}, 164 {at: 1, is: "path('m 0 0 A 60 70 80 0 1 90 100')"},
179 {at: 1.4, is: "path('m 0 0 A 80 90 100 0 1 110 120')"}, 165 {at: 1.4, is: "path('m 0 0 A 80 90 100 0 1 110 120')"},
180 ]); 166 ]);
181 167
182 assertInterpolation({ 168 assertInterpolation({
183 property: 'd', 169 property: 'offset-path',
184 from: "path('m 0 0 a 10 20 30 1 0 40 50')", 170 from: "path('m 0 0 a 10 20 30 1 0 40 50')",
185 to: "path('m 0 0 a 60 70 80 0 1 90 100')" 171 to: "path('m 0 0 a 60 70 80 0 1 90 100')"
186 }, [ 172 }, [
187 {at: -0.4, is: "path('m 0 0 a -10 0 10 1 0 20 30')"}, 173 {at: -0.4, is: "path('m 0 0 a -10 0 10 1 0 20 30')"},
188 {at: 0, is: "path('m 0 0 a 10 20 30 1 0 40 50')"}, 174 {at: 0, is: "path('m 0 0 a 10 20 30 1 0 40 50')"},
189 {at: 0.2, is: "path('m 0 0 a 20 30 40 1 0 50 60')"}, 175 {at: 0.2, is: "path('m 0 0 a 20 30 40 1 0 50 60')"},
190 {at: 0.6, is: "path('m 0 0 a 40 50 60 0 1 70 80')"}, 176 {at: 0.6, is: "path('m 0 0 a 40 50 60 0 1 70 80')"},
191 {at: 1, is: "path('m 0 0 a 60 70 80 0 1 90 100')"}, 177 {at: 1, is: "path('m 0 0 a 60 70 80 0 1 90 100')"},
192 {at: 1.4, is: "path('m 0 0 a 80 90 100 0 1 110 120')"} 178 {at: 1.4, is: "path('m 0 0 a 80 90 100 0 1 110 120')"}
193 ]); 179 ]);
194 180
195 assertInterpolation({ 181 assertInterpolation({
196 property: 'd', 182 property: 'offset-path',
197 from: "path('m 0 0 H 10')", 183 from: "path('m 0 0 H 10')",
198 to: "path('m 0 0 H 60')" 184 to: "path('m 0 0 H 60')"
199 }, [ 185 }, [
200 {at: -0.4, is: "path('m 0 0 H -10')"}, 186 {at: -0.4, is: "path('m 0 0 H -10')"},
201 {at: 0, is: "path('m 0 0 H 10')"}, 187 {at: 0, is: "path('m 0 0 H 10')"},
202 {at: 0.2, is: "path('m 0 0 H 20')"}, 188 {at: 0.2, is: "path('m 0 0 H 20')"},
203 {at: 0.6, is: "path('m 0 0 H 40')"}, 189 {at: 0.6, is: "path('m 0 0 H 40')"},
204 {at: 1, is: "path('m 0 0 H 60')"}, 190 {at: 1, is: "path('m 0 0 H 60')"},
205 {at: 1.4, is: "path('m 0 0 H 80')"} 191 {at: 1.4, is: "path('m 0 0 H 80')"}
206 ]); 192 ]);
207 193
208 assertInterpolation({ 194 assertInterpolation({
209 property: 'd', 195 property: 'offset-path',
210 from: "path('m 0 0 h 10')", 196 from: "path('m 0 0 h 10')",
211 to: "path('m 0 0 h 60')" 197 to: "path('m 0 0 h 60')"
212 }, [ 198 }, [
213 {at: -0.4, is: "path('m 0 0 h -10')"}, 199 {at: -0.4, is: "path('m 0 0 h -10')"},
214 {at: 0, is: "path('m 0 0 h 10')"}, 200 {at: 0, is: "path('m 0 0 h 10')"},
215 {at: 0.2, is: "path('m 0 0 h 20')"}, 201 {at: 0.2, is: "path('m 0 0 h 20')"},
216 {at: 0.6, is: "path('m 0 0 h 40')"}, 202 {at: 0.6, is: "path('m 0 0 h 40')"},
217 {at: 1, is: "path('m 0 0 h 60')"}, 203 {at: 1, is: "path('m 0 0 h 60')"},
218 {at: 1.4, is: "path('m 0 0 h 80')"} 204 {at: 1.4, is: "path('m 0 0 h 80')"}
219 ]); 205 ]);
220 206
221 assertInterpolation({ 207 assertInterpolation({
222 property: 'd', 208 property: 'offset-path',
223 from: "path('m 0 0 V 10')", 209 from: "path('m 0 0 V 10')",
224 to: "path('m 0 0 V 60')" 210 to: "path('m 0 0 V 60')"
225 }, [ 211 }, [
226 {at: -0.4, is: "path('m 0 0 V -10')"}, 212 {at: -0.4, is: "path('m 0 0 V -10')"},
227 {at: 0, is: "path('m 0 0 V 10')"}, 213 {at: 0, is: "path('m 0 0 V 10')"},
228 {at: 0.2, is: "path('m 0 0 V 20')"}, 214 {at: 0.2, is: "path('m 0 0 V 20')"},
229 {at: 0.6, is: "path('m 0 0 V 40')"}, 215 {at: 0.6, is: "path('m 0 0 V 40')"},
230 {at: 1, is: "path('m 0 0 V 60')"}, 216 {at: 1, is: "path('m 0 0 V 60')"},
231 {at: 1.4, is: "path('m 0 0 V 80')"} 217 {at: 1.4, is: "path('m 0 0 V 80')"}
232 ]); 218 ]);
233 219
234 assertInterpolation({ 220 assertInterpolation({
235 property: 'd', 221 property: 'offset-path',
236 from: "path('m 0 0 v 10')", 222 from: "path('m 0 0 v 10')",
237 to: "path('m 0 0 v 60')" 223 to: "path('m 0 0 v 60')"
238 }, [ 224 }, [
239 {at: -0.4, is: "path('m 0 0 v -10')"}, 225 {at: -0.4, is: "path('m 0 0 v -10')"},
240 {at: 0, is: "path('m 0 0 v 10')"}, 226 {at: 0, is: "path('m 0 0 v 10')"},
241 {at: 0.2, is: "path('m 0 0 v 20')"}, 227 {at: 0.2, is: "path('m 0 0 v 20')"},
242 {at: 0.6, is: "path('m 0 0 v 40')"}, 228 {at: 0.6, is: "path('m 0 0 v 40')"},
243 {at: 1, is: "path('m 0 0 v 60')"}, 229 {at: 1, is: "path('m 0 0 v 60')"},
244 {at: 1.4, is: "path('m 0 0 v 80')"} 230 {at: 1.4, is: "path('m 0 0 v 80')"}
245 ]); 231 ]);
246 232
247 assertInterpolation({ 233 assertInterpolation({
248 property: 'd', 234 property: 'offset-path',
249 from: "path('m 0 0 S 32 42 52 62')", 235 from: "path('m 0 0 S 32 42 52 62')",
250 to: "path('m 0 0 S 37 47 57 67')" 236 to: "path('m 0 0 S 37 47 57 67')"
251 }, [ 237 }, [
252 {at: -0.4, is: "path('m 0 0 S 30 40 50 60')"}, 238 {at: -0.4, is: "path('m 0 0 S 30 40 50 60')"},
253 {at: 0, is: "path('m 0 0 S 32 42 52 62')"}, 239 {at: 0, is: "path('m 0 0 S 32 42 52 62')"},
254 {at: 0.2, is: "path('m 0 0 S 33 43 53 63')"}, 240 {at: 0.2, is: "path('m 0 0 S 33 43 53 63')"},
255 {at: 0.6, is: "path('m 0 0 S 35 45 55 65')"}, 241 {at: 0.6, is: "path('m 0 0 S 35 45 55 65')"},
256 {at: 1, is: "path('m 0 0 S 37 47 57 67')"}, 242 {at: 1, is: "path('m 0 0 S 37 47 57 67')"},
257 {at: 1.4, is: "path('m 0 0 S 39 49 59 69')"}, 243 {at: 1.4, is: "path('m 0 0 S 39 49 59 69')"},
258 ]); 244 ]);
259 245
260 assertInterpolation({ 246 assertInterpolation({
261 property: 'd', 247 property: 'offset-path',
262 from: "path('m 0 0 s 32 42 52 62')", 248 from: "path('m 0 0 s 32 42 52 62')",
263 to: "path('m 0 0 s 37 47 57 67')" 249 to: "path('m 0 0 s 37 47 57 67')"
264 }, [ 250 }, [
265 {at: -0.4, is: "path('m 0 0 s 30 40 50 60')"}, 251 {at: -0.4, is: "path('m 0 0 s 30 40 50 60')"},
266 {at: 0, is: "path('m 0 0 s 32 42 52 62')"}, 252 {at: 0, is: "path('m 0 0 s 32 42 52 62')"},
267 {at: 0.2, is: "path('m 0 0 s 33 43 53 63')"}, 253 {at: 0.2, is: "path('m 0 0 s 33 43 53 63')"},
268 {at: 0.6, is: "path('m 0 0 s 35 45 55 65')"}, 254 {at: 0.6, is: "path('m 0 0 s 35 45 55 65')"},
269 {at: 1, is: "path('m 0 0 s 37 47 57 67')"}, 255 {at: 1, is: "path('m 0 0 s 37 47 57 67')"},
270 {at: 1.4, is: "path('m 0 0 s 39 49 59 69')"}, 256 {at: 1.4, is: "path('m 0 0 s 39 49 59 69')"},
271 ]); 257 ]);
272 258
273 assertInterpolation({ 259 assertInterpolation({
274 property: 'd', 260 property: 'offset-path',
275 from: "path('m 0 0 T 20 50')", 261 from: "path('m 0 0 T 20 50')",
276 to: "path('m 0 0 T 30 70')" 262 to: "path('m 0 0 T 30 70')"
277 }, [ 263 }, [
278 {at: -0.4, is: "path('m 0 0 T 16 42')"}, 264 {at: -0.4, is: "path('m 0 0 T 16 42')"},
279 {at: 0, is: "path('m 0 0 T 20 50')"}, 265 {at: 0, is: "path('m 0 0 T 20 50')"},
280 {at: 0.2, is: "path('m 0 0 T 22 54')"}, 266 {at: 0.2, is: "path('m 0 0 T 22 54')"},
281 {at: 0.6, is: "path('m 0 0 T 26 62')"}, 267 {at: 0.6, is: "path('m 0 0 T 26 62')"},
282 {at: 1, is: "path('m 0 0 T 30 70')"}, 268 {at: 1, is: "path('m 0 0 T 30 70')"},
283 {at: 1.4, is: "path('m 0 0 T 34 78')"}, 269 {at: 1.4, is: "path('m 0 0 T 34 78')"},
284 ]); 270 ]);
285 271
286 assertInterpolation({ 272 assertInterpolation({
287 property: 'd', 273 property: 'offset-path',
288 from: "path('m 0 0 t 20 50')", 274 from: "path('m 0 0 t 20 50')",
289 to: "path('m 0 0 t 30 70')" 275 to: "path('m 0 0 t 30 70')"
290 }, [ 276 }, [
291 {at: -0.4, is: "path('m 0 0 t 16 42')"}, 277 {at: -0.4, is: "path('m 0 0 t 16 42')"},
292 {at: 0, is: "path('m 0 0 t 20 50')"}, 278 {at: 0, is: "path('m 0 0 t 20 50')"},
293 {at: 0.2, is: "path('m 0 0 t 22 54')"}, 279 {at: 0.2, is: "path('m 0 0 t 22 54')"},
294 {at: 0.6, is: "path('m 0 0 t 26 62')"}, 280 {at: 0.6, is: "path('m 0 0 t 26 62')"},
295 {at: 1, is: "path('m 0 0 t 30 70')"}, 281 {at: 1, is: "path('m 0 0 t 30 70')"},
296 {at: 1.4, is: "path('m 0 0 t 34 78')"}, 282 {at: 1.4, is: "path('m 0 0 t 34 78')"},
297 ]); 283 ]);
298 284
299 // Mix relative and non-relative 285 // Mix relative and non-relative
300 assertInterpolation({ 286 assertInterpolation({
301 property: 'd', 287 property: 'offset-path',
302 from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')", 288 from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",
303 to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 200 100 z')" 289 to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 200 100 z')"
304 }, [ 290 }, [
305 {at: -0.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 60 -180 Z')"}, 291 {at: -0.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 60 -180 Z')"},
306 {at: 0, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"}, 292 {at: 0, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
307 {at: 0.2, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 120 -60 Z')"}, 293 {at: 0.2, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 120 -60 Z')"},
308 {at: 0.6, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z')"}, 294 {at: 0.6, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z')"},
309 {at: 1, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 200 100 Z')"}, 295 {at: 1, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 200 100 Z')"},
310 {at: 1.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 240 180 Z')"}, 296 {at: 1.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 240 180 Z')"},
311 ]); 297 ]);
312 298
313 assertInterpolation({ 299 assertInterpolation({
314 property: 'd', 300 property: 'offset-path',
315 from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')", 301 from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",
316 to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z')" 302 to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z')"
317 }, [ 303 }, [
318 {at: -0.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"}, 304 {at: -0.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"},
319 {at: 0, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"}, 305 {at: 0, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
320 {at: 0.2, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"}, 306 {at: 0.2, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"},
321 {at: 0.6, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"}, 307 {at: 0.6, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"},
322 {at: 1, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"}, 308 {at: 1, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"},
323 {at: 1.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"}, 309 {at: 1.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"},
324 ]); 310 ]);
325 311
326 assertInterpolation({ 312 assertInterpolation({
327 property: 'd', 313 property: 'offset-path',
328 from: "path('m 10 20 l 20 30 z l 50 60 z m 70 80 l 90 60 z t 70 120')", 314 from: "path('m 10 20 l 20 30 z l 50 60 z m 70 80 l 90 60 z t 70 120')",
329 to: "path('M 110 120 L 130 150 Z L 80 110 Z M 100 140 L 190 200 Z T 210 220')" 315 to: "path('M 110 120 L 130 150 Z L 80 110 Z M 100 140 L 190 200 Z T 210 220')"
330 }, [ 316 }, [
331 {at: -0.4, is: "path('M -30 -20 L -10 10 Z L 52 68 Z M 72 84 L 162 144 Z T 126 220')"}, 317 {at: -0.4, is: "path('M -30 -20 L -10 10 Z L 52 68 Z M 72 84 L 162 144 Z T 126 220')"},
332 {at: 0, is: "path('m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120')"}, 318 {at: 0, is: "path('m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120')"},
333 {at: 0.2, is: "path('M 30 40 L 50 70 Z L 64 86 Z M 84 108 L 174 168 Z T 162 22 0')"}, 319 {at: 0.2, is: "path('M 30 40 L 50 70 Z L 64 86 Z M 84 108 L 174 168 Z T 162 22 0')"},
334 {at: 0.6, is: "path('M 70 80 L 90 110 Z L 72 98 Z M 92 124 L 182 184 Z T 186 2 20')"}, 320 {at: 0.6, is: "path('M 70 80 L 90 110 Z L 72 98 Z M 92 124 L 182 184 Z T 186 2 20')"},
335 {at: 1, is: "path('M 110 120 L 130 150 Z L 80 110 Z M 100 140 L 190 200 Z T 21 0 220')"}, 321 {at: 1, is: "path('M 110 120 L 130 150 Z L 80 110 Z M 100 140 L 190 200 Z T 21 0 220')"},
336 {at: 1.4, is: "path('M 150 160 L 170 190 Z L 88 122 Z M 108 156 L 198 216 Z T 234 220')"} 322 {at: 1.4, is: "path('M 150 160 L 170 190 Z L 88 122 Z M 108 156 L 198 216 Z T 234 220')"}
337 ]); 323 ]);
338 324
339 assertInterpolation({ 325 assertInterpolation({
340 property: 'd', 326 property: 'offset-path',
341 from: "path('m 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130')", 327 from: "path('m 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130')",
342 to: "path('M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 330')" 328 to: "path('M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 330')"
343 }, [ 329 }, [
344 {at: -0.4, is: "path('M -30 -20 C 14 38 4 48 54 58 C 136 146 186 156 166 176') "}, 330 {at: -0.4, is: "path('M -30 -20 C 14 38 4 48 54 58 C 136 146 186 156 166 176') "},
345 {at: 0, is: "path('m 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130')"}, 331 {at: 0, is: "path('m 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130')"},
346 {at: 0.2, is: "path('M 30 40 C 68 86 58 96 108 106 C 202 212 252 222 232 242') "}, 332 {at: 0.2, is: "path('M 30 40 C 68 86 58 96 108 106 C 202 212 252 222 232 242') "},
347 {at: 0.6, is: "path('M 70 80 C 104 118 94 128 144 138 C 246 256 296 266 276 28 6')"}, 333 {at: 0.6, is: "path('M 70 80 C 104 118 94 128 144 138 C 246 256 296 266 276 28 6')"},
348 {at: 1, is: "path('M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 3 30')"}, 334 {at: 1, is: "path('M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 3 30')"},
349 {at: 1.4, is: "path('M 150 160 C 176 182 166 192 216 202 C 334 344 384 354 364 374')"} 335 {at: 1.4, is: "path('M 150 160 C 176 182 166 192 216 202 C 334 344 384 354 364 374')"}
350 ]); 336 ]);
351 337
352 assertInterpolation({ 338 assertInterpolation({
353 property: 'd', 339 property: 'offset-path',
354 from: "path('m 10 20 q 30 60 40 50 q 100 70 90 80')", 340 from: "path('m 10 20 q 30 60 40 50 q 100 70 90 80')",
355 to: "path('M 110 120 Q 130 160 140 150 Q 200 170 190 180')" 341 to: "path('M 110 120 Q 130 160 140 150 Q 200 170 190 180')"
356 }, [ 342 }, [
357 {at: -0.4, is: "path('M -30 -20 Q 4 48 14 38 Q 130 128 120 138')"}, 343 {at: -0.4, is: "path('M -30 -20 Q 4 48 14 38 Q 130 128 120 138')"},
358 {at: 0, is: "path('m 10 20 q 30 60 40 50 q 100 70 90 80')"}, 344 {at: 0, is: "path('m 10 20 q 30 60 40 50 q 100 70 90 80')"},
359 {at: 0.2, is: "path('M 30 40 Q 58 96 68 86 Q 160 146 150 156')"}, 345 {at: 0.2, is: "path('M 30 40 Q 58 96 68 86 Q 160 146 150 156')"},
360 {at: 0.6, is: "path('M 70 80 Q 94 128 104 118 Q 180 158 170 168')"}, 346 {at: 0.6, is: "path('M 70 80 Q 94 128 104 118 Q 180 158 170 168')"},
361 {at: 1, is: "path('M 110 120 Q 130 160 140 150 Q 200 170 190 180')"}, 347 {at: 1, is: "path('M 110 120 Q 130 160 140 150 Q 200 170 190 180')"},
362 {at: 1.4, is: "path('M 150 160 Q 166 192 176 182 Q 220 182 210 192')"} 348 {at: 1.4, is: "path('M 150 160 Q 166 192 176 182 Q 220 182 210 192')"}
363 ]); 349 ]);
364 350
365 assertInterpolation({ 351 assertInterpolation({
366 property: 'd', 352 property: 'offset-path',
367 from: "path('m 10 20 s 30 60 40 50 s 100 70 90 80')", 353 from: "path('m 10 20 s 30 60 40 50 s 100 70 90 80')",
368 to: "path('M 110 120 S 130 160 140 150 S 200 170 190 180')" 354 to: "path('M 110 120 S 130 160 140 150 S 200 170 190 180')"
369 }, [ 355 }, [
370 {at: -0.4, is: "path('M -30 -20 S 4 48 14 38 S 130 128 120 138')"}, 356 {at: -0.4, is: "path('M -30 -20 S 4 48 14 38 S 130 128 120 138')"},
371 {at: 0, is: "path('m 10 20 s 30 60 40 50 s 100 70 90 80')"}, 357 {at: 0, is: "path('m 10 20 s 30 60 40 50 s 100 70 90 80')"},
372 {at: 0.2, is: "path('M 30 40 S 58 96 68 86 S 160 146 150 156')"}, 358 {at: 0.2, is: "path('M 30 40 S 58 96 68 86 S 160 146 150 156')"},
373 {at: 0.6, is: "path('M 70 80 S 94 128 104 118 S 180 158 170 168')"}, 359 {at: 0.6, is: "path('M 70 80 S 94 128 104 118 S 180 158 170 168')"},
374 {at: 1, is: "path('M 110 120 S 130 160 140 150 S 200 170 190 180')"}, 360 {at: 1, is: "path('M 110 120 S 130 160 140 150 S 200 170 190 180')"},
375 {at: 1.4, is: "path('M 150 160 S 166 192 176 182 S 220 182 210 192')"} 361 {at: 1.4, is: "path('M 150 160 S 166 192 176 182 S 220 182 210 192')"}
376 ]); 362 ]);
377 363
378 assertInterpolation({ 364 assertInterpolation({
379 property: 'd', 365 property: 'offset-path',
380 from: "path('m 10 20 h 30 v 40 h 50 v 60 l 70 80')", 366 from: "path('m 10 20 h 30 v 40 h 50 v 60 l 70 80')",
381 to: "path('M 110 120 H 130 V 140 H 250 V 260 L 270 280')" 367 to: "path('M 110 120 H 130 V 140 H 250 V 260 L 270 280')"
382 }, [ 368 }, [
383 {at: -0.4, is: "path('M -30 -20 H 4 V 28 H 26 V 64 L 116 168')"}, 369 {at: -0.4, is: "path('M -30 -20 H 4 V 28 H 26 V 64 L 116 168')"},
384 {at: 0, is: "path('m 10 20 h 30 v 40 h 50 v 60 l 70 80')"}, 370 {at: 0, is: "path('m 10 20 h 30 v 40 h 50 v 60 l 70 80')"},
385 {at: 0.2, is: "path('M 30 40 H 58 V 76 H 122 V 148 L 182 216')"}, 371 {at: 0.2, is: "path('M 30 40 H 58 V 76 H 122 V 148 L 182 216')"},
386 {at: 0.6, is: "path('M 70 80 H 94 V 108 H 186 V 204 L 226 248')"}, 372 {at: 0.6, is: "path('M 70 80 H 94 V 108 H 186 V 204 L 226 248')"},
387 {at: 1, is: "path('M 110 120 H 130 V 140 H 250 V 260 L 270 280')"}, 373 {at: 1, is: "path('M 110 120 H 130 V 140 H 250 V 260 L 270 280')"},
388 {at: 1.4, is: "path('M 150 160 H 166 V 172 H 314 V 316 L 314 312')"} 374 {at: 1.4, is: "path('M 150 160 H 166 V 172 H 314 V 316 L 314 312')"}
389 ]); 375 ]);
390 376
391 assertInterpolation({ 377 assertInterpolation({
392 property: 'd', 378 property: 'offset-path',
393 from: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')", 379 from: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')",
394 to: "path('M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100')" 380 to: "path('M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100')"
395 }, [ 381 }, [
396 {at: -0.4, is: "path('M 6 16 A -10 0 10 1 0 34 58 A 90 100 10 1 1 230 128')"}, 382 {at: -0.4, is: "path('M 6 16 A -10 0 10 1 0 34 58 A 90 100 10 1 1 230 128')"},
397 {at: 0, is: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')"}, 383 {at: 0, is: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')"},
398 {at: 0.2, is: "path('M 12 22 A 20 30 40 1 0 58 76 A 120 130 40 1 1 170 116')"} , 384 {at: 0.2, is: "path('M 12 22 A 20 30 40 1 0 58 76 A 120 130 40 1 1 170 116')"} ,
399 {at: 0.6, is: "path('M 16 26 A 40 50 60 0 1 74 88 A 140 150 60 0 1 130 108')"} , 385 {at: 0.6, is: "path('M 16 26 A 40 50 60 0 1 74 88 A 140 150 60 0 1 130 108')"} ,
400 {at: 1, is: "path('M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100')"}, 386 {at: 1, is: "path('M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100')"},
401 {at: 1.4, is: "path('M 24 34 A 80 90 100 0 1 106 112 A 180 190 100 0 1 50 92') "} 387 {at: 1.4, is: "path('M 24 34 A 80 90 100 0 1 106 112 A 180 190 100 0 1 50 92') "}
402 ]); 388 ]);
403 389
404 </script> 390 </script>
405 </body> 391 </body>
406 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698