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