Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: layout/inspector/tests/mochitest.toml
<!DOCTYPE HTML>
<html>
<!--
-->
<head>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style id="pseudo-style">
#div1 {
color: blue;
}
#div1:first-letter {
font-weight: bold;
}
#div1:before {
content: '"';
}
#div1:after {
content: '"';
}
#div1:after, #div1:before {
color: red;
}
::selection {
background: pink;
}
::highlight(search) {
background: yellow;
}
::highlight(whatever) {
background: tomato;
}
</style>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=557726">Mozilla Bug 557726</a>
<div id="div1">
text with ::before, ::after, and ::first-letter pseudo-elements
</div>
<script type="application/javascript">
const InspectorUtils = SpecialPowers.InspectorUtils;
function getSelectors (rules) {
var styleElement = document.getElementById("pseudo-style");
var selectors = [];
for (var i = 0; i < rules.length; i++) {
var rule = rules[i];
if (SpecialPowers.unwrap(rule.parentStyleSheet.ownerNode) == styleElement) // no user agent rules
selectors.push(rule.selectorText);
}
return selectors;
}
var div = document.getElementById("div1");
/* empty or missing pseudo-element argument */
var selectors = getSelectors(InspectorUtils.getMatchingCSSRules(div));
is(selectors.length, 1, "psuedo-element argument should be optional");
is(selectors[0], "#div1", "should only have the non-pseudo element rule");
selectors = getSelectors(InspectorUtils.getMatchingCSSRules(div, ""));
is(selectors.length, 1, "pseudo-element argument can be empty string");
is(selectors[0], "#div1", "should only have the non pseudo-element rule");
/* invalid pseudo-element argument */
var rules = InspectorUtils.getMatchingCSSRules(div, "not a valid pseudo element");
is(rules.length, 0, "invalid pseudo-element returns no rules");
/* valid pseudo-element argument */
selectors = getSelectors(InspectorUtils.getMatchingCSSRules(div, ":first-letter"));
is(selectors.length, 1, "pseudo-element argument can be used");
is(selectors[0], "#div1::first-letter", "should only have the ::first-letter rule");
selectors = getSelectors(InspectorUtils.getMatchingCSSRules(div, ":before"));
is(selectors.length, 2, "::before pseudo-element has two matching rules");
isnot(selectors.indexOf("#div1::after, #div1::before"), -1, "fetched rule for ::before")
isnot(selectors.indexOf("#div1::before"), -1, "fetched rule for ::before")
selectors = getSelectors(InspectorUtils.getMatchingCSSRules(div, ":first-line"));
is(selectors.length, 0, "valid pseudo-element but no matching rules");
selectors = getSelectors(InspectorUtils.getMatchingCSSRules(div, "::selection"));
is(selectors.length, 1, "::selection pseudo-element has a matching rule");
is(selectors[0], "::selection", "fetched rule for ::selection");
const range = new Range();
range.setStart(div.firstChild, 10);
range.setEnd(div.firstChild, 20);
const highlight = new Highlight(range);
CSS.highlights.set("search", highlight);
selectors = getSelectors(InspectorUtils.getMatchingCSSRules(div, "::highlight(search)"));
is(selectors.length, 1, "::highlight(search) pseudo-element has a matching rule");
is(selectors[0], "::highlight(search)", "fetched ::highlight(search) rule");
selectors = getSelectors(InspectorUtils.getMatchingCSSRules(div, "::highlight(whatever)"));
is(selectors.length, 1, "::highlight(whatever) pseudo-element has a matching rule");
is(selectors[0], "::highlight(whatever)", "fetched ::highlight(whatever) rule");
</script>
</pre>
</body>
</html>