Unreviewed, rolling out r251536.
[WebKit-https.git] / LayoutTests / imported / mozilla / css-animations / test_animation-cancel.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 @keyframes translateAnim {
8   to { transform: translate(100px) }
9 }
10 @keyframes marginLeftAnim {
11   to { margin-left: 100px }
12 }
13 @keyframes marginLeftAnim100To200 {
14   from { margin-left: 100px }
15   to { margin-left: 200px }
16 }
17 </style>
18 <body>
19 <div id="log"></div>
20 <script>
21 'use strict';
22
23 promise_test(function(t) {
24   var div = addDiv(t, { style: 'animation: translateAnim 100s' });
25   var animation = div.getAnimations()[0];
26
27   return animation.ready.then(function() {
28     assert_not_equals(getComputedStyle(div).transform, 'none',
29                       'transform style is animated before cancelling');
30     animation.cancel();
31     assert_equals(getComputedStyle(div).transform, 'none',
32                   'transform style is no longer animated after cancelling');
33   });
34 }, 'Animated style is cleared after cancelling a running CSS animation');
35
36 promise_test(function(t) {
37   var div = addDiv(t, { style: 'animation: translateAnim 100s forwards' });
38   var animation = div.getAnimations()[0];
39   animation.finish();
40
41   return animation.ready.then(function() {
42     assert_not_equals(getComputedStyle(div).transform, 'none',
43                       'transform style is filling before cancelling');
44     animation.cancel();
45     assert_equals(getComputedStyle(div).transform, 'none',
46                   'fill style is cleared after cancelling');
47   });
48 }, 'Animated style is cleared after cancelling a filling CSS animation');
49
50 test(function(t) {
51   var div = addDiv(t, { style: 'animation: marginLeftAnim 100s linear' });
52   var animation = div.getAnimations()[0];
53   animation.cancel();
54
55   assert_equals(getComputedStyle(div).marginLeft, '0px',
56                 'margin-left style is not animated after cancelling');
57
58   animation.currentTime = 50 * 1000;
59   assert_equals(getComputedStyle(div).marginLeft, '50px',
60                 'margin-left style is updated when cancelled animation is'
61                 + ' seeked');
62 }, 'After canceling an animation, it can still be seeked');
63
64 promise_test(function(t) {
65   var div =
66     addDiv(t, { style: 'animation: marginLeftAnim100To200 100s linear' });
67   var animation = div.getAnimations()[0];
68
69   return animation.ready.then(function() {
70     animation.cancel();
71     assert_equals(getComputedStyle(div).marginLeft, '0px',
72                   'margin-left style is not animated after cancelling');
73     animation.play();
74     assert_equals(getComputedStyle(div).marginLeft, '100px',
75                   'margin-left style is animated after re-starting animation');
76     return animation.ready;
77   }).then(function() {
78     assert_equals(animation.playState, 'running',
79                   'Animation succeeds in running after being re-started');
80   });
81 }, 'After cancelling an animation, it can still be re-used');
82
83 test(function(t) {
84   var div =
85     addDiv(t, { style: 'animation: marginLeftAnim100To200 100s linear' });
86   var animation = div.getAnimations()[0];
87   animation.cancel();
88   assert_equals(getComputedStyle(div).marginLeft, '0px',
89                 'margin-left style is not animated after cancelling');
90
91   // Trigger a change to some animation properties and check that this
92   // doesn't cause the animation to become live again
93   div.style.animationDuration = '200s';
94   assert_equals(getComputedStyle(div).marginLeft, '0px',
95                 'margin-left style is still not animated after updating'
96                 + ' animation-duration');
97   assert_equals(animation.playState, 'idle',
98                 'Animation is still idle after updating animation-duration');
99 }, 'After cancelling an animation, updating animation properties doesn\'t make'
100    + ' it live again');
101
102 test(function(t) {
103   var div =
104     addDiv(t, { style: 'animation: marginLeftAnim100To200 100s linear' });
105   var animation = div.getAnimations()[0];
106   animation.cancel();
107   assert_equals(getComputedStyle(div).marginLeft, '0px',
108                 'margin-left style is not animated after cancelling');
109
110   // Make some changes to animation-play-state and check that the
111   // animation doesn't become live again. This is because it should be
112   // possible to cancel an animation from script such that all future
113   // changes to style are ignored.
114
115   // Redundant change
116   div.style.animationPlayState = 'running';
117   assert_equals(animation.playState, 'idle',
118                 'Animation is still idle after a redundant change to'
119                 + ' animation-play-state');
120
121   // Pause
122   div.style.animationPlayState = 'paused';
123   assert_equals(animation.playState, 'idle',
124                 'Animation is still idle after setting'
125                 + ' animation-play-state: paused');
126
127   // Play
128   div.style.animationPlayState = 'running';
129   assert_equals(animation.playState, 'idle',
130                 'Animation is still idle after re-setting'
131                 + ' animation-play-state: running');
132
133 }, 'After cancelling an animation, updating animation-play-state doesn\'t'
134    + ' make it live again');
135
136 promise_test(function(t) {
137   var div = addDiv(t, { style: 'animation: translateAnim 10s both' });
138   div.style.marginLeft = '0px';
139
140   var animation = div.getAnimations()[0];
141
142   return animation.ready.then(function() {
143     assert_equals(animation.playState, 'running');
144
145     div.style.animationName = 'none';
146     flushComputedStyle(div);
147     return waitForFrame();
148   }).then(function() {
149     assert_equals(animation.playState, 'idle');
150     assert_equals(getComputedStyle(div).marginLeft, '0px');
151   });
152 }, 'Setting animation-name to \'none\' cancels the animation');
153
154 promise_test(function(t) {
155   var div = addDiv(t, { style: 'animation: translateAnim 10s both' });
156   var animation = div.getAnimations()[0];
157
158   return animation.ready.then(function() {
159     assert_equals(animation.playState, 'running');
160
161     div.style.display = 'none';
162     return waitForFrame();
163   }).then(function() {
164     assert_equals(animation.playState, 'idle');
165     assert_equals(getComputedStyle(div).marginLeft, '0px');
166   });
167 }, 'Setting display:none on an element cancel its animations');
168
169 promise_test(function(t) {
170   var parentDiv = addDiv(t);
171   var childDiv  = document.createElement('div');
172   parentDiv.appendChild(childDiv);
173
174   childDiv.setAttribute('style', 'animation: translateAnim 10s both');
175   flushComputedStyle(childDiv);
176
177   var animation = childDiv.getAnimations()[0];
178
179   return animation.ready.then(function() {
180     assert_equals(animation.playState, 'running');
181
182     parentDiv.style.display = 'none';
183     return waitForFrame();
184   }).then(function() {
185     assert_equals(animation.playState, 'idle');
186     assert_equals(getComputedStyle(childDiv).marginLeft, '0px');
187   });
188 }, 'Setting display:none on an ancestor element cancels animations on ' +
189    'descendants');
190
191 </script>
192 </body>
193 </html>