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

    function validateStyles() {
        InspectorTest.log("");

        InspectorTest.expectThat(!nodeStyles.inlineStyle, "No Inline Styles");
        InspectorTest.expectThat(!nodeStyles.attributesStyle, "No Attribute Styles");
        InspectorTest.expectThat(!nodeStyles.inheritedRules.length, "No Inherited Styles");
        InspectorTest.expectThat(!Object.keys(nodeStyles.pseudoElements).length, "No Pseudo Element Styles");

        InspectorTest.expectThat(nodeStyles.computedStyle, "Has Computed Styles");
        InspectorTest.log("PROPERTY: " + nodeStyles.computedStyle.propertyForName("content").text);
        InspectorTest.log("PROPERTY: " + nodeStyles.computedStyle.propertyForName("color").text);

        for (var rule of nodeStyles.matchedRules) {
            InspectorTest.log("MATCHED RULE:");
            for (var i = 0; i < rule.selectors.length; ++i) {
                var selector = rule.selectors[i];
                var matched = rule.matchedSelectorIndices.includes(i);
                InspectorTest.log("  SELECTOR: " + selector.text + (matched ? " [matched]" : ""));
            }
        }

        InspectorTest.completeTest();                
    }

    WI.domTreeManager.requestDocument(function(documentNode) {
        WI.domTreeManager.querySelector(documentNode.id, "#x", function(contentNodeId) {
            var domNode = WI.domTreeManager.nodeForId(contentNodeId);
            InspectorTest.assert(domNode);
            var beforePseudoElementDOMNode = domNode.beforePseudoElement();
            InspectorTest.expectThat(beforePseudoElementDOMNode, "Got ::before pseudo element for #x");
            InspectorTest.log("Refreshing styles for ::before pseudo element");
            nodeStyles = WI.cssStyleManager.stylesForNode(beforePseudoElementDOMNode);
            nodeStyles.addEventListener(WI.DOMNodeStyles.Event.Refreshed, validateStyles);
            nodeStyles.refresh();
        });
    });

}
</script>
</head>
<body onload="runTest()">
    <p>Testing that we can get computed and matched rules for pseudo element nodes.</p>

    <style>
    input:before, #x:before, div { content: "before"; color: blue; }
    </style>

    <div id="x">TEST ELEMENT: Has Before Pseudo Element</div>
</body>
</html>