const gSelects = {
PAGECONTENT_COLORS:
"" +
"",
PAGECONTENT_COLORS_ON_SELECT:
"" +
"",
TRANSPARENT_SELECT:
"" +
"",
OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT:
"" +
"",
GENERIC_OPTION_STYLED_AS_IMPORTANT:
"" +
"",
TRANSLUCENT_SELECT_BECOMES_OPAQUE:
"" +
"",
TRANSLUCENT_SELECT_APPLIES_ON_BASE_COLOR:
"" +
"",
DISABLED_OPTGROUP_AND_OPTIONS:
"" +
"",
SELECT_CHANGES_COLOR_ON_FOCUS:
"" +
"",
SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS:
"" +
"",
SELECT_STYLE_OF_OPTION_IS_BASED_ON_FOCUS_OF_SELECT:
"" +
"",
SELECT_STYLE_OF_OPTION_CHANGES_AFTER_FOCUS_EVENT:
"" +
" var select = document.getElementById('one');" +
" select.addEventListener('focus', () => select.style.color = 'red');" +
"",
SELECT_COLOR_OF_OPTION_CHANGES_AFTER_TRANSITIONEND:
"",
SELECT_TEXTSHADOW_OF_OPTION_CHANGES_AFTER_TRANSITIONEND:
"",
SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW:
"",
SELECT_LONG_WITH_TRANSITION:
"";
return rv;
})(),
SELECT_INHERITED_COLORS_ON_OPTIONS_DONT_GET_UNIQUE_RULES_IF_RULE_SET_ON_SELECT: `
`,
SELECT_FONT_INHERITS_TO_OPTION: `
`,
SELECT_SCROLLBAR_PROPS: `
`,
DEFAULT_DARKMODE: `
`,
DEFAULT_DARKMODE_DARK: `
`,
SPLIT_FG_BG_OPTION_DARKMODE: `
`,
IDENTICAL_BG_DIFF_FG_OPTION_DARKMODE: `
`,
};
function rgbaToString(parsedColor) {
let { r, g, b, a } = parsedColor;
if (a == 1) {
return `rgb(${r}, ${g}, ${b})`;
}
return `rgba(${r}, ${g}, ${b}, ${a})`;
}
function testOptionColors(test, index, item, menulist) {
// The label contains a JSON string of the expected colors for
// `color` and `background-color`.
let expected = JSON.parse(item.label);
// Press Down to move the selected item to the next item in the
// list and check the colors of this item when it's not selected.
EventUtils.synthesizeKey("KEY_ArrowDown");
if (expected.end) {
return;
}
if (expected.unstyled) {
ok(
!item.hasAttribute("customoptionstyling"),
`${test}: Item ${index} should not have any custom option styling: ${item.outerHTML}`
);
} else {
is(
getComputedStyle(item).color,
expected.color,
`${test}: Item ${index} has correct foreground color`
);
is(
getComputedStyle(item).backgroundColor,
expected.backgroundColor,
`${test}: Item ${index} has correct background color`
);
if (expected.textShadow) {
is(
getComputedStyle(item).textShadow,
expected.textShadow,
`${test}: Item ${index} has correct text-shadow color`
);
}
}
}
function computeLabels(tab) {
return SpecialPowers.spawn(tab.linkedBrowser, [], function () {
function _rgbaToString(parsedColor) {
let { r, g, b, a } = parsedColor;
if (a == 1) {
return `rgb(${r}, ${g}, ${b})`;
}
return `rgba(${r}, ${g}, ${b}, ${a})`;
}
function computeColors(expected) {
let any = false;
for (let color of Object.keys(expected)) {
if (
color != "colorScheme" &&
color.toLowerCase().includes("color") &&
!expected[color].startsWith("rgb")
) {
any = true;
expected[color] = _rgbaToString(
InspectorUtils.colorToRGBA(expected[color], content.document)
);
}
}
return any;
}
for (let option of content.document.querySelectorAll("option,optgroup")) {
if (!option.label) {
continue;
}
let expected;
try {
expected = JSON.parse(option.label);
} catch (ex) {
continue;
}
if (computeColors(expected)) {
option.label = JSON.stringify(expected);
}
}
});
}
async function openSelectPopup(select) {
const pageUrl = "data:text/html," + escape(select);
let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, pageUrl);
await computeLabels(tab);
let popupShownPromise = BrowserTestUtils.waitForSelectPopupShown(window);
await BrowserTestUtils.synthesizeMouseAtCenter(
"#one",
{ type: "mousedown" },
gBrowser.selectedBrowser
);
let selectPopup = await popupShownPromise;
let menulist = selectPopup.parentNode;
return { tab, menulist, selectPopup };
}
async function testSelectColors(selectID, itemCount, options) {
let select = gSelects[selectID];
let { tab, menulist, selectPopup } = await openSelectPopup(select);
if (options.unstyled) {
ok(
!selectPopup.hasAttribute("customoptionstyling"),
`Shouldn't have custom option styling for ${selectID}`
);
}
let arrowSB = selectPopup.shadowRoot.querySelector(
".menupopup-arrowscrollbox"
);
if (options.waitForComputedStyle) {
let property = options.waitForComputedStyle.property;
let expectedValue = options.waitForComputedStyle.value;
await TestUtils.waitForCondition(() => {
let node = ["background-image", "background-color"].includes(property)
? arrowSB
: selectPopup;
let value = getComputedStyle(node).getPropertyValue(property);
info(`<${node.localName}> has ${property}: ${value}`);
return value == expectedValue;
}, `${selectID} - Waiting for