Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /intersection-observer/nested-cross-origin-iframe.sub.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/get-host-info.sub.js"></script>
<script src="/css/cssom-view/support/scroll-behavior.js"></script>
<script src="./resources/intersection-observer-test-utils.js"></script>
<style>
.spacer {
height: calc(100vh + 100px);
}
</style>
<div class="spacer"></div>
<iframe id="iframe"></iframe>
<script>
promise_test(async t => {
iframe.src = // non secure port.
get_host_info().HTTP_NOTSAMESITE_ORIGIN + "/intersection-observer/resources/nested-cross-origin-child-iframe.sub.html";
await new Promise(resolve => {
window.addEventListener("message", event => {
if (event.data == "ready") {
resolve();
}
}, { once: true });
});
let isIntersecting = false;
window.addEventListener("message", function listener(event) {
if (event.origin == get_host_info().HTTPS_NOTSAMESITE_ORIGIN) {
isIntersecting = event.data;
window.removeEventListener("message", listener);
}
});
await new Promise(resolve => waitForNotification(t, resolve));
await new Promise(resolve => waitForNotification(t, resolve));
assert_false(isIntersecting,
"The target element is not intersecting in all ancestor viewports");
// Scroll the iframe in this document into view, but still the target element
// in the grand child document is out of the child iframe's viewport.
iframe.scrollIntoView({ behavior: "instant" });
await waitForScrollEnd(document.scrollingElement);
assert_false(isIntersecting,
"The target element is not intersecting in all ancestor viewports");
// Now make the target element visible in the child iframe's viewport.
frames[0].postMessage("scroll", "*");
await new Promise(resolve => {
window.addEventListener("message", function listener(event) {
// It's possible that the message from the IntersectionObserver in the
// grand child document (HTTPS_NORSAMESITE_ORIGIN) is delivered ealier
// than scrollEnd message from the child document
// (HTTP_NOTSAMESITE_ORIGIN), so we need to differentiate them.
if (event.origin == get_host_info().HTTP_NOTSAMESITE_ORIGIN &&
event.data == "scrollEnd" ) {
window.removeEventListener("message", listener);
resolve();
}
});
});
await new Promise(resolve => waitForNotification(t, resolve));
assert_true(isIntersecting,
"The target element is now intersecting in all ancestor viewports");
}, "IntersectionObserver with `implicit root` in a nested cross-origin iframe works");
</script>