53f9fa97e05937b77a2dba6ef9e19f47ed843636
[WebKit-https.git] / LayoutTests / imported / mozilla / css-animations / test_animations-dynamic-changes.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 <style>
7 @keyframes anim1 {
8   to { left: 100px }
9 }
10 @keyframes anim2 { }
11 </style>
12 <body>
13 <div id="log"></div>
14 <script>
15 'use strict';
16
17 promise_test(function(t) {
18   var div = addDiv(t);
19   div.style.animation = 'anim1 100s';
20   var originalAnimation = div.getAnimations()[0];
21   var originalStartTime;
22   var originalCurrentTime;
23
24   // Wait a moment so we can confirm the startTime doesn't change (and doesn't
25   // simply reflect the current time).
26   return originalAnimation.ready.then(function() {
27     originalStartTime = originalAnimation.startTime;
28     originalCurrentTime = originalAnimation.currentTime;
29
30     // Wait a moment so we can confirm the startTime doesn't change (and
31     // doesn't simply reflect the current time).
32     return waitForNextFrame();
33   }).then(function() {
34     div.style.animationDuration = '200s';
35     var animation = div.getAnimations()[0];
36     assert_equals(animation, originalAnimation,
37                   'The same Animation is returned after updating'
38                   + ' animation duration');
39     assert_equals(animation.startTime, originalStartTime,
40                   'Animations returned by getAnimations preserve'
41                   + ' their startTime even when they are updated');
42     // Sanity check
43     assert_not_equals(animation.currentTime, originalCurrentTime,
44                       'Animation.currentTime has updated in next'
45                       + ' requestAnimationFrame callback');
46   });
47 }, 'Animations preserve their startTime when changed');
48
49 test(function(t) {
50   var div = addDiv(t);
51   div.style.animation = 'anim1 100s, anim1 100s';
52
53   // Store original state
54   var animations = div.getAnimations();
55   var animation1 = animations[0];
56   var animation2 = animations[1];
57
58   // Update first in list
59   div.style.animationDuration = '200s, 100s';
60   animations = div.getAnimations();
61   assert_equals(animations[0], animation1,
62                 'First Animation is in same position after update');
63   assert_equals(animations[1], animation2,
64                 'Second Animation is in same position after update');
65 }, 'Updated Animations maintain their order in the list');
66
67 promise_test(function(t) {
68   var div = addDiv(t);
69   div.style.animation = 'anim1 200s, anim1 100s';
70
71   // Store original state
72   var animations = div.getAnimations();
73   var animation1 = animations[0];
74   var animation2 = animations[1];
75
76   // Wait before continuing so we can compare start times (otherwise the
77   // new Animation objects and existing Animation objects will all have the same
78   // start time).
79   return waitForAllAnimations(animations).then(waitForFrame).then(function() {
80     // Swap duration of first and second in list and prepend animation at the
81     // same time
82     div.style.animation = 'anim1 100s, anim1 100s, anim1 200s';
83     animations = div.getAnimations();
84     assert_true(animations[0] !== animation1 && animations[0] !== animation2,
85                 'New Animation is prepended to start of list');
86     assert_equals(animations[1], animation1,
87                   'First Animation is in second position after update');
88     assert_equals(animations[2], animation2,
89                   'Second Animation is in third position after update');
90     assert_equals(animations[1].startTime, animations[2].startTime,
91                   'Old Animations have the same start time');
92     // TODO: Check that animations[0].startTime === null
93     return animations[0].ready;
94   }).then(function() {
95     assert_greater_than(animations[0].startTime, animations[1].startTime,
96                         'New Animation has later start time');
97   });
98 }, 'Only the startTimes of existing animations are preserved');
99
100 promise_test(function(t) {
101   var div = addDiv(t);
102   div.style.animation = 'anim1 100s, anim1 100s';
103   var secondAnimation = div.getAnimations()[1];
104
105   // Wait before continuing so we can compare start times
106   return secondAnimation.ready.then(waitForNextFrame).then(function() {
107     // Trim list of animations
108     div.style.animationName = 'anim1';
109     var animations = div.getAnimations();
110     assert_equals(animations.length, 1, 'List of Animations was trimmed');
111     assert_equals(animations[0], secondAnimation,
112                   'Remaining Animation is the second one in the list');
113     assert_equals(typeof(animations[0].startTime), 'number',
114                   'Remaining Animation has resolved startTime');
115     assert_less_than(animations[0].startTime,
116                      animations[0].timeline.currentTime,
117                      'Remaining Animation preserves startTime');
118   });
119 }, 'Animations are removed from the start of the list while preserving'
120    + ' the state of existing Animations');
121
122 promise_test(function(t) {
123   var div = addDiv(t);
124   div.style.animation = 'anim1 100s';
125   var firstAddedAnimation = div.getAnimations()[0],
126       secondAddedAnimation,
127       animations;
128
129   // Wait and add second Animation
130   return firstAddedAnimation.ready.then(waitForFrame).then(function() {
131     div.style.animation = 'anim1 100s, anim1 100s';
132     secondAddedAnimation = div.getAnimations()[0];
133
134     // Wait again and add another Animation
135     return secondAddedAnimation.ready.then(waitForFrame);
136   }).then(function() {
137     div.style.animation = 'anim1 100s, anim2 100s, anim1 100s';
138     animations = div.getAnimations();
139     assert_not_equals(firstAddedAnimation, secondAddedAnimation,
140                       'New Animations are added to start of the list');
141     assert_equals(animations[0], secondAddedAnimation,
142                   'Second Animation remains in same position after'
143                   + ' interleaving');
144     assert_equals(animations[2], firstAddedAnimation,
145                   'First Animation remains in same position after'
146                   + ' interleaving');
147     return animations[1].ready;
148   }).then(function() {
149     assert_greater_than(animations[1].startTime, animations[0].startTime,
150                         'Interleaved animation starts later than existing ' +
151                         'animations');
152     assert_greater_than(animations[0].startTime, animations[2].startTime,
153                         'Original animations retain their start time');
154   });
155 }, 'Animation state is preserved when interleaving animations in list');
156
157 </script>
158 </body>