blob: 1ca26d06a206ad7fb705ed5c1168f4515628ccbe [file] [log] [blame]
<!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) {
WI.domManager.querySelector(documentNode.id, "#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>