[Web Animations] Update WPT tests related to Web Animations and remove imported Mozil...
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-animations / AnimationEffect-getComputedTiming.tentative.html
1 <!doctype html>
2 <meta charset=utf-8>
3 <title>AnimationEffect.getComputedTiming() for CSS animations</title>
4 <!--  TODO: Add a more specific link for this once it is specified.  -->
5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
6 <script src="/resources/testharness.js"></script>
7 <script src="/resources/testharnessreport.js"></script>
8 <script src="support/testcommon.js"></script>
9 <style>
10 @keyframes moveAnimation {
11   from { margin-left: 100px }
12   to { margin-left: 200px }
13 }
14 </style>
15 <body>
16 <div id="log"></div>
17 <script>
18
19 'use strict';
20
21 // --------------------
22 // delay
23 // --------------------
24
25 test(t => {
26   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
27   const effect = div.getAnimations()[0].effect;
28   assert_equals(effect.getComputedTiming().delay, 0, 'Initial value of delay');
29 }, 'delay of a new animation');
30
31 test(t => {
32   const div = addDiv(t, { style: 'animation: moveAnimation 100s -10s' });
33   const effect = div.getAnimations()[0].effect;
34   assert_equals(effect.getComputedTiming().delay, -10 * MS_PER_SEC,
35                 'Initial value of delay');
36 }, 'Negative delay of a new animation');
37
38 test(t => {
39   const div = addDiv(t, { style: 'animation: moveAnimation 100s 10s' });
40   const effect = div.getAnimations()[0].effect;
41   assert_equals(effect.getComputedTiming().delay, 10 * MS_PER_SEC,
42                 'Initial value of delay');
43 }, 'Positive delay of a new animation');
44
45
46 // --------------------
47 // endDelay
48 // --------------------
49
50 test(t => {
51   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
52   const effect = div.getAnimations()[0].effect;
53   assert_equals(effect.getComputedTiming().endDelay, 0,
54                 'Initial value of endDelay');
55 }, 'endDelay of a new animation');
56
57
58 // --------------------
59 // fill
60 // --------------------
61
62 test(t => {
63   const getEffectWithFill = fill => {
64     const div = addDiv(t, { style: 'animation: moveAnimation 100s ' + fill });
65     return div.getAnimations()[0].effect;
66   };
67
68   let effect = getEffectWithFill('');
69   assert_equals(effect.getComputedTiming().fill, 'none',
70                 'Initial value of fill');
71   effect = getEffectWithFill('forwards');
72   assert_equals(effect.getComputedTiming().fill, 'forwards',
73                 'Fill forwards');
74   effect = getEffectWithFill('backwards');
75   assert_equals(effect.getComputedTiming().fill, 'backwards',
76                 'Fill backwards');
77   effect = getEffectWithFill('both');
78   assert_equals(effect.getComputedTiming().fill, 'both',
79                 'Fill forwards and backwards');
80 }, 'fill of a new animation');
81
82
83 // --------------------
84 // iterationStart
85 // --------------------
86
87 test(t => {
88   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
89   const effect = div.getAnimations()[0].effect;
90   assert_equals(effect.getComputedTiming().iterationStart, 0,
91                 'Initial value of iterationStart');
92 }, 'iterationStart of a new animation');
93
94
95 // --------------------
96 // iterations
97 // --------------------
98
99 test(t => {
100   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
101   const effect = div.getAnimations()[0].effect;
102   assert_equals(effect.getComputedTiming().iterations, 1,
103                 'Initial value of iterations');
104 }, 'iterations of a new animation');
105
106 test(t => {
107   const div = addDiv(t, { style: 'animation: moveAnimation 100s 2016.5' });
108   const effect = div.getAnimations()[0].effect;
109   assert_equals(effect.getComputedTiming().iterations, 2016.5,
110                 'Initial value of iterations');
111 }, 'iterations of a finitely repeating animation');
112
113 test(t => {
114   const div = addDiv(t, { style: 'animation: moveAnimation 100s infinite' });
115   const effect = div.getAnimations()[0].effect;
116   assert_equals(effect.getComputedTiming().iterations, Infinity,
117                 'Initial value of iterations');
118 }, 'iterations of an infinitely repeating animation');
119
120
121 // --------------------
122 // duration
123 // --------------------
124
125 test(t => {
126   const div = addDiv(t, {
127     style: 'animation: moveAnimation 100s -10s infinite'
128   });
129   const effect = div.getAnimations()[0].effect;
130   assert_equals(effect.getComputedTiming().duration, 100 * MS_PER_SEC,
131                 'Initial value of duration');
132 }, 'duration of a new animation');
133
134
135 // --------------------
136 // direction
137 // --------------------
138
139 test(t => {
140   const getEffectWithDir = dir => {
141     const div = addDiv(t, { style: 'animation: moveAnimation 100s ' + dir });
142     return div.getAnimations()[0].effect;
143   };
144
145   let effect = getEffectWithDir('');
146   assert_equals(effect.getComputedTiming().direction, 'normal',
147                 'Initial value of normal direction');
148   effect = getEffectWithDir('reverse');
149   assert_equals(effect.getComputedTiming().direction, 'reverse',
150                 'Initial value of reverse direction');
151   effect = getEffectWithDir('alternate');
152   assert_equals(effect.getComputedTiming().direction, 'alternate',
153                 'Initial value of alternate direction');
154   effect = getEffectWithDir('alternate-reverse');
155   assert_equals(effect.getComputedTiming().direction, 'alternate-reverse',
156                 'Initial value of alternate-reverse direction');
157 }, 'direction of a new animation');
158
159
160 // --------------------
161 // easing
162 // --------------------
163
164 test(t => {
165   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
166   const effect = div.getAnimations()[0].effect;
167   assert_equals(effect.getComputedTiming().easing, 'linear',
168                 'Initial value of easing');
169 }, 'easing of a new animation');
170
171
172 // ------------------------------
173 // endTime
174 // = max(start delay + active duration + end delay, 0)
175 // --------------------
176
177 test(t => {
178   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
179   const effect = div.getAnimations()[0].effect;
180   assert_equals(effect.getComputedTiming().endTime, 100 * MS_PER_SEC,
181                 'Initial value of endTime');
182 }, 'endTime of an new animation');
183
184 test(t => {
185   const div = addDiv(t, { style: 'animation: moveAnimation 100s -5s' });
186   const effect = div.getAnimations()[0].effect;
187   const answer = (100 - 5) * MS_PER_SEC;
188   assert_equals(effect.getComputedTiming().endTime, answer,
189                 'Initial value of endTime');
190 }, 'endTime of an animation with a negative delay');
191
192 test(t => {
193   const div = addDiv(t, {
194     style: 'animation: moveAnimation 10s -100s infinite'
195   });
196   const effect = div.getAnimations()[0].effect;
197   assert_equals(effect.getComputedTiming().endTime, Infinity,
198                 'Initial value of endTime');
199 }, 'endTime of an infinitely repeating animation');
200
201 test(t => {
202   const div = addDiv(t, { style: 'animation: moveAnimation 0s 100s infinite' });
203   const effect = div.getAnimations()[0].effect;
204   assert_equals(effect.getComputedTiming().endTime, 100 * MS_PER_SEC,
205                 'Initial value of endTime');
206 }, 'endTime of an infinitely repeating zero-duration animation');
207
208 test(t => {
209   // Fill forwards so div.getAnimations()[0] won't return an
210   // undefined value.
211   const div = addDiv(t, {
212     style: 'animation: moveAnimation 10s -100s forwards'
213   });
214   const effect = div.getAnimations()[0].effect;
215   assert_equals(effect.getComputedTiming().endTime, 0,
216                 'Initial value of endTime');
217 }, 'endTime of an animation that finishes before its startTime');
218
219
220 // --------------------
221 // activeDuration
222 // = iteration duration * iteration count
223 // --------------------
224
225 test(t => {
226   const div = addDiv(t, { style: 'animation: moveAnimation 100s 5' });
227   const effect = div.getAnimations()[0].effect;
228   const answer = 100 * MS_PER_SEC * 5;
229   assert_equals(effect.getComputedTiming().activeDuration, answer,
230                 'Initial value of activeDuration');
231 }, 'activeDuration of a new animation');
232
233 test(t => {
234   const div = addDiv(t, { style: 'animation: moveAnimation 100s infinite' });
235   const effect = div.getAnimations()[0].effect;
236   assert_equals(effect.getComputedTiming().activeDuration, Infinity,
237                 'Initial value of activeDuration');
238 }, 'activeDuration of an infinitely repeating animation');
239
240 test(t => {
241   const div = addDiv(t, { style: 'animation: moveAnimation 0s 1s infinite' });
242   const effect = div.getAnimations()[0].effect;
243   // If either the iteration duration or iteration count are zero,
244   // the active duration is zero.
245   assert_equals(effect.getComputedTiming().activeDuration, 0,
246                 'Initial value of activeDuration');
247 }, 'activeDuration of an infinitely repeating zero-duration animation');
248
249 test(t => {
250   const div = addDiv(t, { style: 'animation: moveAnimation 100s 1s 0' });
251   const effect = div.getAnimations()[0].effect;
252   // If either the iteration duration or iteration count are zero,
253   // the active duration is zero.
254   assert_equals(effect.getComputedTiming().activeDuration, 0,
255                 'Initial value of activeDuration');
256 }, 'activeDuration of an animation with zero iterations');
257
258
259 // --------------------
260 // localTime
261 // --------------------
262
263 test(t => {
264   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
265   const effect = div.getAnimations()[0].effect;
266   assert_equals(effect.getComputedTiming().localTime, 0,
267                 'Initial value of localTime');
268 }, 'localTime of a new animation');
269
270 test(t => {
271   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
272   const anim = div.getAnimations()[0];
273   anim.currentTime = 5 * MS_PER_SEC;
274   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
275                 'current localTime after setting currentTime');
276 }, 'localTime of an animation is always equal to currentTime');
277
278 promise_test(async t => {
279   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
280
281   const anim = div.getAnimations()[0];
282   anim.playbackRate = 2; // 2 times faster
283
284   await anim.ready;
285
286   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
287                 'localTime is equal to currentTime');
288
289   await waitForFrame();
290
291   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
292                 'localTime is equal to currentTime');
293 }, 'localTime reflects playbackRate immediately');
294
295 test(t => {
296   const div = addDiv(t);
297   const effect = new KeyframeEffect(div, {left: ["0px", "100px"]});
298
299   assert_equals(effect.getComputedTiming().localTime, null,
300                 'localTime for orphaned effect');
301 }, 'localTime of an AnimationEffect without an Animation');
302
303
304 // --------------------
305 // progress
306 //
307 // Note: Even though CSS animations have a default animation-timing-function of
308 // "ease", this only applies between keyframes (often referred to as the
309 // keyframe-level easing). The progress value returned by getComputedTiming(),
310 // however, only reflects effect-level easing and this defaults to "linear",
311 // even for CSS animations.
312 // --------------------
313
314 test(t => {
315   const tests = [
316     { fill: '', progress: [null, null] },
317     { fill: 'none', progress: [null, null] },
318     { fill: 'forwards', progress: [null, 1.0] },
319     { fill: 'backwards', progress: [0.0, null] },
320     { fill: 'both', progress: [0.0, 1.0] },
321   ];
322   for (const test of tests) {
323     const div = addDiv(t, {
324       style: 'animation: moveAnimation 100s 10s ' + test.fill
325     });
326     const anim = div.getAnimations()[0];
327     assert_true(anim.effect.getComputedTiming().progress === test.progress[0],
328                 `Initial progress with "${test.fill}" fill`);
329     anim.finish();
330     assert_true(anim.effect.getComputedTiming().progress === test.progress[1],
331                 `Initial progress with "${test.fill}" fill`);
332   }
333 }, 'progress of an animation with different fill modes');
334
335 test(t => {
336   const div = addDiv(t, { style: 'animation: moveAnimation 10s 10 both' });
337   const anim = div.getAnimations()[0];
338
339   assert_equals(anim.effect.getComputedTiming().progress, 0.0,
340                 'Initial value of progress');
341   anim.currentTime += 2.5 * MS_PER_SEC;
342   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
343                 'Value of progress');
344   anim.currentTime += 5 * MS_PER_SEC;
345   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
346                 'Value of progress');
347   anim.currentTime += 5 * MS_PER_SEC;
348   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
349                 'Value of progress');
350   anim.finish()
351   assert_equals(anim.effect.getComputedTiming().progress, 1.0,
352                 'Value of progress');
353 }, 'progress of an integral repeating animation with normal direction');
354
355 test(t => {
356   // Note: FillMode here is "both" because
357   // 1. Since this a zero-duration animation, it will already have finished
358   //    so it won't be returned by getAnimations() unless it fills forwards.
359   // 2. Fill backwards, so the progress before phase wouldn't be
360   //    unresolved (null value).
361   const div = addDiv(t, { style: 'animation: moveAnimation 0s infinite both' });
362   const anim = div.getAnimations()[0];
363
364   assert_equals(anim.effect.getComputedTiming().progress, 1.0,
365                 'Initial value of progress in after phase');
366
367   // Seek backwards
368   anim.currentTime -= 1 * MS_PER_SEC;
369   assert_equals(anim.effect.getComputedTiming().progress, 0.0,
370                 'Value of progress before phase');
371 }, 'progress of an infinitely repeating zero-duration animation');
372
373 test(t => {
374   // Default iterations = 1
375   const div = addDiv(t, { style: 'animation: moveAnimation 0s both' });
376   const anim = div.getAnimations()[0];
377
378   assert_equals(anim.effect.getComputedTiming().progress, 1.0,
379                 'Initial value of progress in after phase');
380
381   // Seek backwards
382   anim.currentTime -= 1 * MS_PER_SEC;
383   assert_equals(anim.effect.getComputedTiming().progress, 0.0,
384                 'Value of progress before phase');
385 }, 'progress of a finitely repeating zero-duration animation');
386
387 test(t => {
388   const div = addDiv(t, { style: 'animation: moveAnimation 0s 5s 10.25 both' });
389   const anim = div.getAnimations()[0];
390
391   assert_equals(anim.effect.getComputedTiming().progress, 0.0,
392                 'Initial value of progress (before phase)');
393
394   // Using iteration duration of 1 now.
395   // currentIteration now is floor(10.25) = 10, so progress should be 25%.
396   anim.finish();
397   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
398                 'Value of progress in after phase');
399 }, 'progress of a non-integral repeating zero-duration animation');
400
401 test(t => {
402   const div = addDiv(t, {
403     style: 'animation: moveAnimation 0s 5s 10.25 both reverse',
404   });
405   const anim = div.getAnimations()[0];
406
407   assert_equals(anim.effect.getComputedTiming().progress, 1.0,
408                 'Initial value of progress (before phase)');
409
410   // Seek forwards
411   anim.finish();
412   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
413                 'Value of progress in after phase');
414 }, 'Progress of a non-integral repeating zero-duration animation ' +
415    'with reversing direction');
416
417 test(t => {
418   const div = addDiv(t, {
419     style: 'animation: moveAnimation 10s 10.25 both alternate',
420   });
421   const anim = div.getAnimations()[0];
422
423   assert_equals(anim.effect.getComputedTiming().progress, 0.0,
424                 'Initial value of progress');
425   anim.currentTime += 2.5 * MS_PER_SEC;
426   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
427                 'Value of progress');
428   anim.currentTime += 5 * MS_PER_SEC;
429   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
430                 'Value of progress');
431   anim.currentTime += 5 * MS_PER_SEC;
432   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
433                 'Value of progress');
434   anim.finish()
435   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
436                 'Value of progress');
437 }, 'progress of a non-integral repeating animation ' +
438    'with alternate direction');
439
440 test(t => {
441   const div = addDiv(t, {
442     style: 'animation: moveAnimation 10s 10.25 both alternate-reverse',
443   });
444   const anim = div.getAnimations()[0];
445
446   assert_equals(anim.effect.getComputedTiming().progress, 1.0,
447                 'Initial value of progress');
448   anim.currentTime += 2.5 * MS_PER_SEC;
449   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
450                 'Value of progress');
451   anim.currentTime += 5 * MS_PER_SEC;
452   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
453                 'Value of progress');
454   anim.currentTime += 5 * MS_PER_SEC;
455   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
456                 'Value of progress');
457   anim.finish()
458   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
459                 'Value of progress');
460 }, 'progress of a non-integral repeating animation ' +
461    'with alternate-reversing direction');
462
463 test(t => {
464   const div = addDiv(t, {
465     style: 'animation: moveAnimation 0s 10.25 both alternate',
466   });
467   const anim = div.getAnimations()[0];
468
469   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
470                 'Initial value of progress');
471   anim.currentTime += 2.5 * MS_PER_SEC;
472   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
473                 'Value of progress');
474   anim.currentTime -= 5 * MS_PER_SEC;
475   assert_equals(anim.effect.getComputedTiming().progress, 0.0,
476                 'Value of progress');
477   anim.finish()
478   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
479                 'Value of progress');
480 }, 'progress of a non-integral repeating zero-duration animation ' +
481    'with alternate direction');
482
483 test(t => {
484   const div = addDiv(t, {
485     style: 'animation: moveAnimation 0s 10.25 both alternate-reverse',
486   });
487   const anim = div.getAnimations()[0];
488
489   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
490                 'Initial value of progress');
491   anim.currentTime += 2.5 * MS_PER_SEC;
492   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
493                 'Value of progress');
494   anim.currentTime -= 5 * MS_PER_SEC;
495   assert_equals(anim.effect.getComputedTiming().progress, 1.0,
496                 'Value of progress');
497   anim.finish()
498   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
499                 'Value of progress');
500 }, 'progress of a non-integral repeating zero-duration animation ' +
501    'with alternate-reverse direction');
502
503
504 // --------------------
505 // currentIteration
506 // --------------------
507
508 test(t => {
509   const div = addDiv(t, { style: 'animation: moveAnimation 100s 2s' });
510   const effect = div.getAnimations()[0].effect;
511   assert_equals(effect.getComputedTiming().currentIteration, null,
512                 'Initial value of currentIteration before phase');
513 }, 'currentIteration of a new animation with no backwards fill is unresolved ' +
514    'in before phase');
515
516 test(t => {
517   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
518   const anim = div.getAnimations()[0];
519   assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
520                 'Initial value of currentIteration');
521 }, 'currentIteration of a new animation is zero');
522
523 test(t => {
524   // Note: FillMode here is "both" because
525   // 1. Since this a zero-duration animation, it will already have finished
526   //    so it won't be returned by getAnimations() unless it fills forwards.
527   // 2. Fill backwards, so the currentIteration (before phase) wouldn't be
528   //    unresolved (null value).
529   const div = addDiv(t, { style: 'animation: moveAnimation 0s infinite both' });
530   const anim = div.getAnimations()[0];
531
532   assert_equals(anim.effect.getComputedTiming().currentIteration, Infinity,
533                 'Initial value of currentIteration in after phase');
534
535   // Seek backwards
536   anim.currentTime -= 2 * MS_PER_SEC;
537   assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
538                 'Value of currentIteration count during before phase');
539 }, 'currentIteration of an infinitely repeating zero-duration animation');
540
541 test(t => {
542   const div = addDiv(t, { style: 'animation: moveAnimation 0s 10.5 both' });
543   const anim = div.getAnimations()[0];
544
545   // Note: currentIteration = ceil(iteration start + iteration count) - 1
546   assert_equals(anim.effect.getComputedTiming().currentIteration, 10,
547                 'Initial value of currentIteration');
548
549   // Seek backwards
550   anim.currentTime -= 2 * MS_PER_SEC;
551   assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
552                 'Value of currentIteration count during before phase');
553 }, 'currentIteration of a finitely repeating zero-duration animation');
554
555 test(t => {
556   const div = addDiv(t, {
557     style: 'animation: moveAnimation 100s 5.5 forwards'
558   });
559   const anim = div.getAnimations()[0];
560
561   assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
562                 'Initial value of currentIteration');
563   // The 3rd iteration
564   // Note: currentIteration = floor(scaled active time / iteration duration)
565   anim.currentTime = 250 * MS_PER_SEC;
566   assert_equals(anim.effect.getComputedTiming().currentIteration, 2,
567                 'Value of currentIteration during the 3rd iteration');
568   // Finish
569   anim.finish();
570   assert_equals(anim.effect.getComputedTiming().currentIteration, 5,
571                 'Value of currentIteration in after phase');
572 }, 'currentIteration of an animation with a non-integral iteration count');
573
574 test(t => {
575   const div = addDiv(t, { style: 'animation: moveAnimation 100s 2 forwards' });
576   const anim = div.getAnimations()[0];
577
578   assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
579                 'Initial value of currentIteration');
580   // Finish
581   anim.finish();
582   assert_equals(anim.effect.getComputedTiming().currentIteration, 1,
583                 'Value of currentIteration in after phase');
584 }, 'currentIteration of an animation with an integral iteration count');
585
586 test(t => {
587   const div = addDiv(t, { style: 'animation: moveAnimation 100s forwards' });
588   const anim = div.getAnimations()[0];
589   assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
590                 'Initial value of currentIteration');
591   // Finish
592   anim.finish();
593   assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
594                 'Value of currentIteration in after phase');
595 }, 'currentIteration of an animation with a default iteration count');
596
597 test(t => {
598   const div = addDiv(t);
599   const effect = new KeyframeEffect(div, {left: ["0px", "100px"]});
600
601   assert_equals(effect.getComputedTiming().currentIteration, null,
602                 'currentIteration for orphaned effect');
603 }, 'currentIteration of an AnimationEffect without an Animation');
604
605 // TODO: If iteration duration is Infinity, currentIteration is 0.
606 // However, we cannot set iteration duration to Infinity in CSS Animation now.
607
608 </script>
609 </body>