<!DOCTYPE html>
<html>
<head>
<style>
:is(div, article),                              /* dynamic, but statically always the same */
:is(div, .foo, #bar, div#bar),                  /* dynamic, changing based on matched element */
:matches(div, article),                         /* dynamic, but statically always the same */
:matches(div, .foo, #bar, div#bar),             /* dynamic, changing based on matched element */
div:nth-child(odd),                             /* static, no selector list */
:nth-child(odd of div),                         /* dynamic, but statically always the same */
:nth-child(odd of div, .foo, #bar, div#bar),    /* dynamic, changing based on matched element */
:nth-child(even of div, .foo, #bar, div#bar),   /* dynamic, changing based on matched element */
:not(span, #missing),                           /* static, maximum in list */
:not(:not(:is(div, .foo, #bar, div#bar))),      /* static, is() inside not() is maximized */
:not(:not(:matches(div, .foo, #bar, div#bar))), /* static, matches() inside not() is maximized */
* /* ignored */
{
    color: green;
}
</style>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test() {
    var nodeStyles;
    var documentNode;

    var currentSelector = null;
    var currentStepIndex = 0;
    var steps = ["p", "div", ".foo", "#bar"];

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

        var seenRules = [];

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

            if (seenRules.some(function(r) { return r.isEqualTo(rule); }))
                continue;
            seenRules.push(rule);

            for (var selector of rule.selectors) {
                if (selector.text === "*")
                    continue;

                var output = currentSelector + " - " + selector.text;
                output += selector.specificity ? " (" + selector.specificity.join(", ") + ")" : " (no value)";
                if (selector.dynamic)
                    output += " (dynamic)";
                InspectorTest.log(output);
            }
        }

        runNextStep();
    }

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

    function runNextStep()
    {
        if (currentStepIndex >= steps.length) {
            InspectorTest.completeTest();
            return;
        }

        currentSelector = steps[currentStepIndex++];
        documentNode.querySelector(currentSelector, function(contentNodeId) {
            if (contentNodeId) {
                var domNode = WI.domManager.nodeForId(contentNodeId);
                nodeStyles = WI.cssManager.stylesForNode(domNode);

                if (nodeStyles.needsRefresh)
                    nodeStyles.addEventListener(WI.DOMNodeStyles.Event.Refreshed, onStylesRefreshed, this);
                else
                    validateSelectors();
            } else {
                InspectorTest.log("DOM node not found.");
                InspectorTest.completeTest();
            }
        });
    }

    WI.domManager.requestDocument(function(node) {
        documentNode = node;
        runNextStep();
    });
}
</script>
</head>
<body onload="runTest()">
    <p>Testing that dynamic selectors have expected specificity values depending on the context node.</p>

    <div></div>
    <div class="foo"></div>
    <div id="bar"></div>
</body>
</html>