mirror of
https://github.com/classilla/tenfourfox.git
synced 2025-01-23 18:32:20 +00:00
85 lines
2.9 KiB
HTML
85 lines
2.9 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
Test that css-logic calculates CSS specificity properly
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test css-logic specificity</title>
|
|
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
|
</head>
|
|
<body style="background:blue;">
|
|
<script type="application/javascript;version=1.8">
|
|
|
|
window.onload = function() {
|
|
var {utils: Cu, classes: Cc, interfaces: Ci} = Components;
|
|
|
|
const {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
|
|
const {CssLogic, CssSelector} = require("devtools/shared/styleinspector/css-logic");
|
|
const DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"]
|
|
.getService(Ci.inIDOMUtils);
|
|
|
|
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: 257},
|
|
{text: "UL OL LI.red", expected: 259},
|
|
{text: "LI.red.level", expected: 513},
|
|
{text: ".red .level", expected: 512},
|
|
{text: "#x34y", expected: 65536},
|
|
{text: "#s12:not(FOO)", expected: 65537},
|
|
{text: "body#home div#warning p.message", expected: 131331},
|
|
{text: "* body#home div#warning p.message", expected: 131331},
|
|
{text: "#footer :not(nav) li", expected: 65538},
|
|
{text: "bar:nth-child(n)", expected: 257},
|
|
{text: "li::-moz-list-number", expected: 1},
|
|
{text: "a:hover", expected: 257}
|
|
];
|
|
|
|
function createDocument() {
|
|
let text = TEST_DATA.map(i=>i.text).join(",");
|
|
text = '<style type="text/css">' + text + " {color:red;}</style>";
|
|
document.body.innerHTML = text;
|
|
}
|
|
|
|
function getExpectedSpecificity(selectorText) {
|
|
return TEST_DATA.filter(i => i.text === selectorText)[0].expected;
|
|
}
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
createDocument();
|
|
let cssLogic = new CssLogic();
|
|
|
|
cssLogic.highlight(document.body);
|
|
let cssSheet = cssLogic.sheets[0];
|
|
let cssRule = cssSheet.domSheet.cssRules[0];
|
|
let selectors = CssLogic.getSelectors(cssRule);
|
|
|
|
info("Iterating over the test selectors")
|
|
for (let i = 0; i < selectors.length; i++) {
|
|
let selectorText = selectors[i];
|
|
info("Testing selector " + selectorText);
|
|
|
|
let selector = new CssSelector(cssRule, selectorText, i);
|
|
let expected = getExpectedSpecificity(selectorText);
|
|
let specificity = DOMUtils.getSpecificity(selector.cssRule,
|
|
selector.selectorIndex)
|
|
is(specificity, expected,
|
|
'Selector "' + selectorText + '" has a specificity of ' + expected);
|
|
}
|
|
|
|
info("Testing specificity of element.style");
|
|
let colorProp = cssLogic.getPropertyInfo("background");
|
|
is(colorProp.matchedSelectors[0].specificity, 0x01000000,
|
|
"Element styles have specificity of 0x01000000 (16777216).");
|
|
|
|
SimpleTest.finish();
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|