worklet-animation-cancel.https.html (1250B)
1 <html class="reftest-wait"> 2 <title>Canceling a playing WorkletAnimation should remove the effect</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 <meta name="assert" content="Canceling a playing animation should remove the effect"> 5 <link rel="match" href="references/not-translated-box-ref.html"> 6 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="/common/reftest-wait.js"></script> 9 <script src="common.js"></script> 10 11 <style> 12 #box { 13 width: 100px; 14 height: 100px; 15 background-color: green; 16 } 17 </style> 18 19 <div id="box"></div> 20 21 <script> 22 registerConstantLocalTimeAnimator(500).then(_ => { 23 const box = document.getElementById('box'); 24 const effect = new KeyframeEffect(box, 25 [ 26 {transform: 'translateY(0)'}, 27 {transform: 'translateY(200px)'} 28 ], { 29 duration: 1000, 30 iterations: Infinity 31 } 32 ); 33 34 const animation = new WorkletAnimation('constant_time', effect); 35 animation.play(); 36 37 waitForAsyncAnimationFrames(1).then(_ => { 38 // Canceling a playing animation should remove the effect. 39 animation.cancel(); 40 waitForAsyncAnimationFrames(1).then(_ => { 41 takeScreenshot(); 42 }); 43 }); 44 }); 45 </script>