<!DOCTYPE html>
<html id="html">
    <head>
        <style id="custom-style">
            * {
                background-color: white;
                margin: 0;
                padding: 0;
            }
        label:active, input:active {
            background-color: rgb(50, 100, 150) !important;
        }
        #target1, #target2, #target3 {
            display: block;
            width: 100px;
            height: 100px;
            background-color: green;
            border: 2px solid black;
        }
        </style>
    </head>
    <script src="../../resources/js-test-pre.js"></script>
    <body id="body">
        <div id="webkit-test">
            <div id="labelable-ancestor">
                <div id="labelable-parent">
                    <label for="labelable1"><div id="target1"></div></label>
                    <label for="labelable2"><div id="target2">Target</div></label>
                    <label for="labelable3"><div id="target3"></div></label>
                </div>
            </div>
            <div id="next-group" style="display:none">
                <input id="labelable1" value="Labelable Input">
                <input id="labelable2" value="Labelable Input">
                <input id="labelable3" value="Labelable Input">
            </div>
        </div>
        <div id="console">
        </div>
        <script>
            description("Verify that a labeled elemed gets the :active state even if it has no renderer.");
            window.jsTestIsAsync = true;

            function generateName(element) {
                if (element.id)
                    return element.id;

                let childPosition = 1;
                while (element.previousElementSibling) {
                    element = element.previousElementSibling;
                    ++childPosition;
                }
                return "#" + element.parentElement.id + " >> " + element.tagName.toLowerCase() + ":nth-child(" + childPosition + ")";
            }

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

        if (window.eventSender) {
            eventSender.mouseMoveTo(50, 150);
        } else {
            debug("");
            debug("To run Manually, click-hold-release on the second green rect. 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()', '["#labelable-parent >> label:nth-child(2)", "labelable2"]');
            shouldBe('elementsMatchingActiveSelector()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "#labelable-parent >> label:nth-child(2)", "target2", "labelable2"]');

            if (!delayed) {
                setTimeout(function() { mouseDownHandler(event, true); }, 0);
            } else {
                sendMouseUp();
            }
        }
        var target = document.querySelector('label:nth-child(2)');
        target.addEventListener('mousedown', mouseDownHandler);

        function mouseUpHandler(event, delayed = false) {
            debug(delayed ? "After Mouse Up" : "On Mouse Up");
            shouldBe('elementsWithActiveStyle()', '[]');
            shouldBe('elementsMatchingActiveSelector()', '[]');
            document.getElementById("webkit-test").style.display = "none";
            document.getElementById("custom-style").innerText = "";
            finishJSTest();
        }
        target.addEventListener('mouseup', mouseUpHandler);
        
        
        debug("Initial state");
        shouldBe('elementsWithActiveStyle()', '[]');
        shouldBe('elementsMatchingActiveSelector()', '[]');
        
        sendMouseDown();
            </script>
        <script src="../../resources/js-test-post.js"></script>
    </body>
</html>