nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

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

Browse source 
Differential Revision: https://phabricator.services.mozilla.com/D105642
This commit is contained in:
Gijs Kruitbosch 2021-02-18 16:33:20 +00:00
parent a794acaa37
commit 21285db89d
4 changed files with 241 additions and 198 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

4
browser/base/content/browser.css
View file

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

173
browser/base/content/test/forms/browser_selectpopup_colors.js
View file

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

19
toolkit/actors/SelectParent.jsm
View file

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

1
toolkit/content/widgets/menupopup.js
View file

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