nested-cross-origin-iframe.sub.html (2759B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/common/get-host-info.sub.js"></script> 7 <script src="/css/cssom-view/support/scroll-behavior.js"></script> 8 <script src="./resources/intersection-observer-test-utils.js"></script> 9 <style> 10 .spacer { 11 height: calc(100vh + 100px); 12 } 13 </style> 14 <div class="spacer"></div> 15 <iframe id="iframe"></iframe> 16 <script> 17 18 promise_test(async t => { 19 iframe.src = // non secure port. 20 get_host_info().HTTP_NOTSAMESITE_ORIGIN + "/intersection-observer/resources/nested-cross-origin-child-iframe.sub.html"; 21 22 await new Promise(resolve => { 23 window.addEventListener("message", event => { 24 if (event.data == "ready") { 25 resolve(); 26 } 27 }, { once: true }); 28 }); 29 30 let isIntersecting = false; 31 window.addEventListener("message", function listener(event) { 32 if (event.origin == get_host_info().HTTPS_NOTSAMESITE_ORIGIN) { 33 isIntersecting = event.data; 34 window.removeEventListener("message", listener); 35 } 36 }); 37 38 await new Promise(resolve => waitForNotification(t, resolve)); 39 await new Promise(resolve => waitForNotification(t, resolve)); 40 41 assert_false(isIntersecting, 42 "The target element is not intersecting in all ancestor viewports"); 43 44 // Scroll the iframe in this document into view, but still the target element 45 // in the grand child document is out of the child iframe's viewport. 46 iframe.scrollIntoView({ behavior: "instant" }); 47 48 await waitForScrollEnd(document.scrollingElement); 49 50 assert_false(isIntersecting, 51 "The target element is not intersecting in all ancestor viewports"); 52 53 // Now make the target element visible in the child iframe's viewport. 54 frames[0].postMessage("scroll", "*"); 55 56 await new Promise(resolve => { 57 window.addEventListener("message", function listener(event) { 58 // It's possible that the message from the IntersectionObserver in the 59 // grand child document (HTTPS_NORSAMESITE_ORIGIN) is delivered ealier 60 // than scrollEnd message from the child document 61 // (HTTP_NOTSAMESITE_ORIGIN), so we need to differentiate them. 62 if (event.origin == get_host_info().HTTP_NOTSAMESITE_ORIGIN && 63 event.data == "scrollEnd" ) { 64 window.removeEventListener("message", listener); 65 resolve(); 66 } 67 }); 68 }); 69 70 await new Promise(resolve => waitForNotification(t, resolve)); 71 72 assert_true(isIntersecting, 73 "The target element is now intersecting in all ancestor viewports"); 74 }, "IntersectionObserver with `implicit root` in a nested cross-origin iframe works"); 75 </script>