worklet-animation-pause-immediately.https.html (1100B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Verify that calling pause immediately after playing works as expected</title> 4 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 5 <link rel="match" href="references/translated-box-ref.html"> 6 7 <script src="/common/reftest-wait.js"></script> 8 <script src="/web-animations/testcommon.js"></script> 9 <script src="common.js"></script> 10 <style> 11 #box { 12 width: 100px; 13 height: 100px; 14 background-color: green; 15 } 16 </style> 17 18 <div id="box"></div> 19 20 <script> 21 registerPassthroughAnimator().then(async _ => { 22 const box = document.getElementById('box'); 23 const effect = new KeyframeEffect(box, 24 { transform: ['translateY(100px)', 'translateY(200px)'] }, 25 { duration: 100, iterations: 1 } 26 ); 27 28 const animation = new WorkletAnimation('passthrough', effect); 29 animation.play(); 30 // Immediately pausing animation should freeze the current time at 0. 31 animation.pause(); 32 // Wait at least one frame to ensure a paused animation actually freezes. 33 await waitForAsyncAnimationFrames(1); 34 takeScreenshot(); 35 }); 36 </script> 37 </html>