Bug 1344574 - Compare the option foreground color to the used select background color instead of just the user-agent default select background color. r?mconley
MozReview-Commit-ID: A01xHyGP9ec
--- a/browser/base/content/test/general/browser_selectpopup.js
+++ b/browser/base/content/test/general/browser_selectpopup.js
@@ -111,16 +111,25 @@ 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>";
+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>";
+
function openSelectPopup(selectPopup, mode = "key", selector = "select", win = window) {
let popupShownPromise = BrowserTestUtils.waitForEvent(selectPopup, "popupshown");
if (mode == "click" || mode == "mousedown") {
let mousePromise;
if (mode == "click") {
mousePromise = BrowserTestUtils.synthesizeMouseAtCenter(selector, { }, win.gBrowser.selectedBrowser);
} else {
@@ -925,8 +934,46 @@ add_task(function* test_blur_hides_popup
});
yield popupHiddenPromise;
ok(true, "Blur closed popup");
yield BrowserTestUtils.removeTab(tab);
});
+
+// This test checks when a <select> element has a background set, and the
+// options have their own background set which is equal to the default
+// user-agent background color, but should be used because the select
+// background color has been changed.
+add_task(function* test_options_inverted_from_select_background() {
+ const pageUrl = "data:text/html," + escape(OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT);
+ let tab = yield BrowserTestUtils.openNewForegroundTab(gBrowser, pageUrl);
+
+ let menulist = document.getElementById("ContentSelectDropdown");
+ let selectPopup = menulist.menupopup;
+
+ let popupShownPromise = BrowserTestUtils.waitForEvent(selectPopup, "popupshown");
+ yield BrowserTestUtils.synthesizeMouseAtCenter("#one", { type: "mousedown" }, gBrowser.selectedBrowser);
+ yield popupShownPromise;
+
+ is(selectPopup.parentNode.itemCount, 2, "Correct number of items");
+ let child = selectPopup.firstChild;
+ let idx = 1;
+
+ // The popup has a black background and white text, but the
+ // options inside of it have flipped the colors.
+ is(getComputedStyle(selectPopup).color, "rgb(255, 255, 255)",
+ "popup has expected foreground color");
+ is(getComputedStyle(selectPopup).backgroundColor, "rgb(0, 0, 0)",
+ "popup has expected background color");
+
+ ok(!child.selected, "The first child should not be selected");
+ while (child) {
+ testOptionColors(idx, child, menulist);
+ idx++;
+ child = child.nextSibling;
+ }
+
+ yield hideSelectPopup(selectPopup, "escape");
+
+ yield BrowserTestUtils.removeTab(tab);
+});
--- a/toolkit/modules/SelectParentHelper.jsm
+++ b/toolkit/modules/SelectParentHelper.jsm
@@ -19,16 +19,17 @@ const MAX_ROWS = 20;
const SEARCH_MINIMUM_ELEMENTS = 40;
var currentBrowser = null;
var currentMenulist = null;
var currentZoom = 1;
var closedWithEnter = false;
var selectRect;
var customStylingEnabled = Services.prefs.getBoolPref("dom.forms.select.customstyling");
+var usedSelectBackgroundColor;
this.SelectParentHelper = {
populate(menulist, items, selectedIndex, zoom, uaBackgroundColor, uaColor,
uaSelectBackgroundColor, uaSelectColor, selectBackgroundColor, selectColor) {
// Clear the current contents of the popup
menulist.menupopup.textContent = "";
let stylesheet = menulist.querySelector("#ContentSelectDropdownScopedStylesheet");
if (stylesheet) {
@@ -50,16 +51,19 @@ this.SelectParentHelper = {
// Some webpages set the <select> backgroundColor to transparent,
// but they don't intend to change the popup to transparent.
if (customStylingEnabled &&
selectBackgroundColor != uaSelectBackgroundColor &&
selectBackgroundColor != "rgba(0, 0, 0, 0)" &&
selectBackgroundColor != selectColor) {
ruleBody = `background-color: ${selectBackgroundColor};`;
+ usedSelectBackgroundColor = selectBackgroundColor;
+ } else {
+ usedSelectBackgroundColor = uaSelectBackgroundColor;
}
if (customStylingEnabled &&
selectColor != uaSelectColor &&
selectColor != selectBackgroundColor &&
(selectBackgroundColor != "rgba(0, 0, 0, 0)" ||
selectColor != uaSelectBackgroundColor)) {
ruleBody += `color: ${selectColor};`;
@@ -249,17 +253,17 @@ function populateChildren(menulist, opti
// them on search input
item.hiddenByContent = item.hidden;
item.setAttribute("tooltiptext", option.tooltip);
let ruleBody = "";
if (customStylingEnabled &&
option.backgroundColor &&
option.backgroundColor != "rgba(0, 0, 0, 0)" &&
- option.backgroundColor != uaBackgroundColor) {
+ option.backgroundColor != usedSelectBackgroundColor) {
ruleBody = `background-color: ${option.backgroundColor};`;
}
if (customStylingEnabled &&
option.color &&
option.color != uaColor) {
ruleBody += `color: ${option.color};`;
}