minerva/Tests/LibWeb/Text/input/IntersectionObserver/observe-box-inside-container-with-scrollable-overflow.html at 1d53ae1d6f7d460e411d0c3e9ba48f0e7b6160b9

ErisCyan / minerva

Find file

Newer

Older

minerva / Tests / LibWeb / Text / input / IntersectionObserver / observe-box-inside-container-with-scrollable-overflow.html

minerva on 13 Jul 1 KB Initial commit

Raw Blame History

<!DOCTYPE html>
<style>
.scroll-box {
    width: 300px;
    height: 300px;
    overflow: scroll;
    border: 2px solid black;
}

.content-box {
    width: 100%;
    height: 600px;
    position: relative;
}

.target-box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 500px;
}
</style>
<script src="../include.js"></script>
<div class="scroll-box"><div class="content-box"><div class="target-box"></div></div></div>
<script>
    asyncTest(done => {
        function onIntersection(entries) {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    println("The box is now visible.");
                    done();
                } else {
                    println("The box is not visible.");
                }
            });
        }

        let observer = new IntersectionObserver(onIntersection, {
            root: document.querySelector(".scroll-box"),
        });

        observer.observe(document.querySelector(".target-box"));

        setTimeout(() => {
            document.querySelector(".scroll-box").scrollTop = 1000;
        }, 100);
    });
</script>