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