LayoutTests/inspector/styles/styles-add-blank-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", addAndIncrementFirstProperty);
  11
  12     var treeElement;
  13     var section;
  14
  15     function addAndIncrementFirstProperty()
  16     {
  17         InspectorTest.addResult("Before append:");
  18         InspectorTest.dumpSelectedElementStyles(true);
  19         section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][1];
  20         section.expand();
  21
  22         // Create and increment.
  23         treeElement = section.addNewBlankProperty(0);
  24         treeElement.startEditing();
  25         treeElement.nameElement.textContent = "margin-left";
  26         treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  27
  28         treeElement.valueElement.textContent = "1px";
  29         treeElement.valueElement.firstChild.select();
  30         treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Up"));
  31         InspectorTest.runAfterPendingDispatches(incrementProperty);
  32     }
  33
  34     function incrementProperty()
  35     {
  36         // Increment again.
  37         treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Up"));
  38         InspectorTest.runAfterPendingDispatches(commitProperty);
  39     }
  40
  41     function commitProperty()
  42     {
  43         // Commit.
  44         treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  45         reloadStyles(addAndChangeLastCompoundProperty);
  46     }
  47
  48     function addAndChangeLastCompoundProperty()
  49     {
  50         InspectorTest.addResult("After insertion at index 0:");
  51         InspectorTest.dumpSelectedElementStyles(true);
  52
  53         treeElement = WebInspector.panels.elements.sidebarPanes.styles.sections[0][1].addNewBlankProperty(2);
  54         treeElement.startEditing();
  55         treeElement.nameElement.textContent = "color";
  56         treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  57
  58         treeElement.valueElement.textContent = "green; font-weight: bold";
  59         treeElement.kickFreeFlowStyleEditForTest();
  60
  61         treeElement.valueElement.textContent = "red; font-weight: bold";
  62         treeElement.kickFreeFlowStyleEditForTest();
  63
  64         treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  65         InspectorTest.runAfterPendingDispatches(reloadStyles.bind(this, addAndCommitMiddleProperty));
  66     }
  67
  68     function addAndCommitMiddleProperty()
  69     {
  70         InspectorTest.addResult("After appending and changing a 'compound' property:");
  71         InspectorTest.dumpSelectedElementStyles(true);
  72
  73         treeElement = WebInspector.panels.elements.sidebarPanes.styles.sections[0][1].addNewBlankProperty(2);
  74         treeElement.startEditing();
  75         treeElement.nameElement.textContent = "third-property";
  76         treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  77         treeElement.valueElement.textContent = "third-value";
  78
  79         treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  80         InspectorTest.runAfterPendingDispatches(reloadStyles.bind(this, dumpAndComplete));
  81     }
  82
  83     function dumpAndComplete()
  84     {
  85         InspectorTest.addResult("After insertion at index 2:");
  86         InspectorTest.dumpSelectedElementStyles(true);
  87
  88         InspectorTest.completeTest();
  89     }
  90
  91     function reloadStyles(callback) {
  92         InspectorTest.selectNodeWithId("other");
  93         InspectorTest.runAfterPendingDispatches(otherCallback);
  94
  95         function otherCallback()
  96         {
  97             InspectorTest.selectNodeAndWaitForStyles("inspected", callback);
  98         }
  99     }
 100 }
 101
 102 </script>
 103 </head>
 104
 105 <body onload="runTest()">
 106 <p>
 107 Tests that adding a new blank property works.
 108 </p>
 109
 110 <div id="inspected" style="font-size: 12px">Text</div>
 111 <div id="other"></div>
 112
 113 </body>
 114 </html>