| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function test() { |
| let testElement = null; |
| let nodeStyles = null; |
| |
| let suite = InspectorTest.createAsyncSuite("CSS.forcePseudoState"); |
| |
| [ |
| {forceablePseudoClass: WI.CSSManager.ForceablePseudoClass.Active, expectedBackgroundColor: "rgb(0, 0, 10)"}, |
| {forceablePseudoClass: WI.CSSManager.ForceablePseudoClass.Focus, expectedBackgroundColor: "rgb(0, 0, 20)"}, |
| {forceablePseudoClass: WI.CSSManager.ForceablePseudoClass.FocusVisible, expectedBackgroundColor: "rgb(0, 0, 30)"}, |
| {forceablePseudoClass: WI.CSSManager.ForceablePseudoClass.FocusWithin, expectedBackgroundColor: "rgb(0, 0, 40)"}, |
| {forceablePseudoClass: WI.CSSManager.ForceablePseudoClass.Hover, expectedBackgroundColor: "rgb(0, 0, 50)"}, |
| {forceablePseudoClass: WI.CSSManager.ForceablePseudoClass.Target, expectedBackgroundColor: "rgb(0, 0, 60)"}, |
| {forceablePseudoClass: WI.CSSManager.ForceablePseudoClass.Visited, expectedBackgroundColor: "rgb(0, 0, 70)"}, |
| ].forEach(({forceablePseudoClass, expectedBackgroundColor}) => { |
| suite.addTestCase({ |
| name: "CSS.forcePseudoState." + forceablePseudoClass, |
| async test() { |
| await nodeStyles.refreshIfNeeded(); |
| |
| InspectorTest.assert(Object.shallowEqual(testElement.enabledPseudoClasses, []), "Should not have any enabled pseudo classes."); |
| InspectorTest.assert(nodeStyles.computedStyle.propertyForName("background-color").value === "rgb(0, 0, 0)", "Should have expected initial style."); |
| |
| InspectorTest.log("Forcing pseudo class..."); |
| await Promise.all([ |
| testElement.awaitEvent(WI.DOMNode.Event.EnabledPseudoClassesChanged), |
| testElement.setPseudoClassEnabled(forceablePseudoClass, true), |
| ]); |
| await nodeStyles.refreshIfNeeded(); |
| InspectorTest.expectShallowEqual(testElement.enabledPseudoClasses, [forceablePseudoClass], "Should have one enabled pseudo class."); |
| InspectorTest.expectEqual(nodeStyles.computedStyle.propertyForName("background-color").value, expectedBackgroundColor, "Should change styles."); |
| |
| InspectorTest.log("Removing forced pseudo class..."); |
| await Promise.all([ |
| testElement.awaitEvent(WI.DOMNode.Event.EnabledPseudoClassesChanged), |
| testElement.setPseudoClassEnabled(forceablePseudoClass, false), |
| ]); |
| await nodeStyles.refreshIfNeeded(); |
| InspectorTest.expectShallowEqual(testElement.enabledPseudoClasses, [], "Should not have any enabled pseudo classes."); |
| InspectorTest.expectEqual(nodeStyles.computedStyle.propertyForName("background-color").value, "rgb(0, 0, 0)", "Should change back to initial style."); |
| }, |
| }); |
| }); |
| |
| WI.domManager.requestDocument((documentNode) => { |
| documentNode.querySelector("#test-element", (contentNodeId) => { |
| if (contentNodeId) { |
| testElement = WI.domManager.nodeForId(contentNodeId); |
| nodeStyles = WI.cssManager.stylesForNode(testElement); |
| suite.runTestCasesAndFinish(); |
| } else { |
| InspectorTest.fail("DOM node not found."); |
| InspectorTest.completeTest(); |
| } |
| }); |
| }); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>Testing CSS.forcePseudoState.</p> |
| |
| <style> |
| #test-element { |
| background-color: rgb(0, 0, 0); |
| } |
| #test-element:active { |
| background-color: rgb(0, 0, 10); |
| } |
| #test-element:focus { |
| background-color: rgb(0, 0, 20); |
| } |
| #test-element:focus-visible { |
| background-color: rgb(0, 0, 30); |
| } |
| #test-element:focus-within { |
| background-color: rgb(0, 0, 40); |
| } |
| #test-element:hover { |
| background-color: rgb(0, 0, 50); |
| } |
| #test-element:target { |
| background-color: rgb(0, 0, 60); |
| } |
| #test-element:visited { |
| background-color: rgb(0, 0, 70); |
| } |
| </style> |
| <a href="#" id="test-element"></a> |
| </body> |
| </html> |
