mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 01:35:08 +02:00
d1b485e6d6
Add tests for the implicit root case where targets are inside scroll containers with various overflow types: - overflow:hidden container with target pushed below visible area: should NOT be intersecting (currently wrong, shows intersecting). - overflow:clip container with target pushed below visible area: should NOT be intersecting (currently wrong, shows intersecting). - overflow:hidden container with target at top (visible): should be intersecting (correct). The two failing tests currently reflect wrong behavior because compute_intersection does not clip against intermediate scroll containers when walking the containing block chain.
48 lines
1.3 KiB
HTML
48 lines
1.3 KiB
HTML
<!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.
|
|
// With the implicit root (viewport), the target should NOT be intersecting
|
|
// because it is clipped by the scroll container.
|
|
let callbackCount = 0;
|
|
let observer = new IntersectionObserver(entries => {
|
|
callbackCount++;
|
|
entries.forEach(entry => {
|
|
println(`callback ${callbackCount}: isIntersecting=${entry.isIntersecting}`);
|
|
});
|
|
if (callbackCount === 1) {
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => {
|
|
println(`total callbacks: ${callbackCount}`);
|
|
done();
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
observer.observe(document.getElementById("target"));
|
|
});
|
|
</script>
|