d809a1ac376763314277271e0a8246f7775c797c
[WebKit-https.git] / LayoutTests / imported / mozilla / css-transitions / test_animation-cancel.html
1 <!doctype html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=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 <body>
7 <div id="log"></div>
8 <script>
9 'use strict';
10
11 promise_test(function(t) {
12   var div = addDiv(t, { style: 'margin-left: 0px' });
13   flushComputedStyle(div);
14
15   div.style.transition = 'margin-left 100s';
16   div.style.marginLeft = '1000px';
17
18   var transition = div.getAnimations()[0];
19   return transition.ready.then(waitForFrame).then(function() {
20     assert_not_equals(getComputedStyle(div).marginLeft, '1000px',
21                       'transform style is animated before cancelling');
22     transition.cancel();
23     assert_equals(getComputedStyle(div).marginLeft, div.style.marginLeft,
24                   'transform style is no longer animated after cancelling');
25   });
26 }, 'Animated style is cleared after cancelling a running CSS transition');
27
28 promise_test(function(t) {
29   var div = addDiv(t, { style: 'margin-left: 0px' });
30   flushComputedStyle(div);
31
32   div.style.transition = 'margin-left 100s';
33   div.style.marginLeft = '1000px';
34
35   var transition = div.getAnimations()[0];
36   return transition.ready.then(function() {
37     transition.cancel();
38     assert_equals(getComputedStyle(div).marginLeft, '1000px',
39                   'margin-left style is not animated after cancelling');
40     transition.play();
41     assert_equals(getComputedStyle(div).marginLeft, '0px',
42                   'margin-left style is animated after re-starting transition');
43     return transition.ready;
44   }).then(function() {
45     assert_equals(transition.playState, 'running',
46                   'Transition succeeds in running after being re-started');
47   });
48 }, 'After canceling a transition, it can still be re-used');
49
50 promise_test(function(t) {
51   var div = addDiv(t, { style: 'margin-left: 0px' });
52   flushComputedStyle(div);
53
54   div.style.transition = 'margin-left 100s';
55   div.style.marginLeft = '1000px';
56
57   var transition = div.getAnimations()[0];
58   return transition.ready.then(function() {
59     transition.finish();
60     transition.cancel();
61     assert_equals(getComputedStyle(div).marginLeft, '1000px',
62                   'margin-left style is not animated after cancelling');
63     transition.play();
64     assert_equals(getComputedStyle(div).marginLeft, '0px',
65                   'margin-left style is animated after re-starting transition');
66     return transition.ready;
67   }).then(function() {
68     assert_equals(transition.playState, 'running',
69                   'Transition succeeds in running after being re-started');
70   });
71 }, 'After cancelling a finished transition, it can still be re-used');
72
73 test(function(t) {
74   var div = addDiv(t, { style: 'margin-left: 0px' });
75   flushComputedStyle(div);
76
77   div.style.transition = 'margin-left 100s';
78   div.style.marginLeft = '1000px';
79
80   var transition = div.getAnimations()[0];
81   transition.cancel();
82   assert_equals(getComputedStyle(div).marginLeft, '1000px',
83                 'margin-left style is not animated after cancelling');
84
85   // Trigger a change to a transition property and check that this
86   // doesn't cause the animation to become live again
87   div.style.transitionDuration = '200s';
88   flushComputedStyle(div);
89   assert_equals(getComputedStyle(div).marginLeft, '1000px',
90                 'margin-left style is still not animated after updating'
91                 + ' transition-duration');
92   assert_equals(transition.playState, 'idle',
93                 'Transition is still idle after updating transition-duration');
94 }, 'After cancelling a transition, updating transition properties doesn\'t make'
95    + ' it live again');
96
97 promise_test(function(t) {
98   var div = addDiv(t, { style: 'margin-left: 0px' });
99   flushComputedStyle(div);
100
101   div.style.transition = 'margin-left 100s';
102   div.style.marginLeft = '1000px';
103
104   var transition = div.getAnimations()[0];
105   return transition.ready.then(function() {
106     assert_equals(transition.playState, 'running');
107     div.style.display = 'none';
108     return waitForFrame();
109   }).then(function() {
110     assert_equals(transition.playState, 'idle');
111     assert_equals(getComputedStyle(div).marginLeft, '1000px');
112   });
113 }, 'Setting display:none on an element cancels its transitions');
114
115 promise_test(function(t) {
116   var parentDiv = addDiv(t);
117   var childDiv = document.createElement('div');
118   parentDiv.appendChild(childDiv);
119   childDiv.setAttribute('style', 'margin-left: 0px');
120
121   flushComputedStyle(childDiv);
122
123   childDiv.style.transition = 'margin-left 100s';
124   childDiv.style.marginLeft = '1000px';
125
126   var transition = childDiv.getAnimations()[0];
127   return transition.ready.then(function() {
128     assert_equals(transition.playState, 'running');
129     parentDiv.style.display = 'none';
130     return waitForFrame();
131   }).then(function() {
132     assert_equals(transition.playState, 'idle');
133     assert_equals(getComputedStyle(childDiv).marginLeft, '1000px');
134   });
135 }, 'Setting display:none cancels transitions on a child element');
136
137 promise_test(function(t) {
138   var div = addDiv(t, { style: 'margin-left: 0px' });
139   flushComputedStyle(div);
140
141   div.style.transition = 'margin-left 100s';
142   div.style.marginLeft = '1000px';
143
144   var transition = div.getAnimations()[0];
145   return transition.ready.then(function() {
146     assert_equals(transition.playState, 'running');
147     // Set an unrecognized property value
148     div.style.transitionProperty = 'none';
149     flushComputedStyle(div);
150     return waitForFrame();
151   }).then(function() {
152     assert_equals(transition.playState, 'idle');
153     assert_equals(getComputedStyle(div).marginLeft, '1000px');
154   });
155 }, 'Removing a property from transition-property cancels transitions on that '+
156    'property');
157
158 promise_test(function(t) {
159   var div = addDiv(t, { style: 'margin-left: 0px' });
160   flushComputedStyle(div);
161
162   div.style.transition = 'margin-left 100s';
163   div.style.marginLeft = '1000px';
164
165   var transition = div.getAnimations()[0];
166   return transition.ready.then(function() {
167     assert_equals(transition.playState, 'running');
168     div.style.transition = 'margin-top 10s -10s'; // combined duration is zero
169     flushComputedStyle(div);
170     return waitForFrame();
171   }).then(function() {
172     assert_equals(transition.playState, 'idle');
173     assert_equals(getComputedStyle(div).marginLeft, '1000px');
174   });
175 }, 'Setting zero combined duration');
176
177 promise_test(function(t) {
178   var div = addDiv(t, { style: 'margin-left: 0px' });
179   flushComputedStyle(div);
180
181   div.style.transition = 'margin-left 100s';
182   div.style.marginLeft = '1000px';
183
184   var transition = div.getAnimations()[0];
185   return transition.ready.then(function() {
186     assert_equals(transition.playState, 'running');
187     div.style.marginLeft = '2000px';
188     flushComputedStyle(div);
189     return waitForFrame();
190   }).then(function() {
191     assert_equals(transition.playState, 'idle');
192   });
193 }, 'Changing style to another interpolable value cancels the original ' +
194    'transition');
195
196 promise_test(function(t) {
197   var div = addDiv(t, { style: 'margin-left: 0px' });
198   flushComputedStyle(div);
199
200   div.style.transition = 'margin-left 100s';
201   div.style.marginLeft = '1000px';
202
203   var transition = div.getAnimations()[0];
204   return transition.ready.then(function() {
205     assert_equals(transition.playState, 'running');
206     div.style.marginLeft = 'auto';
207     flushComputedStyle(div);
208     return waitForFrame();
209   }).then(function() {
210     assert_equals(div.getAnimations().length, 0,
211                   'There should be no transitions');
212     assert_equals(transition.playState, 'idle');
213   });
214 }, 'An after-change style value can\'t be interpolated');
215
216 promise_test(function(t) {
217   var div = addDiv(t, { style: 'margin-left: 0px' });
218   flushComputedStyle(div);
219
220   div.style.transition = 'margin-left 100s';
221   div.style.marginLeft = '1000px';
222
223   var transition = div.getAnimations()[0];
224   return transition.ready.then(function() {
225     assert_equals(transition.playState, 'running');
226     div.style.marginLeft = '0px';
227     flushComputedStyle(div);
228     return waitForFrame();
229   }).then(function() {
230     assert_equals(transition.playState, 'idle');
231   });
232 }, 'Reversing a running transition cancels the original transition');
233
234 </script>
235 </body>