pausing-an-animation.html

Enable keyboard shortcuts

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

<!DOCTYPE html>

<meta charset=utf-8>

<title>Pausing an animation</title>

<link rel="help"

  href="https://drafts.csswg.org/web-animations/#pausing-an-animation-section">

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

  const startTimeBeforePausing = animation.startTime;

  animation.pause();

  assert_equals(animation.startTime, startTimeBeforePausing,

                'The start time does not change when pausing-pending');

  await animation.ready;

  assert_equals(animation.startTime, null,

                'The start time is unresolved when paused');

}, 'Pausing clears the start time');

promise_test(async t => {

  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);

  await animation.ready;

  animation.pause();

  assert_not_equals(animation.startTime, null,

                    'The start time is resolved when pause-pending');

  animation.play();

  assert_not_equals(animation.startTime, null,

                    'The start time is preserved when a pause is aborted');

}, 'Aborting a pause preserves the start time');

promise_test(async t => {

  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);

  const promise = animation.ready;

  animation.pause();

  const promiseResult = await promise;

  assert_equals(promiseResult, animation);

  assert_equals(animation.ready, promise);

  assert_false(animation.pending, 'No longer pause-pending');

}, 'A pending ready promise should be resolved and not replaced when the'

   + ' animation is paused');

promise_test(async t => {

  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);

  // Let animation start roughly half-way through

  animation.currentTime = 50 * MS_PER_SEC;

  await animation.ready;

  // Go pause-pending and also set a pending playback rate

  animation.pause();

  animation.updatePlaybackRate(0.5);

  await animation.ready;

  // If the current time was updated using the new playback rate it will jump

  // back to 25s but if we correctly used the old playback rate the current time

  // will be >= 50s.

  assert_greater_than_equal(animation.currentTime, 50 * MS_PER_SEC);

}, 'A pause-pending animation maintains the current time when applying a'

   + ' pending playback rate');

promise_test(async t => {

  // This test does not cover a specific step in the algorithm but serves as a

  // high-level sanity check that pausing does, in fact, freeze the current

  // time.

  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);

  await animation.ready;

  animation.pause();

  await animation.ready;

  const currentTimeAfterPausing = animation.currentTime;

  await waitForNextFrame();

  assert_equals(animation.currentTime, currentTimeAfterPausing,

    'Animation.currentTime is unchanged after pausing');

}, 'The animation\'s current time remains fixed after pausing');

promise_test(async t => {

  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);

  const originalReadyPromise = animation.ready;

  animation.cancel();

  assert_equals(animation.startTime, null);

  assert_equals(animation.currentTime, null);

  const readyPromise = animation.ready;

  assert_not_equals(originalReadyPromise, readyPromise,

              'Canceling an animation should create a new ready promise');

  animation.pause();

  assert_equals(animation.playState, 'paused',

                'Pausing a canceled animation should update the play state');

  assert_true(animation.pending, 'animation should be pause-pending');

  await animation.ready;

  assert_false(animation.pending,

               'animation should no longer be pause-pending');

  assert_equals(animation.startTime, null, 'start time should be unresolved');

  assert_equals(animation.currentTime, 0, 'current time should be set to zero');

}, 'Pausing a canceled animation sets the current time');

</script>

</body>