third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-add-new-rule-colon.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", step1);
  10     InspectorTest.addSniffer(WebInspector.UISourceCode.prototype, "addRevision", onRevisionAdded);
  11
  12     var treeElement;
  13     var hasResourceChanged;
  14
  15     var revisionAdded = false;
  16     var testFinished = false;
  17     var displayName = "";
  18
  19     function step1()
  20     {
  21         InspectorTest.addNewRule("foo, div#inspected, bar", step2);
  22     }
  23
  24     function step2()
  25     {
  26         var section = InspectorTest.firstMatchedStyleSection();
  27         var newProperty = section.addNewBlankProperty();
  28         newProperty.startEditing();
  29         textInputController.insertText("color");
  30         eventSender.keyDown(":");
  31         textInputController.insertText("maroon");
  32         InspectorTest.waitForStyleApplied(step3);
  33         eventSender.keyDown(";");
  34     }
  35
  36     function step3() {
  37         InspectorTest.selectNodeAndWaitForStyles("other", step4);
  38     }
  39
  40     function step4()
  41     {
  42         InspectorTest.addNewRule(null, onRuleAdded);
  43
  44         function onRuleAdded()
  45         {
  46             InspectorTest.selectNodeAndWaitForStyles("inspected", step5);
  47         }
  48     }
  49
  50     function step5()
  51     {
  52         InspectorTest.addResult("After adding new rule (inspected):");
  53         InspectorTest.dumpSelectedElementStyles(true, false, true, true);
  54         InspectorTest.selectNodeAndWaitForStyles("other", step6);
  55     }
  56
  57     function step6()
  58     {
  59         InspectorTest.addResult("After adding new rule (other):");
  60         InspectorTest.dumpSelectedElementStyles(true, false, true);
  61         testFinished = true;
  62         maybeCompleteTest();
  63     }
  64
  65     function maybeCompleteTest()
  66     {
  67         if (!testFinished || !revisionAdded)
  68             return;
  69         InspectorTest.addResult("Revision added: " + displayName);
  70         InspectorTest.completeTest();
  71     }
  72
  73     function onRevisionAdded(revision)
  74     {
  75         revisionAdded = true;
  76         displayName = this.displayName();
  77         maybeCompleteTest();
  78     }
  79 }
  80
  81 </script>
  82 </head>
  83
  84 <body onload="runTest()">
  85 <p>
  86 Tests that adding a new rule works after switching nodes.
  87 </p>
  88
  89 <div id="inspected" style="font-size: 12px">Text</div>
  90 <div id="other" style="color:red"></div>
  91
  92 </body>
  93 </html>