observer-in-cross-origin-frame.sub.html (2214B)
1 <!DOCTYPE html> 2 3 <title>Tests that Resize Observer in a cross-origin frame works when observing its own element</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="./resources/resizeTestHelper.js"></script> 7 8 <style> 9 #iframe { 10 width: 300px; 11 height: 200px; 12 outline: 1px black solid; 13 } 14 </style> 15 16 <body> 17 18 <iframe id="iframe" src="http://{{hosts[alt][]}}:{{ports[http][0]}}/resize-observer/resources/cross-origin-subframe.html" sandbox="allow-scripts" frameborder="0"></iframe> 19 20 <script> 21 let borderBoxBlockSize = null; 22 let borderBoxInlineSize = null; 23 24 function rafPromise() { 25 return new Promise(requestAnimationFrame); 26 } 27 28 async function setSize(width, height) { 29 iframe.contentWindow.postMessage({ 30 msgName: "setSize", 31 width: width, 32 height: height 33 }, "*"); 34 35 await rafPromise(); 36 await rafPromise(); 37 await rafPromise(); 38 } 39 40 promise_setup(() => { 41 // Wait for iframe to be loaded. 42 return new Promise(resolve => { 43 window.addEventListener("message", event => { 44 if (event.data.msgName === "loaded") { 45 // Install a long-lasting event listener, since this listener is one-shot 46 window.addEventListener("message", event => { 47 if (event.data.msgName === "event") { 48 borderBoxBlockSize = event.data.borderBoxBlockSize; 49 borderBoxInlineSize = event.data.borderBoxInlineSize; 50 } 51 }); 52 53 resolve(); 54 } 55 }, { once: true }); 56 }); 57 }); 58 59 promise_test(async t => { 60 await setSize("200px", "100px"); 61 62 assert_equals(borderBoxInlineSize, 200); 63 assert_equals(borderBoxBlockSize, 100) 64 }, "Cross-origin observer responds to explicitly set physical size"); 65 66 promise_test(async t => { 67 // Initial iframe size is 300x200 68 await setSize("50vw", "50vh"); 69 assert_equals(borderBoxInlineSize, 150); 70 assert_equals(borderBoxBlockSize, 100); 71 72 iframe.style.width = "400px"; 73 iframe.style.height = "500px"; 74 await setSize("50vw", "50vh"); 75 76 assert_equals(borderBoxInlineSize, 200); 77 assert_equals(borderBoxBlockSize, 250); 78 }, "When size is viewport-dependant, cross-origin observer responds to viewport size changes"); 79 80 </script> 81 82 </body>