Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /intersection-observer/transformed-iframe-002-cross-origin.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Intersection Observer: implicit root observer in iframe works when the iframe is transformed</title>
<link rel="author" title="Kiet Ho" href="mailto:kiet.ho@apple.com">
<script src="/common/get-host-info.sub.js"></script>
<script src="/common/rendering-utils.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#iframe {
width: 300px;
height: 300px;
display: block;
transform: perspective(600px) rotateY(-45deg) rotateX(80deg) rotateZ(20deg);
}
.spacer {
height: 2000px;
}
</style>
<p>Text to reproduce the issue.</p>
<iframe id="iframe"></iframe>
<div class="spacer"></div>
<script>
isIntersecting = null;
window.addEventListener("message", event => {
isIntersecting = event.data.isIntersecting;
});
function loadFrame() {
return new Promise(resolve => {
iframe.addEventListener("load", resolve, { once: true });
iframe.src = `${get_host_info().HTTP_NOTSAMESITE_ORIGIN}/intersection-observer/resources/transformed-iframe-subframe.html`;
});
}
promise_test(async (t) => {
await loadFrame();
window.scrollTo(0, 0);
await waitForAtLeastOneFrame();
await waitForAtLeastOneFrame();
await waitForAtLeastOneFrame();
assert_true(isIntersecting);
}, "Target is initially visible");
promise_test(async (t) => {
window.scrollTo(0, 250);
await waitForAtLeastOneFrame();
await waitForAtLeastOneFrame();
await waitForAtLeastOneFrame();
assert_false(isIntersecting);
}, "Scroll such that target is just out of view, target is not visible");
</script>