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