<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", pasteFirstProperty);

    function pasteFirstProperty()
    {
        InspectorTest.addResult("Before pasting:");
        InspectorTest.dumpSelectedElementStyles(true);
        var section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][1];
        section.expand();

        var treeElement = section.addNewBlankProperty(0);
        pasteProperty(treeElement, "margin-left: 1px", pasteTwoProperties);
    }

    function pasteTwoProperties()
    {
        InspectorTest.addResult("After pasting 'margin-left: 1px':");
        InspectorTest.dumpSelectedElementStyles(true);

        var treeElement = WebInspector.panels.elements.sidebarPanes.styles.sections[0][1].addNewBlankProperty(2);
        pasteProperty(treeElement, "margin-top: 1px; color: red;", pasteOverExistingProperty);
    }

    function pasteOverExistingProperty()
    {
        InspectorTest.addResult("After pasting 'margin-top: 1px; color: red;':");
        InspectorTest.dumpSelectedElementStyles(true);

        var treeElement = InspectorTest.getElementStylePropertyTreeItem("margin-top");
        pasteProperty(treeElement, "foo: bar; moo: zoo", dumpAndComplete);
    }

    function dumpAndComplete()
    {
        InspectorTest.addResult("After pasting 'foo: bar; moo: zoo' over 'margin-top':");
        InspectorTest.dumpSelectedElementStyles(true);

        InspectorTest.completeTest();
    }

    function pasteProperty(treeElement, propertyText, callback)
    {
        treeElement.nameElement.textContent = propertyText;
        treeElement.startEditing();

        document.execCommand("SelectAll");
        document.execCommand("Copy");
        document.execCommand("Paste");
        InspectorTest.runAfterPendingDispatches(reloadStyles.bind(this, callback));
    }

    function reloadStyles(callback) {
        InspectorTest.selectNodeWithId("other");
        InspectorTest.runAfterPendingDispatches(otherCallback);

        function otherCallback()
        {
            InspectorTest.selectNodeAndWaitForStyles("inspected", callback);
        }
    }
}

</script>
</head>

<body onload="runTest()">
<p>
Tests that splitting properties when pasting works.
</p>

<div id="inspected" style="font-size: 12px">Text</div>
<div id="other"></div>

</body>
</html>