playing-an-animation.html (6299B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Playing an animation</title> 4 <link rel="help" 5 href="https://drafts.csswg.org/web-animations/#playing-an-animation-section"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../../testcommon.js"></script> 9 <body> 10 <div id="log"></div> 11 <script> 12 'use strict'; 13 14 test(t => { 15 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 16 animation.currentTime = 1 * MS_PER_SEC; 17 assert_time_equals_literal(animation.currentTime, 1 * MS_PER_SEC); 18 animation.play(); 19 assert_time_equals_literal(animation.currentTime, 1 * MS_PER_SEC); 20 }, 'Playing a running animation leaves the current time unchanged'); 21 22 test(t => { 23 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 24 animation.finish(); 25 assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC); 26 animation.play(); 27 assert_time_equals_literal(animation.currentTime, 0); 28 }, 'Playing a finished animation seeks back to the start'); 29 30 test(t => { 31 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 32 animation.playbackRate = -1; 33 animation.currentTime = 0; 34 assert_time_equals_literal(animation.currentTime, 0); 35 animation.play(); 36 assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC); 37 }, 'Playing a finished and reversed animation seeks to end'); 38 39 promise_test(async t => { 40 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 41 animation.finish(); 42 43 // Initiate a pause then abort it 44 animation.pause(); 45 animation.play(); 46 47 // Wait to return to running state 48 await animation.ready; 49 50 assert_true(animation.currentTime < 100 * 1000, 51 'After aborting a pause when finished, the current time should' 52 + ' jump back to the start of the animation'); 53 }, 'Playing a pause-pending but previously finished animation seeks back to' 54 + ' to the start'); 55 56 promise_test(async t => { 57 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 58 animation.finish(); 59 await animation.ready; 60 61 animation.play(); 62 assert_equals(animation.startTime, null, 'start time is unresolved'); 63 }, 'Playing a finished animation clears the start time'); 64 65 test(t => { 66 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 67 animation.cancel(); 68 const promise = animation.ready; 69 animation.play(); 70 assert_not_equals(animation.ready, promise); 71 }, 'The ready promise should be replaced if the animation is not already' 72 + ' pending'); 73 74 promise_test(async t => { 75 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 76 const promise = animation.ready; 77 const promiseResult = await promise; 78 assert_equals(promiseResult, animation); 79 assert_equals(animation.ready, promise); 80 }, 'A pending ready promise should be resolved and not replaced when the' 81 + ' animation enters the running state'); 82 83 promise_test(async t => { 84 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 85 animation.currentTime = 50 * MS_PER_SEC; 86 await animation.ready; 87 88 animation.pause(); 89 await animation.ready; 90 91 const holdTime = animation.currentTime; 92 93 animation.play(); 94 await animation.ready; 95 96 assert_less_than_equal( 97 animation.startTime, 98 animation.timeline.currentTime - holdTime + TIME_PRECISION 99 ); 100 }, 'Resuming an animation from paused calculates start time from hold time'); 101 102 promise_test(async t => { 103 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 104 await animation.ready; 105 106 // Go to pause-pending state 107 animation.pause(); 108 assert_true(animation.pending, 'Animation is pending'); 109 const pauseReadyPromise = animation.ready; 110 111 // Now play again immediately (abort the pause) 112 animation.play(); 113 assert_true(animation.pending, 'Animation is still pending'); 114 assert_equals(animation.ready, pauseReadyPromise, 115 'The pause Promise is re-used when playing while waiting' 116 + ' to pause'); 117 118 // Sanity check: Animation proceeds to running state 119 await animation.ready; 120 assert_true(!animation.pending && animation.playState === 'running', 121 'Animation is running after aborting a pause'); 122 }, 'If a pause operation is interrupted, the ready promise is reused'); 123 124 promise_test(async t => { 125 // Seek animation beyond target end 126 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 127 animation.currentTime = -100 * MS_PER_SEC; 128 await animation.ready; 129 130 // Set pending playback rate to the opposite direction 131 animation.updatePlaybackRate(-1); 132 assert_true(animation.pending); 133 assert_equals(animation.playbackRate, 1); 134 135 // When we play, we should seek to the target end, NOT to zero (which 136 // is where we would seek to if we used the playbackRate of 1. 137 animation.play(); 138 assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC); 139 }, 'A pending playback rate is used when determining auto-rewind behavior'); 140 141 promise_test(async t => { 142 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 143 animation.cancel(); 144 assert_equals(animation.startTime, null, 145 'Start time should be unresolved'); 146 147 const playTime = animation.timeline.currentTime; 148 animation.play(); 149 assert_true(animation.pending, 'Animation should be play-pending'); 150 151 await animation.ready; 152 153 assert_false(animation.pending, 'animation should no longer be pending'); 154 assert_time_greater_than_equal(animation.startTime, playTime, 155 'The start time of the playing animation should be set'); 156 }, 'Playing a canceled animation sets the start time'); 157 158 promise_test(async t => { 159 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 160 animation.playbackRate = -1; 161 animation.cancel(); 162 assert_equals(animation.startTime, null, 163 'Start time should be unresolved'); 164 165 const playTime = animation.timeline.currentTime; 166 animation.play(); 167 assert_true(animation.pending, 'Animation should be play-pending'); 168 169 await animation.ready; 170 171 assert_false(animation.pending, 'Animation should no longer be pending'); 172 assert_time_greater_than_equal(animation.startTime, playTime + 100 * MS_PER_SEC, 173 'The start time of the playing animation should be set'); 174 }, 'Playing a canceled animation backwards sets the start time'); 175 176 </script> 177 </body>