Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Tests that we correctly display @appearance-base rules in the rule view.
const TEST_URI = `data:text/html,<meta charset=utf8>${encodeURIComponent(`
<input id="regular" type="file" />
<input id="base" type="file" style="appearance: base;" />
`)}`;
add_task(async function () {
// @appearance-base rule are only valid in UA stylesheets
await pushPref("layout.css.appearance-base.enabled", true);
await pushPref("devtools.inspector.showUserAgentStyles", true);
await addTab(TEST_URI);
const { inspector, view } = await openRuleView();
await selectNode("#base", inspector);
// for some reason, those might not be rendered directly and we need to wait a bit
const appearanceBaseEls = await waitFor(() => {
const res = getAppearanceBaseAncestorElements(view);
return res.length ? res : false;
});
// Since those are added in a UA stylesheet, it would make the test brittle to check
// for specific rules, so we only check that we have "some".
Assert.greaterOrEqual(
appearanceBaseEls.length,
2,
"Got @appearance-base rules for appearance: base input"
);
Assert.greaterOrEqual(
appearanceBaseEls.filter(el => !!el.closest("#element-container")).length,
1,
"Got at least one @appearance-base rule applying directly on the input"
);
Assert.greaterOrEqual(
appearanceBaseEls.filter(el => !!el.closest("#pseudo-elements-container"))
.length,
1,
"Got at least one @appearance-base rule applying on the ::file-selector-button pseudo element"
);
await selectNode("#regular", inspector);
is(
getAppearanceBaseAncestorElements(view).length,
0,
"No @appearance-base rules are visible for regular inputs"
);
});
function getAppearanceBaseAncestorElements(view) {
return Array.from(
view.element.querySelectorAll(".ruleview-rule-ancestor-data")
).filter(el => el.innerText.includes("@appearance-base {"));
}