worklet-animation-local-time-after-duration.https.html (1145B)
1 <html class="reftest-wait"> 2 <title>Animation Worklet local time set after duration</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 <meta name="assert" content="If an effect doesn't have fill-mode specified, setting its local time beyond its duration makes the animation inactive."> 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(2000).then(() => { 23 const box = document.getElementById('box'); 24 const effect = new KeyframeEffect(box, 25 [ 26 { transform: 'translateY(100px)' }, 27 { transform: 'translateY(200px)' } 28 ], { 29 duration: 1000, 30 delay: 1000 31 } 32 ); 33 34 const animation = new WorkletAnimation('constant_time', effect); 35 animation.play(); 36 37 waitForAsyncAnimationFrames(1).then(_ => { 38 takeScreenshot(); 39 }); 40 }); 41 </script>