cross-origin-tall-iframe.sub.html (2207B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <title>Intersection observer with cross-origin iframe and tall viewport</title> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1984635"> 7 <style> 8 pre, #log { 9 position: absolute; 10 top: 0; 11 left: 200px; 12 } 13 iframe { 14 width: 160px; 15 height: 5100px; 16 border: 0; 17 outline: 1px solid; 18 } 19 .spacer { 20 height: calc(200vh + 100px); 21 } 22 </style> 23 24 <div class="spacer"></div> 25 <iframe src="http://{{hosts[alt][]}}:{{ports[http][0]}}/intersection-observer/resources/cross-origin-tall-subframe.sub.html?nest=4" sandbox="allow-scripts"></iframe> 26 <div class="spacer"></div> 27 28 <script> 29 let iframe = document.querySelector("iframe"); 30 31 async function queryIframeState() { 32 let response = new Promise(resolve => { 33 window.addEventListener("message", function(e) { 34 resolve(e.data); 35 }, { once: true }); 36 }); 37 iframe.contentWindow.postMessage({ request: true }, "*"); 38 let data = await response; 39 assert_true(Array.isArray(data.entries), "Expected an array of entries"); 40 assert_equals(data.entries.length, 1, "Only one entry expected"); 41 return data.entries[0]; 42 } 43 44 async function assertFrameTargetIntersects(expected, msg) { 45 let framesToTry = 10; 46 let state; 47 for (let i = 0; i < framesToTry; ++i) { 48 state = await queryIframeState(); 49 if (state.isIntersecting == expected) { 50 break; 51 } 52 await new Promise(r => requestAnimationFrame(r)); 53 } 54 assert_equals(state.isIntersecting, expected, `Target should be ${expected ? "intersecting" : "not intersecting"} ${msg}`); 55 return state; 56 } 57 58 onload = () => { 59 promise_test(async function() { 60 await assertFrameTargetIntersects(false, "at start"); 61 iframe.scrollIntoView({ block: "start" }); 62 await assertFrameTargetIntersects(false, "when frame top visible"); 63 iframe.scrollIntoView({ block: "end" }); 64 await assertFrameTargetIntersects(true, "when frame bottom visible"); 65 iframe.scrollIntoView({ block: "start" }); 66 await assertFrameTargetIntersects(false, "when frame top visible again"); 67 }); 68 } 69 </script>