2026-03-22 10:42:11 -03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<style>
|
|
|
|
|
body { margin: 0; }
|
|
|
|
|
#scroller {
|
|
|
|
|
width: 200px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
#spacer {
|
|
|
|
|
height: 500px;
|
|
|
|
|
}
|
|
|
|
|
#target {
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
background: red;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script src="../include.js"></script>
|
|
|
|
|
<div id="scroller">
|
|
|
|
|
<div id="spacer"></div>
|
|
|
|
|
<div id="target"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
asyncTest(done => {
|
|
|
|
|
// The target is inside a scroll container with overflow:hidden.
|
|
|
|
|
// The spacer pushes the target below the scroll container's visible area.
|
2026-03-22 10:55:30 -03:00
|
|
|
// With the implicit root (viewport), the intersection ratio should be 0
|
|
|
|
|
// because compute_intersection clips against the scroll container.
|
2026-03-22 10:42:11 -03:00
|
|
|
let callbackCount = 0;
|
|
|
|
|
let observer = new IntersectionObserver(entries => {
|
|
|
|
|
callbackCount++;
|
|
|
|
|
entries.forEach(entry => {
|
2026-03-22 10:55:30 -03:00
|
|
|
println(`callback ${callbackCount}: ratio=${entry.intersectionRatio}`);
|
2026-03-22 10:42:11 -03:00
|
|
|
});
|
|
|
|
|
if (callbackCount === 1) {
|
|
|
|
|
requestAnimationFrame(() => {
|
|
|
|
|
requestAnimationFrame(() => {
|
|
|
|
|
println(`total callbacks: ${callbackCount}`);
|
|
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
observer.observe(document.getElementById("target"));
|
|
|
|
|
});
|
|
|
|
|
</script>
|
