animate-multiple-effects-on-different-targets-via-main-thread.https.html (1959B)
1 <!DOCTYPE html> 2 <title>Animate multiple effects on different targets via main thread</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 <div id="target2"></div> 26 27 <script id="simple_animate" type="text/worklet"> 28 registerAnimator("test_animator", class { 29 animate(currentTime, effect) { 30 let effects = effect.getChildren(); 31 effects[0].localTime = 1000; 32 effects[1].localTime = 1000; 33 } 34 }); 35 </script> 36 37 <script> 38 promise_test(async t => { 39 await runInAnimationWorklet(document.getElementById('simple_animate').textContent); 40 41 const effect = new KeyframeEffect( 42 document.getElementById("target"), 43 [ 44 { background: 'green' }, 45 { background: 'blue' }, 46 ], 47 { duration: 2000 } 48 ); 49 const effect2 = new KeyframeEffect( 50 document.getElementById("target2"), 51 [ 52 { boxShadow: '4px 4px 25px blue' }, 53 { boxShadow: '4px 4px 25px green' } 54 ], 55 { duration: 2000 } 56 ); 57 58 const animation = new WorkletAnimation('test_animator', [effect, effect2]); 59 animation.play(); 60 await waitForAsyncAnimationFrames(1); 61 62 assert_equals(getComputedStyle(document.getElementById('target')).backgroundColor, "rgb(0, 64, 128)"); 63 assert_equals(getComputedStyle(document.getElementById('target2')).boxShadow, "rgb(0, 64, 128) 4px 4px 25px 0px"); 64 }, 'Animating multiple effects on different targets via main thread should produce new output values accordingly'); 65 </script>