Nicolas Chevobbe
19db3bf020
When setting a longhand property value using CSS variable, the property value we get for the shorthand from the rule CSSStyleDeclaration is an empty string. In such case, we don't want to filter out the property if the "Browser styles" checkbox is not checked. In order to fix this, we check for the presence of the property in the CSSStyleDeclaration using the chrome-only `hasLonghandProperty` method that is added in the previous commit of this stack. We also change a similar check to make sure we include the matched selector, even if we can't display a meaningful value to the user (see Bug 2003264). Because of these changes, browser_computed_custom_properties.js needed to be updated. We change the `border` we were using to `outline` because it gives us less longhand properties to check. Differential Revision: https://phabricator.services.mozilla.com/D274586
85 lines
3.0 KiB
HTML
85 lines
3.0 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-color");
|
|
is(colorProp.matchedSelectors[0].specificity, 0x40000000,
|
|
"Element styles have specificity of 0x40000000 (1073741824).");
|
|
|
|
SimpleTest.finish();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|