setting-the-playback-rate-of-an-animation.html (4341B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Setting the playback rate of an animation</title> 4 <link rel="help" href="https://drafts.csswg.org/web-animations/#setting-the-playback-rate-of-an-animation"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="../../testcommon.js"></script> 8 <body> 9 <div id="log"></div> 10 <script> 11 'use strict'; 12 13 promise_test(async t => { 14 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 15 animation.playbackRate = 2; 16 await animation.ready; 17 18 const previousAnimationCurrentTime = animation.currentTime; 19 const previousTimelineCurrentTime = animation.timeline.currentTime; 20 21 await waitForAnimationFrames(1); 22 23 const animationCurrentTimeDifference = 24 animation.currentTime - previousAnimationCurrentTime; 25 const timelineCurrentTimeDifference = 26 animation.timeline.currentTime - previousTimelineCurrentTime; 27 28 assert_times_equal( 29 animationCurrentTimeDifference, 30 timelineCurrentTimeDifference * animation.playbackRate, 31 'The current time should increase two times faster than timeline' 32 ); 33 }, 'The playback rate affects the rate of progress of the current time'); 34 35 test(t => { 36 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 37 animation.currentTime = 50 * MS_PER_SEC; 38 animation.playbackRate = 2; 39 assert_time_equals_literal(animation.currentTime, 50 * MS_PER_SEC); 40 }, 'Setting the playback rate while play-pending preserves the current time'); 41 42 promise_test(async t => { 43 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 44 animation.currentTime = 50 * MS_PER_SEC; 45 await animation.ready; 46 animation.playbackRate = 2; 47 assert_greater_than_equal(animation.currentTime, 50 * MS_PER_SEC); 48 assert_less_than(animation.currentTime, 100 * MS_PER_SEC); 49 }, 'Setting the playback rate while playing preserves the current time'); 50 51 promise_test(async t => { 52 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 53 animation.currentTime = 50 * MS_PER_SEC; 54 animation.updatePlaybackRate(2); 55 animation.playbackRate = 1; 56 await animation.ready; 57 assert_equals(animation.playbackRate, 1); 58 }, 'Setting the playback rate should clear any pending playback rate'); 59 60 promise_test(async t => { 61 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 62 animation.currentTime = 50 * MS_PER_SEC; 63 animation.pause(); 64 await animation.ready; 65 animation.playbackRate = 2; 66 // Ensure that the animation remains paused and current time is preserved. 67 assert_equals(animation.playState, 'paused'); 68 assert_time_equals_literal(animation.currentTime, 50 * MS_PER_SEC); 69 }, 'Setting the playback rate while paused preserves the current time and ' 70 + 'state'); 71 72 promise_test(async t => { 73 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 74 animation.currentTime = 150 * MS_PER_SEC; 75 await animation.ready; 76 animation.playbackRate = 2; 77 // Ensure that current time is preserved and does not snap to the effect end 78 // time. 79 assert_equals(animation.playState, 'finished'); 80 assert_time_equals_literal(animation.currentTime, 150 * MS_PER_SEC); 81 }, 'Setting the playback rate while finished preserves the current time'); 82 83 promise_test(async t => { 84 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 85 animation.currentTime = 150 * MS_PER_SEC; 86 await animation.ready; 87 assert_equals(animation.playState, 'finished'); 88 animation.playbackRate = -1; 89 // Ensure that current time does not snap to the effect end time and that the 90 // animation resumes playing. 91 assert_equals(animation.playState, 'running'); 92 assert_time_equals_literal(animation.currentTime, 150 * MS_PER_SEC); 93 await waitForAnimationFrames(2); 94 assert_less_than(animation.currentTime, 150 * MS_PER_SEC); 95 }, 'Reversing the playback rate while finished restarts the animation'); 96 97 98 promise_test(async t => { 99 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 100 await animation.ready; 101 animation.currentTime = 50 * MS_PER_SEC; 102 animation.playbackRate = 0; 103 // Ensure that current time does not drift. 104 assert_equals(animation.playState, 'running'); 105 await waitForAnimationFrames(2); 106 assert_time_equals_literal(animation.currentTime, 50 * MS_PER_SEC); 107 }, 'Setting a zero playback rate while running preserves the current time'); 108 109 </script> 110 </body>