animation-worklet-inside-iframe.https.html (1905B)
1 <!DOCTYPE html> 2 <title>Test that AnimationWorklet inside frames with different origin causes new global scopes</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/web-animations/testcommon.js"></script> 7 <script src="common.js"></script> 8 9 <style> 10 .redbox { 11 width: 100px; 12 height: 100px; 13 background-color: #ff0000; 14 } 15 </style> 16 17 <div id="target" class="redbox"></div> 18 19 <script id="main_worklet" type="text/worklet"> 20 registerAnimator("duplicate_animator", class { 21 animate(currentTime, effect) { 22 effect.localTime = 500; 23 } 24 }); 25 </script> 26 27 <script> 28 async_test(t => { 29 // Wait for iframe to load and start its animations. 30 window.onmessage = function(msg) { 31 window.requestAnimationFrame( _ => { 32 run_test(msg.data); 33 }); 34 }; 35 36 // Create and load the iframe to avoid racy cases. 37 var iframe = document.createElement('iframe'); 38 iframe.src = 'resources/animator-iframe.html'; 39 document.body.appendChild(iframe); 40 41 function run_test(data) { 42 runInAnimationWorklet( 43 document.getElementById('main_worklet').textContent 44 ).then(_ => { 45 // Create an animation for duplicate animator. 46 const target = document.getElementById('target'); 47 const animation = new WorkletAnimation('duplicate_animator', new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 })); 48 animation.play(); 49 50 assert_equals(data, '0.4'); 51 52 // wait until local times are synced back to the main thread. 53 waitForAnimationFrameWithCondition(_ => { 54 return getComputedStyle(target).opacity != '1'; 55 }).then(t.step_func_done(() => { 56 assert_equals(getComputedStyle(target).opacity, '0.5'); 57 })); 58 }); 59 } 60 }, 'Both main frame and iframe should update the opacity of their target'); 61 </script>