| <!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'); |
| |
| 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 => { |
| // 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'); |
| |
| </script> |
| </body> |
