84 lines
3 KiB
HTML
84 lines
3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
Test that css-logic calculates CSS specificity properly
|
|
-->
|
|
<meta charset="utf-8">
|
|
<title>Test css-logic specificity</title>
|
|
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
|
<body style="background:blue;">
|
|
<script>
|
|
"use strict";
|
|
|
|
window.onload = function() {
|
|
const {require} = ChromeUtils.importESModule("resource://devtools/shared/loader/Loader.sys.mjs");
|
|
const {CssLogic, CssSelector} = require("devtools/server/actors/inspector/css-logic");
|
|
|
|
const TEST_DATA = [
|
|
{text: "*", expected: 0},
|
|
{text: "LI", expected: 1},
|
|
{text: "UL LI", expected: 2},
|
|
{text: "UL OL + LI", expected: 3},
|
|
{text: "H1 + [REL=\"up\"]", expected: 1025},
|
|
{text: "UL OL LI.red", expected: 1027},
|
|
{text: "LI.red.level", expected: 2049},
|
|
{text: ".red .level", expected: 2048},
|
|
{text: "#x34y", expected: 1048576},
|
|
{text: "#s12:not(FOO)", expected: 1048577},
|
|
{text: "body#home div#warning p.message", expected: 2098179},
|
|
{text: "* body#home div#warning p.message", expected: 2098179},
|
|
{text: "#footer :not(nav) li", expected: 1048578},
|
|
{text: "bar:nth-child(n)", expected: 1025},
|
|
{text: "li::marker", expected: 2},
|
|
{text: "a:hover", expected: 1025},
|
|
];
|
|
|
|
function createDocument() {
|
|
let text = TEST_DATA.map(i=>i.text).join(",");
|
|
text = '<style>' + text + " {color:red;}</style>";
|
|
document.body.innerHTML = text;
|
|
}
|
|
|
|
function getExpectedSpecificity(selectorText) {
|
|
return TEST_DATA.filter(i => i.text === selectorText)[0].expected;
|
|
}
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
createDocument();
|
|
const cssLogic = new CssLogic();
|
|
|
|
cssLogic.highlight(document.body);
|
|
|
|
// There could be more stylesheets due to e.g, accessiblecaret, so find the
|
|
// right one.
|
|
info(`Sheets: ${cssLogic.sheets.map(s => s.href).join(", ")}`);
|
|
|
|
const cssSheet = cssLogic.sheets.find(s => s.href == location.href);
|
|
const cssRule = cssSheet.domSheet.cssRules[0];
|
|
const selectors = CssLogic.getSelectors(cssRule);
|
|
|
|
is(selectors.length, TEST_DATA.length, "Should be the right rule");
|
|
|
|
info("Iterating over the test selectors: " + selectors.join(", "));
|
|
for (let i = 0; i < selectors.length; i++) {
|
|
const selectorText = selectors[i];
|
|
info("Testing selector " + selectorText);
|
|
|
|
const selector = new CssSelector(cssRule, selectorText, i);
|
|
const expected = getExpectedSpecificity(selectorText);
|
|
const specificity = selector.cssRule.selectorSpecificityAt(selector.selectorIndex);
|
|
is(specificity, expected,
|
|
'Selector "' + selectorText + '" has a specificity of ' + expected);
|
|
}
|
|
|
|
info("Testing specificity of element.style");
|
|
const colorProp = cssLogic.getPropertyInfo("background");
|
|
is(colorProp.matchedSelectors[0].specificity, 0x40000000,
|
|
"Element styles have specificity of 0x40000000 (1073741824).");
|
|
|
|
SimpleTest.finish();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|