[Web Animations] Update WPT tests and move them to imported/w3c/web-platform-tests
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / web-animations / timing-model / animations / set-the-animation-start-time.html
1 <!DOCTYPE html>
2 <meta charset=utf-8>
3 <title>Set the animation start time</title>
4 <link rel="help" href="https://drafts.csswg.org/web-animations/#set-the-animation-start-time">
5 <script src="/resources/testharness.js"></script>
6 <script src="/resources/testharnessreport.js"></script>
7 <script src="../../testcommon.js"></script>
8 <body>
9 <div id="log"></div>
10 <script>
11 'use strict';
12
13 test(t => {
14   // It should only be possible to set *either* the start time or the current
15   // time for an animation that does not have an active timeline.
16
17   const animation =
18     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
19                   null);
20
21   assert_equals(animation.currentTime, null, 'Intial current time');
22   assert_equals(animation.startTime, null, 'Intial start time');
23
24   animation.currentTime = 1000;
25   assert_equals(animation.currentTime, 1000,
26                 'Setting the current time succeeds');
27   assert_equals(animation.startTime, null,
28                 'Start time remains null after setting current time');
29
30   animation.startTime = 1000;
31   assert_equals(animation.startTime, 1000,
32                 'Setting the start time succeeds');
33   assert_equals(animation.currentTime, null,
34                 'Setting the start time clears the current time');
35
36   animation.startTime = null;
37   assert_equals(animation.startTime, null,
38                 'Setting the start time to an unresolved time succeeds');
39   assert_equals(animation.currentTime, null, 'The current time is unaffected');
40
41 }, 'Setting the start time of an animation without an active timeline');
42
43 test(t => {
44   // Setting an unresolved start time on an animation without an active
45   // timeline should not clear the current time.
46
47   const animation =
48     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
49                   null);
50
51   assert_equals(animation.currentTime, null, 'Intial current time');
52   assert_equals(animation.startTime, null, 'Intial start time');
53
54   animation.currentTime = 1000;
55   assert_equals(animation.currentTime, 1000,
56                 'Setting the current time succeeds');
57   assert_equals(animation.startTime, null,
58                 'Start time remains null after setting current time');
59
60   animation.startTime = null;
61   assert_equals(animation.startTime, null, 'Start time remains unresolved');
62   assert_equals(animation.currentTime, 1000, 'Current time is unaffected');
63
64 }, 'Setting an unresolved start time an animation without an active timeline'
65    + ' does not clear the current time');
66
67    test(t => {
68   const animation =
69     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
70                   document.timeline);
71
72   // So long as a hold time is set, querying the current time will return
73   // the hold time.
74
75   // Since the start time is unresolved at this point, setting the current time
76   // will set the hold time
77   animation.currentTime = 1000;
78   assert_equals(animation.currentTime, 1000,
79                 'The current time is calculated from the hold time');
80
81   // If we set the start time, however, we should clear the hold time.
82   animation.startTime = document.timeline.currentTime - 2000;
83   assert_time_equals_literal(animation.currentTime, 2000,
84                              'The current time is calculated from the start'
85                              + ' time, not the hold time');
86
87   // Sanity check
88   assert_equals(animation.playState, 'running',
89                 'Animation reports it is running after setting a resolved'
90                 + ' start time');
91 }, 'Setting the start time clears the hold time');
92
93 test(t => {
94   const animation =
95     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
96                   document.timeline);
97
98   // Set up a running animation (i.e. both start time and current time
99   // are resolved).
100   animation.startTime = document.timeline.currentTime - 1000;
101   assert_equals(animation.playState, 'running');
102   assert_time_equals_literal(animation.currentTime, 1000,
103                              'Current time is resolved for a running animation');
104
105   // Clear start time
106   animation.startTime = null;
107   assert_time_equals_literal(animation.currentTime, 1000,
108                              'Hold time is set after start time is made'
109                              + ' unresolved');
110   assert_equals(animation.playState, 'paused',
111                 'Animation reports it is paused after setting an unresolved'
112                 + ' start time');
113 }, 'Setting an unresolved start time sets the hold time');
114
115 promise_test(t => {
116   const animation =
117     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
118                   document.timeline);
119
120   let readyPromiseCallbackCalled = false;
121   animation.ready.then(() => { readyPromiseCallbackCalled = true; } );
122
123   // Put the animation in the play-pending state
124   animation.play();
125
126   // Sanity check
127   assert_true(animation.pending && animation.playState === 'running',
128               'Animation is in play-pending state');
129
130   // Setting the start time should resolve the 'ready' promise, i.e.
131   // it should schedule a microtask to run the promise callbacks.
132   animation.startTime = document.timeline.currentTime;
133   assert_false(readyPromiseCallbackCalled,
134                'Ready promise callback is not called synchronously');
135
136   // If we schedule another microtask then it should run immediately after
137   // the ready promise resolution microtask.
138   return Promise.resolve().then(() => {
139     assert_true(readyPromiseCallbackCalled,
140                 'Ready promise callback called after setting startTime');
141   });
142 }, 'Setting the start time resolves a pending ready promise');
143
144 promise_test(t => {
145   const animation =
146     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
147                   document.timeline);
148
149   let readyPromiseCallbackCalled = false;
150   animation.ready.then(() => { readyPromiseCallbackCalled = true; } );
151
152   // Put the animation in the pause-pending state
153   animation.startTime = document.timeline.currentTime;
154   animation.pause();
155
156   // Sanity check
157   assert_true(animation.pending && animation.playState === 'paused',
158               'Animation is in pause-pending state');
159
160   // Setting the start time should resolve the 'ready' promise although
161   // the resolution callbacks when be run in a separate microtask.
162   animation.startTime = null;
163   assert_false(readyPromiseCallbackCalled,
164                'Ready promise callback is not called synchronously');
165
166   return Promise.resolve().then(() => {
167     assert_true(readyPromiseCallbackCalled,
168                 'Ready promise callback called after setting startTime');
169   });
170 }, 'Setting the start time resolves a pending pause task');
171
172 promise_test(t => {
173   const animation =
174     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
175                   document.timeline);
176
177   // Set start time such that the current time is past the end time
178   animation.startTime = document.timeline.currentTime
179                         - 110 * MS_PER_SEC;
180   assert_equals(animation.playState, 'finished',
181                 'Seeked to finished state using the startTime');
182
183   // If the 'did seek' flag is true, the current time should be greater than
184   // the effect end.
185   assert_greater_than(animation.currentTime,
186                       animation.effect.getComputedTiming().endTime,
187                       'Setting the start time updated the finished state with'
188                       + ' the \'did seek\' flag set to true');
189
190   // Furthermore, that time should persist if we have correctly updated
191   // the hold time
192   const finishedCurrentTime = animation.currentTime;
193   return waitForAnimationFrames(1).then(() => {
194     assert_equals(animation.currentTime, finishedCurrentTime,
195                   'Current time does not change after seeking past the effect'
196                   + ' end time by setting the current time');
197   });
198 }, 'Setting the start time updates the finished state');
199
200 </script>
201 </body>