3827278b3b3b083936cf355e0c704e31fbe69a71
[WebKit-https.git] / LayoutTests / imported / mozilla / css-animations / test_animation-pausing.html
1 <!doctype html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
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 @keyframes anim {
8   0% { margin-left: 0px }
9   100% { margin-left: 10000px }
10 }
11 </style>
12 <body>
13 <div id="log"></div>
14 <script>
15 'use strict';
16
17 function getMarginLeft(cs) {
18   return parseFloat(cs.marginLeft);
19 }
20
21 promise_test(function(t) {
22   var div = addDiv(t);
23   var cs = getComputedStyle(div);
24   div.style.animation = 'anim 1000s paused';
25   var animation = div.getAnimations()[0];
26   assert_equals(getMarginLeft(cs), 0,
27                 'Initial value of margin-left is zero');
28   animation.play();
29
30   return animation.ready.then(waitForNextFrame).then(function() {
31     assert_greater_than(getMarginLeft(cs), 0,
32                         'Playing value of margin-left is greater than zero');
33   });
34 }, 'play() overrides animation-play-state');
35
36 promise_test(function(t) {
37   var div = addDiv(t);
38   var cs = getComputedStyle(div);
39   div.style.animation = 'anim 1000s paused';
40   var animation = div.getAnimations()[0];
41   assert_equals(getMarginLeft(cs), 0,
42                 'Initial value of margin-left is zero');
43
44   animation.pause();
45   div.style.animationPlayState = 'running';
46
47   return animation.ready.then(waitForNextFrame).then(function() {
48     assert_equals(cs.animationPlayState, 'running',
49                   'animation-play-state is running');
50     assert_equals(getMarginLeft(cs), 0,
51                   'Paused value of margin-left is zero');
52   });
53 }, 'pause() overrides animation-play-state');
54
55 promise_test(function(t) {
56   var div = addDiv(t);
57   var cs = getComputedStyle(div);
58   div.style.animation = 'anim 1000s paused';
59   var animation = div.getAnimations()[0];
60   assert_equals(getMarginLeft(cs), 0,
61                 'Initial value of margin-left is zero');
62   animation.play();
63   var previousAnimVal;
64
65   return animation.ready.then(function() {
66     div.style.animationPlayState = 'running';
67     cs.animationPlayState; // Trigger style resolution
68     return waitForNextFrame();
69   }).then(function() {
70     assert_equals(cs.animationPlayState, 'running',
71                   'animation-play-state is running');
72     div.style.animationPlayState = 'paused';
73     return animation.ready;
74   }).then(function() {
75     assert_equals(cs.animationPlayState, 'paused',
76                   'animation-play-state is paused');
77     previousAnimVal = getMarginLeft(cs);
78     return waitForNextFrame();
79   }).then(function() {
80     assert_equals(getMarginLeft(cs), previousAnimVal,
81                   'Animated value of margin-left does not change when'
82                   + ' paused by style');
83   });
84 }, 'play() is overridden by later setting "animation-play-state: paused"');
85
86 promise_test(function(t) {
87   var div = addDiv(t);
88   var cs = getComputedStyle(div);
89   div.style.animation = 'anim 1000s';
90   var animation = div.getAnimations()[0];
91   assert_equals(getMarginLeft(cs), 0,
92                 'Initial value of margin-left is zero');
93
94   // Set the specified style first. If implementations fail to
95   // apply the style changes first, they will ignore the redundant
96   // call to play() and fail to correctly override the pause style.
97   div.style.animationPlayState = 'paused';
98   animation.play();
99   var previousAnimVal = getMarginLeft(cs);
100
101   return animation.ready.then(waitForNextFrame).then(function() {
102     assert_equals(cs.animationPlayState, 'paused',
103                   'animation-play-state is paused');
104     assert_greater_than(getMarginLeft(cs), previousAnimVal,
105                         'Playing value of margin-left is increasing');
106   });
107 }, 'play() flushes pending changes to animation-play-state first');
108
109 promise_test(function(t) {
110   var div = addDiv(t);
111   var cs = getComputedStyle(div);
112   div.style.animation = 'anim 1000s paused';
113   var animation = div.getAnimations()[0];
114   assert_equals(getMarginLeft(cs), 0,
115                 'Initial value of margin-left is zero');
116
117   // Unlike the previous test for play(), since calling pause() is sticky,
118   // we'll apply it even if the underlying style also says we're paused.
119   //
120   // We would like to test that implementations flush styles before running
121   // pause() but actually there's no style we can currently set that will
122   // change the behavior of pause(). That may change in the future
123   // (e.g. if we introduce animation-timeline or animation-playback-rate etc.).
124   //
125   // For now this just serves as a sanity check that we do the same thing
126   // even if we set style before calling the API.
127   div.style.animationPlayState = 'running';
128   animation.pause();
129   var previousAnimVal = getMarginLeft(cs);
130
131   return animation.ready.then(waitForNextFrame).then(function() {
132     assert_equals(cs.animationPlayState, 'running',
133                   'animation-play-state is running');
134     assert_equals(getMarginLeft(cs), previousAnimVal,
135                   'Paused value of margin-left does not change');
136   });
137 }, 'pause() applies pending changes to animation-play-state first');
138 // (Note that we can't actually test for this; see comment above, in test-body.)
139
140 promise_test(function(t) {
141   var div = addDiv(t, { style: 'animation: anim 1000s' });
142   var animation = div.getAnimations()[0];
143   var readyPromiseRun = false;
144
145   return animation.ready.then(function() {
146     div.style.animationPlayState = 'paused';
147     assert_true(animation.pending && animation.playState === 'paused',
148                 'Animation is pause-pending');
149
150     // Set current time
151     animation.currentTime = 5 * MS_PER_SEC;
152     assert_equals(animation.playState, 'paused',
153                   'Animation is paused immediately after setting currentTime');
154     assert_equals(animation.startTime, null,
155                   'Animation startTime is unresolved immediately after ' +
156                   'setting currentTime');
157     assert_equals(animation.currentTime, 5 * MS_PER_SEC,
158                   'Animation currentTime does not change when forcing a ' +
159                   'pause operation to complete');
160
161     // The ready promise should now be resolved. If it's not then test will
162     // probably time out before anything else happens that causes it to resolve.
163     return animation.ready;
164   });
165 }, 'Setting the current time completes a pending pause');
166
167 </script>
168 </body>