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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/imported/wpt/web-animations/interfaces/KeyframeEffect/iterationComposite.html

Issue 2408083002: Revert of Import wpt@357b83b809e3cbc7a1805e7c3ca108a7980d782f (Closed)
Patch Set: Created 4 years, 2 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 | « third_party/WebKit/LayoutTests/imported/wpt/web-animations/interfaces/KeyframeEffect/getComputedTiming-expected.txt ('k') | third_party/WebKit/LayoutTests/imported/wpt/web-animations/interfaces/KeyframeEffect/iterationComposite-expected.txt » ('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 <title>KeyframeEffect.iterationComposite tests</title>
4 <link rel="help" href="https://w3c.github.io/web-animations/#effect-accumulation -section">
5 <script src=/resources/testharness.js></script>
6 <script src=/resources/testharnessreport.js></script>
7 <script src="../../testcommon.js"></script>
8 <div id="log"></div>
9 <script>
10 'use strict';
11
12 test(function(t) {
13 var div = createDiv(t);
14 var anim =
15 div.animate({ marginLeft: ['0px', '10px'] },
16 { duration: 100 * MS_PER_SEC,
17 easing: 'linear',
18 iterations: 10,
19 iterationComposite: 'accumulate' });
20 anim.pause();
21
22 anim.currentTime = anim.effect.timing.duration / 2;
23 assert_equals(getComputedStyle(div).marginLeft, '5px',
24 'Animated margin-left style at 50s of the first iteration');
25 anim.currentTime = anim.effect.timing.duration * 2;
26 assert_equals(getComputedStyle(div).marginLeft, '20px',
27 'Animated margin-left style at 0s of the third iteration');
28 anim.currentTime += anim.effect.timing.duration / 2;
29 assert_equals(getComputedStyle(div).marginLeft, '25px',
30 'Animated margin-left style at 50s of the third iteration');
31 }, 'iterationComposite of <length> type animation');
32
33 test(function(t) {
34 var parent = createDiv(t);
35 parent.style.width = '100px';
36 var div = createDiv(t);
37 parent.appendChild(div);
38
39 var anim =
40 div.animate({ width: ['0%', '50%'] },
41 { duration: 100 * MS_PER_SEC,
42 easing: 'linear',
43 iterations: 10,
44 iterationComposite: 'accumulate' });
45 anim.pause();
46
47 anim.currentTime = anim.effect.timing.duration / 2;
48 assert_equals(getComputedStyle(div).width, '25px',
49 'Animated width style at 50s of the first iteration');
50 anim.currentTime = anim.effect.timing.duration * 2;
51 assert_equals(getComputedStyle(div).width, '100px',
52 'Animated width style at 0s of the third iteration');
53 anim.currentTime += anim.effect.timing.duration / 2;
54 assert_equals(getComputedStyle(div).width, '125px',
55 'Animated width style at 50s of the third iteration');
56 }, 'iterationComposite of <percentage> type animation');
57
58 test(function(t) {
59 var div = createDiv(t);
60 var anim =
61 div.animate({ color: ['rgb(0, 0, 0)', 'rgb(120, 120, 120)'] },
62 { duration: 100 * MS_PER_SEC,
63 easing: 'linear',
64 iterations: 10,
65 iterationComposite: 'accumulate' });
66 anim.pause();
67
68 anim.currentTime = anim.effect.timing.duration / 2;
69 assert_equals(getComputedStyle(div).color, 'rgb(60, 60, 60)',
70 'Animated color style at 50s of the first iteration');
71 anim.currentTime = anim.effect.timing.duration * 2;
72 assert_equals(getComputedStyle(div).color, 'rgb(240, 240, 240)',
73 'Animated color style at 0s of the third iteration');
74 anim.currentTime += anim.effect.timing.duration / 2;
75 assert_equals(getComputedStyle(div).color, 'rgb(255, 255, 255)',
76 'Animated color style at 50s of the third iteration');
77 }, 'iterationComposite of <color> type animation');
78
79 test(function(t) {
80 var div = createDiv(t);
81 var anim =
82 div.animate({ color: ['rgb(0, 120, 0)', 'rgb(60, 60, 60)'] },
83 { duration: 100 * MS_PER_SEC,
84 easing: 'linear',
85 iterations: 10,
86 iterationComposite: 'accumulate' });
87 anim.pause();
88
89 anim.currentTime = anim.effect.timing.duration / 2;
90 assert_equals(getComputedStyle(div).color, 'rgb(30, 90, 30)',
91 'Animated color style at 50s of the first iteration');
92 anim.currentTime = anim.effect.timing.duration * 2;
93 assert_equals(getComputedStyle(div).color, 'rgb(120, 240, 120)',
94 'Animated color style at 0s of the third iteration');
95 anim.currentTime += anim.effect.timing.duration / 2;
96 // The green color is (240 + 180) / 2 = 210
97 assert_equals(getComputedStyle(div).color, 'rgb(150, 210, 150)',
98 'Animated color style at 50s of the third iteration');
99 }, 'iterationComposite of <color> type animation that green component is ' +
100 'decreasing');
101
102 test(function(t) {
103 var div = createDiv(t);
104 var anim =
105 div.animate({ flexGrow: [0, 10] },
106 { duration: 100 * MS_PER_SEC,
107 easing: 'linear',
108 iterations: 10,
109 iterationComposite: 'accumulate' });
110 anim.pause();
111
112 anim.currentTime = anim.effect.timing.duration / 2;
113 assert_equals(getComputedStyle(div).flexGrow, '5',
114 'Animated flex-grow style at 50s of the first iteration');
115 anim.currentTime = anim.effect.timing.duration * 2;
116 assert_equals(getComputedStyle(div).flexGrow, '20',
117 'Animated flex-grow style at 0s of the third iteration');
118 anim.currentTime += anim.effect.timing.duration / 2;
119 assert_equals(getComputedStyle(div).flexGrow, '25',
120 'Animated flex-grow style at 50s of the third iteration');
121 }, 'iterationComposite of <number> type animation');
122
123 test(function(t) {
124 var div = createDiv(t);
125 div.style.position = 'absolute';
126 var anim =
127 div.animate({ clip: ['rect(0px, 0px, 0px, 0px)',
128 'rect(10px, 10px, 10px, 10px)'] },
129 { duration: 100 * MS_PER_SEC,
130 easing: 'linear',
131 iterations: 10,
132 iterationComposite: 'accumulate' });
133 anim.pause();
134
135 anim.currentTime = anim.effect.timing.duration / 2;
136 assert_equals(getComputedStyle(div).clip, 'rect(5px, 5px, 5px, 5px)',
137 'Animated clip style at 50s of the first iteration');
138 anim.currentTime = anim.effect.timing.duration * 2;
139 assert_equals(getComputedStyle(div).clip, 'rect(20px, 20px, 20px, 20px)',
140 'Animated clip style at 0s of the third iteration');
141 anim.currentTime += anim.effect.timing.duration / 2;
142 assert_equals(getComputedStyle(div).clip, 'rect(25px, 25px, 25px, 25px)',
143 'Animated clip style at 50s of the third iteration');
144 }, 'iterationComposite of <shape> type animation');
145
146 test(function(t) {
147 var div = createDiv(t);
148 var anim =
149 div.animate({ width: ['calc(0vw + 0px)', 'calc(0vw + 10px)'] },
150 { duration: 100 * MS_PER_SEC,
151 easing: 'linear',
152 iterations: 10,
153 iterationComposite: 'accumulate' });
154 anim.pause();
155
156 anim.currentTime = anim.effect.timing.duration / 2;
157 assert_equals(getComputedStyle(div).width, '5px',
158 'Animated calc width style at 50s of the first iteration');
159 anim.currentTime = anim.effect.timing.duration * 2;
160 assert_equals(getComputedStyle(div).width, '20px',
161 'Animated calc width style at 0s of the third iteration');
162 anim.currentTime += anim.effect.timing.duration / 2;
163 assert_equals(getComputedStyle(div).width, '25px',
164 'Animated calc width style at 50s of the third iteration');
165 }, 'iterationComposite of <calc()> value animation');
166
167 test(function(t) {
168 var parent = createDiv(t);
169 parent.style.width = '100px';
170 var div = createDiv(t);
171 parent.appendChild(div);
172
173 var anim =
174 div.animate({ width: ['calc(0% + 0px)', 'calc(10% + 10px)'] },
175 { duration: 100 * MS_PER_SEC,
176 easing: 'linear',
177 iterations: 10,
178 iterationComposite: 'accumulate' });
179 anim.pause();
180
181 anim.currentTime = anim.effect.timing.duration / 2;
182 assert_equals(getComputedStyle(div).width, '10px',
183 // 100px * 5% + 5px
184 'Animated calc width style at 50s of the first iteration');
185 anim.currentTime = anim.effect.timing.duration * 2;
186 assert_equals(getComputedStyle(div).width,
187 '40px', // 100px * (10% + 10%) + (10px + 10px)
188 'Animated calc width style at 0s of the third iteration');
189 anim.currentTime += anim.effect.timing.duration / 2;
190 assert_equals(getComputedStyle(div).width,
191 '50px', // (40px + 60px) / 2
192 'Animated calc width style at 50s of the third iteration');
193 }, 'iterationComposite of <calc()> value animation that the values can\'t' +
194 'be reduced');
195
196 test(function(t) {
197 var div = createDiv(t);
198 var anim =
199 div.animate({ opacity: [0, 0.4] },
200 { duration: 100 * MS_PER_SEC,
201 easing: 'linear',
202 iterations: 10,
203 iterationComposite: 'accumulate' });
204 anim.pause();
205
206 anim.currentTime = anim.effect.timing.duration / 2;
207 assert_equals(getComputedStyle(div).opacity, '0.2',
208 'Animated opacity style at 50s of the first iteration');
209 anim.currentTime = anim.effect.timing.duration * 2;
210 assert_equals(getComputedStyle(div).opacity, '0.8',
211 'Animated opacity style at 0s of the third iteration');
212 anim.currentTime += anim.effect.timing.duration / 2;
213 assert_equals(getComputedStyle(div).opacity, '1', // (0.8 + 1.2) * 0.5
214 'Animated opacity style at 50s of the third iteration');
215 }, 'iterationComposite of opacity animation');
216
217 test(function(t) {
218 var div = createDiv(t);
219 var anim =
220 div.animate({ boxShadow: ['rgb(0, 0, 0) 0px 0px 0px 0px',
221 'rgb(120, 120, 120) 10px 10px 10px 0px'] },
222 { duration: 100 * MS_PER_SEC,
223 easing: 'linear',
224 iterations: 10,
225 iterationComposite: 'accumulate' });
226 anim.pause();
227
228 anim.currentTime = anim.effect.timing.duration / 2;
229 assert_equals(getComputedStyle(div).boxShadow,
230 'rgb(60, 60, 60) 5px 5px 5px 0px',
231 'Animated box-shadow style at 50s of the first iteration');
232 anim.currentTime = anim.effect.timing.duration * 2;
233 assert_equals(getComputedStyle(div).boxShadow,
234 'rgb(240, 240, 240) 20px 20px 20px 0px',
235 'Animated box-shadow style at 0s of the third iteration');
236 anim.currentTime += anim.effect.timing.duration / 2;
237 assert_equals(getComputedStyle(div).boxShadow,
238 'rgb(255, 255, 255) 25px 25px 25px 0px',
239 'Animated box-shadow style at 50s of the third iteration');
240 }, 'iterationComposite of box-shadow animation');
241
242 test(function(t) {
243 var div = createDiv(t);
244 var anim =
245 div.animate({ filter: ['blur(0px)', 'blur(10px)'] },
246 { duration: 100 * MS_PER_SEC,
247 easing: 'linear',
248 iterations: 10,
249 iterationComposite: 'accumulate' });
250 anim.pause();
251
252 anim.currentTime = anim.effect.timing.duration / 2;
253 assert_equals(getComputedStyle(div).filter, 'blur(5px)',
254 'Animated filter blur style at 50s of the first iteration');
255 anim.currentTime = anim.effect.timing.duration * 2;
256 assert_equals(getComputedStyle(div).filter, 'blur(20px)',
257 'Animated filter blur style at 0s of the third iteration');
258 anim.currentTime += anim.effect.timing.duration / 2;
259 assert_equals(getComputedStyle(div).filter, 'blur(25px)',
260 'Animated filter blur style at 50s of the third iteration');
261 }, 'iterationComposite of filter blur animation');
262
263 test(function(t) {
264 var div = createDiv(t);
265 var anim =
266 div.animate({ filter: ['brightness(1)',
267 'brightness(180%)'] },
268 { duration: 100 * MS_PER_SEC,
269 easing: 'linear',
270 iterations: 10,
271 iterationComposite: 'accumulate' });
272 anim.pause();
273
274 anim.currentTime = anim.effect.timing.duration / 2;
275 assert_equals(getComputedStyle(div).filter,
276 'brightness(1.4)',
277 'Animated filter brightness style at 50s of the first iteration');
278 anim.currentTime = anim.effect.timing.duration * 2;
279 assert_equals(getComputedStyle(div).filter,
280 'brightness(2.6)', // brightness(1) + brightness(0.8) + brightness(0.8)
281 'Animated filter brightness style at 0s of the third iteration');
282 anim.currentTime += anim.effect.timing.duration / 2;
283 assert_equals(getComputedStyle(div).filter,
284 'brightness(3)', // (brightness(2.6) + brightness(3.4)) * 0.5
285 'Animated filter brightness style at 50s of the third iteration');
286 }, 'iterationComposite of filter brightness for different unit animation');
287
288 test(function(t) {
289 var div = createDiv(t);
290 var anim =
291 div.animate({ filter: ['brightness(0)',
292 'brightness(1)'] },
293 { duration: 100 * MS_PER_SEC,
294 easing: 'linear',
295 iterations: 10,
296 iterationComposite: 'accumulate' });
297 anim.pause();
298
299 anim.currentTime = anim.effect.timing.duration / 2;
300 assert_equals(getComputedStyle(div).filter,
301 'brightness(0.5)',
302 'Animated filter brightness style at 50s of the first iteration');
303 anim.currentTime = anim.effect.timing.duration * 2;
304 assert_equals(getComputedStyle(div).filter,
305 'brightness(0)', // brightness(1) is an identity element, not accumulated.
306 'Animated filter brightness style at 0s of the third iteration');
307 anim.currentTime += anim.effect.timing.duration / 2;
308 assert_equals(getComputedStyle(div).filter,
309 'brightness(0.5)', // brightness(1) is an identity element, not accumulated.
310 'Animated filter brightness style at 50s of the third iteration');
311 }, 'iterationComposite of filter brightness animation');
312
313 test(function(t) {
314 var div = createDiv(t);
315 var anim =
316 div.animate({ filter: ['drop-shadow(rgb(0, 0, 0) 0px 0px 0px)',
317 'drop-shadow(rgb(120, 120, 120) 10px 10px 10px)'] },
318 { duration: 100 * MS_PER_SEC,
319 easing: 'linear',
320 iterations: 10,
321 iterationComposite: 'accumulate' });
322 anim.pause();
323
324 anim.currentTime = anim.effect.timing.duration / 2;
325 assert_equals(getComputedStyle(div).filter,
326 'drop-shadow(rgb(60, 60, 60) 5px 5px 5px)',
327 'Animated filter drop-shadow style at 50s of the first iteration');
328 anim.currentTime = anim.effect.timing.duration * 2;
329 assert_equals(getComputedStyle(div).filter,
330 'drop-shadow(rgb(240, 240, 240) 20px 20px 20px)',
331 'Animated filter drop-shadow style at 0s of the third iteration');
332 anim.currentTime += anim.effect.timing.duration / 2;
333 assert_equals(getComputedStyle(div).filter,
334 'drop-shadow(rgb(255, 255, 255) 25px 25px 25px)',
335 'Animated filter drop-shadow style at 50s of the third iteration');
336 }, 'iterationComposite of filter drop-shadow animation');
337
338 test(function(t) {
339 var div = createDiv(t);
340 var anim =
341 div.animate({ filter: ['brightness(1) contrast(1)',
342 'brightness(2) contrast(2)'] },
343 { duration: 100 * MS_PER_SEC,
344 easing: 'linear',
345 iterations: 10,
346 iterationComposite: 'accumulate' });
347 anim.pause();
348
349 anim.currentTime = anim.effect.timing.duration / 2;
350 assert_equals(getComputedStyle(div).filter,
351 'brightness(1.5) contrast(1.5)',
352 'Animated filter list at 50s of the first iteration');
353 anim.currentTime = anim.effect.timing.duration * 2;
354 assert_equals(getComputedStyle(div).filter,
355 'brightness(3) contrast(3)',
356 'Animated filter list at 0s of the third iteration');
357 anim.currentTime += anim.effect.timing.duration / 2;
358 assert_equals(getComputedStyle(div).filter,
359 'brightness(3.5) contrast(3.5)',
360 'Animated filter list at 50s of the third iteration');
361 }, 'iterationComposite of same filter list animation');
362
363 test(function(t) {
364 var div = createDiv(t);
365 var anim =
366 div.animate({ filter: ['brightness(1) contrast(1)',
367 'contrast(2) brightness(2)'] },
368 { duration: 100 * MS_PER_SEC,
369 easing: 'linear',
370 iterations: 10,
371 iterationComposite: 'accumulate' });
372 anim.pause();
373
374 anim.currentTime = anim.effect.timing.duration / 2;
375 assert_equals(getComputedStyle(div).filter,
376 'contrast(2) brightness(2)', // discrete
377 'Animated filter list at 50s of the first iteration');
378 anim.currentTime = anim.effect.timing.duration * 2;
379 assert_equals(getComputedStyle(div).filter,
380 // We can't accumulate 'contrast(2) brightness(2)' onto
381 // the first list 'brightness(1) contrast(1)' because of
382 // mismatch of the order.
383 'brightness(1) contrast(1)',
384 'Animated filter list at 0s of the third iteration');
385 anim.currentTime += anim.effect.timing.duration / 2;
386 assert_equals(getComputedStyle(div).filter,
387 // We *can* accumulate 'contrast(2) brightness(2)' onto
388 // the same list 'contrast(2) brightness(2)' here.
389 'contrast(4) brightness(4)', // discrete
390 'Animated filter list at 50s of the third iteration');
391 }, 'iterationComposite of discrete filter list because of mismatch ' +
392 'of the order');
393
394 test(function(t) {
395 var div = createDiv(t);
396 var anim =
397 div.animate({ filter: ['sepia(0)',
398 'sepia(1) contrast(2)'] },
399 { duration: 100 * MS_PER_SEC,
400 easing: 'linear',
401 iterations: 10,
402 iterationComposite: 'accumulate' });
403 anim.pause();
404
405 anim.currentTime = anim.effect.timing.duration / 2;
406 assert_equals(getComputedStyle(div).filter,
407 'sepia(0.5) contrast(1.5)',
408 'Animated filter list at 50s of the first iteration');
409 anim.currentTime = anim.effect.timing.duration * 2;
410 assert_equals(getComputedStyle(div).filter,
411 'sepia(2) contrast(3)',
412 'Animated filter list at 0s of the third iteration');
413 anim.currentTime += anim.effect.timing.duration / 2;
414 assert_equals(getComputedStyle(div).filter,
415 'sepia(2.5) contrast(3.5)',
416 'Animated filter list at 50s of the third iteration');
417 }, 'iterationComposite of different length filter list animation');
418
419 test(function(t) {
420 var div = createDiv(t);
421 var anim =
422 div.animate({ transform: ['rotate(0deg)', 'rotate(180deg)'] },
423 { duration: 100 * MS_PER_SEC,
424 easing: 'linear',
425 iterations: 10,
426 iterationComposite: 'accumulate' });
427 anim.pause();
428
429 anim.currentTime = anim.effect.timing.duration / 2;
430 assert_equals(getComputedStyle(div).transform,
431 'matrix(0, 1, -1, 0, 0, 0)', // rotate(90deg)
432 'Animated transform(rotate) style at 50s of the first iteration');
433 anim.currentTime = anim.effect.timing.duration * 2;
434 assert_equals(getComputedStyle(div).transform,
435 'matrix(1, 0, 0, 1, 0, 0)', // rotate(360deg)
436 'Animated transform(rotate) style at 0s of the third iteration');
437 anim.currentTime += anim.effect.timing.duration / 2;
438 assert_equals(getComputedStyle(div).transform,
439 'matrix(0, 1, -1, 0, 0, 0)', // rotate(450deg)
440 'Animated transform(rotate) style at 50s of the third iteration');
441 }, 'iterationComposite of transform(rotate) animation');
442
443 test(function(t) {
444 var div = createDiv(t);
445 var anim =
446 div.animate({ transform: ['scale(0)', 'scale(1)'] },
447 { duration: 100 * MS_PER_SEC,
448 easing: 'linear',
449 iterations: 10,
450 iterationComposite: 'accumulate' });
451 anim.pause();
452
453 anim.currentTime = anim.effect.timing.duration / 2;
454 assert_equals(getComputedStyle(div).transform,
455 'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5)
456 'Animated transform(scale) style at 50s of the first iteration');
457 anim.currentTime = anim.effect.timing.duration * 2;
458 assert_equals(getComputedStyle(div).transform,
459 'matrix(0, 0, 0, 0, 0, 0)', // scale(0); scale(1) is an identity element,
460 // not accumulated.
461 'Animated transform(scale) style at 0s of the third iteration');
462 anim.currentTime += anim.effect.timing.duration / 2;
463 assert_equals(getComputedStyle(div).transform,
464 'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5); scale(1) an identity
465 // element, not accumulated.
466 'Animated transform(scale) style at 50s of the third iteration');
467 }, 'iterationComposite of transform: [ scale(0), scale(1) ] animation');
468
469 test(function(t) {
470 var div = createDiv(t);
471 var anim =
472 div.animate({ transform: ['scale(1)', 'scale(2)'] },
473 { duration: 100 * MS_PER_SEC,
474 easing: 'linear',
475 iterations: 10,
476 iterationComposite: 'accumulate' });
477 anim.pause();
478
479 anim.currentTime = anim.effect.timing.duration / 2;
480 assert_equals(getComputedStyle(div).transform,
481 'matrix(1.5, 0, 0, 1.5, 0, 0)', // scale(1.5)
482 'Animated transform(scale) style at 50s of the first iteration');
483 anim.currentTime = anim.effect.timing.duration * 2;
484 assert_equals(getComputedStyle(div).transform,
485 'matrix(3, 0, 0, 3, 0, 0)', // scale(1 + (2 -1) + (2 -1))
486 'Animated transform(scale) style at 0s of the third iteration');
487 anim.currentTime += anim.effect.timing.duration / 2;
488 assert_equals(getComputedStyle(div).transform,
489 'matrix(3.5, 0, 0, 3.5, 0, 0)', // (scale(3) + scale(4)) * 0.5
490 'Animated transform(scale) style at 50s of the third iteration');
491 }, 'iterationComposite of transform: [ scale(1), scale(2) ] animation');
492
493 test(function(t) {
494 var div = createDiv(t);
495 var anim =
496 div.animate({ transform: ['scale(0)', 'scale(2)'] },
497 { duration: 100 * MS_PER_SEC,
498 easing: 'linear',
499 iterations: 10,
500 iterationComposite: 'accumulate' });
501 anim.pause();
502
503 anim.currentTime = anim.effect.timing.duration / 2;
504 assert_equals(getComputedStyle(div).transform,
505 'matrix(1, 0, 0, 1, 0, 0)', // scale(1)
506 'Animated transform(scale) style at 50s of the first iteration');
507 anim.currentTime = anim.effect.timing.duration * 2;
508 assert_equals(getComputedStyle(div).transform,
509 'matrix(2, 0, 0, 2, 0, 0)', // (scale(0) + scale(2-1)*2)
510 'Animated transform(scale) style at 0s of the third iteration');
511 anim.currentTime += anim.effect.timing.duration / 2;
512 assert_equals(getComputedStyle(div).transform,
513 'matrix(3, 0, 0, 3, 0, 0)', // (scale(2) + scale(4)) * 0.5
514 'Animated transform(scale) style at 50s of the third iteration');
515 }, 'iterationComposite of transform: scale(2) animation');
516
517 test(function(t) {
518 var div = createDiv(t);
519 var anim =
520 div.animate({ transform: ['rotate(0deg) translateX(0px)',
521 'rotate(180deg) translateX(10px)'] },
522 { duration: 100 * MS_PER_SEC,
523 easing: 'linear',
524 iterations: 10,
525 iterationComposite: 'accumulate' });
526 anim.pause();
527
528 anim.currentTime = anim.effect.timing.duration / 2;
529 assert_equals(getComputedStyle(div).transform,
530 'matrix(0, 1, -1, 0, 0, 5)', // rotate(90deg) translateX(5px)
531 'Animated transform list at 50s of the first iteration');
532 anim.currentTime = anim.effect.timing.duration * 2;
533 assert_equals(getComputedStyle(div).transform,
534 'matrix(1, 0, 0, 1, 20, 0)', // rotate(360deg) translateX(20px)
535 'Animated transform list at 0s of the third iteration');
536 anim.currentTime += anim.effect.timing.duration / 2;
537 assert_equals(getComputedStyle(div).transform,
538 'matrix(0, 1, -1, 0, 0, 25)', // rotate(450deg) translateX(25px)
539 'Animated transform list at 50s of the third iteration');
540 }, 'iterationComposite of transform list animation');
541
542 test(function(t) {
543 var div = createDiv(t);
544 // The transform list whose order is mismatched is compounded,
545 // so below animation is the same as;
546 // from matrix(2, 0, 0, 2, 0, 0) to matrix(3, 0, 0, 3, 30, 0)
547 var anim =
548 div.animate({ transform: ['translateX(0px) scale(2)',
549 'scale(3) translateX(10px)'] },
550 { duration: 100 * MS_PER_SEC,
551 easing: 'linear',
552 iterations: 10,
553 iterationComposite: 'accumulate' });
554 anim.pause();
555
556 anim.currentTime = anim.effect.timing.duration / 2;
557 assert_equals(getComputedStyle(div).transform,
558 'matrix(2.5, 0, 0, 2.5, 15, 0)', // scale(2.5) (0px + 30px*2) / 2
559 'Animated transform list at 50s of the first iteration');
560 anim.currentTime = anim.effect.timing.duration * 2;
561 assert_equals(getComputedStyle(div).transform,
562 'matrix(4, 0, 0, 4, 60, 0)', // scale(2+(3-2)*2) (0px + 30px*2)
563 'Animated transform list at 0s of the third iteration');
564 anim.currentTime += anim.effect.timing.duration / 2;
565 assert_equals(getComputedStyle(div).transform,
566 'matrix(5.5, 0, 0, 5.5, 135, 0)', // scale(4+7)/2 (60px + 210px)
567 'Animated transform list at 50s of the third iteration');
568 }, 'iterationComposite of transform list animation whose order is mismatched');
569
570 test(function(t) {
571 var div = createDiv(t);
572 // Even if each transform list does not have functions which exist in
573 // other pair of the list, we don't fill any missing functions at all,
574 // it's just computed as compounded matrices
575 // Below animation is the same as;
576 // from matrix(1, 0, 0, 1, 0, 0) to matrix(2, 0, 0, 2, 20, 0)
577 var anim =
578 div.animate({ transform: ['translateX(0px)',
579 'scale(2) translateX(10px)'] },
580 { duration: 100 * MS_PER_SEC,
581 easing: 'linear',
582 iterations: 10,
583 iterationComposite: 'accumulate' });
584 anim.pause();
585
586 anim.currentTime = anim.effect.timing.duration / 2;
587 assert_equals(getComputedStyle(div).transform,
588 'matrix(1.5, 0, 0, 1.5, 10, 0)', // scale(1.5) (0px + 10px*2) / 2
589 'Animated transform list at 50s of the first iteration');
590 anim.currentTime = anim.effect.timing.duration * 2;
591 assert_equals(getComputedStyle(div).transform,
592 'matrix(3, 0, 0, 3, 40, 0)', // scale(1+(2-1)*2) (0px + 20px*2)
593 'Animated transform list at 0s of the third iteration');
594 anim.currentTime += anim.effect.timing.duration / 2;
595 assert_equals(getComputedStyle(div).transform,
596 'matrix(3.5, 0, 0, 3.5, 80, 0)', // scale(3+4)/2 (40px + 20px)
597 'Animated transform list at 50s of the third iteration');
598 }, 'iterationComposite of transform list animation whose order is mismatched');
599
600 test(function(t) {
601 var div = createDiv(t);
602 var anim =
603 div.animate({ marginLeft: ['10px', '20px'] },
604 { duration: 100 * MS_PER_SEC,
605 easing: 'linear',
606 iterations: 10,
607 iterationComposite: 'accumulate' });
608 anim.pause();
609
610 anim.currentTime = anim.effect.timing.duration / 2;
611 assert_equals(getComputedStyle(div).marginLeft, '15px',
612 'Animated margin-left style at 50s of the first iteration');
613 anim.currentTime = anim.effect.timing.duration * 2;
614 assert_equals(getComputedStyle(div).marginLeft, '50px', // 10px + 20px + 20px
615 'Animated margin-left style at 0s of the third iteration');
616 anim.currentTime += anim.effect.timing.duration / 2;
617 assert_equals(getComputedStyle(div).marginLeft, '55px', // (50px + 60px) * 0.5
618 'Animated margin-left style at 50s of the third iteration');
619 }, 'iterationComposite starts with non-zero value animation');
620
621 test(function(t) {
622 var div = createDiv(t);
623 var anim =
624 div.animate({ marginLeft: ['10px', '-10px'] },
625 { duration: 100 * MS_PER_SEC,
626 easing: 'linear',
627 iterations: 10,
628 iterationComposite: 'accumulate' });
629 anim.pause();
630
631 anim.currentTime = anim.effect.timing.duration / 2;
632 assert_equals(getComputedStyle(div).marginLeft,
633 '0px',
634 'Animated margin-left style at 50s of the first iteration');
635 anim.currentTime = anim.effect.timing.duration * 2;
636 assert_equals(getComputedStyle(div).marginLeft,
637 '-10px', // 10px + -10px + -10px
638 'Animated margin-left style at 0s of the third iteration');
639 anim.currentTime += anim.effect.timing.duration / 2;
640 assert_equals(getComputedStyle(div).marginLeft,
641 '-20px', // (-10px + -30px) * 0.5
642 'Animated margin-left style at 50s of the third iteration');
643 }, 'iterationComposite with negative final value animation');
644
645 test(function(t) {
646 var div = createDiv(t);
647 var anim = div.animate({ marginLeft: ['0px', '10px'] },
648 { duration: 100 * MS_PER_SEC,
649 easing: 'linear',
650 iterations: 10,
651 iterationComposite: 'accumulate' });
652 anim.pause();
653
654 anim.currentTime =
655 anim.effect.timing.duration * 2 + anim.effect.timing.duration / 2;
656 assert_equals(getComputedStyle(div).marginLeft, '25px',
657 'Animated style at 50s of the third iteration');
658
659 anim.effect.iterationComposite = 'replace';
660 assert_equals(getComputedStyle(div).marginLeft, '5px',
661 'Animated style at 50s of the third iteration');
662
663 anim.effect.iterationComposite = 'accumulate';
664 assert_equals(getComputedStyle(div).marginLeft, '25px',
665 'Animated style at 50s of the third iteration');
666 }, 'interationComposite changes');
667
668 test(function(t) {
669 var div = createDiv(t);
670 var anim = div.animate({ marginLeft: ['0px', '10px'] },
671 { duration: 100 * MS_PER_SEC,
672 easing: 'linear',
673 iterations: 10,
674 iterationComposite: 'accumulate' });
675 anim.pause();
676
677 anim.currentTime =
678 anim.effect.timing.duration * 2 + anim.effect.timing.duration / 2;
679 assert_equals(getComputedStyle(div).marginLeft, '25px',
680 'Animated style at 50s of the third iteration');
681
682 // double its duration.
683 anim.effect.timing.duration = anim.effect.timing.duration * 2;
684 assert_equals(getComputedStyle(div).marginLeft, '12.5px',
685 'Animated style at 25s of the first iteration');
686
687 // half of original.
688 anim.effect.timing.duration = anim.effect.timing.duration / 4;
689 assert_equals(getComputedStyle(div).marginLeft, '50px',
690 'Animated style at 50s of the fourth iteration');
691 }, 'duration changes with iterationComposite(accumulate)');
692
693 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/imported/wpt/web-animations/interfaces/KeyframeEffect/getComputedTiming-expected.txt ('k') | third_party/WebKit/LayoutTests/imported/wpt/web-animations/interfaces/KeyframeEffect/iterationComposite-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698