src/third_party/WebKit/LayoutTests/inspector/styles/paste-property.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../http/tests/inspector/elements-test.js"></script>
   5 <script>
   6
   7 function test()
   8 {
   9     WebInspector.showPanel("elements");
  10     InspectorTest.selectNodeAndWaitForStyles("inspected", pasteFirstProperty);
  11
  12     function pasteFirstProperty()
  13     {
  14         InspectorTest.addResult("Before pasting:");
  15         InspectorTest.dumpSelectedElementStyles(true);
  16         var section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][1];
  17         section.expand();
  18
  19         var treeElement = section.addNewBlankProperty(0);
  20         pasteProperty(treeElement, "margin-left: 1px", pasteTwoProperties);
  21     }
  22
  23     function pasteTwoProperties()
  24     {
  25         InspectorTest.addResult("After pasting 'margin-left: 1px':");
  26         InspectorTest.dumpSelectedElementStyles(true);
  27
  28         var treeElement = WebInspector.panels.elements.sidebarPanes.styles.sections[0][1].addNewBlankProperty(2);
  29         pasteProperty(treeElement, "margin-top: 1px; color: red;", pasteOverExistingProperty);
  30     }
  31
  32     function pasteOverExistingProperty()
  33     {
  34         InspectorTest.addResult("After pasting 'margin-top: 1px; color: red;':");
  35         InspectorTest.dumpSelectedElementStyles(true);
  36
  37         var treeElement = InspectorTest.getElementStylePropertyTreeItem("margin-top");
  38         pasteProperty(treeElement, "foo: bar; moo: zoo", dumpAndComplete);
  39     }
  40
  41     function dumpAndComplete()
  42     {
  43         InspectorTest.addResult("After pasting 'foo: bar; moo: zoo' over 'margin-top':");
  44         InspectorTest.dumpSelectedElementStyles(true);
  45
  46         InspectorTest.completeTest();
  47     }
  48
  49     function pasteProperty(treeElement, propertyText, callback)
  50     {
  51         treeElement.nameElement.textContent = propertyText;
  52         treeElement.startEditing();
  53
  54         document.execCommand("SelectAll");
  55         document.execCommand("Copy");
  56         document.execCommand("Paste");
  57         InspectorTest.runAfterPendingDispatches(reloadStyles.bind(this, callback));
  58     }
  59
  60     function reloadStyles(callback) {
  61         InspectorTest.selectNodeWithId("other");
  62         InspectorTest.runAfterPendingDispatches(otherCallback);
  63
  64         function otherCallback()
  65         {
  66             InspectorTest.selectNodeAndWaitForStyles("inspected", callback);
  67         }
  68     }
  69 }
  70
  71 </script>
  72 </head>
  73
  74 <body onload="runTest()">
  75 <p>
  76 Tests that splitting properties when pasting works.
  77 </p>
  78
  79 <div id="inspected" style="font-size: 12px">Text</div>
  80 <div id="other"></div>
  81
  82 </body>
  83 </html>