src/third_party/WebKit/LayoutTests/inspector/elements/styles/undo-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     WebInspector.showPanel("elements");
  10     InspectorTest.selectNodeAndWaitForStyles("inspected", step1);
  11
  12     var treeElement;
  13
  14     function step1()
  15     {
  16         addNewRuleAndSelectNode("other", step2);
  17     }
  18
  19     function step2()
  20     {
  21         addNewRuleAndSelectNode("inspected", step3);
  22     }
  23
  24     function step3()
  25     {
  26         InspectorTest.addResult("After adding new rule:");
  27         InspectorTest.dumpSelectedElementStyles(true, false, true);
  28         printStyleSheetAndCall(step4);
  29     }
  30
  31     function step4()
  32     {
  33         WebInspector.domAgent.undo();
  34         InspectorTest.selectNodeAndWaitForStyles("other", step5);
  35     }
  36
  37     function step5()
  38     {
  39         InspectorTest.addResult("After undo:");
  40         InspectorTest.dumpSelectedElementStyles(true, false, true);
  41         printStyleSheetAndCall(step6);
  42     }
  43
  44     function step6()
  45     {
  46         WebInspector.domAgent.redo();
  47         InspectorTest.selectNodeAndWaitForStyles("inspected", step7);
  48     }
  49
  50     function step7()
  51     {
  52         InspectorTest.addResult("After redo:");
  53         InspectorTest.dumpSelectedElementStyles(true, false, true);
  54         printStyleSheetAndCall(step8);
  55     }
  56
  57     function step8()
  58     {
  59         InspectorTest.completeTest();
  60     }
  61
  62     function addNewRuleAndSelectNode(nodeId, next)
  63     {
  64         // Click "Add new rule".
  65         document.getElementById("add-style-button-test-id").click();
  66         var section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][2];
  67         section._selectorElement.textContent = "div.foo";
  68         section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  69         InspectorTest.selectNodeAndWaitForStyles(nodeId, next);
  70     }
  71
  72     function printStyleSheetAndCall(next)
  73     {
  74         var section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][2];
  75         var id = section.styleRule.style.id.styleSheetId;
  76         CSSAgent.getStyleSheetText(id, callback);
  77         function callback(result, styleSheetText)
  78         {
  79             InspectorTest.addResult("===== Style sheet text: =====");
  80             InspectorTest.addResult(styleSheetText);
  81             InspectorTest.addResult("=============================");
  82             next();
  83         }
  84     }
  85 }
  86
  87 </script>
  88 </head>
  89
  90 <body onload="runTest()">
  91 <p>
  92 Tests that adding a new rule can be undone.
  93 </p>
  94
  95 <div class="foo" id="inspected" style="font-size: 12px">Text</div>
  96 <div class="foo" id="other" style="color:red"></div>
  97
  98 </body>
  99 </html>