<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/intersection-observer/#intersection-observer-interface">
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#target {
    position: absolute;
    height: 40px;
    width: 100px;
    top: -40px;
    background-color: green;
}
</style>


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

<script>
    // The target is positioned 40 px above the viewport so should fully intersect
    // when the viewport is expanded by a root margin of 40 px, no matter what
    // page zoom factor is used, since page zoom should equally affect both the
    // positioning of the target and the size of the root margin.
    window.internals.setPageZoomFactor(2);
    async_test((t) =>  {
        let options = {
            rootMargin: '40px 0px 0px 0px',
            threshold: [1]
        }
        let observer = new IntersectionObserver(t.step_func_done((entries) => {
            assert_true(entries[0].isIntersecting, "isIntersecting"); 
        }), options);
        observer.observe(document.getElementById("target"));
    }, "IntersectionObserver's root margin accounts for zooming");
</script>