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