Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: layout/inspector/tests/mochitest.toml
<!DOCTYPE html>
<title>Test getCSSStyleRules for pseudo elements</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
<style>
#block:before {
display: block;
content: ":before";
}
#block:after {
display: block;
content: ":after";
}
#table:before {
display: table;
content: ":before";
}
#table:after {
display: table;
content: ":after";
}
#flex:before {
display: flex;
content: ":before";
}
#flex:after {
display: flex;
content: ":after";
}
#grid:before {
display: grid;
content: ":before";
}
#grid:after {
display: grid;
content: ":after";
}
</style>
<div id="block">block pseudos</div>
<div id="table">table pseudos</div>
<div id="flex">flex pseudos</div>
<div id="grid">grid pseudos</div>
<script>
const InspectorUtils = SpecialPowers.InspectorUtils;
function checkPseudoStyleForId(id) {
let element = document.getElementById(id);
let beforeRules = InspectorUtils.getCSSStyleRules(element, ":before");
is (beforeRules.length, 1, "Element " + id + ":before has expected number of rules.");
let beforeDecl = beforeRules[0].style;
is (beforeDecl.content, '":before"', "Element " + id + ":before has expected style content.");
let afterRules = InspectorUtils.getCSSStyleRules(element, ":after");
is (afterRules.length, 1, "Element " + id + ":after has expected number of rules.");
let afterDecl = afterRules[0].style;
is (afterDecl.content, '":after"', "Element " + id + ":after has expected style content.");
}
let idsToCheck = [
"block",
"table",
"flex",
"grid",
];
for (let id of idsToCheck) {
checkPseudoStyleForId(id);
}
</script>