<!DOCTYPE html>
<html>
<head>
<style>
    .foo {}
</style>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test() {
    // FIXME: remove this once we know why this test is sometimes flaky.
    // See <https://www.webkit.org/b/148321> for more details.
    InspectorTest.dumpActivityToSystemConsole = true;

    var nodeStyles;
    var selectors = ["span.foo", "body > .foo"];
    var index = 0;

    function modifyRuleSelector(selector) {
        if (!nodeStyles.matchedRules.length) {
            InspectorTest.log("ERROR: missing matched rules");
            InspectorTest.completeTest();
            return;
        }

        var rule = nodeStyles.matchedRules[0];
        CSSAgent.setRuleSelector(rule.id, selector, function(error, payload) {
            if (error) {
                InspectorTest.log("ERROR: " + error);
                InspectorTest.completeTest();
                return;
            }

            var newSelector = payload.selectorList.text;
            InspectorTest.log("\nSelector before mutation: " + rule.selectorText);
            InspectorTest.log("Selector after mutation: " + newSelector);
            InspectorTest.assert(newSelector === selector, "FAIL: Selector " + newSelector + " should be updated to " + selector + ".");

            nodeStyles.refresh();
        });
    }

    // Every time the nodeStyles refreshes, attempt to change the selector
    // of the first rule to the next selector in the list.
    function onStylesRefreshed()
    {
        if (index >= selectors.length) {
            InspectorTest.completeTest();
            return;
        }

        modifyRuleSelector(selectors[index]);
        ++index;
    }

    WI.domTreeManager.requestDocument(function(documentNode) {
        if (!documentNode) {
            InspectorTest.log("ERROR: document not found.");
            InspectorTest.completeTest();
            return;
        }

        WI.domTreeManager.querySelector(documentNode.id, ".foo", function(contentNodeId) {
            if (!contentNodeId) {
                InspectorTest.log("ERROR: DOM node not found.");
                InspectorTest.completeTest();
                return;
            }

            var domNode = WI.domTreeManager.nodeForId(contentNodeId);
            nodeStyles = WI.cssStyleManager.stylesForNode(domNode);

            nodeStyles.addEventListener(WI.DOMNodeStyles.Event.Refreshed, onStylesRefreshed, this);
            if (!nodeStyles.needsRefresh)
                onStylesRefreshed();
        });
    });
}
</script>
</head>
<body onload="runTest()">
    <p>Testing that selectors are able to be modified more than once.</p>

    <span class="foo"></span>
</body>
</html>