iframe-same-origin.html (2667B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Resize Observer: observed elements and ResizeObserver object are in the 4 differnt documents</title> 5 <link rel="match" href="iframe-same-origin-ref.html"> 6 <meta name="assert" content="The resize observer callback should be notified 7 when the observed element inside an sub document while the resize observer 8 is registed in the outer document"> 9 10 <script src="/common/reftest-wait.js"></script> 11 12 <body> 13 <iframe id="container" style="width: 100px; height: 100px;" 14 srcdoc="<div style='background: green; height: 30px; width: 50px;'></div"> 15 </iframe> 16 <br> 17 Observer callbacks: <span id="callbackReport">0</span> 18 </body> 19 20 <script> 21 function load() { 22 return new Promise(resolve => { 23 container.onload = resolve; 24 }); 25 } 26 27 let target; 28 let resolvePromise; 29 load().then(() => { 30 // Get target after loaded. 31 target = container.contentWindow.document.body.firstElementChild; 32 33 let observerCallbacks = 0; 34 const resizeObserver = new ResizeObserver(entries => { 35 callbackReport.innerText = ++observerCallbacks; 36 resolvePromise(); 37 }); 38 return new Promise(resolve => { 39 resolvePromise = resolve; 40 resizeObserver.observe(target); 41 // |observerCallbacks| will be increased by one here because we need to 42 // trigger notification in the event loop that contains ResizeObserver 43 // observe() call even when resize/reflow does not happen. 44 }); 45 }).then(() => { 46 return new Promise(resolve => { 47 // Use requestAnimationFrame() to make sure we handle the callback in 48 // the following event loop. (This makes sure we schedule the 49 // ResizeObserver event properly for the following event loop after 50 // handling the previous one.) 51 window.requestAnimationFrame(() => { 52 resolvePromise = resolve; 53 target.style.height = "40px"; 54 target.offsetHeight; // force to reflow the iframe document. 55 // |observerCallbacks| is 2 now. 56 }); 57 }); 58 }).then(() => { 59 return new Promise(resolve => { 60 window.requestAnimationFrame(() => { 61 resolvePromise = resolve; 62 target.style.height = "50px"; 63 target.offsetHeight; // force to reflow the iframe document. 64 // |observerCallbacks| is 3 now. 65 }); 66 }); 67 }).then(() => { 68 // This is needed to workaround a Chromium test infrastructure bug. 69 // See https://crbug.com/1270820#c8 for details. 70 return new Promise((resolve) => window.requestAnimationFrame(resolve)); 71 }).then(() => { 72 document.body.offsetHeight; // force to reflow the outer document. 73 takeScreenshot(); 74 }); 75 </script> 76 </html>