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