seamlessly-updating-the-playback-rate-of-an-animation.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /web-animations/timing-model/animations/seamlessly-updating-the-playback-rate-of-an-animation.html - WPT Dashboard Interop Dashboard

<!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>