171 lines
6.2 KiB
HTML
171 lines
6.2 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<title>Seamlessly updating the playback rate of an animation</title>
|
|
<link rel="help"
|
|
href="https://drafts.csswg.org/web-animations-1/#seamlessly-updating-the-playback-rate-of-an-animation">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="../../testcommon.js"></script>
|
|
<body>
|
|
<div id="log"></div>
|
|
<script>
|
|
'use strict';
|
|
|
|
promise_test(async t => {
|
|
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
|
|
await animation.ready;
|
|
|
|
animation.currentTime = 50 * MS_PER_SEC;
|
|
|
|
animation.updatePlaybackRate(0.5);
|
|
await animation.ready;
|
|
// Since the animation is in motion (and we want to test it while it is in
|
|
// motion!) we can't assert that the current time == 50s but we can check
|
|
// that the current time is NOT re-calculated by simply substituting in the
|
|
// new playback rate (i.e. without adjusting the start time). If that were
|
|
// the case the currentTime would jump to 25s. So we just test the currentTime
|
|
// hasn't gone backwards.
|
|
assert_greater_than_equal(animation.currentTime, 50 * MS_PER_SEC,
|
|
'Reducing the playback rate should not change the current time ' +
|
|
'of a playing animation');
|
|
|
|
animation.updatePlaybackRate(2);
|
|
await animation.ready;
|
|
// Likewise, we test here that the current time does not jump to 100s as it
|
|
// would if we naively applied a playbackRate of 2 without adjusting the
|
|
// startTime.
|
|
assert_less_than(animation.currentTime, 100 * MS_PER_SEC,
|
|
'Increasing the playback rate should not change the current time ' +
|
|
'of a playing animation');
|
|
}, 'Updating the playback rate maintains the current time');
|
|
|
|
promise_test(async t => {
|
|
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
|
|
await animation.ready;
|
|
|
|
assert_false(animation.pending);
|
|
animation.updatePlaybackRate(2);
|
|
assert_true(animation.pending);
|
|
}, 'Updating the playback rate while running makes the animation pending');
|
|
|
|
promise_test(async t => {
|
|
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
|
|
animation.currentTime = 50 * MS_PER_SEC;
|
|
assert_true(animation.pending);
|
|
|
|
animation.updatePlaybackRate(0.5);
|
|
|
|
// Check that the hold time is updated as expected
|
|
assert_time_equals_literal(animation.currentTime, 50 * MS_PER_SEC);
|
|
|
|
await animation.ready;
|
|
|
|
// As above, check that the currentTime is not calculated by simply
|
|
// substituting in the updated playbackRate without updating the startTime.
|
|
assert_greater_than_equal(animation.currentTime, 50 * MS_PER_SEC,
|
|
'Reducing the playback rate should not change the current time ' +
|
|
'of a play-pending animation');
|
|
}, 'Updating the playback rate on a play-pending animation maintains'
|
|
+ ' the current time');
|
|
|
|
promise_test(async t => {
|
|
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
|
|
animation.currentTime = 50 * MS_PER_SEC;
|
|
await animation.ready;
|
|
|
|
animation.pause();
|
|
animation.updatePlaybackRate(0.5);
|
|
|
|
assert_greater_than_equal(animation.currentTime, 50 * MS_PER_SEC);
|
|
}, 'Updating the playback rate on a pause-pending animation maintains'
|
|
+ ' the current time');
|
|
|
|
promise_test(async t => {
|
|
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
|
|
|
|
animation.updatePlaybackRate(2);
|
|
animation.updatePlaybackRate(3);
|
|
animation.updatePlaybackRate(4);
|
|
|
|
assert_equals(animation.playbackRate, 1);
|
|
await animation.ready;
|
|
|
|
assert_equals(animation.playbackRate, 4);
|
|
}, 'If a pending playback rate is set multiple times, the latest wins');
|
|
|
|
test(t => {
|
|
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
|
|
animation.cancel();
|
|
|
|
animation.updatePlaybackRate(2);
|
|
assert_equals(animation.playbackRate, 2);
|
|
assert_false(animation.pending);
|
|
}, 'In the idle state, the playback rate is applied immediately');
|
|
|
|
promise_test(async t => {
|
|
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
|
|
animation.pause();
|
|
await animation.ready;
|
|
|
|
animation.updatePlaybackRate(2);
|
|
assert_equals(animation.playbackRate, 2);
|
|
assert_false(animation.pending);
|
|
}, 'In the paused state, the playback rate is applied immediately');
|
|
|
|
promise_test(async t => {
|
|
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
|
|
animation.finish();
|
|
assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC);
|
|
assert_false(animation.pending);
|
|
|
|
animation.updatePlaybackRate(2);
|
|
assert_equals(animation.playbackRate, 2);
|
|
assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC);
|
|
assert_false(animation.pending);
|
|
}, 'Updating the playback rate on a finished animation maintains'
|
|
+ ' the current time');
|
|
|
|
promise_test(async t => {
|
|
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
|
|
animation.finish();
|
|
assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC);
|
|
assert_false(animation.pending);
|
|
|
|
animation.updatePlaybackRate(0);
|
|
assert_equals(animation.playbackRate, 0);
|
|
assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC);
|
|
assert_false(animation.pending);
|
|
}, 'Updating the playback rate to zero on a finished animation maintains'
|
|
+ ' the current time');
|
|
|
|
promise_test(async t => {
|
|
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
|
|
await animation.ready;
|
|
|
|
// Get the animation in a state where it has an unresolved current time,
|
|
// a resolved start time (so it is not 'idle') and but no pending play task.
|
|
animation.timeline = null;
|
|
animation.startTime = 0;
|
|
assert_equals(animation.currentTime, null);
|
|
assert_equals(animation.playState, 'running');
|
|
|
|
// Make the effect end infinite.
|
|
animation.effect.updateTiming({ endDelay: 1e38 });
|
|
|
|
// Now we want to check that when we go to set a negative playback rate we
|
|
// don't end up throwing an InvalidStateError (which would happen if we ended
|
|
// up applying the auto-rewind behavior).
|
|
animation.updatePlaybackRate(-1);
|
|
|
|
// Furthermore, we should apply the playback rate immediately since the
|
|
// current time is unresolved.
|
|
assert_equals(animation.playbackRate, -1,
|
|
'We apply the pending playback rate immediately if the current time is ' +
|
|
'unresolved');
|
|
assert_false(animation.pending);
|
|
}, 'Updating the negative playback rate with the unresolved current time and'
|
|
+ ' a positive infinite associated effect end should not throw an'
|
|
+ ' exception');
|
|
|
|
</script>
|
|
</body>
|