src/third_party/WebKit/LayoutTests/inspector/elements/styles/styles-add-new-rule.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     if (!window.eventSender || !window.textInputController) {
  10         document.write("This test does not work in manual mode.");
  11         InspectorTest.completeTest();
  12         return;
  13     }
  14
  15     InspectorTest.selectNodeAndWaitForStyles("inspected", step1);
  16     InspectorTest.addSniffer(WebInspector.UISourceCode.prototype, "addRevision", revisionAdded);
  17
  18     var treeElement;
  19     var hasResourceChanged;
  20
  21     function step1()
  22     {
  23         // Click "Add new rule".
  24         InspectorTest.addNewRule("foo, div#inspected, bar", step2);
  25     }
  26
  27     function step2()
  28     {
  29         var section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][2];
  30         var newProperty = section.addNewBlankProperty();
  31         newProperty.startEditing();
  32         textInputController.insertText("color");
  33         newProperty.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  34         textInputController.insertText("maroon");
  35         newProperty.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  36         InspectorTest.selectNodeAndWaitForStyles("other", step3);
  37     }
  38
  39     function step3()
  40     {
  41         // Click "Add new rule".
  42         InspectorTest.addNewRule(null, onRuleAdded);
  43
  44         function onRuleAdded()
  45         {
  46             InspectorTest.selectNodeAndWaitForStyles("inspected", step4);
  47         }
  48     }
  49
  50     function step4()
  51     {
  52         InspectorTest.addResult("After adding new rule (inspected):");
  53         InspectorTest.dumpSelectedElementStyles(true, false, true, true);
  54         InspectorTest.selectNodeAndWaitForStyles("other", step5);
  55     }
  56
  57     function step5()
  58     {
  59         InspectorTest.addResult("After adding new rule (other):");
  60         InspectorTest.dumpSelectedElementStyles(true, false, true);
  61
  62         InspectorTest.waitForStylesForClass("my-class", onStylesReceived);
  63         InspectorTest.nodeWithClass("my-class", onNodeFound);
  64         function onNodeFound(node)
  65         {
  66             WebInspector.Revealer.reveal(node);
  67         }
  68
  69         function onStylesReceived()
  70         {
  71             InspectorTest.addNewRule(null, step6);
  72         }
  73     }
  74
  75     function step6()
  76     {
  77         InspectorTest.dumpSelectedElementStyles(true, false, true);
  78
  79         InspectorTest.waitForStylesForClass("class-1", onStylesReceived);
  80         InspectorTest.nodeWithClass("class-1", onNodeFound);
  81         function onNodeFound(node)
  82         {
  83             WebInspector.Revealer.reveal(node);
  84         }
  85
  86         function onStylesReceived()
  87         {
  88             InspectorTest.addNewRule(null, function() {
  89                 InspectorTest.dumpSelectedElementStyles(true, false, true);
  90                 InspectorTest.completeTest();
  91             });
  92         }
  93     }
  94     function revisionAdded(revision)
  95     {
  96         InspectorTest.addResult("Revision added: " + this.displayName());
  97     }
  98 }
  99
 100 </script>
 101 </head>
 102
 103 <body onload="runTest()">
 104 <p>
 105 Tests that adding a new rule works after switching nodes.
 106 </p>
 107
 108 <div id="inspected" style="font-size: 12px">Text</div>
 109 <div id="other" style="color:red"></div>
 110 <div>
 111     <div class="my-class"></div>
 112     <div class="my-class"></div>
 113     <div class="my-class"></div>
 114 </div>
 115
 116 <div class=" class-1 class-2  class-3   "></div>
 117
 118 </body>
 119 </html>