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