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:
- /css/css-contain/content-visibility/content-visibility-030.html - WPT Dashboard Interop Dashboard
<!doctype HTML>
<html>
<meta charset="utf8">
<title>Content Visibility: intersection observer interactions</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<meta name="assert" content="content-visibility hidden is not intersecting from IO perspective">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
width: 100px;
height: 100px;
}
#spacer {
height: 3000px;
}
.hidden {
content-visibility: hidden;
}
</style>
<div id="target1">
<div id="target2"></div>
</div>
<div id="target3">
<div id="target4"></div>
</div>
<div id="spacer"></div>
<div id="find_me"></div>
<script>
async_test((t) => {
let target1, target2, target3, target4;
let observer;
let entries = [];
// Set everything up.
function enqueueStep1() {
target1 = document.getElementById("target1");
target2 = document.getElementById("target2");
target3 = document.getElementById("target3");
target4 = document.getElementById("target4");
observer = new IntersectionObserver((new_entries) => {
entries = entries.concat(new_entries);
});
observer.observe(target1);
observer.observe(target2);
observer.observe(target3);
observer.observe(target4);
entries = entries.concat(observer.takeRecords());
t.step(() => { assert_equals(entries.length, 0, "No initial notifications") });
requestAnimationFrame(() => {
requestAnimationFrame(() => {
runStep1();
});
});
}
// Verify that all elements are visible at the start, with intersection events.
function runStep1() {
const step = arguments.callee.name;
t.step(() => {
assert_equals(entries.length, 4, step);
// Clear the observed visible targets.
for (let i = 0; i < entries.length; ++i) {
assert_true(entries[i].isIntersecting);
assert_true(entries[i].target === target1 ||
entries[i].target === target2 ||
entries[i].target === target3 ||
entries[i].target === target4, step);
}
});
entries = [];
enqueueStep2();
}
// Lock target3.
async function enqueueStep2() {
target3.classList.add("hidden");
requestAnimationFrame(() => {
requestAnimationFrame(() => {
runStep2();
});
});
}
// Verify that the hidden element received a not-intersecting event.
function runStep2() {
const step = arguments.callee.name;
t.step(() => {
assert_equals(entries.length, 1, step);
assert_false(entries[0].isIntersecting, step);
assert_equals(entries[0].target, target4, step);
});
entries = [];
enqueueStep3();
}
// Scroll all elements off screen.
function enqueueStep3() {
document.getElementById("find_me").scrollIntoView();
requestAnimationFrame(() => {
requestAnimationFrame(() => {
runStep3();
});
});
}
// Verify that all elements received not intersecting event, except
// target4, which was already not intersecting due to being hidden.
function runStep3() {
const step = arguments.callee.name;
t.step(() => {
assert_equals(entries.length, 3, step);
for (let i = 0; i < entries.length; ++i) {
assert_false(entries[i].isIntersecting, step);
assert_not_equals(entries[i].target, target4, step);
}
});
entries = [];
enqueueStep4();
}
// Scroll the elements back on screen.
function enqueueStep4() {
target1.scrollIntoView();
requestAnimationFrame(() => {
requestAnimationFrame(() => {
runStep4();
});
});
}
// Verify that all elements received not intersecting event, except
// target4, which remains not intersecting.
function runStep4() {
const step = arguments.callee.name;
t.step(() => {
assert_equals(entries.length, 3, step);
for (let i = 0; i < entries.length; ++i) {
assert_true(entries[i].isIntersecting);
assert_not_equals(entries[i].target, target4, step);
}
});
entries = [];
enqueueStep5();
}
// Unlock target3.
async function enqueueStep5() {
target3.classList.remove("hidden");
requestAnimationFrame(() => {
requestAnimationFrame(() => {
runStep5();
});
});
}
function runStep5() {
const step = arguments.callee.name;
t.step(() => {
assert_equals(entries.length, 1, step);
assert_true(entries[0].isIntersecting, step);
assert_equals(entries[0].target, target4, step);
});
t.done();
}
window.onload = () => {
requestAnimationFrame(enqueueStep1);
};
}, "IntersectionObserver interactions");
</script>