mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1693406 - fix select dropdown styling in proton when the page customizes it, r=emilio 

Differential Revision: https://phabricator.services.mozilla.com/D105642
This commit is contained in:
Gijs Kruitbosch 2021-02-18 16:33:20 +00:00
Родитель a794acaa37
Коммит 21285db89d
4 изменённых файлов: 241 добавлений и 198 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

4
browser/base/content/browser.css
Просмотреть файл

@ -1035,6 +1035,10 @@ toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > .toolbarbut
scrollbar-width: var(--content-select-scrollbar-width, auto);
}
#ContentSelectDropdown > menupopup::part(arrowscrollbox) {
background-image: var(--content-select-background-image, none);
}
/* Indent options in optgroups */
.contentSelectDropdown-ingroup .menu-iconic-text {
padding-inline-start: 2em;

415
browser/base/content/test/forms/browser_selectpopup_colors.js
Просмотреть файл

@ -1,175 +1,180 @@
const PAGECONTENT_COLORS =
"<html><head><style>" +
" .blue { color: #fff; background-color: #00f; }" +
" .green { color: #800080; background-color: green; }" +
" .defaultColor { color: -moz-ComboboxText; }" +
" .defaultBackground { background-color: -moz-Combobox; }" +
"</style>" +
"<body><select id='one'>" +
' <option value="One" style="color: #fff; background-color: #f00;">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgb(255, 0, 0)"}</option>' +
' <option value="Two" class="blue">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgb(0, 0, 255)"}</option>' +
' <option value="Three" class="green">{"color": "rgb(128, 0, 128)", "backgroundColor": "rgb(0, 128, 0)"}</option>' +
' <option value="Four" class="defaultColor defaultBackground">{"color": "-moz-ComboboxText", "backgroundColor": "rgba(0, 0, 0, 0)", "unstyled": "true"}</option>' +
' <option value="Five" class="defaultColor">{"color": "-moz-ComboboxText", "backgroundColor": "rgba(0, 0, 0, 0)", "unstyled": "true"}</option>' +
' <option value="Six" class="defaultBackground">{"color": "-moz-ComboboxText", "backgroundColor": "rgba(0, 0, 0, 0)", "unstyled": "true"}</option>' +
' <option value="Seven" selected="true">{"unstyled": "true"}</option>' +
"</select></body></html>";
const gSelects = {
PAGECONTENT_COLORS:
"<html><head><style>" +
" .blue { color: #fff; background-color: #00f; }" +
" .green { color: #800080; background-color: green; }" +
" .defaultColor { color: -moz-ComboboxText; }" +
" .defaultBackground { background-color: -moz-Combobox; }" +
"</style>" +
"<body><select id='one'>" +
' <option value="One" style="color: #fff; background-color: #f00;">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgb(255, 0, 0)"}</option>' +
' <option value="Two" class="blue">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgb(0, 0, 255)"}</option>' +
' <option value="Three" class="green">{"color": "rgb(128, 0, 128)", "backgroundColor": "rgb(0, 128, 0)"}</option>' +
' <option value="Four" class="defaultColor defaultBackground">{"color": "-moz-ComboboxText", "backgroundColor": "rgba(0, 0, 0, 0)", "unstyled": "true"}</option>' +
' <option value="Five" class="defaultColor">{"color": "-moz-ComboboxText", "backgroundColor": "rgba(0, 0, 0, 0)", "unstyled": "true"}</option>' +
' <option value="Six" class="defaultBackground">{"color": "-moz-ComboboxText", "backgroundColor": "rgba(0, 0, 0, 0)", "unstyled": "true"}</option>' +
' <option value="Seven" selected="true">{"unstyled": "true"}</option>' +
"</select></body></html>",
const PAGECONTENT_COLORS_ON_SELECT =
"<html><head><style>" +
" #one { background-color: #7E3A3A; color: #fff }" +
"</style>" +
"<body><select id='one'>" +
' <option value="One">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option value="Two">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option value="Three">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option value="Four" selected="true">{"end": "true"}</option>' +
"</select></body></html>";
PAGECONTENT_COLORS_ON_SELECT:
"<html><head><style>" +
" #one { background-color: #7E3A3A; color: #fff }" +
"</style>" +
"<body><select id='one'>" +
' <option value="One">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option value="Two">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option value="Three">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option value="Four" selected="true">{"end": "true"}</option>' +
"</select></body></html>",
const TRANSPARENT_SELECT =
"<html><head><style>" +
" #one { background-color: transparent; }" +
"</style>" +
"<body><select id='one'>" +
' <option value="One">{"unstyled": "true"}</option>' +
' <option value="Two" selected="true">{"end": "true"}</option>' +
"</select></body></html>";
TRANSPARENT_SELECT:
"<html><head><style>" +
" #one { background-color: transparent; }" +
"</style>" +
"<body><select id='one'>" +
' <option value="One">{"unstyled": "true"}</option>' +
' <option value="Two" selected="true">{"end": "true"}</option>' +
"</select></body></html>",
const OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT =
"<html><head><style>" +
" #one { background-color: black; color: white; }" +
"</style>" +
"<body><select id='one'>" +
' <option value="One" style="background-color: white; color: black;">{"color": "rgb(0, 0, 0)", "backgroundColor": "rgb(255, 255, 255)"}</option>' +
' <option value="Two" selected="true">{"end": "true"}</option>' +
"</select></body></html>";
OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT:
"<html><head><style>" +
" #one { background-color: black; color: white; }" +
"</style>" +
"<body><select id='one'>" +
' <option value="One" style="background-color: white; color: black;">{"color": "rgb(0, 0, 0)", "backgroundColor": "rgb(255, 255, 255)"}</option>' +
' <option value="Two" selected="true">{"end": "true"}</option>' +
"</select></body></html>",
const GENERIC_OPTION_STYLED_AS_IMPORTANT =
"<html><head><style>" +
" option { background-color: black !important; color: white !important; }" +
"</style>" +
"<body><select id='one'>" +
' <option value="One">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgb(0, 0, 0)"}</option>' +
' <option value="Two" selected="true">{"end": "true"}</option>' +
"</select></body></html>";
GENERIC_OPTION_STYLED_AS_IMPORTANT:
"<html><head><style>" +
" option { background-color: black !important; color: white !important; }" +
"</style>" +
"<body><select id='one'>" +
' <option value="One">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgb(0, 0, 0)"}</option>' +
' <option value="Two" selected="true">{"end": "true"}</option>' +
"</select></body></html>",
const TRANSLUCENT_SELECT_BECOMES_OPAQUE =
"<html><head>" +
"<body><select id='one' style='background-color: rgba(255,255,255,.55);'>" +
' <option value="One">{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option value="Two" selected="true">{"end": "true"}</option>' +
"</select></body></html>";
TRANSLUCENT_SELECT_BECOMES_OPAQUE:
"<html><head>" +
"<body><select id='one' style='background-color: rgba(255,255,255,.55);'>" +
' <option value="One">{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option value="Two" selected="true">{"end": "true"}</option>' +
"</select></body></html>",
const TRANSLUCENT_SELECT_APPLIES_ON_BASE_COLOR =
"<html><head>" +
"<body><select id='one' style='background-color: rgba(255,0,0,.55);'>" +
' <option value="One">{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option value="Two" selected="true">{"end": "true"}</option>' +
"</select></body></html>";
TRANSLUCENT_SELECT_APPLIES_ON_BASE_COLOR:
"<html><head>" +
"<body><select id='one' style='background-color: rgba(255,0,0,.55);'>" +
' <option value="One">{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option value="Two" selected="true">{"end": "true"}</option>' +
"</select></body></html>",
const DISABLED_OPTGROUP_AND_OPTIONS =
"<html><head>" +
"<body><select id='one'>" +
' <optgroup label=\'{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}\'>' +
' <option disabled="">{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option disabled="">{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
" </optgroup>" +
' <optgroup label=\'{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}\' disabled=\'\'>' +
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
" </optgroup>" +
' <option value="Two" selected="true">{"end": "true"}</option>' +
"</select></body></html>";
DISABLED_OPTGROUP_AND_OPTIONS:
"<html><head>" +
"<body><select id='one'>" +
' <optgroup label=\'{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}\'>' +
' <option disabled="">{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option disabled="">{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
" </optgroup>" +
' <optgroup label=\'{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}\' disabled=\'\'>' +
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
" </optgroup>" +
' <option value="Two" selected="true">{"end": "true"}</option>' +
"</select></body></html>",
const SELECT_CHANGES_COLOR_ON_FOCUS =
"<html><head><style>" +
" select:focus { background-color: orange; color: black; }" +
"</style></head>" +
"<body><select id='one'>" +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>";
SELECT_CHANGES_COLOR_ON_FOCUS:
"<html><head><style>" +
" select:focus { background-color: orange; color: black; }" +
"</style></head>" +
"<body><select id='one'>" +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>",
const SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS =
"<html><head><style>" +
" select { background-color: black; }" +
" option { color: white; }" +
"</style></head>" +
"<body><select id='one'>" +
' <option>{"color": "rgb(255, 255, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>";
SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS:
"<html><head><style>" +
" select { background-color: black; }" +
" option { color: white; }" +
"</style></head>" +
"<body><select id='one'>" +
' <option>{"color": "rgb(255, 255, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>",
const SELECT_STYLE_OF_OPTION_IS_BASED_ON_FOCUS_OF_SELECT =
"<html><head><style>" +
" select:focus { background-color: #3a96dd; }" +
" select:focus option { background-color: #fff; }" +
"</style></head>" +
"<body><select id='one'>" +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgb(255, 255, 255)"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>";
SELECT_STYLE_OF_OPTION_IS_BASED_ON_FOCUS_OF_SELECT:
"<html><head><style>" +
" select:focus { background-color: #3a96dd; }" +
" select:focus option { background-color: #fff; }" +
"</style></head>" +
"<body><select id='one'>" +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgb(255, 255, 255)"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>",
const SELECT_STYLE_OF_OPTION_CHANGES_AFTER_FOCUS_EVENT =
"<html><body><select id='one'>" +
' <option>{"color": "rgb(255, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body><scr" +
"ipt>" +
" var select = document.getElementById('one');" +
" select.addEventListener('focus', () => select.style.color = 'red');" +
"</script></html>";
SELECT_STYLE_OF_OPTION_CHANGES_AFTER_FOCUS_EVENT:
"<html><body><select id='one'>" +
' <option>{"color": "rgb(255, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body><scr" +
"ipt>" +
" var select = document.getElementById('one');" +
" select.addEventListener('focus', () => select.style.color = 'red');" +
"</script></html>",
const SELECT_COLOR_OF_OPTION_CHANGES_AFTER_TRANSITIONEND =
"<html><head><style>" +
" select { transition: all .1s; }" +
" select:focus { background-color: orange; }" +
"</style></head><body><select id='one'>" +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>";
SELECT_COLOR_OF_OPTION_CHANGES_AFTER_TRANSITIONEND:
"<html><head><style>" +
" select { transition: all .1s; }" +
" select:focus { background-color: orange; }" +
"</style></head><body><select id='one'>" +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>",
const SELECT_TEXTSHADOW_OF_OPTION_CHANGES_AFTER_TRANSITIONEND =
"<html><head><style>" +
" select { transition: all .1s; }" +
" select:focus { text-shadow: 0 0 0 #303030; }" +
"</style></head><body><select id='one'>" +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)", "textShadow": "rgb(48, 48, 48) 0px 0px 0px"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>";
SELECT_TEXTSHADOW_OF_OPTION_CHANGES_AFTER_TRANSITIONEND:
"<html><head><style>" +
" select { transition: all .1s; }" +
" select:focus { text-shadow: 0 0 0 #303030; }" +
"</style></head><body><select id='one'>" +
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)", "textShadow": "rgb(48, 48, 48) 0px 0px 0px"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>",
const SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW =
"<html><head><style>" +
" select { color: transparent; text-shadow: 0 0 0 #303030; }" +
"</style></head><body><select id='one'>" +
' <option>{"color": "rgba(0, 0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)", "textShadow": "rgb(48, 48, 48) 0px 0px 0px"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>";
SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW:
"<html><head><style>" +
" select { color: transparent; text-shadow: 0 0 0 #303030; }" +
"</style></head><body><select id='one'>" +
' <option>{"color": "rgba(0, 0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)", "textShadow": "rgb(48, 48, 48) 0px 0px 0px"}</option>' +
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>",
let SELECT_LONG_WITH_TRANSITION =
"<html><head><style>" +
" select { transition: all .2s linear; }" +
" select:focus { color: purple; }" +
"</style></head><body><select id='one'>";
for (let i = 0; i < 75; i++) {
SELECT_LONG_WITH_TRANSITION +=
' <option>{"color": "rgb(128, 0, 128)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>';
}
SELECT_LONG_WITH_TRANSITION +=
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>";
SELECT_LONG_WITH_TRANSITION:
"<html><head><style>" +
" select { transition: all .2s linear; }" +
" select:focus { color: purple; }" +
"</style></head><body><select id='one'>" +
(function() {
let rv = "";
for (let i = 0; i < 75; i++) {
rv +=
' <option>{"color": "rgb(128, 0, 128)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>';
}
rv +=
' <option selected="true">{"end": "true"}</option>' +
"</select></body></html>";
return rv;
})(),
const SELECT_INHERITED_COLORS_ON_OPTIONS_DONT_GET_UNIQUE_RULES_IF_RULE_SET_ON_SELECT = `
SELECT_INHERITED_COLORS_ON_OPTIONS_DONT_GET_UNIQUE_RULES_IF_RULE_SET_ON_SELECT: `
<html><head><style>
select { color: blue; text-shadow: 1px 1px 2px blue; }
.redColor { color: red; }
@ -180,25 +185,26 @@ const SELECT_INHERITED_COLORS_ON_OPTIONS_DONT_GET_UNIQUE_RULES_IF_RULE_SET_ON_SE
<option class="textShadow">{"color": "rgb(0, 0, 255)", "textShadow": "rgb(0, 0, 0) 1px 1px 2px", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>
<option selected="true">{"end": "true"}</option>
</select></body></html>
`;
`,
const SELECT_FONT_INHERITS_TO_OPTION = `
SELECT_FONT_INHERITS_TO_OPTION: `
<html><head><style>
select { font-family: monospace }
</style></head><body><select id='one'>
<option>One</option>
<option style="font-family: sans-serif">Two</option>
</select></body></html>
`;
`,
const SELECT_SCROLLBAR_PROPS = `
SELECT_SCROLLBAR_PROPS: `
<html><head><style>
select { scrollbar-width: thin; scrollbar-color: red blue }
</style></head><body><select id='one'>
<option>One</option>
<option style="font-family: sans-serif">Two</option>
</select></body></html>
`;
`,
};
function getSystemColor(color) {
// Need to convert system color to RGB color.
@ -282,17 +288,26 @@ async function openSelectPopup(select) {
return { tab, menulist, selectPopup };
}
async function testSelectColors(select, itemCount, options) {
async function testSelectColors(selectID, itemCount, options) {
let select = gSelects[selectID];
let { tab, menulist, selectPopup } = await openSelectPopup(select);
let arrowSB = selectPopup.shadowRoot.querySelector(
".menupopup-arrowscrollbox"
);
if (options.waitForComputedStyle) {
let property = options.waitForComputedStyle.property;
let value = options.waitForComputedStyle.value;
await TestUtils.waitForCondition(() => {
let node = ["background-image", "background-color"].includes(property)
? arrowSB
: selectPopup;
info(
`<select> has ${property}: ${getComputedStyle(selectPopup)[property]}`
`<${node.localName}> has ${property}: ${
getComputedStyle(node)[property]
}`
);
return getComputedStyle(selectPopup)[property] == value;
}, `Waiting for <select> to have ${property}: ${value}`);
return getComputedStyle(node)[property] == value;
}, `${selectID} - Waiting for <select> to have ${property}: ${value}`);
}
is(selectPopup.parentNode.itemCount, itemCount, "Correct number of items");
@ -303,31 +318,35 @@ async function testSelectColors(select, itemCount, options) {
is(
getComputedStyle(selectPopup).color,
options.selectColor,
"popup has expected foreground color"
selectID + " popup has expected foreground color"
);
if (options.selectTextShadow) {
is(
getComputedStyle(selectPopup).textShadow,
options.selectTextShadow,
"popup has expected text-shadow color"
selectID + " popup has expected text-shadow color"
);
}
// Combine the select popup's backgroundColor and the
// backgroundImage color to get the color that is seen by
// the user.
let base = getComputedStyle(selectPopup).backgroundColor;
let base = getComputedStyle(arrowSB).backgroundColor;
if (base == "rgba(0, 0, 0, 0)") {
base = getComputedStyle(selectPopup).backgroundColor;
}
info("Parsing background color: " + base);
let [, /* unused */ bR, bG, bB] = base.match(/rgb\((\d+), (\d+), (\d+)\)/);
bR = parseInt(bR, 10);
bG = parseInt(bG, 10);
bB = parseInt(bB, 10);
let topCoat = getComputedStyle(selectPopup).backgroundImage;
let topCoat = getComputedStyle(arrowSB).backgroundImage;
if (topCoat == "none") {
is(
`rgb(${bR}, ${bG}, ${bB})`,
options.selectBgColor,
"popup has expected background color"
selectID + " popup has expected background color (top coat)"
);
} else {
let [, , /* unused */ /* unused */ tR, tG, tB, tA] = topCoat.match(
@ -343,7 +362,7 @@ async function testSelectColors(select, itemCount, options) {
is(
`rgb(${actualR}, ${actualG}, ${actualB})`,
options.selectBgColor,
"popup has expected background color"
selectID + " popup has expected background color (no top coat)"
);
}
}
@ -372,7 +391,9 @@ add_task(async function setup() {
// This test checks when a <select> element has styles applied to <option>s within it.
add_task(async function test_colors_applied_to_popup_items() {
await testSelectColors(PAGECONTENT_COLORS, 7, { skipSelectColorTest: true });
await testSelectColors("PAGECONTENT_COLORS", 7, {
skipSelectColorTest: true,
});
});
// This test checks when a <select> element has styles applied to itself.
@ -381,7 +402,7 @@ add_task(async function test_colors_applied_to_popup() {
selectColor: "rgb(255, 255, 255)",
selectBgColor: "rgb(126, 58, 58)",
};
await testSelectColors(PAGECONTENT_COLORS_ON_SELECT, 4, options);
await testSelectColors("PAGECONTENT_COLORS_ON_SELECT", 4, options);
});
// This test checks when a <select> element has a transparent background applied to itself.
@ -390,7 +411,7 @@ add_task(async function test_transparent_applied_to_popup() {
selectColor: getSystemColor("-moz-ComboboxText"),
selectBgColor: getSystemColor("-moz-Combobox"),
};
await testSelectColors(TRANSPARENT_SELECT, 2, options);
await testSelectColors("TRANSPARENT_SELECT", 2, options);
});
// This test checks when a <select> element has a background set, and the
@ -405,7 +426,7 @@ add_task(async function test_options_inverted_from_select_background() {
selectBgColor: "rgb(0, 0, 0)",
};
await testSelectColors(
OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT,
"OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT",
2,
options
);
@ -414,7 +435,7 @@ add_task(async function test_options_inverted_from_select_background() {
// This test checks when a <select> element has a background set using !important,
// which was affecting how we calculated the user-agent styling.
add_task(async function test_select_background_using_important() {
await testSelectColors(GENERIC_OPTION_STYLED_AS_IMPORTANT, 2, {
await testSelectColors("GENERIC_OPTION_STYLED_AS_IMPORTANT", 2, {
skipSelectColorTest: true,
});
});
@ -430,7 +451,7 @@ add_task(async function test_translucent_select_becomes_opaque() {
selectColor: "rgb(0, 0, 0)",
selectBgColor: "rgb(255, 255, 255)",
};
await testSelectColors(TRANSLUCENT_SELECT_BECOMES_OPAQUE, 2, options);
await testSelectColors("TRANSLUCENT_SELECT_BECOMES_OPAQUE", 2, options);
});
// This test checks when a popup has a translucent background color,
@ -443,11 +464,15 @@ add_task(async function test_translucent_select_applies_on_base_color() {
selectColor: "rgb(0, 0, 0)",
selectBgColor: "rgb(255, 115, 115)",
};
await testSelectColors(TRANSLUCENT_SELECT_APPLIES_ON_BASE_COLOR, 2, options);
await testSelectColors(
"TRANSLUCENT_SELECT_APPLIES_ON_BASE_COLOR",
2,
options
);
});
add_task(async function test_disabled_optgroup_and_options() {
await testSelectColors(DISABLED_OPTGROUP_AND_OPTIONS, 17, {
await testSelectColors("DISABLED_OPTGROUP_AND_OPTIONS", 17, {
skipSelectColorTest: true,
});
});
@ -458,7 +483,7 @@ add_task(async function test_disabled_optgroup_and_options() {
selectBgColor: "rgb(255, 165, 0)",
};
await testSelectColors(SELECT_CHANGES_COLOR_ON_FOCUS, 2, options);
await testSelectColors("SELECT_CHANGES_COLOR_ON_FOCUS", 2, options);
});
add_task(async function test_bgcolor_on_select_color_on_options() {
@ -467,7 +492,11 @@ add_task(async function test_bgcolor_on_select_color_on_options() {
selectBgColor: "rgb(0, 0, 0)",
};
await testSelectColors(SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS, 2, options);
await testSelectColors(
"SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS",
2,
options
);
});
add_task(
@ -478,7 +507,7 @@ add_task(
};
await testSelectColors(
SELECT_STYLE_OF_OPTION_IS_BASED_ON_FOCUS_OF_SELECT,
"SELECT_STYLE_OF_OPTION_IS_BASED_ON_FOCUS_OF_SELECT",
2,
options
);
@ -495,7 +524,7 @@ add_task(
},
};
await testSelectColors(
SELECT_STYLE_OF_OPTION_CHANGES_AFTER_FOCUS_EVENT,
"SELECT_STYLE_OF_OPTION_CHANGES_AFTER_FOCUS_EVENT",
2,
options
);
@ -513,7 +542,7 @@ add_task(async function test_color_of_options_is_dependent_on_transitionend() {
};
await testSelectColors(
SELECT_COLOR_OF_OPTION_CHANGES_AFTER_TRANSITIONEND,
"SELECT_COLOR_OF_OPTION_CHANGES_AFTER_TRANSITIONEND",
2,
options
);
@ -530,7 +559,7 @@ add_task(
};
await testSelectColors(
SELECT_TEXTSHADOW_OF_OPTION_CHANGES_AFTER_TRANSITIONEND,
"SELECT_TEXTSHADOW_OF_OPTION_CHANGES_AFTER_TRANSITIONEND",
2,
options
);
@ -544,7 +573,11 @@ add_task(async function test_transparent_color_with_text_shadow() {
selectBgColor: "rgb(255, 255, 255)",
};
await testSelectColors(SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW, 2, options);
await testSelectColors(
"SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW",
2,
options
);
});
add_task(
@ -559,7 +592,7 @@ add_task(
leaveOpen: true,
};
await testSelectColors(SELECT_LONG_WITH_TRANSITION, 76, options);
await testSelectColors("SELECT_LONG_WITH_TRANSITION", 76, options);
let menulist = document.getElementById("ContentSelectDropdown");
let selectPopup = menulist.menupopup;
@ -585,7 +618,7 @@ add_task(
};
await testSelectColors(
SELECT_INHERITED_COLORS_ON_OPTIONS_DONT_GET_UNIQUE_RULES_IF_RULE_SET_ON_SELECT,
"SELECT_INHERITED_COLORS_ON_OPTIONS_DONT_GET_UNIQUE_RULES_IF_RULE_SET_ON_SELECT",
4,
options
);
@ -642,7 +675,7 @@ add_task(
add_task(async function test_select_font_inherits_to_option() {
let { tab, menulist, selectPopup } = await openSelectPopup(
SELECT_FONT_INHERITS_TO_OPTION
gSelects.SELECT_FONT_INHERITS_TO_OPTION
);
let popupFont = getComputedStyle(selectPopup).fontFamily;
@ -667,7 +700,9 @@ add_task(async function test_select_font_inherits_to_option() {
});
add_task(async function test_scrollbar_props() {
let { tab, selectPopup } = await openSelectPopup(SELECT_SCROLLBAR_PROPS);
let { tab, selectPopup } = await openSelectPopup(
gSelects.SELECT_SCROLLBAR_PROPS
);
let popupStyle = getComputedStyle(selectPopup);
is(popupStyle.getPropertyValue("--content-select-scrollbar-width"), "thin");

19
toolkit/actors/SelectParent.jsm
Просмотреть файл

@ -153,20 +153,23 @@ var SelectParentHelper = {
// Some webpages set the <select> backgroundColor to transparent,
// but they don't intend to change the popup to transparent.
// So we remove the backgroundColor and turn it into an image instead.
if (
customStylingEnabled &&
selectStyle["background-color"] != uaStyle["background-color"]
) {
if (selectStyle["background-color"] != uaStyle["background-color"]) {
// We intentionally use the parsed color to prevent color
// values like `url(..)` being injected into the
// `background-image` property.
let parsedColor = sheet.cssRules[0].style["background-color"];
sheet.cssRules[0].style["background-color"] = "";
sheet.cssRules[0].style[
"background-image"
] = `linear-gradient(${parsedColor}, ${parsedColor})`;
// The background color gets dropped unconditionally below.
sheet.cssRules[0].style.setProperty(
"--content-select-background-image",
`linear-gradient(${parsedColor}, ${parsedColor})`
);
selectBackgroundSet = true;
}
if (addedRule) {
// Always drop the background color to avoid messing with the custom
// shadow on Windows 10 styling.
sheet.cssRules[0].style["background-color"] = "";
}
if (addedRule) {
sheet.insertRule(
`#ContentSelectDropdown > menupopup > :not([_moz-menuactive="true"]) {

1
toolkit/content/widgets/menupopup.js
Просмотреть файл

@ -82,6 +82,7 @@
<html:link rel="stylesheet" href="chrome://global/skin/global.css"/>
<html:style>${this.styles}</html:style>
<arrowscrollbox class="menupopup-arrowscrollbox"
part="arrowscrollbox"
exportparts="scrollbox: arrowscrollbox-scrollbox"
flex="1"
orient="vertical"