worklet-animation-with-effects-from-different-frames.https.html (1672B)
1 <!DOCTYPE html> 2 <title>Worklet animation can animate effects from different frames</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="common.js"></script> 8 9 <div id="box"></div> 10 11 <script id="simple_animate" type="text/worklet"> 12 registerAnimator("test_animator", class { 13 animate(currentTime, effect) { 14 let effects = effect.getChildren(); 15 effects[0].localTime = 500; 16 effects[1].localTime = 750; 17 } 18 }); 19 </script> 20 21 <script> 22 promise_test(async t => { 23 await runInAnimationWorklet(document.getElementById('simple_animate').textContent); 24 const effect = new KeyframeEffect(box, [{ opacity: 0 }], { duration: 1000 }); 25 26 let iframe = document.createElement('iframe'); 27 iframe.src = 'resources/iframe.html'; 28 document.body.appendChild(iframe); 29 30 await waitForAnimationFrameWithCondition(_ => { 31 return iframe.contentDocument.getElementById('iframe_box') != null; 32 }); 33 let iframe_box = iframe.contentDocument.getElementById('iframe_box'); 34 let iframe_effect = new KeyframeEffect( 35 iframe_box, [{ opacity: 0 }], { duration: 1000 } 36 ); 37 38 const animation = new WorkletAnimation('test_animator', [effect, iframe_effect]); 39 animation.play(); 40 41 await waitForNotNullLocalTime(animation); 42 assert_equals(getComputedStyle(box).opacity, '0.5'); 43 assert_equals(getComputedStyle(iframe_box).opacity, '0.25'); 44 45 iframe.remove(); 46 animation.cancel(); 47 }, "Effects from different documents can be animated within one worklet animation"); 48 </script>