multiple-effects-on-same-target-driven-by-individual-local-time.https.html (1902B)
1 <!DOCTYPE html> 2 <title>Multiple effects on same target driven by individual local time</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="common.js"></script> 9 10 <style> 11 #target { 12 width: 100px; 13 height: 100px; 14 background-color: green; 15 } 16 #target2 { 17 width: 100px; 18 height: 100px; 19 background-color: blue; 20 box-shadow: 4px 4px 25px blue; 21 } 22 </style> 23 24 <div id="target"></div> 25 26 <script id="simple_animate" type="text/worklet"> 27 registerAnimator("test_animator", class { 28 animate(currentTime, effect) { 29 let effects = effect.getChildren(); 30 effects[0].localTime = 0; 31 effects[1].localTime = 1000; 32 } 33 }); 34 </script> 35 36 <script> 37 promise_test(async t => { 38 await runInAnimationWorklet(document.getElementById('simple_animate').textContent); 39 40 const effect = new KeyframeEffect( 41 document.getElementById("target"), 42 [ 43 { background: 'green' }, 44 { background: 'blue' }, 45 ], 46 { duration: 2000 } 47 ); 48 const effect2 = new KeyframeEffect( 49 document.getElementById("target"), 50 [ 51 { width: '100px' }, 52 { width: '200px' } 53 ], 54 { duration: 2000 } 55 ); 56 57 const animation = new WorkletAnimation('test_animator', [effect, effect2]); 58 animation.play(); 59 await waitForAsyncAnimationFrames(1); 60 61 assert_equals(getComputedStyle(document.getElementById('target')).backgroundColor, "rgb(0, 128, 0)"); 62 assert_equals(getComputedStyle(document.getElementById('target')).width, "150px"); 63 }, `Animating multiple effects on the same target using effect specific local time should output values 64 relative to each effects unique local time`); 65 </script>