<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test() {
    var nodeStyles;

    function validateMatchedSelectors()
    {
        var found = false;

        for (var i = 0; i < nodeStyles.matchedRules.length; ++i) {
            var rule = nodeStyles.matchedRules[i];
            if (rule.type !== WI.CSSStyleSheet.Type.UserAgent)
                continue;
            if (rule.selectorText.indexOf("::placeholder") === -1)
                continue;

            found = true;
            var index = 0;
            for (var selector of rule.selectors) {
                var matches = rule.matchedSelectorIndices.includes(index);
                InspectorTest.log(selector.text + (matches ? " MATCHES" : ""));
                index++;
            }
            break;
        }

        if (!found)
            InspectorTest.log("Failed to find a ::placeholder UserAgent style. Test may need to change.");

        InspectorTest.completeTest();
    }

    function onStylesRefreshed()
    {
        nodeStyles.removeEventListener(WI.DOMNodeStyles.Event.Refreshed, onStylesRefreshed, this);
        validateMatchedSelectors();
    }

    WI.domManager.requestDocument(function(documentNode) {
        documentNode.querySelector("#node1", function(contentNodeId) {
            try { 
                if (contentNodeId) {
                    var domNode = WI.domManager.nodeForId(contentNodeId);
                    domNode.getSubtree(1, function() {
                        var shadowRoot = domNode.children[0];
                        shadowRoot.getSubtree(2, function() {
                            for (var i = 0; i < shadowRoot.children.length; ++i) {
                                var shadowNode = shadowRoot.children[i];
                                if (shadowNode.getAttribute("pseudo") === "placeholder") {
                                    nodeStyles = WI.cssManager.stylesForNode(shadowNode);
                                    if (nodeStyles.needsRefresh)
                                        nodeStyles.addEventListener(WI.DOMNodeStyles.Event.Refreshed, onStylesRefreshed, this);
                                    else
                                        validateMatchedSelectors();
                                    return;
                                }
                            }
                            InspectorTest.log("node with pseudo 'placeholder' not found.");
                            InspectorTest.completeTest();
                        });
                    });
                } else {
                    InspectorTest.log("DOM node not found.");
                    InspectorTest.completeTest();
                }
            } catch (e) {
                InspectorTest.log("Exception: " + e.message);
                InspectorTest.log("Failed to find a ::placeholder shadow element under an <audio>. Test may need to change.");
                InspectorTest.completeTest();
            }
        });
    });
}
</script>
</head>
<body onload="runTest()">
    <p>Testing that pseudo element selectors correctly show matching selector information.</p>
    <input id="node1" placeholder="placeholder">
</body>
</html>