src/third_party/WebKit/LayoutTests/inspector/elements/styles/force-pseudo-state.html

   1 <html>
   2 <head>
   3 <style>
   4 div:hover, a:hover {
   5     color: red;
   6 }
   7
   8 div:focus, a:focus {
   9     border: 1px solid green;
  10 }
  11
  12 div:active, a:active {
  13     font-weight: bold;
  14 }
  15
  16 </style>
  17 <script src="../../../http/tests/inspector/inspector-test.js"></script>
  18 <script src="../../../http/tests/inspector/elements-test.js"></script>
  19 <script>
  20
  21 function test()
  22 {
  23     WebInspector.inspectorView.showPanel("elements");
  24
  25     InspectorTest.nodeWithId("div", foundDiv);
  26
  27     var divNode;
  28
  29     function dumpData()
  30     {
  31         InspectorTest.dumpSelectedElementStyles(true);
  32         InspectorTest.dumpElementsTree();
  33     }
  34
  35     function foundDiv(node)
  36     {
  37         divNode = node;
  38         WebInspector.panels.elements._setPseudoClassForNode(divNode, "hover", true);
  39         WebInspector.cssModel.forcePseudoState(divNode, "active", true);
  40         InspectorTest.selectNodeAndWaitForStyles("div", divSelected1);
  41     }
  42
  43     function divSelected1()
  44     {
  45         InspectorTest.addResult("");
  46         InspectorTest.addResult("DIV with :hover and :active");
  47         dumpData();
  48         InspectorTest.waitForStyles("div", hoverCallback, true);
  49         WebInspector.panels.elements._setPseudoClassForNode(divNode, "hover", false);
  50
  51         function hoverCallback()
  52         {
  53             InspectorTest.waitForStyles("div", divSelected2, true);
  54             WebInspector.panels.elements._setPseudoClassForNode(divNode, "focus", true);
  55         }
  56     }
  57
  58     function divSelected2()
  59     {
  60         InspectorTest.addResult("");
  61         InspectorTest.addResult("DIV with :active and :focus");
  62         dumpData();
  63         InspectorTest.waitForStyles("div", focusCallback, true);
  64         WebInspector.panels.elements._setPseudoClassForNode(divNode, "focus", false);
  65
  66         function focusCallback()
  67         {
  68             InspectorTest.waitForStyles("div", divSelected3, true);
  69             WebInspector.panels.elements._setPseudoClassForNode(divNode, "active", false);
  70         }
  71     }
  72
  73     function divSelected3(node)
  74     {
  75         InspectorTest.addResult("");
  76         InspectorTest.addResult("DIV with no forced state");
  77         dumpData();
  78         InspectorTest.completeTest();
  79     }
  80 }
  81 </script>
  82 </head>
  83 <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)">
  84 <p>
  85 Tests that forced element state is reflected in the DOM tree and Styles pane.
  86 </p>
  87 <div id="div">Test text</div>
  88 </body>
  89 </html>