<!DOCTYPE html><!-- webkit-test-runner [ IntersectionObserverEnabled=true ] -->
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<body>

<div id="root" style="position:absolute">
    <div id="target" style="width: 100px; height: 100px; background-color: green"></div>
</div>

<script>
    function observerShouldBeRemoved()
    {
        return new Promise(function(resolve) {
            handle = setInterval(function() {
                GCController.collect();
                if (internals && internals.numberOfIntersectionObservers(document) == 0) {
                    clearInterval(handle);
                    resolve();
                }
            }, 10);
        });
    }

    async_test(function(t) {
        var root = document.getElementById('root');
        var observer = new IntersectionObserver(function() {}, { root: document.getElementById('root') });;
        var target = document.getElementById('target');
        assert_equals(observer.root, root, 'Observer starts out with non-null root');
        observer.observe(target);
        assert_equals(internals.numberOfIntersectionObservers(document), 1);
        root.parentNode.removeChild(root);
        root = null;
        target = null;
        requestAnimationFrame(function() {
            observer.takeRecords();
            observerShouldBeRemoved().then(t.step_func_done(function() {
                assert_equals(observer.root, null, 'Observer has null root after root element is destroyed');
            }));
        });
    }, "IntersectionObserver doesn't keep unreachable root alive");
</script>
</body>
</html>