diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
index e2195c0d9ccd..1898510fb506 100644
--- a/browser/base/content/browser.css
+++ b/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;
diff --git a/browser/base/content/test/forms/browser_selectpopup_colors.js b/browser/base/content/test/forms/browser_selectpopup_colors.js
index 2f60c80f7c38..30bfc42e6dae 100644
--- a/browser/base/content/test/forms/browser_selectpopup_colors.js
+++ b/browser/base/content/test/forms/browser_selectpopup_colors.js
@@ -1,175 +1,180 @@
-const PAGECONTENT_COLORS =
- "" +
- "";
+const gSelects = {
+ PAGECONTENT_COLORS:
+ "" +
+ "",
-const PAGECONTENT_COLORS_ON_SELECT =
- "" +
- "";
+ PAGECONTENT_COLORS_ON_SELECT:
+ "" +
+ "",
-const TRANSPARENT_SELECT =
- "" +
- "";
+ TRANSPARENT_SELECT:
+ "" +
+ "",
-const OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT =
- "" +
- "";
+ OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT:
+ "" +
+ "",
-const GENERIC_OPTION_STYLED_AS_IMPORTANT =
- "" +
- "";
+ GENERIC_OPTION_STYLED_AS_IMPORTANT:
+ "" +
+ "",
-const TRANSLUCENT_SELECT_BECOMES_OPAQUE =
- "" +
- "";
+ TRANSLUCENT_SELECT_BECOMES_OPAQUE:
+ "" +
+ "",
-const TRANSLUCENT_SELECT_APPLIES_ON_BASE_COLOR =
- "" +
- "";
+ TRANSLUCENT_SELECT_APPLIES_ON_BASE_COLOR:
+ "" +
+ "",
-const DISABLED_OPTGROUP_AND_OPTIONS =
- "" +
- "";
+ DISABLED_OPTGROUP_AND_OPTIONS:
+ "" +
+ "",
-const SELECT_CHANGES_COLOR_ON_FOCUS =
- "" +
- "";
+ SELECT_CHANGES_COLOR_ON_FOCUS:
+ "" +
+ "",
-const SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS =
- "" +
- "";
+ SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS:
+ "" +
+ "",
-const SELECT_STYLE_OF_OPTION_IS_BASED_ON_FOCUS_OF_SELECT =
- "" +
- "";
+ SELECT_STYLE_OF_OPTION_IS_BASED_ON_FOCUS_OF_SELECT:
+ "" +
+ "",
-const SELECT_STYLE_OF_OPTION_CHANGES_AFTER_FOCUS_EVENT =
- "" +
- " var select = document.getElementById('one');" +
- " select.addEventListener('focus', () => select.style.color = 'red');" +
- "";
+ SELECT_STYLE_OF_OPTION_CHANGES_AFTER_FOCUS_EVENT:
+ "" +
+ " var select = document.getElementById('one');" +
+ " select.addEventListener('focus', () => select.style.color = 'red');" +
+ "",
-const SELECT_COLOR_OF_OPTION_CHANGES_AFTER_TRANSITIONEND =
- "";
+ SELECT_COLOR_OF_OPTION_CHANGES_AFTER_TRANSITIONEND:
+ "",
-const SELECT_TEXTSHADOW_OF_OPTION_CHANGES_AFTER_TRANSITIONEND =
- "";
+ SELECT_TEXTSHADOW_OF_OPTION_CHANGES_AFTER_TRANSITIONEND:
+ "",
-const SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW =
- "";
+ SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW:
+ "",
-let SELECT_LONG_WITH_TRANSITION =
- "";
+ SELECT_LONG_WITH_TRANSITION:
+ "";
+ 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: `
-`;
+`,
-const SELECT_SCROLLBAR_PROPS = `
+ SELECT_SCROLLBAR_PROPS: `
-`;
+`,
+};
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(
- `