update-playback-rate-zero.html (1315B)
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-zero-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 halts its playback rate 19 part way through. If the box transitions to red the test fails. 20 </p> 21 </body> 22 <script> 23 onload = async function() { 24 const box = document.getElementById('box'); 25 const duration = 2000; 26 const anim = 27 box.animate({ bacground: [ 'green', 'red' ] }, 28 { duration: duration, easing: 'steps(2, jump-none)' }); 29 anim.ready.then(() => { 30 const startTime = anim.timeline.currentTime; 31 waitForAnimationFrames(2).then(() => { 32 anim.updatePlaybackRate(0); 33 anim.ready.then(() => { 34 const checkIfDone = () => { 35 if (anim.timeline.currentTime - startTime > duration / 2) 36 takeScreenshot(); 37 else 38 requestAnimationFrame(checkIfDone); 39 }; 40 requestAnimationFrame(checkIfDone); 41 }); 42 }); 43 }); 44 }; 45 </script>