worklet-animation-pause-resume.https.html (1213B)
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="common.js"></script> 9 <style> 10 #box { 11 width: 100px; 12 height: 100px; 13 background-color: green; 14 } 15 </style> 16 17 <div id="box"></div> 18 19 <script> 20 registerPassthroughAnimator().then(async _ => { 21 const duration = 18; // a bit longer than a frame 22 const box = document.getElementById('box'); 23 const effect = new KeyframeEffect(box, 24 { transform: ['translateY(0px)', 'translateY(100px)'] }, 25 { duration: duration, iterations: 1, fill: 'forwards'} 26 ); 27 28 const animation = new WorkletAnimation('passthrough', effect); 29 // Immediately pausing animation should freeze the current time at 0. 30 animation.pause(); 31 // Playing should cause animation to resume. 32 animation.play(); 33 // Wait until we ensure animation has reached completion. 34 await waitForAnimationFrameWithCondition( _ => { 35 return animation.currentTime >= duration; 36 }); 37 takeScreenshot(); 38 }); 39 </script> 40 </html>