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
  24     InspectorTest.nodeWithId("div", foundDiv);
  25
  26     var divNode;
  27
  28     function dumpData()
  29     {
  30         InspectorTest.dumpSelectedElementStyles(true);
  31         InspectorTest.dumpElementsTree();
  32     }
  33
  34     function foundDiv(node)
  35     {
  36         divNode = node;
  37         WebInspector.panels.elements._setPseudoClassForNode(divNode, "hover", true);
  38         WebInspector.cssModel.forcePseudoState(divNode, "active", true);
  39         InspectorTest.selectNodeAndWaitForStyles("div", divSelected1);
  40     }
  41
  42     function divSelected1()
  43     {
  44         InspectorTest.addResult("");
  45         InspectorTest.addResult("DIV with :hover and :active");
  46         dumpData();
  47         InspectorTest.waitForStyles("div", hoverCallback, true);
  48         WebInspector.panels.elements._setPseudoClassForNode(divNode, "hover", false);
  49
  50         function hoverCallback()
  51         {
  52             InspectorTest.waitForStyles("div", divSelected2, true);
  53             WebInspector.panels.elements._setPseudoClassForNode(divNode, "focus", true);
  54         }
  55     }
  56
  57     function divSelected2()
  58     {
  59         InspectorTest.addResult("");
  60         InspectorTest.addResult("DIV with :active and :focus");
  61         dumpData();
  62         InspectorTest.waitForStyles("div", focusCallback, true);
  63         WebInspector.panels.elements._setPseudoClassForNode(divNode, "focus", false);
  64
  65         function focusCallback()
  66         {
  67             InspectorTest.waitForStyles("div", divSelected3, true);
  68             WebInspector.panels.elements._setPseudoClassForNode(divNode, "active", false);
  69         }
  70     }
  71
  72     function divSelected3(node)
  73     {
  74         InspectorTest.addResult("");
  75         InspectorTest.addResult("DIV with no forced state");
  76         dumpData();
  77         InspectorTest.completeTest();
  78     }
  79 }
  80 </script>
  81 </head>
  82 <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)">
  83 <p>
  84 Tests that forced element state is reflected in the DOM tree and Styles pane.
  85 </p>
  86 <div id="div">Test text</div>
  87 </body>
  88 </html>