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