[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / imported / mozilla / css-animations / test_setting-effect.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     from {
9       margin-left: 0px;
10     }
11     to {
12       margin-left: 100px;
13     }
14   }
15 </style>
16 <body>
17 <div id="log"></div>
18 <script>
19 'use strict';
20
21 promise_test(function(t) {
22   var div = addDiv(t);
23   div.style.animation = 'anim 100s';
24
25   var watcher = new EventWatcher(t, div, [ 'animationend',
26                                            'animationcancel' ]);
27   var animation = div.getAnimations()[0];
28   return animation.ready.then(function() {
29     animation.currentTime = 50 * MS_PER_SEC;
30     animation.effect = null;
31     assert_equals(animation.playState, 'finished');
32     assert_equals(getComputedStyle(div).marginLeft, '0px');
33     return watcher.wait_for('animationend');
34   });
35 }, 'Setting a null effect on a running animation fires an animationend event');
36
37 promise_test(function(t) {
38   var div = addDiv(t);
39   div.style.animation = 'anim 100s';
40
41   var animation = div.getAnimations()[0];
42   return animation.ready.then(function() {
43     animation.currentTime = 50 * MS_PER_SEC;
44     animation.effect = new KeyframeEffect(div,
45                                           { left: [ '0px' , '100px'] },
46                                           100 * MS_PER_SEC);
47     assert_equals(animation.playState, 'running');
48     assert_equals(getComputedStyle(div).marginLeft, '0px');
49     assert_equals(getComputedStyle(div).left, '50px');
50   });
51 }, 'Replacing an animation\'s effect with an effect that targets a different ' +
52    'property should update both properties');
53
54 promise_test(function(t) {
55   var div = addDiv(t);
56   div.style.animation = 'anim 100s';
57
58   var animation = div.getAnimations()[0];
59   return animation.ready.then(function() {
60     animation.currentTime = 50 * MS_PER_SEC;
61     animation.effect = new KeyframeEffect(div,
62                                           { left: [ '0px' , '100px'] },
63                                           20 * MS_PER_SEC);
64     assert_equals(animation.playState, 'finished');
65   });
66 }, 'Replacing an animation\'s effect with a shorter one that should have ' +
67    'already finished, the animation finishes immediately');
68
69 promise_test(function(t) {
70   var div = addDiv(t);
71   div.style.animation = 'anim 100s';
72
73   var animation = div.getAnimations()[0];
74   assert_true(animation.pending);
75
76   animation.effect = new KeyframeEffect(div,
77                                         { left: [ '0px' , '100px'] },
78                                         100 * MS_PER_SEC);
79   assert_true(animation.pending);
80
81   return animation.ready.then(function() {
82     assert_false(animation.pending);
83   });
84 }, 'A play-pending animation\'s effect whose effect is replaced still exits ' +
85    'the pending state');
86
87 promise_test(function(t) {
88   var div1 = addDiv(t);
89   var div2 = addDiv(t);
90
91   var watcher1 = new EventWatcher(t, div1, 'animationstart');
92   // Watch |div2| as well to ensure it does *not* get events.
93   var watcher2 = new EventWatcher(t, div2, 'animationstart');
94
95   div1.style.animation = 'anim 100s';
96
97   var animation = div1.getAnimations()[0];
98   animation.effect = new KeyframeEffect(div2,
99                                         { left: [ '0px', '100px' ] },
100                                         100 * MS_PER_SEC);
101
102   return watcher1.wait_for('animationstart').then(function() {
103     assert_equals(animation.effect.target, div2);
104
105     // Then wait a couple of frames and check that no event was dispatched.
106     return waitForAnimationFrames(2);
107   });
108 }, 'The event is dispatched at the original element even after setting an ' +
109    'effect with a different target element');
110
111 promise_test(function(t) {
112   var div = addDiv(t);
113   var watcher = new EventWatcher(t, div, [ 'animationstart',
114                                            'animationend',
115                                            'animationcancel' ]);
116   div.style.animation = 'anim 100s';
117   var animation = div.getAnimations()[0];
118   animation.finish();
119
120   return watcher.wait_for([ 'animationstart',
121                             'animationend' ]).then(function(evt) {
122     // Set a longer effect
123     animation.effect = new KeyframeEffect(div,
124                                           { left: [ '0px', '100px' ] },
125                                           200 * MS_PER_SEC);
126     return watcher.wait_for('animationstart');
127   });
128 }, 'After replacing a finished animation\'s effect with a longer one ' +
129    'it fires an animationstart event');
130
131 </script>
132 </body>