LayoutTests/intersection-observer/intersection-clipped-to-target.html

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#container {
    width: 100%;
    transform: translateZ(0);
    overflow: hidden;
}

#target {
    margin-top: 0.66px;
    height: 40px;
    background-color: green;
}
</style>

<div id="container">
    <div id="target"></div>
</div>

<script>
    async_test((t) =>  {
        let observer = new IntersectionObserver(t.step_func_done((entries) => {
            assert_true(entries[0].isIntersecting, "isIntersecting"); 
            assert_equals(entries[0].intersectionRatio, 1, "intersectionRatio");
            assert_equals(entries[0].intersectionRect.height, entries[0].boundingClientRect.height, "intersectionRect.height");
        }));
        observer.observe(document.getElementById("target"));
    }, "IntersectionObserverEntry's intersection rect is not larger than the target rect");
</script>