<!DOCTYPE html>
<html id="html">
<head>
<style>
    * {
        background-color: white;
        margin: 0;
        padding: 0;
    }
    :hover {
        background-color: rgb(50, 100, 150) !important;
    }
    #prime-ancestor div {
        width: 100px;
        height: 100px;
    }
    #target {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 100px;
    }
    #interceptor {
        position: absolute;
        left: 100px;
    }
</style>
</head>
<script src="../../resources/js-test-pre.js"></script>
<body id="body">
    <div id="prime-ancestor">
        <div id="interceptor">
        </div>
        <div id="group">
            <div id="element-to-remove">
                <div id="target">
                </div>
            </div>
        </div>
    </div>
    <div id="console">
    </div>
    <script>
    description("Verify the hovered state is updated correctly when an ancestor of the hovered element is detached from the document's tree");
    window.jsTestIsAsync = true;

    function elementsWithHoverStyle() {
        let elements = [];
        for (let element of document.querySelectorAll("*")) {
            if (getComputedStyle(element).backgroundColor === "rgb(50, 100, 150)")
                elements.push(element.id);
        }
        return elements;
    }
    function elementsMatchingHoverSelector(root = document) {
        let elements = [];
        for (let element of root.querySelectorAll(":hover")) {
            elements.push(element.id);
        }
        return elements;
    }

    if (!window.eventSender) {
        debug("This test requires eventSender");
    }
    eventSender.mouseMoveTo(300, 50);
    {
        // See https://bugs.webkit.org/show_bug.cgi?id=74264
        eventSender.mouseDown()
        eventSender.mouseUp()
    }

    debug("Initial state");
    shouldBe('elementsWithHoverStyle()', '["html", "body", "prime-ancestor"]');
    shouldBe('elementsMatchingHoverSelector()', '["html", "body", "prime-ancestor"]');

    debug("Moving over #target")
    eventSender.mouseMoveTo(150, 50);
    shouldBe('elementsWithHoverStyle()', '["html", "body", "prime-ancestor", "group", "element-to-remove", "target"]');
    shouldBe('elementsMatchingHoverSelector()', '["html", "body", "prime-ancestor", "group", "element-to-remove", "target"]');

    debug("Removing the renderer of #element-to-remove");
    var elementToRemove = document.getElementById("element-to-remove");
    elementToRemove.parentElement.removeChild(elementToRemove);
    shouldBe('elementsMatchingHoverSelector(elementToRemove)', '[]');

    // Force layout.
    offsetTop = elementToRemove.offsetTop;

    // hover updates happen on timer.
    setTimeout(function() {
        shouldBe('elementsWithHoverStyle()', '["html", "body", "prime-ancestor", "interceptor"]');
        shouldBe('elementsMatchingHoverSelector()', '["html", "body", "prime-ancestor", "interceptor"]');
        finishJSTest();
    }, 17);
    </script>
    <script src="../../resources/js-test-post.js"></script>
</body>
</html>