Google Git
Sign in
chromium / external / w3c / web-platform-tests / 5d4122e5caa8fd324a4ae0133b771384b1f025ca / . / scroll-animations / setting-start-time.html
blob: 643f62a9b58b186de441bdb6c3dd5cc70d35fb73 [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;
14}
15.contents {
16 height: 1000px;
17 width: 100%;
18}
19</style>
20<body>
21<div id="log"></div>
22<script>
23'use strict';
24
25promise_test(async t => {
26 const animation = createScrollLinkedAnimation(t);
27 const scroller = animation.timeline.scrollSource;
28 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
29 scroller.scrollTop = 0.2 * maxScroll;
30 // Wait for new animation frame which allows the timeline to compute new
31 // current time.
32 await waitForNextFrame();
33
34 // So long as a hold time is set, querying the current time will return
35 // the hold time.
36
37 // Since the start time is unresolved at this point, setting the current time
38 // will set the hold time
39 animation.currentTime = 300;
40 assert_equals(animation.startTime, null, 'The start time stays unresolved');
41 assert_times_equal(animation.currentTime, 300,
42 'The current time is calculated from the hold time');
43
44 // If we set the start time, however, we should clear the hold time.
45 animation.startTime = 0;
46 assert_times_equal(animation.startTime, 0,
47 'The start time is set to the requested value');
48 assert_times_equal(animation.currentTime, 200,
49 'The current time is calculated from the start time, not' +
50 ' the hold time');
51 // Sanity check
52 assert_equals(animation.playState, 'running',
53 'Animation reports it is running after setting a resolved ' +
54 'start time');
55}, 'Setting the start time clears the hold time');
56
57promise_test(async t => {
58 const animation = createScrollLinkedAnimation(t);
59 const scroller = animation.timeline.scrollSource;
60 // Make the scroll timeline inactive.
61 scroller.style.overflow = 'visible';
62 // Wait for new animation frame which allows the timeline to compute new
63 // current time.
64 await waitForNextFrame();
65 assert_equals(animation.timeline.currentTime, null,
66 'Sanity check the timeline is inactive');
67
68 // So long as a hold time is set, querying the current time will return
69 // the hold time.
70
71 // Since the start time is unresolved at this point, setting the current time
72 // will set the hold time
73 animation.currentTime = 300;
74 assert_equals(animation.startTime, null, 'The start time stays unresolved');
75 assert_times_equal(animation.currentTime, 300,
76 'The current time is calculated from the hold time');
77
78 // If we set the start time, however, we should clear the hold time.
79 animation.startTime = 0;
80 assert_times_equal(animation.startTime, 0,
81 'The start time is set to the requested value');
82 assert_equals(animation.currentTime, null,
83 'The current time is calculated from the start time, not' +
84 ' the hold time');
85 // Sanity check
86 assert_equals(animation.playState, 'running',
87 'Animation reports it is running after setting a resolved ' +
88 'start time');
89}, 'Setting the start time clears the hold time when the timeline is inactive');
90
91promise_test(async t => {
92 const animation = createScrollLinkedAnimation(t);
93 const scroller = animation.timeline.scrollSource;
94 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
95 scroller.scrollTop = 0.2 * maxScroll;
96
97 // Wait for new animation frame which allows the timeline to compute new
98 // current time.
99 await waitForNextFrame();
100
101 // Set up a running animation (i.e. both start time and current time
102 // are resolved).
103 animation.startTime = 50;
104 assert_equals(animation.playState, 'running');
105 assert_times_equal(animation.startTime, 50,
106 'The start time is set to the requested value');
107 assert_times_equal(animation.currentTime, 150,
108 'Current time is resolved for a running animation');
109
110 // Clear start time
111 animation.startTime = null;
112 assert_equals(animation.startTime, null,
113 'The start time is set to the requested value');
114 assert_times_equal(animation.currentTime, 150,
115 'Hold time is set after start time is made unresolved');
116 assert_equals(animation.playState, 'paused',
117 'Animation reports it is paused after setting an unresolved'
118 + ' start time');
119}, 'Setting an unresolved start time sets the hold time');
120
121promise_test(async t => {
122 const animation = createScrollLinkedAnimation(t);
123 const scroller = animation.timeline.scrollSource;
124 // Make the scroll timeline inactive.
125 scroller.style.overflow = 'visible';
126 // Wait for new animation frame which allows the timeline to compute new
127 // current time.
128 await waitForNextFrame();
129 assert_equals(animation.timeline.currentTime, null,
130 'Sanity check the timeline is inactive');
131
132 // Set up a running animation (i.e. both start time and current time
133 // are resolved).
134 animation.startTime = 50;
135 assert_equals(animation.playState, 'running');
136 assert_times_equal(animation.startTime, 50,
137 'The start time is set to the requested value');
138 assert_equals(animation.currentTime, null,
139 'Current time is unresolved for a running animation when the ' +
140 'timeline is inactive');
141
142 // Clear start time
143 animation.startTime = null;
144 assert_equals(animation.startTime, null,
145 'The start time is set to the requested value');
146 assert_equals(animation.currentTime, null,
147 'Hold time is set to unresolved after start time is made ' +
148 'unresolved');
149 assert_equals(animation.playState, 'idle',
150 'Animation reports it is idle after setting an unresolved'
151 + ' start time');
152}, 'Setting an unresolved start time sets the hold time to unresolved when ' +
153 'the timeline is inactive');
154
155promise_test(async t => {
156 const animation = createScrollLinkedAnimation(t);
157
158 // Wait for new animation frame which allows the timeline to compute new
159 // current time.
160 await waitForNextFrame();
161
162 let readyPromiseCallbackCalled = false;
163 animation.ready.then(() => { readyPromiseCallbackCalled = true; } );
164
165 // Put the animation in the play-pending state
166 animation.play();
167
168 // Sanity check
169 assert_true(animation.pending && animation.playState === 'running',
170 'Animation is in play-pending state');
171
172 // Setting the start time should resolve the 'ready' promise, i.e.
173 // it should schedule a microtask to run the promise callbacks.
174 animation.startTime = 100;
175 assert_times_equal(animation.startTime, 100,
176 'The start time is set to the requested value');
177 assert_false(readyPromiseCallbackCalled,
178 'Ready promise callback is not called synchronously');
179
180 // If we schedule another microtask then it should run immediately after
181 // the ready promise resolution microtask.
182 await Promise.resolve();
183 assert_true(readyPromiseCallbackCalled,
184 'Ready promise callback called after setting startTime');
185}, 'Setting the start time resolves a pending ready promise');
186
187promise_test(async t => {
188 const animation = createScrollLinkedAnimation(t);
189 const scroller = animation.timeline.scrollSource;
190 // Make the scroll timeline inactive.
191 scroller.style.overflow = 'visible';
192 // Wait for new animation frame which allows the timeline to compute new
193 // current time.
194 await waitForNextFrame();
195 assert_equals(animation.timeline.currentTime, null,
196 'Sanity check the timeline is inactive');
197
198 let readyPromiseCallbackCalled = false;
199 animation.ready.then(() => { readyPromiseCallbackCalled = true; } );
200
201 // Put the animation in the play-pending state
202 animation.play();
203
204 // Sanity check
205 assert_true(animation.pending && animation.playState === 'running',
206 'Animation is in play-pending state');
207
208 // Setting the start time should resolve the 'ready' promise, i.e.
209 // it should schedule a microtask to run the promise callbacks.
210 animation.startTime = 100;
211 assert_times_equal(animation.startTime, 100,
212 'The start time is set to the requested value');
213 assert_false(readyPromiseCallbackCalled,
214 'Ready promise callback is not called synchronously');
215
216 // If we schedule another microtask then it should run immediately after
217 // the ready promise resolution microtask.
218 await Promise.resolve();
219 assert_true(readyPromiseCallbackCalled,
220 'Ready promise callback called after setting startTime');
221}, 'Setting the start time resolves a pending ready promise when the timeline' +
222 'is inactive');
223
224promise_test(async t => {
225 const animation = createScrollLinkedAnimation(t);
226
227 // Wait for new animation frame which allows the timeline to compute new
228 // current time.
229 await waitForNextFrame();
230
231 // Put the animation in the play-pending state
232 animation.play();
233
234 // Sanity check
235 assert_true(animation.pending, 'Animation is pending');
236 assert_equals(animation.playState, 'running', 'Animation is play-pending');
237 assert_times_equal(animation.startTime, 0, 'Start time is zero');
238
239 // Setting start time should cancel the pending task.
240 animation.startTime = null;
241 assert_false(animation.pending, 'Animation is no longer pending');
242 assert_equals(animation.playState, 'paused', 'Animation is paused');
243}, 'Setting an unresolved start time on a play-pending animation makes it'
244 + ' paused');
245
246promise_test(async t => {
247 const animation = createScrollLinkedAnimation(t);
248 const scroller = animation.timeline.scrollSource;
249 // Make the scroll timeline inactive.
250 scroller.style.overflow = 'visible';
251 // Wait for new animation frame which allows the timeline to compute new
252 // current time.
253 await waitForNextFrame();
254 assert_equals(animation.timeline.currentTime, null,
255 'Sanity check the timeline is inactive');
256
257 // Put the animation in the play-pending state
258 animation.play();
259
260 // Sanity check
261 assert_true(animation.pending, 'Animation is pending');
262 assert_equals(animation.playState, 'running', 'Animation is play-pending');
263 assert_times_equal(animation.startTime, 0, 'Start time is zero');
264
265 // Setting start time should cancel the pending task.
266 animation.startTime = null;
267 assert_false(animation.pending, 'Animation is no longer pending');
268 assert_equals(animation.playState, 'idle', 'Animation is idle');
269}, 'Setting an unresolved start time on a play-pending animation makes it'
270 + ' idle when the timeline is inactive');
271
272promise_test(async t => {
273 const animation = createScrollLinkedAnimation(t);
274 // Wait for new animation frame which allows the timeline to compute new
275 // current time.
276 await waitForNextFrame();
277
278 // Set start time such that the current time is past the end time
279 animation.startTime = -1100;
280 assert_times_equal(animation.startTime, -1100,
281 'The start time is set to the requested value');
282 assert_equals(animation.playState, 'finished',
283 'Seeked to finished state using the startTime');
284
285 // If the 'did seek' flag is true, the current time should be greater than
286 // the effect end.
287 assert_greater_than(animation.currentTime,
288 animation.effect.getComputedTiming().endTime,
289 'Setting the start time updated the finished state with'
290 + ' the \'did seek\' flag set to true');
291
292 // Furthermore, that time should persist if we have correctly updated
293 // the hold time
294 const finishedCurrentTime = animation.currentTime;
295 await waitForNextFrame();
296 assert_equals(animation.currentTime, finishedCurrentTime,
297 'Current time does not change after seeking past the effect'
298 + ' end time by setting the current time');
299}, 'Setting the start time updates the finished state');
300
301promise_test(async t => {
302 const animation = createScrollLinkedAnimation(t);
303 // Wait for new animation frame which allows the timeline to compute new
304 // current time.
305 await waitForNextFrame();
306 animation.play();
307
308 await animation.ready;
309 assert_equals(animation.playState, 'running');
310
311 // Setting the start time updates the finished state. The hold time is not
312 // constrained by the effect end time.
313 animation.startTime = -1100;
314 assert_equals(animation.playState, 'finished');
315
316 assert_times_equal(animation.currentTime, 1100);
317}, 'Setting the start time on a running animation updates the play state');
318
319promise_test(async t => {
320 const animation = createScrollLinkedAnimation(t);
321 // Wait for new animation frame which allows the timeline to compute new
322 // current time.
323 await waitForNextFrame();
324 animation.play();
325 await animation.ready;
326
327 // Setting the start time updates the finished state. The hold time is not
328 // constrained by the normal range of the animation time.
329 animation.currentTime = 1000;
330 assert_equals(animation.playState, 'finished', 'Animation is finished');
331 animation.playbackRate = -1;
332 assert_equals(animation.playState, 'running', 'Animation is running');
333 animation.startTime = -2000;
334 assert_equals(animation.playState, 'finished', 'Animation is finished');
335 assert_times_equal(animation.currentTime, -2000);
336}, 'Setting the start time on a reverse running animation updates the play '
337 + 'state');
338</script>
339</body>