iframe.html (1048B)
1 <!doctype html> 2 <head> 3 <script src="./resizeTestHelper.js"></script> 4 </head> 5 <p>iframe test</p> 6 <div id="itarget1" style="width:100px;height:100px;">t1</div> 7 <script> 8 'use strict'; 9 let t1 = document.querySelector('#itarget1'); 10 function test0() { 11 let timeoutId = window.setTimeout( () => { 12 window.parent.postMessage('fail', '*'); 13 }, ResizeTestHelper.TIMEOUT); 14 let ro = new ResizeObserver(function(entries) { 15 window.clearTimeout(timeoutId); 16 window.parent.postMessage('success', '*'); 17 }); 18 ro.observe(t1); 19 } 20 let testStarted = false; 21 window.addEventListener('message', function(ev) { 22 switch(ev.data) { 23 case 'startTest': 24 testStarted = true; 25 test0(); 26 break; 27 } 28 }); 29 // How does parent know we've loaded problem is solved by 30 // broadcasting readyToTest message repeatedly until test starts. 31 function broadcastReady() { 32 if (!testStarted) { 33 window.parent.postMessage('readyToTest', '*'); 34 window.requestAnimationFrame(broadcastReady); 35 } 36 } 37 window.onload = broadcastReady; 38 </script>