cec2bdb062dc24d6f6e701316bb692fc2cf0ecb2
[WebKit-https.git] / LayoutTests / imported / mozilla / css-animations / test_animation-ready.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 abc {
8   to { transform: translate(10px) }
9 }
10 </style>
11 <body>
12 <div id="log"></div>
13 <script>
14 'use strict';
15
16 promise_test(function(t) {
17   var div = addDiv(t);
18   div.style.animation = 'abc 100s paused';
19   var animation = div.getAnimations()[0];
20   var originalReadyPromise = animation.ready;
21
22   return animation.ready.then(function() {
23     div.style.animationPlayState = 'running';
24     assert_not_equals(animation.ready, originalReadyPromise,
25                       'After updating animation-play-state a new ready promise'
26                       + ' object is created');
27   });
28 }, 'A new ready promise is created when setting animation-play-state: running');
29
30 promise_test(function(t) {
31   var div = addDiv(t);
32
33   // Set up pending animation
34   div.style.animation = 'abc 100s';
35   var animation = div.getAnimations()[0];
36   assert_true(animation.pending, 'Animation is initially pending');
37
38   // Set up listeners on ready promise
39   var retPromise = animation.ready.then(function() {
40     assert_unreached('ready promise is fulfilled');
41   }).catch(function(err) {
42     assert_equals(err.name, 'AbortError',
43                   'ready promise is rejected with AbortError');
44   });
45
46   // Now cancel the animation and flush styles
47   div.style.animation = '';
48   getComputedStyle(div).animation;
49
50   return retPromise;
51 }, 'ready promise is rejected when an animation is canceled by resetting'
52    + ' the animation property');
53
54 promise_test(function(t) {
55   var div = addDiv(t);
56
57   // As before, but this time instead of removing all animations, simply update
58   // the list of animations. At least for Firefox, updating is a different
59   // code path.
60
61   // Set up pending animation
62   div.style.animation = 'abc 100s';
63   var animation = div.getAnimations()[0];
64   assert_true(animation.pending, 'Animation is initially pending');
65
66   // Set up listeners on ready promise
67   var retPromise = animation.ready.then(function() {
68     assert_unreached('ready promise was fulfilled');
69   }).catch(function(err) {
70     assert_equals(err.name, 'AbortError',
71                   'ready promise is rejected with AbortError');
72   });
73
74   // Now update the animation and flush styles
75   div.style.animation = 'def 100s';
76   getComputedStyle(div).animation;
77
78   return retPromise;
79 }, 'ready promise is rejected when an animation is cancelled by updating'
80    + ' the animation property');
81
82 promise_test(function(t) {
83   var div = addDiv(t, { style: 'animation: abc 100s' });
84   var animation = div.getAnimations()[0];
85   var originalReadyPromise = animation.ready;
86
87   return animation.ready.then(function() {
88     div.style.animationPlayState = 'paused';
89     assert_not_equals(animation.ready, originalReadyPromise,
90                       'A new Promise object is generated when setting'
91                       + ' animation-play-state: paused');
92   });
93 }, 'A new ready promise is created when setting animation-play-state: paused');
94
95 promise_test(function(t) {
96   var div = addDiv(t, { style: 'animation: abc 100s' });
97   var animation = div.getAnimations()[0];
98
99   return animation.ready.then(function() {
100     div.style.animationPlayState = 'paused';
101     var firstReadyPromise = animation.ready;
102     animation.pause();
103     assert_equals(animation.ready, firstReadyPromise,
104                   'Ready promise objects are identical after redundant pause');
105   });
106 }, 'Pausing twice re-uses the same Promise');
107
108 promise_test(function(t) {
109   var div = addDiv(t, { style: 'animation: abc 100s' });
110   var animation = div.getAnimations()[0];
111
112   return animation.ready.then(function() {
113     div.style.animationPlayState = 'paused';
114
115     // Flush style and verify we're pending at the same time
116     assert_true(animation.pending, 'Animation is pending');
117     var pauseReadyPromise = animation.ready;
118
119     // Now play again immediately
120     div.style.animationPlayState = 'running';
121     assert_true(animation.pending, 'Animation is still pending');
122     assert_equals(animation.ready, pauseReadyPromise,
123                   'The pause Promise is re-used when playing while waiting'
124                   + ' to pause');
125
126     return animation.ready;
127   }).then(function() {
128     assert_true(!animation.pending && animation.playState === 'running',
129                 'Animation is running after aborting a pause');
130   });
131 }, 'If a pause operation is interrupted, the ready promise is reused');
132
133 promise_test(function(t) {
134   var div = addDiv(t, { style: 'animation: abc 100s' });
135   var animation = div.getAnimations()[0];
136
137   return animation.ready.then(function() {
138     div.style.animationPlayState = 'paused';
139     return animation.ready;
140   }).then(function(resolvedAnimation) {
141     assert_equals(resolvedAnimation, animation,
142                   'Promise received when ready Promise for a pause operation'
143                   + ' is completed is the animation on which the pause was'
144                   + ' performed');
145   });
146 }, 'When a pause is complete the Promise callback gets the correct animation');
147
148 </script>
149 </body>