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