<html>
<head>
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/elements-test.js"></script>
<script src="../../http/tests/inspector/debugger-test.js"></script>
<script>

function test()
{
    var inspectorResource;

    WebInspector.showPanel("elements");
    InspectorTest.selectNodeAndWaitForStyles("inspected", step1);

    function step1(node)
    {
        WebInspector.cssModel.addRule(node.id, "#inspected", successCallback, failureCallback);

        function successCallback()
        {
            // setTimwout is needed here because showScriptSource callback is triggered by uiSourceCode addRevision handling
            // and we need to wait until the code flow exits StyleFile.addRevision.
            InspectorTest.showScriptSource("inspector-stylesheet", setTimeout.bind(this, step2, 0));
        }
        function failureCallback()
        {
            InspectorTest.addResult("Failed to add rule.");
            InspectorTest.completeTest();
        }
    }

    function step2(sourceFrame)
    {
        var uiSourceCode = sourceFrame._uiSourceCode;
        InspectorTest.addResult("Inspector stylesheet URL: " + uiSourceCode.displayName());
        uiSourceCode.requestContent(printContent());

        InspectorTest.addResult("\nSetting new content");
        uiSourceCode.setWorkingCopy("#inspected { background-color: green; }");
        uiSourceCode.commitWorkingCopy(step3.bind(this, uiSourceCode));
    }

    function step3(uiSourceCode)
    {
        uiSourceCode.requestContent(printContent(selectNode));
        function selectNode()
        {
            InspectorTest.selectNodeAndWaitForStyles("inspected", dumpStyles);
        }

        function dumpStyles()
        {
            InspectorTest.dumpSelectedElementStyles(true, false, true);
            InspectorTest.completeTest();
        }
    }

    function printContent(next)
    {
        function result(content)
        {
            InspectorTest.addResult("Inspector stylesheet content:");
            InspectorTest.addResult(content);
            if (next)
                next();
        }
        return result;
    }
}
</script>
</head>

<body onload="runTest()">
<p>
Tests that adding a new rule creates inspector stylesheet resource and allows its live editing.
</p>

<div id="inspected">Text</div>

</body>
</html>