<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);

    function step1()
    {
        var treeElement = InspectorTest.getElementStylePropertyTreeItem("background");
        InspectorTest.addResult("Viewing 'background' value in Styles:");
        InspectorTest.addResult(treeElement.valueElement.textContent);

        treeElement.startEditing(treeElement.valueElement);
        InspectorTest.addResult("Editing 'background' value in Styles:");
        InspectorTest.addResult(treeElement.valueElement.textContent);
        InspectorTest.completeTest();
    }
}

</script>
</head>

<body onload="runTest()">
<p>
Tests that editing a CSS property value in the Styles pane restores the original, non-trimmed value text. <a href="https://bugs.webkit.org/show_bug.cgi?id=107936">Bug 107936</a>.
</p>

<div id="inspected" style="background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC) repeat-y 50% top" />

</body>
</html>