worklet-animation-local-time-before-start.https.html (1121B)
1 <html class="reftest-wait"> 2 <title>Animation Worklet local time set before start</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 <meta name="assert" content="The local time should be trimmed by the duration, e.g. this is equivalent to effect.localTime = 0"> 5 <link rel="match" href="references/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(100px)' }, 27 { transform: 'translateY(0px)' } 28 ], { 29 duration: 1000, 30 fill: 'backwards' 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>