| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>Playing an animation</title> |
| <link rel="help" |
| href="https://drafts.csswg.org/web-animations/#playing-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'; |
| |
| test(t => { |
| const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
| animation.currentTime = 1 * MS_PER_SEC; |
| assert_time_equals_literal(animation.currentTime, 1 * MS_PER_SEC); |
| animation.play(); |
| assert_time_equals_literal(animation.currentTime, 1 * MS_PER_SEC); |
| }, 'Playing a running animation leaves the current time unchanged'); |
| |
| test(t => { |
| const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
| animation.finish(); |
| assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC); |
| animation.play(); |
| assert_time_equals_literal(animation.currentTime, 0); |
| }, 'Playing a finished animation seeks back to the start'); |
| |
| test(t => { |
| const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
| animation.playbackRate = -1; |
| animation.currentTime = 0; |
| assert_time_equals_literal(animation.currentTime, 0); |
| animation.play(); |
| assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC); |
| }, 'Playing a finished and reversed animation seeks to end'); |
| |
| promise_test(async t => { |
| const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
| animation.finish(); |
| |
| // Initiate a pause then abort it |
| animation.pause(); |
| animation.play(); |
| |
| // Wait to return to running state |
| await animation.ready; |
| |
| assert_true(animation.currentTime < 100 * 1000, |
| 'After aborting a pause when finished, the current time should' |
| + ' jump back to the start of the animation'); |
| }, 'Playing a pause-pending but previously finished animation seeks back to' |
| + ' to the start'); |
| |
| promise_test(async t => { |
| const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
| animation.finish(); |
| await animation.ready; |
| |
| animation.play(); |
| assert_equals(animation.startTime, null, 'start time is unresolved'); |
| }, 'Playing a finished animation clears the start time'); |
| |
| test(t => { |
| const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
| animation.cancel(); |
| const promise = animation.ready; |
| animation.play(); |
| assert_not_equals(animation.ready, promise); |
| }, 'The ready promise should be replaced if the animation is not already' |
| + ' pending'); |
| |
| promise_test(async t => { |
| const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
| const promise = animation.ready; |
| const promiseResult = await promise; |
| assert_equals(promiseResult, animation); |
| assert_equals(animation.ready, promise); |
| }, 'A pending ready promise should be resolved and not replaced when the' |
| + ' animation enters the running state'); |
| |
| 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(); |
| await animation.ready; |
| |
| const holdTime = animation.currentTime; |
| |
| animation.play(); |
| await animation.ready; |
| |
| assert_less_than_equal( |
| animation.startTime, |
| animation.timeline.currentTime - holdTime + TIME_PRECISION |
| ); |
| }, 'Resuming an animation from paused calculates start time from hold time'); |
| |
| promise_test(async t => { |
| const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
| await animation.ready; |
| |
| // Go to pause-pending state |
| animation.pause(); |
| assert_true(animation.pending, 'Animation is pending'); |
| const pauseReadyPromise = animation.ready; |
| |
| // Now play again immediately (abort the pause) |
| animation.play(); |
| assert_true(animation.pending, 'Animation is still pending'); |
| assert_equals(animation.ready, pauseReadyPromise, |
| 'The pause Promise is re-used when playing while waiting' |
| + ' to pause'); |
| |
| // Sanity check: Animation proceeds to running state |
| await animation.ready; |
| assert_true(!animation.pending && animation.playState === 'running', |
| 'Animation is running after aborting a pause'); |
| }, 'If a pause operation is interrupted, the ready promise is reused'); |
| |
| promise_test(async t => { |
| // Seek animation beyond target end |
| const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
| animation.currentTime = -100 * MS_PER_SEC; |
| await animation.ready; |
| |
| // Set pending playback rate to the opposite direction |
| animation.updatePlaybackRate(-1); |
| assert_true(animation.pending); |
| assert_equals(animation.playbackRate, 1); |
| |
| // When we play, we should seek to the target end, NOT to zero (which |
| // is where we would seek to if we used the playbackRate of 1. |
| animation.play(); |
| assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC); |
| }, 'A pending playback rate is used when determining auto-rewind behavior'); |
| |
| promise_test(async t => { |
| const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
| animation.cancel(); |
| assert_equals(animation.startTime, null, |
| 'Start time should be unresolved'); |
| |
| const playTime = animation.timeline.currentTime; |
| animation.play(); |
| assert_true(animation.pending, 'Animation should be play-pending'); |
| |
| await animation.ready; |
| |
| assert_false(animation.pending, 'animation should no longer be pending'); |
| assert_greater_than(animation.startTime, playTime, |
| 'The start time of the playing animation should be set'); |
| }, 'Playing a canceled animation sets the start time'); |
| |
| promise_test(async t => { |
| const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
| animation.playbackRate = -1; |
| animation.cancel(); |
| assert_equals(animation.startTime, null, |
| 'Start time should be unresolved'); |
| |
| const playTime = animation.timeline.currentTime; |
| animation.play(); |
| assert_true(animation.pending, 'Animation should be play-pending'); |
| |
| await animation.ready; |
| |
| assert_false(animation.pending, 'Animation should no longer be pending'); |
| assert_greater_than(animation.startTime, playTime + 100 * MS_PER_SEC, |
| 'The start time of the playing animation should be set'); |
| }, 'Playing a canceled animation backwards sets the start time'); |
| |
| </script> |
| </body> |
