Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /intersection-observer/transformed-iframe-003-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: rotateY(-45deg) rotateX(90deg) rotateZ(20deg);
}
.spacer {
height: 2000px;
}
</style>
<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_false(isIntersecting);
}, "Target is not visible as it's rotated perpendicularly to viewport");
promise_test(async (t) => {
window.scrollTo(0, 250);
await waitForAtLeastOneFrame();
await waitForAtLeastOneFrame();
await waitForAtLeastOneFrame();
assert_false(isIntersecting);
}, "Scroll down a bit, target is still not visible");
</script>