<!DOCTYPE html>
<html>
<head>
<style>
*,
h1,
.class,
#id,
body h1.class-one.class-two,
body #foo,
body > #foo,
body > #foo.a.b,
h1::before,
body h1::before,
body.a h1.b::before {
    color: green;
}
</style>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test() {
    var nodeStyles;

    function validateSelectors()
    {
        for (var i = 0; i < nodeStyles.matchedRules.length; ++i) {
            var rule = nodeStyles.matchedRules[i];
            if (rule.type !== WI.CSSStyleSheet.Type.Author)
                continue;

            for (var selector of rule.selectors)
                InspectorTest.log(selector.text + " (" + selector.specificity.join(", ") + ")");
        }

        InspectorTest.completeTest();
    }

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

    WI.domTreeManager.requestDocument(function(documentNode) {
        WI.domTreeManager.querySelector(documentNode.id, "#node1", function(contentNodeId) {
            if (contentNodeId) {
                var domNode = WI.domTreeManager.nodeForId(contentNodeId);
                nodeStyles = WI.cssStyleManager.stylesForNode(domNode);

                if (nodeStyles.needsRefresh)
                    nodeStyles.addEventListener(WI.DOMNodeStyles.Event.Refreshed, onStylesRefreshed, this);
                else
                    validateSelectors();
            } else {
                InspectorTest.log("DOM node not found.");
                InspectorTest.completeTest();
            }
        });
    });
}
</script>
</head>
<body onload="runTest()">
    <p>Testing that selectors have expected specificity values.</p>

    <div id="node1"></div>
</body>
</html>