| <html> |
| <head> |
| <style> |
| div:hover, a:hover { |
| color: red; |
| } |
| |
| div:focus, a:focus { |
| border: 1px solid green; |
| } |
| |
| div:active, a:active { |
| font-weight: bold; |
| } |
| |
| </style> |
| <script src="../../http/tests/inspector/inspector-test.js"></script> |
| <script src="../../http/tests/inspector/elements-test.js"></script> |
| <script> |
| |
| function test() |
| { |
| WebInspector.showPanel("elements"); |
| |
| InspectorTest.nodeWithId("div", foundDiv); |
| |
| var divNodeId; |
| |
| function dumpData() |
| { |
| InspectorTest.dumpSelectedElementStyles(true); |
| InspectorTest.dumpElementsTree(); |
| } |
| |
| function foundDiv(divNode) |
| { |
| divNodeId = divNode.id; |
| WebInspector.panels.elements._setPseudoClassForNodeId(divNodeId, "hover", true); |
| WebInspector.panels.elements._setPseudoClassForNodeId(divNodeId, "active", true); |
| InspectorTest.selectNodeAndWaitForStyles("div", divSelected1); |
| } |
| |
| function divSelected1() |
| { |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("DIV with :hover and :active"); |
| dumpData(); |
| InspectorTest.waitForStyles("div", hoverCallback, true); |
| WebInspector.panels.elements._setPseudoClassForNodeId(divNodeId, "hover", false); |
| |
| function hoverCallback() |
| { |
| InspectorTest.waitForStyles("div", divSelected2, true); |
| WebInspector.panels.elements._setPseudoClassForNodeId(divNodeId, "focus", true); |
| } |
| } |
| |
| function divSelected2() |
| { |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("DIV with :active and :focus"); |
| dumpData(); |
| InspectorTest.waitForStyles("div", focusCallback, true); |
| WebInspector.panels.elements._setPseudoClassForNodeId(divNodeId, "focus", false); |
| |
| function focusCallback() |
| { |
| InspectorTest.waitForStyles("div", divSelected3, true); |
| WebInspector.panels.elements._setPseudoClassForNodeId(divNodeId, "active", false); |
| } |
| } |
| |
| function divSelected3(node) |
| { |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("DIV with no forced state"); |
| dumpData(); |
| InspectorTest.completeTest(); |
| } |
| } |
| </script> |
| </head> |
| <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)"> |
| <p> |
| Tests that forced element state is reflected in the DOM tree and Styles pane. |
| </p> |
| <div id="div">Test text</div> |
| </body> |
| </html> |
