<!DOCTYPE html>
<html id="html">
<head>
<style id="custom-style">
    * {
        background-color: white;
        margin: 0;
        padding: 0;
    }
    :active, input:active + * + * + * {
        background-color: rgb(50, 100, 150) !important;
    }
    #target {
        display: block;
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>
</head>
<script src="../../resources/js-test-pre.js"></script>
<body id="body">
    <div id="prime-ancestor">
        <div id="labelable-ancestor">
            <div id="labelable-parent">
                <label for="labelable" id="target">Label</label>
            </div>
        </div>
        <div id="next-group" style="display:block">
            <div id="sibling1">Sibling1</div>
            <div id="sibling2">Sibling2</div>
            <input id="labelable" value="Labelable Input">
            <div id="sibling3">Sibling3</div>
            <div id="sibling4">Sibling4</div>
            <div id="sibling5">Sibling5</div>
        </div>
    </div>
    <div id="console">
    </div>
    <script>
    description("Verify that indirect :active on a labeled element is not affected when the element gets focus from the click.");
    window.jsTestIsAsync = true;

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

    if (window.eventSender) {
        eventSender.mouseMoveTo(50, 50);
    } else {
        debug("");
        debug("To run Manually, click-hold-release 3 times on the green rect. The rect and the input element should change color. All the results below should say PASS.")
        debug("");
    }

    function sendMouseDown() {
        if (window.eventSender) {
            eventSender.mouseDown();
        }
    }

    function sendMouseUp() {
        if (window.eventSender) {
            eventSender.mouseUp();
        }
    }

    function mouseDownHandler(event, delayed = false) {
        debug(delayed ? "After Mouse Down" : "On Mouse Down");
        shouldBe('elementsWithActiveStyle()', '["html", "body", "prime-ancestor", "labelable-ancestor", "labelable-parent", "target", "labelable", "sibling5"]');
        shouldBe('elementsMatchingActiveSelector()', '["html", "body", "prime-ancestor", "labelable-ancestor", "labelable-parent", "target", "labelable"]');

        // The current spec does not defined the order in which elements are activated.
        // It is reasonable to have the activation after the mouseDown dispatch. That's what Firefox does at this time.
        // This delayed handler ensure we cover both possibilities. The first handler fails on Firefox but that's not
        // necessarily wrong, just undefined. The result is fine as long as one of the two handler succeed.
        if (!delayed) {
            setTimeout(function() { mouseDownHandler(event, true); }, 0);
        } else {
            sendMouseUp();
        }
    }
    var target = document.getElementById('target');
    target.addEventListener('mousedown', mouseDownHandler);

    let mouseUpCount = 0;
    function mouseUpHandler(event, delayed = false) {
        debug(delayed ? "After Mouse Up" : "On Mouse Up");
        shouldBe('elementsWithActiveStyle()', '[]');
        shouldBe('elementsMatchingActiveSelector()', '[]');
        if (++mouseUpCount === 6) {
            document.getElementById("prime-ancestor").style.display = "none";
            document.getElementById("custom-style").innerText = "";
            finishJSTest();
        } else {
            if (!delayed) {
                setTimeout(function() { mouseUpHandler(event, true); }, 0);
            } else {
                sendMouseDown();
            }
        }
    }
    target.addEventListener('mouseup', mouseUpHandler);


    debug("Initial state");
    shouldBe('elementsWithActiveStyle()', '[]');
    shouldBe('elementsMatchingActiveSelector()', '[]');

    sendMouseDown();
    </script>
    <script src="../../resources/js-test-post.js"></script>
</body>
</html>