Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-28 20:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
MozReview-Commit-ID: A01xHyGP9ec

--HG--
extra : rebase_source : 68fcdfff07723fc4c78d7ed6e70e3f70eb1ee923
This commit is contained in:
Jared Wein 2017-03-06 12:10:14 -05:00
parent bfc6ee87c5
commit f0dc3daba8
2 changed files with 52 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
browser/base/content/test/general/browser_selectpopup.js
View File

@ -116,6 +116,15 @@ const TRANSPARENT_SELECT =
' <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");
@ -930,3 +939,41 @@ add_task(function* test_blur_hides_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);
});

6
toolkit/modules/SelectParentHelper.jsm
View File

@ -24,6 +24,7 @@ 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,
@ -55,6 +56,9 @@ this.SelectParentHelper = {
selectBackgroundColor != "rgba(0, 0, 0, 0)" &&
selectBackgroundColor != selectColor) {
ruleBody = `background-color: ${selectBackgroundColor};`;
usedSelectBackgroundColor = selectBackgroundColor;
} else {
usedSelectBackgroundColor = uaSelectBackgroundColor;
}
if (customStylingEnabled &&
@ -254,7 +258,7 @@ function populateChildren(menulist, options, selectedIndex, zoom,
if (customStylingEnabled &&
option.backgroundColor &&
option.backgroundColor != "rgba(0, 0, 0, 0)" &&
option.backgroundColor != uaBackgroundColor) {
option.backgroundColor != usedSelectBackgroundColor) {
ruleBody = `background-color: ${option.backgroundColor};`;
}