main-frame.html (1475B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <title>Layout Instability: subframe layout shift score</title> 5 <link rel="help" href="https://wicg.github.io/layout-instability/" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #i { 10 border: 0; 11 position: absolute; 12 left: 0; 13 top: 0; 14 background-color: pink; 15 } 16 </style> 17 <iframe id="i" width="400" height="300" src="sub-frame.html"></iframe> 18 19 <script> 20 const loadPromise = new Promise(resolve => { 21 window.addEventListener("load", () => { 22 resolve(true); 23 }); 24 }); 25 26 let iframe = document.getElementById('i'); 27 const load_promise = new Promise(resolve => { 28 iframe.addEventListener('load', function() { 29 resolve(true); 30 }); 31 }); 32 33 checkMainFrameLoad = async () => { 34 await loadPromise; 35 return true; 36 }; 37 38 checkIFrameLoad = async () => { 39 // Wait for the iframe finishing loading 40 await load_promise; 41 return true; 42 }; 43 44 promise_test(async t => { 45 checkMainFrameLoad(); 46 // Wait for the iframe finishing loading 47 checkIFrameLoad(); 48 49 // Wait for the message sent from the iframe after it receives all the layout 50 // shifts. 51 await new Promise(resolve => { 52 window.addEventListener("message", (event) => { 53 if (event.data.type == "layout shift score") { 54 t.step(() => { 55 assert_equals(event.data.score, event.data.expectedScore); 56 }); 57 resolve(); 58 } 59 }, false); 60 }); 61 }, ""); 62 </script> 63 </body> 64 </html>