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

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

Powered by Google App Engine
This is Rietveld 408576698