third_party/WebKit/LayoutTests/inspector/elements/styles-3/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/styles-test.js"></script>
   6 <link rel="stylesheet" href="../styles/resources/different-rule-types.css">
   7 <script>
   8
   9 function test()
  10 {
  11     InspectorTest.selectNodeAndWaitForStyles("inspect", fetchStyleSheet);
  12
  13     function fetchStyleSheet()
  14     {
  15         var styleSheets = InspectorTest.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             return;
  22         }
  23     }
  24
  25     function onRuleAdded()
  26     {
  27         InspectorTest.selectNodeAndWaitForStyles("other", onNodeSelected);
  28     }
  29
  30     function onNodeSelected()
  31     {
  32         InspectorTest.dumpSelectedElementStyles(true, false, true);
  33         InspectorTest.completeTest();
  34     }
  35 }
  36
  37 </script>
  38 </head>
  39
  40 <body onload="runTest()">
  41 <p>
  42 Tests that adding new rule in the stylesheet end works as expected.
  43 </p>
  44
  45 <div class="inspected">Styled element</div>
  46 <div id="inspect"></div>
  47 <div id="other"></div>
  48
  49 </body>
  50 </html>