Tests: Add IntersectionObserver tests for explicit element root

Add tests verifying behavior when an IntersectionObserver has an
explicit element root:

- A target that is a descendant of the root should be reported as
  intersecting when it overlaps the root.
- A target that is NOT a descendant of the root but spatially overlaps
  it should NOT be reported as intersecting per spec step 3 of "run
  the update intersection observations steps". The expected output
  currently reflects the wrong (buggy) behavior.
This commit is contained in:
Andreas Kling
2026-03-22 08:39:38 -05:00
committed by Andreas Kling
parent f6f7e75ac9
commit 5e5dbae218
Notes: github-actions[bot] 2026-03-22 19:11:36 +00:00
4 changed files with 80 additions and 0 deletions

View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<style>
#root {
width: 200px;
height: 200px;
background: blue;
}
#descendant {
width: 100px;
height: 100px;
background: red;
}
</style>
<script src="../include.js"></script>
<div id="root"><div id="descendant"></div></div>
<script>
asyncTest(done => {
// A target that IS a descendant of the explicit root should be reported as intersecting.
let observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
println(`isIntersecting=${entry.isIntersecting}`);
if (entry.isIntersecting) {
println(`ratio=${entry.intersectionRatio}`);
done();
}
});
}, { root: document.getElementById("root") });
observer.observe(document.getElementById("descendant"));
});
</script>