src/third_party/WebKit/LayoutTests/inspector/elements/styles/styles-add-new-rule-to-stylesheet.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 src="styles-test.js"></script>
   6 <link rel="stylesheet" href="resources/different-rule-types.css">
   7 <script>
   8
   9 function test()
  10 {
  11     InspectorTest.waitForStylesheetsOnFrontend(2, onStyleSheetsLoaded);
  12
  13     function onStyleSheetsLoaded()
  14     {
  15         var styleSheets = WebInspector.cssModel.allStyleSheets();
  16         for (var i = 0; i < styleSheets.length; ++i) {
  17             var styleSheetHeader = styleSheets[i];
  18             if (styleSheetHeader.sourceURL.indexOf("different-rule-types.css") === -1)
  19                 continue;
  20             InspectorTest.addNewRuleInStyleSheet(styleSheetHeader, "#other, div", onRuleAdded);
  21         }
  22     }
  23
  24     function onRuleAdded()
  25     {
  26         InspectorTest.selectNodeAndWaitForStyles("other", onNodeSelected);
  27     }
  28
  29     function onNodeSelected()
  30     {
  31         InspectorTest.dumpSelectedElementStyles(true, false, true);
  32         InspectorTest.completeTest();
  33     }
  34 }
  35
  36 </script>
  37 </head>
  38
  39 <body onload="runTest()">
  40 <p>
  41 Tests that adding new rule in the stylesheet end works as expected.
  42 </p>
  43
  44 <div class="inspected">Styled element</div>
  45 <div id="other"></div>
  46
  47 </body>
  48 </html>