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

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

    function step1()
    {
        // Disable property
        InspectorTest.addResult("Before disable");
        InspectorTest.dumpSelectedElementStyles(true, true);
        InspectorTest.toggleStyleProperty("font-weight", false);
        InspectorTest.runAfterPendingDispatches(step2);
    }

    function step2()
    {
        // Delete style
        InspectorTest.addResult("After disable");
        InspectorTest.dumpSelectedElementStyles(true, true);

        var treeItem = InspectorTest.getElementStylePropertyTreeItem("font-weight");
        treeItem.applyStyleText("", true);

        InspectorTest.runAfterPendingDispatches(step3);
    }

    function step3()
    {
        InspectorTest.selectNodeWithId("other");
        InspectorTest.runAfterPendingDispatches(step4);
    }

    function step4()
    {
        InspectorTest.selectNodeAndWaitForStyles("container", step5);
    }

    function step5(node)
    {
        InspectorTest.addResult("After delete");
        InspectorTest.dumpSelectedElementStyles(true, true);
        InspectorTest.completeTest();
    }
}
</script>
</head>

<body onload="runTest()">
<p>
Tests that removal of property following its disabling works.
</p>

<div id="container" style="font-weight:bold">
</div>

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

</body>
</html>