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

<style>
.container {
  font-weight: bold
}
</style>

<script>

function test()
{
    InspectorTest.selectNodeAndWaitForStyles("container", step1);

    function step1()
    {
        InspectorTest.addResult("Initial value");
        InspectorTest.dumpSelectedElementStyles(true);

        var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("font-weight");
        treeItem.applyStyleText("font-weight: normal", true, false);
        InspectorTest.waitForStyles("container", step2);
    }

    function step2()
    {
        InspectorTest.addResult("After changing property");
        InspectorTest.dumpSelectedElementStyles(true);

        WebInspector.domAgent.undo();
        InspectorTest.selectNodeAndWaitForStyles("other", step3);
    }

    function step3()
    {
        InspectorTest.addResult("After undo");
        InspectorTest.dumpSelectedElementStyles(true);

        WebInspector.domAgent.redo();
        InspectorTest.selectNodeAndWaitForStyles("container", step4);
    }

    function step4()
    {
        InspectorTest.addResult("After redo");
        InspectorTest.dumpSelectedElementStyles(true);
        InspectorTest.completeTest();
    }
}
</script>
</head>

<body onload="runTest()">
<p>
Tests that changing a property is undone properly.
</p>

<div id="container" class="container"></div>
<div id="other" class="container"></div>

</body>
</html>