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