pausing-an-animation.html (4080B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Pausing an animation</title> 4 <link rel="help" 5 href="https://drafts.csswg.org/web-animations/#pausing-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 promise_test(async t => { 15 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 16 await animation.ready; 17 18 const startTimeBeforePausing = animation.startTime; 19 20 animation.pause(); 21 assert_equals(animation.startTime, startTimeBeforePausing, 22 'The start time does not change when pausing-pending'); 23 24 await animation.ready; 25 26 assert_equals(animation.startTime, null, 27 'The start time is unresolved when paused'); 28 }, 'Pausing clears the start time'); 29 30 promise_test(async t => { 31 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 32 await animation.ready; 33 34 animation.pause(); 35 assert_not_equals(animation.startTime, null, 36 'The start time is resolved when pause-pending'); 37 38 animation.play(); 39 assert_not_equals(animation.startTime, null, 40 'The start time is preserved when a pause is aborted'); 41 }, 'Aborting a pause preserves the start time'); 42 43 promise_test(async t => { 44 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 45 const promise = animation.ready; 46 animation.pause(); 47 48 const promiseResult = await promise; 49 50 assert_equals(promiseResult, animation); 51 assert_equals(animation.ready, promise); 52 assert_false(animation.pending, 'No longer pause-pending'); 53 }, 'A pending ready promise should be resolved and not replaced when the' 54 + ' animation is paused'); 55 56 promise_test(async t => { 57 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 58 // Let animation start roughly half-way through 59 animation.currentTime = 50 * MS_PER_SEC; 60 await animation.ready; 61 62 // Go pause-pending and also set a pending playback rate 63 animation.pause(); 64 animation.updatePlaybackRate(0.5); 65 66 await animation.ready; 67 // If the current time was updated using the new playback rate it will jump 68 // back to 25s but if we correctly used the old playback rate the current time 69 // will be >= 50s. 70 assert_greater_than_equal(animation.currentTime, 50 * MS_PER_SEC); 71 }, 'A pause-pending animation maintains the current time when applying a' 72 + ' pending playback rate'); 73 74 promise_test(async t => { 75 // This test does not cover a specific step in the algorithm but serves as a 76 // high-level sanity check that pausing does, in fact, freeze the current 77 // time. 78 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 79 await animation.ready; 80 81 animation.pause(); 82 await animation.ready; 83 84 const currentTimeAfterPausing = animation.currentTime; 85 86 await waitForNextFrame(); 87 88 assert_equals(animation.currentTime, currentTimeAfterPausing, 89 'Animation.currentTime is unchanged after pausing'); 90 }, 'The animation\'s current time remains fixed after pausing'); 91 92 93 promise_test(async t => { 94 95 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 96 97 const originalReadyPromise = animation.ready; 98 animation.cancel(); 99 assert_equals(animation.startTime, null); 100 assert_equals(animation.currentTime, null); 101 102 const readyPromise = animation.ready; 103 assert_not_equals(originalReadyPromise, readyPromise, 104 'Canceling an animation should create a new ready promise'); 105 106 animation.pause(); 107 assert_equals(animation.playState, 'paused', 108 'Pausing a canceled animation should update the play state'); 109 assert_true(animation.pending, 'animation should be pause-pending'); 110 await animation.ready; 111 assert_false(animation.pending, 112 'animation should no longer be pause-pending'); 113 assert_equals(animation.startTime, null, 'start time should be unresolved'); 114 assert_equals(animation.currentTime, 0, 'current time should be set to zero'); 115 116 }, 'Pausing a canceled animation sets the current time'); 117 118 </script> 119 </body>