Build fix after r251567.
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-transitions / AnimationEffect-getComputedTiming.tentative.html
1 <!doctype html>
2 <meta charset=utf-8>
3 <title>AnimationEffect.getComputedTiming() for CSS transitions</title>
4 <!--  TODO: Add a more specific link for this once it is specified.  -->
5 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
6 <script src="/resources/testharness.js"></script>
7 <script src="/resources/testharnessreport.js"></script>
8 <script src="support/helper.js"></script>
9 <style>
10
11 .animated-div {
12   margin-left: 100px;
13 }
14
15 </style>
16 <div id="log"></div>
17 <script>
18
19 'use strict';
20
21
22 // --------------------
23 // delay
24 // --------------------
25
26 test(t => {
27   const div = addDiv(t, { class: 'animated-div' });
28   div.style.transition = 'margin-left 10s';
29   getComputedStyle(div).marginLeft;
30   div.style.marginLeft = '10px';
31
32   const effect = div.getAnimations()[0].effect;
33   assert_equals(effect.getComputedTiming().delay, 0, 'Initial value of delay');
34 }, 'delay of a new tranisition');
35
36 test(t => {
37   const div = addDiv(t, { class: 'animated-div' });
38   div.style.transition = 'margin-left 10s 10s';
39   getComputedStyle(div).marginLeft;
40   div.style.marginLeft = '10px';
41
42   const effect = div.getAnimations()[0].effect;
43   assert_equals(effect.getComputedTiming().delay, 10000,
44                 'Initial value of delay');
45 }, 'Positive delay of a new transition');
46
47 test(t => {
48   const div = addDiv(t, { class: 'animated-div' });
49   div.style.transition = 'margin-left 10s -5s';
50   getComputedStyle(div).marginLeft;
51   div.style.marginLeft = '10px';
52
53   const effect = div.getAnimations()[0].effect;
54   assert_equals(effect.getComputedTiming().delay, -5000,
55                 'Initial value of delay');
56 }, 'Negative delay of a new transition');
57
58
59 // --------------------
60 // endDelay
61 // --------------------
62
63 test(t => {
64   const div = addDiv(t, { class: 'animated-div' });
65   div.style.transition = 'margin-left 10s';
66   getComputedStyle(div).marginLeft;
67   div.style.marginLeft = '10px';
68
69   const effect = div.getAnimations()[0].effect;
70   assert_equals(effect.getComputedTiming().endDelay, 0,
71                 'Initial value of endDelay');
72 }, 'endDelay of a new transition');
73
74
75 // --------------------
76 // fill
77 // --------------------
78
79 test(t => {
80   const div = addDiv(t, { class: 'animated-div' });
81   div.style.transition = 'margin-left 10s';
82   getComputedStyle(div).marginLeft;
83   div.style.marginLeft = '10px';
84
85   const effect = div.getAnimations()[0].effect;
86   assert_equals(effect.getComputedTiming().fill, 'backwards', 'Fill backwards');
87 }, 'fill of a new transition');
88
89
90 // --------------------
91 // iterationStart
92 // --------------------
93
94 test(t => {
95   const div = addDiv(t, { class: 'animated-div' });
96   div.style.transition = 'margin-left 10s';
97   getComputedStyle(div).marginLeft;
98   div.style.marginLeft = '10px';
99
100   const effect = div.getAnimations()[0].effect;
101   assert_equals(effect.getComputedTiming().iterationStart, 0,
102                 'Initial value of iterationStart');
103 }, 'iterationStart of a new transition');
104
105
106 // --------------------
107 // iterations
108 // --------------------
109
110 test(t => {
111   const div = addDiv(t, { class: 'animated-div' });
112   div.style.transition = 'margin-left 10s';
113   getComputedStyle(div).marginLeft;
114   div.style.marginLeft = '10px';
115
116   const effect = div.getAnimations()[0].effect;
117   assert_equals(effect.getComputedTiming().iterations, 1,
118                 'Initial value of iterations');
119 }, 'iterations of a new transition');
120
121
122 // --------------------
123 // duration
124 // --------------------
125
126 test(t => {
127   const div = addDiv(t, { class: 'animated-div' });
128   div.style.transition = 'margin-left 10s';
129   getComputedStyle(div).marginLeft;
130   div.style.marginLeft = '10px';
131
132   const effect = div.getAnimations()[0].effect;
133   assert_equals(effect.getComputedTiming().duration, 10000,
134                 'Initial value of duration');
135 }, 'duration of a new transition');
136
137
138 // --------------------
139 // direction
140 // --------------------
141
142 test(t => {
143   const div = addDiv(t, { class : 'animated-div' });
144   div.style.transition = 'margin-left 10s';
145   getComputedStyle(div).marginLeft;
146   div.style.marginLeft = '10px';
147
148   const effect = div.getAnimations()[0].effect;
149   assert_equals(effect.getComputedTiming().direction, 'normal',
150                 'Initial value of direction');
151 }, 'direction of a new transition');
152
153
154 // --------------------
155 // easing
156 // --------------------
157
158 test(t => {
159   const div = addDiv(t, { class: 'animated-div' });
160   div.style.transition = 'margin-left 10s';
161   getComputedStyle(div).marginLeft;
162   div.style.marginLeft = '10px';
163
164   const effect = div.getAnimations()[0].effect;
165   assert_equals(effect.getComputedTiming().easing, 'ease',
166                 'Initial value of easing');
167 }, 'easing of a new transition');
168
169 test(t => {
170   const div = addDiv(t, { class: 'animated-div' });
171   div.style.transition = 'margin-left 10s steps(4)';
172   getComputedStyle(div).marginLeft;
173   div.style.marginLeft = '10px';
174
175   const effect = div.getAnimations()[0].effect;
176   assert_equals(effect.getComputedTiming().easing, 'steps(4)',
177                 'Initial value of easing');
178 }, 'non-default easing of a new transition');
179
180
181 // ------------------------------
182 // endTime
183 // = max(start delay + active duration + end delay, 0)
184 // --------------------
185
186 test(t => {
187   const div = addDiv(t, { class: 'animated-div' });
188   div.style.transition = 'margin-left 100s -5s';
189   getComputedStyle(div).marginLeft;
190   div.style.marginLeft = '10px';
191
192   const effect = div.getAnimations()[0].effect;
193   const answer = 100000 - 5000; // ms
194   assert_equals(effect.getComputedTiming().endTime, answer,
195                 'Initial value of endTime');
196 }, 'endTime of a new transition');
197
198
199 // --------------------
200 // activeDuration
201 // = iteration duration * iteration count(==1)
202 // --------------------
203
204 test(t => {
205   const div = addDiv(t, { class: 'animated-div' });
206   div.style.transition = 'margin-left 100s -5s';
207   getComputedStyle(div).marginLeft;
208   div.style.marginLeft = '10px';
209
210   const effect = div.getAnimations()[0].effect;
211   assert_equals(effect.getComputedTiming().activeDuration, 100000,
212                 'Initial value of activeDuration');
213 }, 'activeDuration of a new transition');
214
215
216 // --------------------
217 // localTime
218 // --------------------
219
220 test(t => {
221   const div = addDiv(t, { class: 'animated-div' });
222   div.style.transition = 'margin-left 100s';
223   getComputedStyle(div).marginLeft;
224   div.style.marginLeft = '10px';
225
226   const effect = div.getAnimations()[0].effect;
227   assert_equals(effect.getComputedTiming().localTime, 0,
228                 'Initial value of localTime');
229 }, 'localTime of a new transition');
230
231 test(t => {
232   const div = addDiv(t, { class: 'animated-div' });
233   div.style.transition = 'margin-left 100s';
234   getComputedStyle(div).marginLeft;
235   div.style.marginLeft = '10px';
236
237   const anim = div.getAnimations()[0];
238   anim.currentTime = 5000;
239   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
240                 'current localTime after setting currentTime');
241 }, 'localTime is always equal to currentTime');
242
243 promise_test(async t => {
244   const div = addDiv(t, { class: 'animated-div' });
245   div.style.transition = 'margin-left 100s';
246   getComputedStyle(div).marginLeft;
247   div.style.marginLeft = '10px';
248
249   const anim = div.getAnimations()[0];
250   anim.playbackRate = 2; // 2 times faster
251
252   await anim.ready;
253
254   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
255                 'localTime is equal to currentTime');
256   await waitForFrame();
257
258   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
259                 'localTime is equal to currentTime');
260 }, 'localTime reflects playbackRate immediately');
261
262
263 // --------------------
264 // progress
265 // --------------------
266
267 test(t => {
268   const div = addDiv(t, { class: 'animated-div' });
269   div.style.transition = 'margin-left 10.5s';
270   getComputedStyle(div).marginLeft;
271   div.style.marginLeft = '10px';
272
273   const effect = div.getAnimations()[0].effect;
274   assert_equals(effect.getComputedTiming().progress, 0.0,
275                 'Initial value of progress');
276 }, 'progress of a new transition');
277
278 test(t => {
279   const div = addDiv(t, { class: 'animated-div' });
280   div.style.transition = 'margin-left 10.5s 2s';
281   getComputedStyle(div).marginLeft;
282   div.style.marginLeft = '10px';
283
284   const effect = div.getAnimations()[0].effect;
285   assert_equals(effect.getComputedTiming().progress, 0.0,
286                 'Initial value of progress');
287 }, 'progress of a new transition with positive delay in before phase');
288
289 test(t => {
290   const div = addDiv(t, { class: 'animated-div' });
291   div.style.transition = 'margin-left 10.5s';
292   getComputedStyle(div).marginLeft;
293   div.style.marginLeft = '10px';
294
295   const anim = div.getAnimations()[0];
296   anim.finish();
297   assert_equals(anim.effect.getComputedTiming().progress, null,
298                 'finished progress');
299 }, 'progress of a finished transition');
300
301
302 // --------------------
303 // currentIteration
304 // --------------------
305
306 test(t => {
307   const div = addDiv(t, { class: 'animated-div' });
308   div.style.transition = 'margin-left 10s';
309   getComputedStyle(div).marginLeft;
310   div.style.marginLeft = '10px';
311
312   const effect = div.getAnimations()[0].effect;
313   assert_equals(effect.getComputedTiming().currentIteration, 0,
314                 'Initial value of currentIteration');
315 }, 'currentIteration of a new transition');
316
317 test(t => {
318   const div = addDiv(t, { class: 'animated-div' });
319   div.style.transition = 'margin-left 10s 2s';
320   getComputedStyle(div).marginLeft;
321   div.style.marginLeft = '10px';
322
323   const effect = div.getAnimations()[0].effect;
324   assert_equals(effect.getComputedTiming().currentIteration, 0,
325                 'Initial value of currentIteration');
326 }, 'currentIteration of a new transition with positive delay in before phase');
327
328 test(t => {
329   const div = addDiv(t, { class: 'animated-div' });
330   div.style.transition = 'margin-left 10s';
331   getComputedStyle(div).marginLeft;
332   div.style.marginLeft = '10px';
333
334   const anim = div.getAnimations()[0];
335   anim.finish();
336   assert_equals(anim.effect.getComputedTiming().currentIteration, null,
337                 'finished currentIteration');
338 }, 'currentIteration of a finished transition');
339
340 </script>