third_party/WebKit/LayoutTests/inspector/elements/styles-1/commit-selector-mark-matching.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     var nodeId;
  10     var stylesPane;
  11
  12     InspectorTest.runTestSuite([
  13         function setUp(next) {
  14             InspectorTest.selectNodeAndWaitForStyles("inspected", next);
  15         },
  16
  17         function addRule(next)
  18         {
  19             InspectorTest.nodeWithId("inspected", nodeCallback);
  20
  21             function nodeCallback(node)
  22             {
  23                 nodeId = node.id;
  24                 stylesPane = WebInspector.panels.elements.sidebarPanes.styles;
  25                 InspectorTest.addNewRule("foo, #inspected, .bar, #inspected", callback);
  26             }
  27
  28             function callback()
  29             {
  30                 InspectorTest.dumpSelectedElementStyles(true, false, false, true);
  31                 next();
  32             }
  33         },
  34
  35         function changeSelector(next)
  36         {
  37             var section = InspectorTest.firstMatchedStyleSection();
  38             section.startEditingSelector();
  39             var selectorElement = section._selectorElement;
  40             selectorElement.textContent = "#inspected, a, hr";
  41             InspectorTest.waitForSelectorCommitted(callback);
  42             selectorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  43
  44             function callback()
  45             {
  46                 InspectorTest.dumpSelectedElementStyles(true, false, false, true);
  47                 next();
  48             }
  49         }
  50     ]);
  51 }
  52
  53 </script>
  54 </head>
  55
  56 <body onload="runTest()">
  57 <p>
  58 Tests that matching selectors are marked properly after new rule creation and selector change.
  59 </p>
  60
  61 <div id="inspected"></div>
  62
  63 </body>
  64 </html>