update-playback-rate-fast.html (1563B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="UTF-8"> 4 <title>Update playback rate zero</title> 5 <link rel="match" href="update-playback-rate-fast-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <script src="../../testcommon.js"></script> 8 <style> 9 #box { 10 background: green; 11 height: 40px; 12 width: 40px; 13 } 14 </style> 15 <body> 16 <div id="box"></div> 17 <p id="notes"> 18 This test creates a running animation and changes its playback rate 19 part way through. If the box remains red when the screenshot is captured 20 the test fails. 21 </p> 22 </body> 23 <script> 24 onload = async function() { 25 const box = document.getElementById('box'); 26 const duration = 2000; 27 const anim = 28 box.animate({ bacground: [ 'red', 'green' ] }, 29 { duration: duration, easing: 'steps(2, jump-none)' }); 30 anim.ready.then(() => { 31 const startTime = anim.timeline.currentTime; 32 waitForAnimationFrames(2).then(() => { 33 anim.updatePlaybackRate(2); 34 anim.ready.then(() => { 35 const updateTime = anim.timeline.currentTime; 36 const baseProgress = (updateTime - startTime) / duration; 37 const checkIfDone = () => { 38 const progress = 39 2 * (anim.timeline.currentTime - updateTime) / duration + 40 baseProgress; 41 if (progress > 0.5) 42 takeScreenshot(); 43 else 44 requestAnimationFrame(checkIfDone); 45 }; 46 requestAnimationFrame(checkIfDone); 47 }); 48 }); 49 }); 50 }; 51 </script>