<!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: 20px;
    width: 100px;
    top: 41vh;
    background-color: green;
}
</style>

<div id="target"></div>
<script>
    if (window.internals)
        window.internals.setPageZoomFactor(2);
    async_test((t) =>  {
        let options = {
            rootMargin: '-40% 0px -40% 0px',
            threshold: [1]
        }
        const target = document.getElementById("target");
        let observer = new IntersectionObserver(t.step_func_done((entries) => {
            assert_true(entries[0].isIntersecting, "isIntersecting");
            target.remove();
        }), options);
        observer.observe(target);

    }, "IntersectionObserver's root margin, with percentage units, accounts for zooming");
</script>
