third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-disable-property-after-selector-edit.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     InspectorTest.runTestSuite([
  10         function selectInitialNode(next)
  11         {
  12             InspectorTest.selectNodeAndWaitForStyles("inspected", next);
  13         },
  14
  15         function editSelector(next)
  16         {
  17             var section = InspectorTest.firstMatchedStyleSection();
  18             section.startEditingSelector();
  19             section._selectorElement.textContent = "#inspected, .INSERTED-OTHER-SELECTOR";
  20             InspectorTest.waitForSelectorCommitted(next);
  21             section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  22         },
  23
  24         function testDisableProperty(next)
  25         {
  26             var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("color");
  27             InspectorTest.waitForStyleApplied(onPropertyDisabled);
  28             treeItem._toggleEnabled({ target: { checked: false }, consume: function() { } });
  29
  30             function onPropertyDisabled()
  31             {
  32                 InspectorTest.addResult("\n\n#### AFTER PROPERTY DISABLED ####\n\n");
  33                 InspectorTest.dumpSelectedElementStyles(true, false, true);
  34                 next();
  35             }
  36         }
  37     ]);
  38 }
  39 </script>
  40 <style>
  41 #inspected {
  42     color: red;
  43 }
  44 </style>
  45 </head>
  46
  47 <body onload="runTest()">
  48 <p>
  49 Verifies that sequence of setting selector and disabling property works.
  50 </p>
  51
  52 <div id="inspected">Red text here.</div>
  53
  54 </body>
  55 </html>