| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function test() { |
| var nodeStyles = null; |
| |
| function validateStyles() { |
| InspectorTest.log(""); |
| |
| InspectorTest.expectThat(!nodeStyles.inlineStyle, "No Inline Styles"); |
| InspectorTest.expectThat(!nodeStyles.attributesStyle, "No Attribute Styles"); |
| InspectorTest.expectThat(!nodeStyles.inheritedRules.length, "No Inherited Styles"); |
| InspectorTest.expectThat(!Object.keys(nodeStyles.pseudoElements).length, "No Pseudo Element Styles"); |
| |
| InspectorTest.expectThat(nodeStyles.computedStyle, "Has Computed Styles"); |
| |
| function logProperty(propertyName) { |
| const dontCreateIfMissing = true; |
| let property = nodeStyles.computedStyle.propertyForName(propertyName, dontCreateIfMissing); |
| InspectorTest.log(`PROPERTY: ${property.name}: ${property.value};`); |
| } |
| |
| logProperty("content"); |
| logProperty("color"); |
| |
| for (var rule of nodeStyles.matchedRules) { |
| InspectorTest.log("MATCHED RULE:"); |
| for (var i = 0; i < rule.selectors.length; ++i) { |
| var selector = rule.selectors[i]; |
| var matched = rule.matchedSelectorIndices.includes(i); |
| InspectorTest.log(" SELECTOR: " + selector.text + (matched ? " [matched]" : "")); |
| } |
| } |
| |
| InspectorTest.completeTest(); |
| } |
| |
| WI.domManager.requestDocument(function(documentNode) { |
| documentNode.querySelector("#x", function(contentNodeId) { |
| var domNode = WI.domManager.nodeForId(contentNodeId); |
| InspectorTest.assert(domNode); |
| var beforePseudoElementDOMNode = domNode.beforePseudoElement(); |
| InspectorTest.expectThat(beforePseudoElementDOMNode, "Got ::before pseudo element for #x"); |
| InspectorTest.log("Refreshing styles for ::before pseudo element"); |
| nodeStyles = WI.cssManager.stylesForNode(beforePseudoElementDOMNode); |
| nodeStyles.addEventListener(WI.DOMNodeStyles.Event.Refreshed, validateStyles); |
| nodeStyles.refresh(); |
| }); |
| }); |
| |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>Testing that we can get computed and matched rules for pseudo element nodes.</p> |
| |
| <style> |
| input:before, #x:before, div { content: "before"; color: blue; } |
| </style> |
| |
| <div id="x">TEST ELEMENT: Has Before Pseudo Element</div> |
| </body> |
| </html> |
