reverse-running-animation.html (1498B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="UTF-8"> 4 <title>reverse running animation</title> 5 <link rel="match" href="reverse-running-animation-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 animates the box color from green to red and reverses the play 19 direction shortly after the midpoint. If the box remains red, the test 20 failed. 21 </p> 22 </body> 23 <script> 24 onload = async function() { 25 const box = document.getElementById('box'); 26 const duration = 10000; 27 const anim = 28 box.animate({ background: [ 'green', 'red' ] }, 29 { duration: duration, easing: 'steps(2, jump-none)' }); 30 anim.currentTime = duration / 2; 31 anim.ready.then(() => { 32 const startTime = anim.timeline.currentTime; 33 waitForAnimationFrames(2).then(() => { 34 anim.reverse(); 35 anim.ready.then(() => { 36 const reversalTime = anim.timeline.currentTime; 37 const forwardPlayingTime = reversalTime - startTime; 38 const checkIfDone = () => { 39 if (anim.timeline.currentTime - reversalTime > forwardPlayingTime) 40 takeScreenshot(); 41 else 42 requestAnimationFrame(checkIfDone); 43 }; 44 requestAnimationFrame(checkIfDone); 45 }); 46 }); 47 }); 48 }; 49 </script>