[Web Animations] Update WPT tests and move them to imported/w3c/web-platform-tests
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / web-animations / timing-model / animation-effects / active-time.html
1 <!DOCTYPE html>
2 <meta charset=utf-8>
3 <title>Active time</title>
4 <link rel="help" href="https://drafts.csswg.org/web-animations/#calculating-the-active-time">
5 <script src="/resources/testharness.js"></script>
6 <script src="/resources/testharnessreport.js"></script>
7 <script src="../../testcommon.js"></script>
8 <body>
9 <div id="log"></div>
10 <script>
11 'use strict';
12
13 test(t => {
14   const tests = [ { fill: 'none', progress: null },
15                   { fill: 'backwards', progress: 0 },
16                   { fill: 'forwards', progress: null },
17                   { fill: 'both', progress: 0 } ];
18   for (const test of tests) {
19     const anim = createDiv(t).animate(null, { delay: 1, fill: test.fill });
20     assert_equals(anim.effect.getComputedTiming().progress, test.progress,
21                   `Progress in before phase when using '${test.fill}' fill`);
22   }
23 }, 'Active time in before phase');
24
25 test(t => {
26   const anim = createDiv(t).animate(null, 1000);
27   anim.currentTime = 500;
28   assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.5);
29 }, 'Active time in active phase and no start delay is the local time');
30
31 test(t => {
32   const anim = createDiv(t).animate(null, { duration: 1000, delay: 500 });
33   anim.currentTime = 1000;
34   assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.5);
35 }, 'Active time in active phase and positive start delay is the local time'
36    + ' minus the start delay');
37
38 test(t => {
39   const anim = createDiv(t).animate(null, { duration: 1000, delay: -500 });
40   assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.5);
41 }, 'Active time in active phase and negative start delay is the local time'
42    + ' minus the start delay');
43
44 test(t => {
45   const anim = createDiv(t).animate(null);
46   assert_equals(anim.effect.getComputedTiming().progress, null);
47 }, 'Active time in after phase with no fill is unresolved');
48
49 test(t => {
50   const anim = createDiv(t).animate(null, { fill: 'backwards' });
51   assert_equals(anim.effect.getComputedTiming().progress, null);
52 }, 'Active time in after phase with backwards-only fill is unresolved');
53
54 test(t => {
55   const anim = createDiv(t).animate(null, { duration: 1000,
56                                             iterations: 2.3,
57                                             delay: 500, // Should have no effect
58                                             fill: 'forwards' });
59   anim.finish();
60   assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
61   assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.3);
62 }, 'Active time in after phase with forwards fill is the active duration');
63
64 test(t => {
65   const anim = createDiv(t).animate(null, { duration: 0,
66                                             iterations: Infinity,
67                                             fill: 'forwards' });
68   anim.finish();
69   assert_equals(anim.effect.getComputedTiming().currentIteration, Infinity);
70   assert_equals(anim.effect.getComputedTiming().progress, 1);
71 }, 'Active time in after phase with forwards fill, zero-duration, and '
72    + ' infinite iteration count is the active duration');
73
74 test(t => {
75   const anim = createDiv(t).animate(null, { duration: 1000,
76                                             iterations: 2.3,
77                                             delay: 500,
78                                             endDelay: 4000,
79                                             fill: 'forwards' });
80   anim.finish();
81   assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
82   assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.3);
83 }, 'Active time in after phase with forwards fill and positive end delay'
84    + ' is the active duration');
85
86 test(t => {
87   const anim = createDiv(t).animate(null, { duration: 1000,
88                                             iterations: 2.3,
89                                             delay: 500,
90                                             endDelay: -800,
91                                             fill: 'forwards' });
92   anim.finish();
93   assert_equals(anim.effect.getComputedTiming().currentIteration, 1);
94   assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.5);
95 }, 'Active time in after phase with forwards fill and negative end delay'
96    + ' is the active duration + end delay');
97
98 test(t => {
99   const anim = createDiv(t).animate(null, { duration: 1000,
100                                             iterations: 2.3,
101                                             delay: 500,
102                                             endDelay: -2500,
103                                             fill: 'forwards' });
104   anim.finish();
105   assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
106   assert_equals(anim.effect.getComputedTiming().progress, 0);
107 }, 'Active time in after phase with forwards fill and negative end delay'
108    + ' greater in magnitude than the active duration is zero');
109
110 test(t => {
111   const anim = createDiv(t).animate(null, { duration: 1000,
112                                             iterations: 2.3,
113                                             delay: 500,
114                                             endDelay: -4000,
115                                             fill: 'forwards' });
116   anim.finish();
117   assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
118   assert_equals(anim.effect.getComputedTiming().progress, 0);
119 }, 'Active time in after phase with forwards fill and negative end delay'
120    + ' greater in magnitude than the sum of the active duration and start delay'
121    + ' is zero');
122
123 test(t => {
124   const anim = createDiv(t).animate(null, { duration: 1000,
125                                             iterations: 2.3,
126                                             delay: 500,
127                                             fill: 'both' });
128   anim.finish();
129   assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
130   assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.3);
131 }, 'Active time in after phase with \'both\' fill is the active duration');
132
133 test(t => {
134   // Create an effect with a non-zero duration so we ensure we're not just
135   // testing the after-phase behavior.
136   const effect = new KeyframeEffect(null, null, 1);
137   assert_equals(effect.getComputedTiming().progress, null);
138 }, 'Active time when the local time is unresolved, is unresolved');
139
140 </script>
141 </body>