worklet-animation-get-timing-on-worklet-thread.https.html (1446B)
1 <html class="reftest-wait"> 2 <title>Animation Worklet should have access to effect timing from within the worklet thread</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 <meta name="assert" content="Animation Worklet should have access to effect timing from within the worklet thread"> 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 height: 100px; 14 width: 100px; 15 background-color: green; 16 } 17 </style> 18 19 <div id="box"></div> 20 21 <script id="get_timing_animator" type="text/worklet"> 22 registerAnimator('get_timing', class { 23 animate(currentTime, effect){ 24 effect.localTime = effect.getTiming().delay + (effect.getTiming().duration / 2); 25 } 26 }); 27 </script> 28 29 <script> 30 runInAnimationWorklet( 31 document.getElementById('get_timing_animator').textContent 32 ).then(() => { 33 const box = document.getElementById("box"); 34 const effect = new KeyframeEffect( 35 box, 36 [ 37 {transform: 'translateY(0)'}, 38 {transform: 'translateY(200px)'} 39 ], 40 { 41 delay: 2000, 42 duration: 1000 43 } 44 ); 45 46 const animation = new WorkletAnimation('get_timing', effect); 47 animation.play(); 48 49 waitForAsyncAnimationFrames(1).then(_ => { 50 takeScreenshot(); 51 }); 52 }); 53 </script> 54 </html>