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