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

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

    var treeElement;
    var section;

    function step1()
    {
        InspectorTest.dumpSelectedElementStyles(true, true, true);
        treeElement = InspectorTest.getElementStylePropertyTreeItem("color");

        treeElement.startEditing();
        treeElement.nameElement.textContent = "background";

        InspectorTest.selectNodeAndWaitForStyles("other", step2);
    }

    function step2()
    {
        InspectorTest.dumpSelectedElementStyles(true, true, true);
        InspectorTest.selectNodeAndWaitForStyles("inspected", step3);
    }

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

</script>
</head>

<body onload="runTest()">
<p>
Tests that changing selected node while editing style does update styles sidebar.
</p>

<div id="inspected" style="color: red">Text</div>
<div id="other" style="color: blue"></div>

</body>
</html>