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

function test()
{
    InspectorTest.selectNodeWithId("inspected", execute);

    function execute()
    {
        var treeElement = InspectorTest.firstElementsTreeOutline().findTreeElement(InspectorTest.expandedNodeWithId("inspected"));
        var textElement = treeElement.listItemElement.getElementsByClassName("webkit-html-attribute")[0];
        InspectorTest.addResult("Original textContent");
        InspectorTest.addResult(treeElement.title.textContent);

        treeElement._startEditingTarget(textElement);
        InspectorTest.addResult("textContent when editing 'href'");
        InspectorTest.addResult(treeElement.title.textContent);

        eventSender.keyDown("Tab");
        InspectorTest.addResult("textContent after moving to 'id'");
        InspectorTest.addResult(treeElement.title.textContent);

        textElement = treeElement.listItemElement.getElementsByClassName("webkit-html-attribute")[1];
        textElement.dispatchEvent(InspectorTest.createKeyEvent("Escape"));
        InspectorTest.addResult("textContent after canceling the edit (equal to the original one)");
        InspectorTest.addResult(treeElement.title.textContent);

        InspectorTest.completeTest();
    }
}

</script>
</head>

<body onload="runTest()">
<p>
Tests that user can mutate DOM by means of elements panel.
</p>

<div>
    <a href="data:text/plain;,12345678901234567890123456789012345678901234567890123456789012345678901234567890/123456789012345678901234567890123456789012345678901234567890" id="inspected">Anchor</a>
</div>
</body>
</html>