worklet-animation-start-delay.https.html (1763B)
1 <html class="reftest-wait"> 2 <title>WorkletAnimation should respect delay given in options</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 <meta name="assert" content="Worklet Animation should respect delay given in options"> 5 <link rel="match" href="worklet-animation-start-delay-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="t0" class="box"></div> 20 <div id="t1" class="box"></div> 21 <div id="out"></div> 22 <script id="visual_update" type="text/worklet"> 23 registerAnimator("t0_animator", class { 24 animate(currentTime, effect) { 25 effect.localTime = 500; 26 } 27 }); 28 29 registerAnimator("t1_animator", class { 30 animate(currentTime, effect) { 31 effect.localTime = 5500; 32 } 33 }); 34 </script> 35 36 <script> 37 runInAnimationWorklet( 38 document.getElementById('visual_update').textContent 39 ).then(()=>{ 40 const keyframes = [ 41 {transform: 'translateX(0)' }, 42 {transform: 'translateX(200px)' } 43 ]; 44 const options = { 45 duration: 1000, 46 delay: 5000, 47 }; 48 49 const $t0 = document.getElementById('t0'); 50 const $t0_effect = new KeyframeEffect($t0, keyframes, options); 51 const $t0_animation = new WorkletAnimation('t0_animator', $t0_effect); 52 53 const $t1 = document.getElementById('t1'); 54 const $t1_effect = new KeyframeEffect($t1, keyframes, options); 55 const $t1_animation = new WorkletAnimation('t1_animator', $t1_effect); 56 57 $t0_animation.play(); 58 $t1_animation.play(); 59 60 waitForAsyncAnimationFrames(1).then(_ => { 61 takeScreenshot(); 62 }); 63 }); 64 </script>