blob: 317a37bafc1e70e657336a2be4a8e7076787be78 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
:is(div, article), /* dynamic, but statically always the same */
:is(div, .foo, #bar, div#bar), /* dynamic, changing based on matched element */
:matches(div, article), /* dynamic, but statically always the same */
:matches(div, .foo, #bar, div#bar), /* dynamic, changing based on matched element */
div:nth-child(odd), /* static, no selector list */
:nth-child(odd of div), /* dynamic, but statically always the same */
:nth-child(odd of div, .foo, #bar, div#bar), /* dynamic, changing based on matched element */
:nth-child(even of div, .foo, #bar, div#bar), /* dynamic, changing based on matched element */
:not(span, #missing), /* static, maximum in list */
:not(:not(:is(div, .foo, #bar, div#bar))), /* static, is() inside not() is maximized */
:not(:not(:matches(div, .foo, #bar, div#bar))), /* static, matches() inside not() is maximized */
* /* ignored */
{
color: green;
}
</style>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test() {
var nodeStyles;
var documentNode;
var currentSelector = null;
var currentStepIndex = 0;
var steps = ["p", "div", ".foo", "#bar"];
function validateSelectors()
{
InspectorTest.log("");
var seenRules = [];
for (var i = 0; i < nodeStyles.matchedRules.length; ++i) {
var rule = nodeStyles.matchedRules[i];
if (rule.type !== WI.CSSStyleSheet.Type.Author)
continue;
if (seenRules.some(function(r) { return r.isEqualTo(rule); }))
continue;
seenRules.push(rule);
for (var selector of rule.selectors) {
if (selector.text === "*")
continue;
var output = currentSelector + " - " + selector.text;
output += selector.specificity ? " (" + selector.specificity.join(", ") + ")" : " (no value)";
if (selector.dynamic)
output += " (dynamic)";
InspectorTest.log(output);
}
}
runNextStep();
}
function onStylesRefreshed()
{
nodeStyles.removeEventListener(WI.DOMNodeStyles.Event.Refreshed, onStylesRefreshed, this);
validateSelectors();
}
function runNextStep()
{
if (currentStepIndex >= steps.length) {
InspectorTest.completeTest();
return;
}
currentSelector = steps[currentStepIndex++];
documentNode.querySelector(currentSelector, function(contentNodeId) {
if (contentNodeId) {
var domNode = WI.domManager.nodeForId(contentNodeId);
nodeStyles = WI.cssManager.stylesForNode(domNode);
if (nodeStyles.needsRefresh)
nodeStyles.addEventListener(WI.DOMNodeStyles.Event.Refreshed, onStylesRefreshed, this);
else
validateSelectors();
} else {
InspectorTest.log("DOM node not found.");
InspectorTest.completeTest();
}
});
}
WI.domManager.requestDocument(function(node) {
documentNode = node;
runNextStep();
});
}
</script>
</head>
<body onload="runTest()">
<p>Testing that dynamic selectors have expected specificity values depending on the context node.</p>
<div></div>
<div class="foo"></div>
<div id="bar"></div>
</body>
</html>