Google Git
Sign in
chromium / external / w3c / web-platform-tests / ef0384e03e74d228dcc8970eec175426b208c0c2 / . / scroll-animations / setting-start-time.html
blob: 2b208e7e06a1a0f502b1862a2d67684eb7772143 [file] [log] [blame]
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]1<!DOCTYPE html>
2<meta charset=utf-8>
3<title>Setting the start time of scroll animation</title>
4<link rel="help" href="https://drafts.csswg.org/web-animations/#setting-the-start-time-of-an-animation">
5<script src="/resources/testharness.js"></script>
6<script src="/resources/testharnessreport.js"></script>
7<script src="/web-animations/testcommon.js"></script>
8<script src="testcommon.js"></script>
9<style>
10.scroller {
11 overflow: auto;
12 height: 200px;
13 width: 100px;
Yi Gu4a7093f2020-05-21 20:48:38[diff] [blame]14 will-change: transform;
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]15}
Olga Gerchikov1afcb0f2020-05-26 18:38:08[diff] [blame]16
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]17.contents {
18 height: 1000px;
19 width: 100%;
20}
21</style>
22<body>
23<div id="log"></div>
24<script>
25'use strict';
26
27promise_test(async t => {
28 const animation = createScrollLinkedAnimation(t);
29 const scroller = animation.timeline.scrollSource;
30 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
31 scroller.scrollTop = 0.2 * maxScroll;
Olga Gerchikov1afcb0f2020-05-26 18:38:08[diff] [blame]32 // Wait for new animation frame which allows the timeline to compute new
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]33 // current time.
34 await waitForNextFrame();
35
36 // So long as a hold time is set, querying the current time will return
37 // the hold time.
38
39 // Since the start time is unresolved at this point, setting the current time
40 // will set the hold time
41 animation.currentTime = 300;
42 assert_equals(animation.startTime, null, 'The start time stays unresolved');
43 assert_times_equal(animation.currentTime, 300,
44 'The current time is calculated from the hold time');
45
46 // If we set the start time, however, we should clear the hold time.
47 animation.startTime = 0;
48 assert_times_equal(animation.startTime, 0,
49 'The start time is set to the requested value');
50 assert_times_equal(animation.currentTime, 200,
51 'The current time is calculated from the start time, not' +
52 ' the hold time');
53 // Sanity check
54 assert_equals(animation.playState, 'running',
55 'Animation reports it is running after setting a resolved ' +
56 'start time');
57}, 'Setting the start time clears the hold time');
58
59promise_test(async t => {
60 const animation = createScrollLinkedAnimation(t);
61 const scroller = animation.timeline.scrollSource;
62 // Make the scroll timeline inactive.
63 scroller.style.overflow = 'visible';
Olga Gerchikov1afcb0f2020-05-26 18:38:08[diff] [blame]64 // Wait for new animation frame which allows the timeline to compute new
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]65 // current time.
66 await waitForNextFrame();
67 assert_equals(animation.timeline.currentTime, null,
68 'Sanity check the timeline is inactive');
69
70 // So long as a hold time is set, querying the current time will return
71 // the hold time.
72
73 // Since the start time is unresolved at this point, setting the current time
74 // will set the hold time
75 animation.currentTime = 300;
76 assert_equals(animation.startTime, null, 'The start time stays unresolved');
77 assert_times_equal(animation.currentTime, 300,
78 'The current time is calculated from the hold time');
79
80 // If we set the start time, however, we should clear the hold time.
81 animation.startTime = 0;
82 assert_times_equal(animation.startTime, 0,
83 'The start time is set to the requested value');
84 assert_equals(animation.currentTime, null,
85 'The current time is calculated from the start time, not' +
86 ' the hold time');
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 when the timeline is inactive');
92
93promise_test(async t => {
94 const animation = createScrollLinkedAnimation(t);
95 const scroller = animation.timeline.scrollSource;
96 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
97 scroller.scrollTop = 0.2 * maxScroll;
98
Olga Gerchikov1afcb0f2020-05-26 18:38:08[diff] [blame]99 // Wait for new animation frame which allows the timeline to compute new
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]100 // current time.
101 await waitForNextFrame();
102
103 // Set up a running animation (i.e. both start time and current time
104 // are resolved).
105 animation.startTime = 50;
106 assert_equals(animation.playState, 'running');
107 assert_times_equal(animation.startTime, 50,
108 'The start time is set to the requested value');
109 assert_times_equal(animation.currentTime, 150,
110 'Current time is resolved for a running animation');
111
112 // Clear start time
113 animation.startTime = null;
114 assert_equals(animation.startTime, null,
115 'The start time is set to the requested value');
116 assert_times_equal(animation.currentTime, 150,
117 'Hold time is set after start time is made unresolved');
118 assert_equals(animation.playState, 'paused',
119 'Animation reports it is paused after setting an unresolved'
120 + ' start time');
121}, 'Setting an unresolved start time sets the hold time');
122
123promise_test(async t => {
124 const animation = createScrollLinkedAnimation(t);
125 const scroller = animation.timeline.scrollSource;
126 // Make the scroll timeline inactive.
127 scroller.style.overflow = 'visible';
Olga Gerchikov1afcb0f2020-05-26 18:38:08[diff] [blame]128 // Wait for new animation frame which allows the timeline to compute new
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]129 // current time.
130 await waitForNextFrame();
131 assert_equals(animation.timeline.currentTime, null,
132 'Sanity check the timeline is inactive');
133
134 // Set up a running animation (i.e. both start time and current time
135 // are resolved).
136 animation.startTime = 50;
137 assert_equals(animation.playState, 'running');
138 assert_times_equal(animation.startTime, 50,
139 'The start time is set to the requested value');
140 assert_equals(animation.currentTime, null,
141 'Current time is unresolved for a running animation when the ' +
142 'timeline is inactive');
143
144 // Clear start time
145 animation.startTime = null;
146 assert_equals(animation.startTime, null,
147 'The start time is set to the requested value');
148 assert_equals(animation.currentTime, null,
149 'Hold time is set to unresolved after start time is made ' +
150 'unresolved');
151 assert_equals(animation.playState, 'idle',
152 'Animation reports it is idle after setting an unresolved'
153 + ' start time');
154}, 'Setting an unresolved start time sets the hold time to unresolved when ' +
155 'the timeline is inactive');
156
157promise_test(async t => {
158 const animation = createScrollLinkedAnimation(t);
159
Olga Gerchikov1afcb0f2020-05-26 18:38:08[diff] [blame]160 // Wait for new animation frame which allows the timeline to compute new
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]161 // current time.
162 await waitForNextFrame();
163
164 let readyPromiseCallbackCalled = false;
165 animation.ready.then(() => { readyPromiseCallbackCalled = true; } );
166
167 // Put the animation in the play-pending state
168 animation.play();
169
170 // Sanity check
171 assert_true(animation.pending && animation.playState === 'running',
172 'Animation is in play-pending state');
173
174 // Setting the start time should resolve the 'ready' promise, i.e.
175 // it should schedule a microtask to run the promise callbacks.
176 animation.startTime = 100;
177 assert_times_equal(animation.startTime, 100,
178 'The start time is set to the requested value');
179 assert_false(readyPromiseCallbackCalled,
180 'Ready promise callback is not called synchronously');
181
182 // If we schedule another microtask then it should run immediately after
183 // the ready promise resolution microtask.
184 await Promise.resolve();
185 assert_true(readyPromiseCallbackCalled,
186 'Ready promise callback called after setting startTime');
187}, 'Setting the start time resolves a pending ready promise');
188
189promise_test(async t => {
190 const animation = createScrollLinkedAnimation(t);
191 const scroller = animation.timeline.scrollSource;
192 // Make the scroll timeline inactive.
193 scroller.style.overflow = 'visible';
Olga Gerchikov1afcb0f2020-05-26 18:38:08[diff] [blame]194 // Wait for new animation frame which allows the timeline to compute new
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]195 // current time.
196 await waitForNextFrame();
197 assert_equals(animation.timeline.currentTime, null,
198 'Sanity check the timeline is inactive');
199
200 let readyPromiseCallbackCalled = false;
201 animation.ready.then(() => { readyPromiseCallbackCalled = true; } );
202
203 // Put the animation in the play-pending state
204 animation.play();
205
206 // Sanity check
207 assert_true(animation.pending && animation.playState === 'running',
208 'Animation is in play-pending state');
209
210 // Setting the start time should resolve the 'ready' promise, i.e.
211 // it should schedule a microtask to run the promise callbacks.
212 animation.startTime = 100;
213 assert_times_equal(animation.startTime, 100,
214 'The start time is set to the requested value');
215 assert_false(readyPromiseCallbackCalled,
216 'Ready promise callback is not called synchronously');
217
218 // If we schedule another microtask then it should run immediately after
219 // the ready promise resolution microtask.
220 await Promise.resolve();
221 assert_true(readyPromiseCallbackCalled,
222 'Ready promise callback called after setting startTime');
223}, 'Setting the start time resolves a pending ready promise when the timeline' +
224 'is inactive');
225
226promise_test(async t => {
227 const animation = createScrollLinkedAnimation(t);
228
Olga Gerchikov1afcb0f2020-05-26 18:38:08[diff] [blame]229 // Wait for new animation frame which allows the timeline to compute new
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]230 // current time.
231 await waitForNextFrame();
232
233 // Put the animation in the play-pending state
234 animation.play();
235
236 // Sanity check
237 assert_true(animation.pending, 'Animation is pending');
238 assert_equals(animation.playState, 'running', 'Animation is play-pending');
239 assert_times_equal(animation.startTime, 0, 'Start time is zero');
240
241 // Setting start time should cancel the pending task.
242 animation.startTime = null;
243 assert_false(animation.pending, 'Animation is no longer pending');
244 assert_equals(animation.playState, 'paused', 'Animation is paused');
245}, 'Setting an unresolved start time on a play-pending animation makes it'
246 + ' paused');
247
248promise_test(async t => {
249 const animation = createScrollLinkedAnimation(t);
250 const scroller = animation.timeline.scrollSource;
251 // Make the scroll timeline inactive.
252 scroller.style.overflow = 'visible';
Olga Gerchikov1afcb0f2020-05-26 18:38:08[diff] [blame]253 // Wait for new animation frame which allows the timeline to compute new
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]254 // current time.
255 await waitForNextFrame();
256 assert_equals(animation.timeline.currentTime, null,
257 'Sanity check the timeline is inactive');
258
259 // Put the animation in the play-pending state
260 animation.play();
261
262 // Sanity check
263 assert_true(animation.pending, 'Animation is pending');
264 assert_equals(animation.playState, 'running', 'Animation is play-pending');
265 assert_times_equal(animation.startTime, 0, 'Start time is zero');
266
267 // Setting start time should cancel the pending task.
268 animation.startTime = null;
269 assert_false(animation.pending, 'Animation is no longer pending');
270 assert_equals(animation.playState, 'idle', 'Animation is idle');
271}, 'Setting an unresolved start time on a play-pending animation makes it'
272 + ' idle when the timeline is inactive');
273
274promise_test(async t => {
275 const animation = createScrollLinkedAnimation(t);
Olga Gerchikov1afcb0f2020-05-26 18:38:08[diff] [blame]276 // Wait for new animation frame which allows the timeline to compute new
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]277 // current time.
278 await waitForNextFrame();
279
280 // Set start time such that the current time is past the end time
281 animation.startTime = -1100;
282 assert_times_equal(animation.startTime, -1100,
283 'The start time is set to the requested value');
284 assert_equals(animation.playState, 'finished',
285 'Seeked to finished state using the startTime');
286
287 // If the 'did seek' flag is true, the current time should be greater than
288 // the effect end.
289 assert_greater_than(animation.currentTime,
290 animation.effect.getComputedTiming().endTime,
291 'Setting the start time updated the finished state with'
292 + ' the \'did seek\' flag set to true');
293
294 // Furthermore, that time should persist if we have correctly updated
295 // the hold time
296 const finishedCurrentTime = animation.currentTime;
297 await waitForNextFrame();
298 assert_equals(animation.currentTime, finishedCurrentTime,
299 'Current time does not change after seeking past the effect'
300 + ' end time by setting the current time');
301}, 'Setting the start time updates the finished state');
302
303promise_test(async t => {
304 const animation = createScrollLinkedAnimation(t);
Olga Gerchikov1afcb0f2020-05-26 18:38:08[diff] [blame]305 // Wait for new animation frame which allows the timeline to compute new
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]306 // current time.
307 await waitForNextFrame();
308 animation.play();
309
310 await animation.ready;
311 assert_equals(animation.playState, 'running');
312
313 // Setting the start time updates the finished state. The hold time is not
314 // constrained by the effect end time.
315 animation.startTime = -1100;
316 assert_equals(animation.playState, 'finished');
317
318 assert_times_equal(animation.currentTime, 1100);
319}, 'Setting the start time on a running animation updates the play state');
320
321promise_test(async t => {
322 const animation = createScrollLinkedAnimation(t);
Olga Gerchikov1afcb0f2020-05-26 18:38:08[diff] [blame]323 // Wait for new animation frame which allows the timeline to compute new
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]324 // current time.
325 await waitForNextFrame();
326 animation.play();
327 await animation.ready;
328
329 // Setting the start time updates the finished state. The hold time is not
330 // constrained by the normal range of the animation time.
331 animation.currentTime = 1000;
332 assert_equals(animation.playState, 'finished', 'Animation is finished');
333 animation.playbackRate = -1;
334 assert_equals(animation.playState, 'running', 'Animation is running');
335 animation.startTime = -2000;
336 assert_equals(animation.playState, 'finished', 'Animation is finished');
337 assert_times_equal(animation.currentTime, -2000);
338}, 'Setting the start time on a reverse running animation updates the play '
339 + 'state');
Olga Gerchikov1afcb0f2020-05-26 18:38:08[diff] [blame]340 promise_test(async t => {
341 const animation = createScrollLinkedAnimation(t);
342 // Wait for new animation frame which allows the timeline to compute new
343 // current time.
344 await waitForNextFrame();
345 let readyPromiseCallbackCalled = false;
346 animation.ready.then(() => { readyPromiseCallbackCalled = true; } );
347 animation.pause();
348
349 // Sanity check
350 assert_true(animation.pending && animation.playState === 'paused',
351 'Animation is in pause-pending state');
352
353 // Setting the start time should resolve the 'ready' promise although
354 // the resolution callbacks when be run in a separate microtask.
355 animation.startTime = null;
356 assert_false(readyPromiseCallbackCalled,
357 'Ready promise callback is not called synchronously');
358
359 await Promise.resolve();
360 assert_true(readyPromiseCallbackCalled,
361 'Ready promise callback called after setting startTime');
362}, 'Setting the start time resolves a pending pause task');
363
364promise_test(async t => {
365 const anim = createScrollLinkedAnimation(t);
366 // Wait for new animation frame which allows the timeline to compute new
367 // current time.
368 await waitForNextFrame();
369 anim.play();
370
371 // We should be play-pending now
372 assert_true(anim.pending);
373 assert_equals(anim.playState, 'running');
374
375 // Apply a pending playback rate
376 anim.updatePlaybackRate(2);
377 assert_equals(anim.playbackRate, 1);
378 assert_true(anim.pending);
379
380 // Setting the start time should apply the pending playback rate
381 anim.startTime = anim.timeline.currentTime - 25 * MS_PER_SEC;
382 assert_equals(anim.playbackRate, 2);
383 assert_false(anim.pending);
384
385 // Sanity check that the start time is preserved and current time is
386 // calculated using the new playback rate
387 assert_times_equal(anim.startTime,
388 anim.timeline.currentTime - 25 * MS_PER_SEC);
389 assert_time_equals_literal(anim.currentTime, 50 * MS_PER_SEC);
390}, 'Setting the start time of a play-pending animation applies a pending playback rate');
391
392promise_test(async t => {
393 const anim = createScrollLinkedAnimation(t);
394 // Wait for new animation frame which allows the timeline to compute new
395 // current time.
396 await waitForNextFrame();
397 anim.play();
398 await anim.ready;
399
400 // We should be running now
401 assert_false(anim.pending);
402 assert_equals(anim.playState, 'running');
403
404 // Apply a pending playback rate
405 anim.updatePlaybackRate(2);
406 assert_equals(anim.playbackRate, 1);
407 assert_true(anim.pending);
408
409 // Setting the start time should apply the pending playback rate
410 anim.startTime = anim.timeline.currentTime - 250;
411 assert_equals(anim.playbackRate, 2);
412 assert_false(anim.pending);
413
414 // Sanity check that the start time is preserved and current time is
415 // calculated using the new playback rate
416 assert_times_equal(anim.startTime,
417 anim.timeline.currentTime - 250);
418 assert_time_equals_literal(parseInt(anim.currentTime.toPrecision(5), 10), 500);
419}, 'Setting the start time of a playing animation applies a pending playback rate');
Olga Gerchikov5d4122e2020-05-09 00:12:31[diff] [blame]420</script>
421</body>