Bug 1350774 - Some pages may style their <option> elements based on the :focus of the <select>, so :focus should be locked on the <select> during color computation. r?mossop
MozReview-Commit-ID: D0WZU6wFctG
--- a/browser/base/content/test/forms/browser_selectpopup_colors.js
+++ b/browser/base/content/test/forms/browser_selectpopup_colors.js
@@ -105,16 +105,26 @@ const SELECT_BGCOLOR_ON_SELECT_COLOR_ON_
" select { background-color: black; }" +
" option { color: white; }" +
"</style></head>" +
"<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>";
+const SELECT_STYLE_OF_OPTION_IS_BASED_ON_FOCUS_OF_SELECT =
+ "<html><head><style>" +
+ " select:focus { background-color: #3a96dd; }" +
+ " select:focus option { background-color: #fff; }" +
+ "</style></head>" +
+ "<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>";
+
function getSystemColor(color) {
// Need to convert system color to RGB color.
let textarea = document.createElementNS("http://www.w3.org/1999/xhtml", "textarea");
textarea.style.color = color;
return getComputedStyle(textarea).color;
}
function testOptionColors(index, item, menulist) {
@@ -311,8 +321,17 @@ add_task(function* test_disabled_optgrou
add_task(function* test_bgcolor_on_select_color_on_options() {
let options = {
selectColor: "rgb(0, 0, 0)",
selectBgColor: "rgb(0, 0, 0)"
};
yield testSelectColors(SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS, 2, options);
});
+
+add_task(function* test_style_of_options_is_dependent_on_focus_of_select() {
+ let options = {
+ selectColor: "rgb(0, 0, 0)",
+ selectBgColor: "rgb(58, 150, 221)"
+ };
+
+ yield testSelectColors(SELECT_STYLE_OF_OPTION_IS_BASED_ON_FOCUS_OF_SELECT, 2, options);
+});
--- a/toolkit/modules/SelectContentHelper.jsm
+++ b/toolkit/modules/SelectContentHelper.jsm
@@ -115,17 +115,20 @@ this.SelectContentHelper.prototype = {
gOpen = true;
},
_getBoundingContentRect() {
return BrowserUtils.getElementBoundingScreenRect(this.element);
},
_buildOptionList() {
- return buildOptionListForChildren(this.element);
+ DOMUtils.addPseudoClassLock(this.element, ":focus");
+ let result = buildOptionListForChildren(this.element);
+ DOMUtils.clearPseudoClassLocks(this.element);
+ return result;
},
_update() {
// The <select> was updated while the dropdown was open.
// Let's send up a new list of options.
// Technically we might not need to set this pseudo-class
// during _update() since the element should organically
// have :focus, though it is here for belt-and-suspenders.