<!DOCTYPE html>
<html id="html">
<head>
<style id="custom-style">
    * {
        background-color: white;
        margin: 0;
        padding: 0;
    }
    :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="webkit-test">
        <div id="labelable-ancestor">
            <div id="labelable-parent">
                <textarea id="target">Label</textarea>
            </div>
        </div>
        <div id="next-group" style="display:block">
            <input id="input1" value="Input1">
            <input id="input2" value="Input2">
            <input id="input3" value="Input3">
        </div>
    </div>
    <div id="console">
    </div>
    <script>
    description("Verify that :active remain consistent when the focus is changing.");
    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 elementsMatchingSelector(selector) {
        let elements = [];
        for (let element of document.querySelectorAll(selector)) {
            elements.push(element.id);
        }
        return elements;
    }

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

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

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

    var target = document.getElementById('target');
    function afterMouseDown(event) {
        debug("After Mouse Down");
        shouldBe('elementsWithActiveStyle()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]');
        shouldBe('elementsMatchingSelector(":active")', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]');
        debug("Focus the target");
        target.focus();
        shouldBe('elementsWithActiveStyle()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]');
        shouldBe('elementsMatchingSelector(":active")', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]');
        shouldBe('elementsMatchingSelector(":focus")', '["target"]');
        debug("Focus input2");
        let input2 = document.getElementById("input2");
        input2.focus();
        shouldBe('elementsWithActiveStyle()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]');
        shouldBe('elementsMatchingSelector(":active")', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]');
        shouldBe('elementsMatchingSelector(":focus")', '["input2"]');
        debug("Focus the target");
        target.focus();
        shouldBe('elementsWithActiveStyle()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]');
        shouldBe('elementsMatchingSelector(":active")', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]');
        shouldBe('elementsMatchingSelector(":focus")', '["target"]');
        debug("Focus input1");
        let input1 = document.getElementById("input1");
        input1.focus();
        shouldBe('elementsWithActiveStyle()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]');
        shouldBe('elementsMatchingSelector(":active")', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]');
        shouldBe('elementsMatchingSelector(":focus")', '["input1"]');

        finishJSTest();
    }
    function mouseDownHandler(event) {
        debug("On Mouse Down");
        shouldBe('elementsWithActiveStyle()', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]');
        shouldBe('elementsMatchingSelector(":active")', '["html", "body", "webkit-test", "labelable-ancestor", "labelable-parent", "target"]');

        setTimeout(function() { afterMouseDown(event); }, 0);
    }

    target.addEventListener('mousedown', mouseDownHandler);


    debug("Initial state");
    shouldBe('elementsWithActiveStyle()', '[]');
    shouldBe('elementsMatchingSelector(":active")', '[]');
    shouldBe('elementsMatchingSelector(":focus")', '[]');

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