<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/live-edit-test.js"></script>
<script src="../../http/tests/inspector/debugger-test.js"></script>
<link rel="stylesheet" href="resources/get-set-stylesheet-text.css">
<div id=foo></div>
<script>

function test()
{
    WebInspector.showPanel("scripts");

    InspectorTest.runTestSuite([
        function testLiveEdit(next)
        {
            InspectorTest.showScriptSource("get-set-stylesheet-text.css", didShowResource);

            function didShowResource(sourceFrame)
            {
                InspectorTest.addSniffer(WebInspector.CSSStyleModel.prototype, "_fireStyleSheetChanged", didEditResource);
                InspectorTest.replaceInSource(sourceFrame, "font-size: 12px;", "font-size: 20px;");
            }

            function didEditResource()
            {
                InspectorTest.selectNodeAndWaitForStylesWithComputed("foo", didSelectElement);
            }

            function didSelectElement()
            {
                InspectorTest.dumpSelectedElementStyles(false, true);
                next();
            }
        }
    ]);
};

</script>

</head>

<body onload="runTest()">
<p>Tests that styles are updated when live-editing css resource.</p>

</body>
</html>