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