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