66 lines
2.5 KiB
HTML
66 lines
2.5 KiB
HTML
<!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>
|