forked from mirrors/gecko-dev
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
parent
a794acaa37
commit
21285db89d
4 changed files with 241 additions and 198 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
const PAGECONTENT_COLORS =
|
||||
const gSelects = {
|
||||
PAGECONTENT_COLORS:
|
||||
"<html><head><style>" +
|
||||
" .blue { color: #fff; background-color: #00f; }" +
|
||||
" .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="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>";
|
||||
"</select></body></html>",
|
||||
|
||||
const PAGECONTENT_COLORS_ON_SELECT =
|
||||
PAGECONTENT_COLORS_ON_SELECT:
|
||||
"<html><head><style>" +
|
||||
" #one { background-color: #7E3A3A; color: #fff }" +
|
||||
"</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="Three">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option value="Four" selected="true">{"end": "true"}</option>' +
|
||||
"</select></body></html>";
|
||||
"</select></body></html>",
|
||||
|
||||
const TRANSPARENT_SELECT =
|
||||
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>";
|
||||
"</select></body></html>",
|
||||
|
||||
const OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT =
|
||||
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>";
|
||||
"</select></body></html>",
|
||||
|
||||
const GENERIC_OPTION_STYLED_AS_IMPORTANT =
|
||||
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>";
|
||||
"</select></body></html>",
|
||||
|
||||
const TRANSLUCENT_SELECT_BECOMES_OPAQUE =
|
||||
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>";
|
||||
"</select></body></html>",
|
||||
|
||||
const TRANSLUCENT_SELECT_APPLIES_ON_BASE_COLOR =
|
||||
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>";
|
||||
"</select></body></html>",
|
||||
|
||||
const DISABLED_OPTGROUP_AND_OPTIONS =
|
||||
DISABLED_OPTGROUP_AND_OPTIONS:
|
||||
"<html><head>" +
|
||||
"<body><select id='one'>" +
|
||||
' <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>' +
|
||||
" </optgroup>" +
|
||||
' <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>" +
|
||||
" 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></body></html>",
|
||||
|
||||
const SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS =
|
||||
SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS:
|
||||
"<html><head><style>" +
|
||||
" select { background-color: black; }" +
|
||||
" option { color: white; }" +
|
||||
|
|
@ -108,9 +109,9 @@ const SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS =
|
|||
"<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></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>" +
|
||||
" select:focus { background-color: #3a96dd; }" +
|
||||
" 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'>" +
|
||||
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgb(255, 255, 255)"}</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'>" +
|
||||
' <option>{"color": "rgb(255, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option selected="true">{"end": "true"}</option>' +
|
||||
|
|
@ -128,48 +129,52 @@ const SELECT_STYLE_OF_OPTION_CHANGES_AFTER_FOCUS_EVENT =
|
|||
"ipt>" +
|
||||
" var select = document.getElementById('one');" +
|
||||
" 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>" +
|
||||
" 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></body></html>",
|
||||
|
||||
const SELECT_TEXTSHADOW_OF_OPTION_CHANGES_AFTER_TRANSITIONEND =
|
||||
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></body></html>",
|
||||
|
||||
const SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW =
|
||||
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></body></html>",
|
||||
|
||||
let SELECT_LONG_WITH_TRANSITION =
|
||||
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 +=
|
||||
"</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>';
|
||||
}
|
||||
SELECT_LONG_WITH_TRANSITION +=
|
||||
}
|
||||
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");
|
||||
|
|
|
|||
|
|
@ -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"]) {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue