[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / imported / mozilla / css-animations / test_animation-finished.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 @keyframes def {}
11 </style>
12 <body>
13 <div id="log"></div>
14 <script>
15 'use strict';
16
17 const ANIM_PROP_VAL = 'abc 100s';
18 const ANIM_DURATION = 100 * MS_PER_SEC;
19
20 promise_test(function(t) {
21   var div = addDiv(t);
22   // Set up pending animation
23   div.style.animation = ANIM_PROP_VAL;
24   var animation = div.getAnimations()[0];
25   var previousFinishedPromise = animation.finished;
26   // Set up listeners on finished promise
27   var retPromise = animation.finished.then(function() {
28     assert_unreached('finished promise is fulfilled');
29   }).catch(function(err) {
30     assert_equals(err.name, 'AbortError',
31                   'finished promise is rejected with AbortError');
32     assert_not_equals(animation.finished, previousFinishedPromise,
33                       'Finished promise should change after the original is ' +
34                       'rejected');
35   });
36
37   // Now cancel the animation and flush styles
38   div.style.animation = '';
39   getComputedStyle(div).animation;
40
41   return retPromise;
42 }, 'finished promise is rejected when an animation is cancelled by resetting ' +
43    'the animation property');
44
45 promise_test(function(t) {
46   var div = addDiv(t);
47   // As before, but this time instead of removing all animations, simply update
48   // the list of animations. At least for Firefox, updating is a different
49   // code path.
50
51   // Set up pending animation
52   div.style.animation = ANIM_PROP_VAL;
53   var animation = div.getAnimations()[0];
54   var previousFinishedPromise = animation.finished;
55
56   // Set up listeners on finished promise
57   var retPromise = animation.finished.then(function() {
58     assert_unreached('finished promise was fulfilled');
59   }).catch(function(err) {
60     assert_equals(err.name, 'AbortError',
61                   'finished promise is rejected with AbortError');
62     assert_not_equals(animation.finished, previousFinishedPromise,
63                       'Finished promise should change after the original is ' +
64                       'rejected');
65   });
66
67   // Now update the animation and flush styles
68   div.style.animation = 'def 100s';
69   getComputedStyle(div).animation;
70
71   return retPromise;
72 }, 'finished promise is rejected when an animation is cancelled by changing ' +
73    'the animation property');
74
75 promise_test(function(t) {
76   var div = addDiv(t);
77   div.style.animation = ANIM_PROP_VAL;
78   var animation = div.getAnimations()[0];
79   var previousFinishedPromise = animation.finished;
80   animation.currentTime = ANIM_DURATION;
81   return animation.finished.then(function() {
82     div.style.animationPlayState = 'running';
83     return waitForAnimationFrames(2);
84   }).then(function() {
85     assert_equals(animation.finished, previousFinishedPromise,
86                   'Should not replay when animation-play-state changes to ' +
87                   '"running" on finished animation');
88     assert_equals(animation.currentTime, ANIM_DURATION,
89                   'currentTime should not change when animation-play-state ' +
90                   'changes to "running" on finished animation');
91   });
92 }, 'Test finished promise changes when animationPlayState set to running');
93
94 </script>
95 </body>