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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation.html

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

Powered by Google App Engine
This is Rietveld 408576698