<!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 {
    height: 40px;
    width: 40px;
    background-color: green;
}

#scroller {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    overflow: hidden;
    padding-top: 100px;
}
</style>

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

<script>
    async_test((t) =>  {
        let options = {
            scrollMargin: '20px',
            threshold: [0]
        }
        let observer = new IntersectionObserver(t.step_func_done((entries) => {
            assert_true(entries[0].isIntersecting, "isIntersecting");
            assert_approx_equals(entries[0].intersectionRatio, 0.5, 0.001);
        }), options);
        observer.observe(document.getElementById("target"));
    }, "IntersectionObserver's scroll margin");
</script>