зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1347329 - Move the select tests to a forms subdirectory and split apart the color tests to their own file since the test was getting very long. r=mossop
MozReview-Commit-ID: IGjS2aiL4a2 --HG-- rename : browser/base/content/test/general/browser_selectpopup.js => browser/base/content/test/forms/browser_selectpopup.js extra : rebase_source : cf2a9bee2cbc46808c0f559baddd50cbdae90aab
This commit is contained in:
Jared Wein
Родитель
3581faf3a2
Коммит
925e02b6ec
|
|
@ -0,0 +1,7 @@
|
|||
[DEFAULT]
|
||||
support-files =
|
||||
head.js
|
||||
|
||||
[browser_selectpopup.js]
|
||||
skip-if = os == "linux" # Bug 1329991 - test fails intermittently on Linux builds
|
||||
[browser_selectpopup_colors.js]
|
||||
|
|
@ -79,92 +79,6 @@ const PAGECONTENT_TRANSLATED =
|
|||
"</iframe>" +
|
||||
"</div></body></html>";
|
||||
|
||||
const PAGECONTENT_COLORS =
|
||||
"<html><head><style>" +
|
||||
" .blue { color: #fff; background-color: #00f; }" +
|
||||
" .green { color: #800080; background-color: green; }" +
|
||||
" .defaultColor { color: -moz-ComboboxText; }" +
|
||||
" .defaultBackground { background-color: -moz-Combobox; }" +
|
||||
"</style>" +
|
||||
"<body><select id='one'>" +
|
||||
' <option value="One" style="color: #fff; background-color: #f00;">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgb(255, 0, 0)"}</option>' +
|
||||
' <option value="Two" class="blue">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgb(0, 0, 255)"}</option>' +
|
||||
' <option value="Three" class="green">{"color": "rgb(128, 0, 128)", "backgroundColor": "rgb(0, 128, 0)"}</option>' +
|
||||
' <option value="Four" class="defaultColor defaultBackground">{"color": "-moz-ComboboxText", "backgroundColor": "rgba(0, 0, 0, 0)", "unstyled": "true"}</option>' +
|
||||
' <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>";
|
||||
|
||||
const PAGECONTENT_COLORS_ON_SELECT =
|
||||
"<html><head><style>" +
|
||||
" #one { background-color: #7E3A3A; color: #fff }" +
|
||||
"</style>" +
|
||||
"<body><select id='one'>" +
|
||||
' <option value="One">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <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>";
|
||||
|
||||
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>";
|
||||
|
||||
const 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>";
|
||||
|
||||
const 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>";
|
||||
|
||||
const DISABLED_OPTGROUP_AND_OPTIONS =
|
||||
"<html><head>" +
|
||||
"<body><select id='one'>" +
|
||||
" <optgroup label='{\"color\": \"rgb(0, 0, 0)\", \"backgroundColor\": \"buttonface\"}'>" +
|
||||
' <option disabled="">{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option disabled="">{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
" </optgroup>" +
|
||||
" <optgroup label='{\"color\": \"GrayText\", \"backgroundColor\": \"buttonface\"}' disabled=''>" +
|
||||
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
" </optgroup>" +
|
||||
' <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");
|
||||
|
||||
|
|
@ -183,24 +97,6 @@ function openSelectPopup(selectPopup, mode = "key", selector = "select", win = w
|
|||
return popupShownPromise;
|
||||
}
|
||||
|
||||
function hideSelectPopup(selectPopup, mode = "enter", win = window) {
|
||||
let browser = win.gBrowser.selectedBrowser;
|
||||
let selectClosedPromise = ContentTask.spawn(browser, null, function*() {
|
||||
Cu.import("resource://gre/modules/SelectContentHelper.jsm");
|
||||
return ContentTaskUtils.waitForCondition(() => !SelectContentHelper.open);
|
||||
});
|
||||
|
||||
if (mode == "escape") {
|
||||
EventUtils.synthesizeKey("KEY_Escape", { code: "Escape" }, win);
|
||||
} else if (mode == "enter") {
|
||||
EventUtils.synthesizeKey("KEY_Enter", { code: "Enter" }, win);
|
||||
} else if (mode == "click") {
|
||||
EventUtils.synthesizeMouseAtCenter(selectPopup.lastChild, { }, win);
|
||||
}
|
||||
|
||||
return selectClosedPromise;
|
||||
}
|
||||
|
||||
function getInputEvents() {
|
||||
return ContentTask.spawn(gBrowser.selectedBrowser, {}, function() {
|
||||
return content.wrappedJSObject.gInputEvents;
|
||||
|
|
@ -219,85 +115,6 @@ function getClickEvents() {
|
|||
});
|
||||
}
|
||||
|
||||
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) {
|
||||
// The label contains a JSON string of the expected colors for
|
||||
// `color` and `background-color`.
|
||||
let expected;
|
||||
try {
|
||||
expected = JSON.parse(item.label);
|
||||
} catch (ex) {
|
||||
info(`Failed parsing: ${item.label}`);
|
||||
info(`Failed parsing element with outerHTML: ${item.outerHTML}`);
|
||||
ok(false, ex.message);
|
||||
return;
|
||||
}
|
||||
|
||||
for (let color of Object.keys(expected)) {
|
||||
if (color.toLowerCase().includes("color") &&
|
||||
!expected[color].startsWith("rgb")) {
|
||||
expected[color] = getSystemColor(expected[color]);
|
||||
}
|
||||
}
|
||||
|
||||
// Press Down to move the selected item to the next item in the
|
||||
// list and check the colors of this item when it's not selected.
|
||||
EventUtils.synthesizeKey("KEY_ArrowDown", { code: "ArrowDown" });
|
||||
|
||||
if (expected.end) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (expected.unstyled) {
|
||||
ok(!item.hasAttribute("customoptionstyling"),
|
||||
`Item ${index} should not have any custom option styling`);
|
||||
} else {
|
||||
is(getComputedStyle(item).color, expected.color,
|
||||
"Item " + (index) + " has correct foreground color");
|
||||
is(getComputedStyle(item).backgroundColor, expected.backgroundColor,
|
||||
"Item " + (index) + " has correct background color");
|
||||
}
|
||||
}
|
||||
|
||||
function* testSelectColors(select, itemCount, options) {
|
||||
const pageUrl = "data:text/html," + escape(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, itemCount, "Correct number of items");
|
||||
let child = selectPopup.firstChild;
|
||||
let idx = 1;
|
||||
|
||||
if (!options.skipSelectColorTest) {
|
||||
is(getComputedStyle(selectPopup).color, options.selectColor,
|
||||
"popup has expected foreground color");
|
||||
is(getComputedStyle(selectPopup).backgroundColor, options.selectBgColor,
|
||||
"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);
|
||||
}
|
||||
function* doSelectTests(contentType, dtd) {
|
||||
const pageUrl = "data:" + contentType + "," + escape(dtd + "\n" + PAGECONTENT);
|
||||
let tab = yield BrowserTestUtils.openNewForegroundTab(gBrowser, pageUrl);
|
||||
|
|
@ -911,30 +728,6 @@ add_task(function* test_somehidden() {
|
|||
yield BrowserTestUtils.removeTab(tab);
|
||||
});
|
||||
|
||||
// This test checks when a <select> element has styles applied to <option>s within it.
|
||||
add_task(function* test_colors_applied_to_popup_items() {
|
||||
yield testSelectColors(PAGECONTENT_COLORS, 7,
|
||||
{skipSelectColorTest: true});
|
||||
});
|
||||
|
||||
// This test checks when a <select> element has styles applied to itself.
|
||||
add_task(function* test_colors_applied_to_popup() {
|
||||
let options = {
|
||||
selectColor: "rgb(255, 255, 255)",
|
||||
selectBgColor: "rgb(126, 58, 58)"
|
||||
};
|
||||
yield testSelectColors(PAGECONTENT_COLORS_ON_SELECT, 4, options);
|
||||
});
|
||||
|
||||
// This test checks when a <select> element has a transparent background applied to itself.
|
||||
add_task(function* test_transparent_applied_to_popup() {
|
||||
let options = {
|
||||
selectColor: getSystemColor("-moz-ComboboxText"),
|
||||
selectBgColor: getSystemColor("-moz-Combobox")
|
||||
};
|
||||
yield testSelectColors(TRANSPARENT_SELECT, 2, options);
|
||||
});
|
||||
|
||||
// This test checks that the popup is closed when the select element is blurred.
|
||||
add_task(function* test_blur_hides_popup() {
|
||||
const pageUrl = "data:text/html," + escape(PAGECONTENT_SMALL);
|
||||
|
|
@ -966,49 +759,3 @@ 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() {
|
||||
// The popup has a black background and white text, but the
|
||||
// options inside of it have flipped the colors.
|
||||
let options = {
|
||||
selectColor: "rgb(255, 255, 255)",
|
||||
selectBgColor: "rgb(0, 0, 0)"
|
||||
};
|
||||
yield testSelectColors(OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT,
|
||||
2, options);
|
||||
});
|
||||
|
||||
// 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(function* test_select_background_using_important() {
|
||||
yield testSelectColors(GENERIC_OPTION_STYLED_AS_IMPORTANT, 2,
|
||||
{skipSelectColorTest: true});
|
||||
});
|
||||
|
||||
// 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_translucent_select_becomes_opaque() {
|
||||
// The popup is requested to show a translucent background
|
||||
// but we force the alpha channel to 1 on the popup.
|
||||
let options = {
|
||||
selectColor: "rgb(0, 0, 0)",
|
||||
selectBgColor: "rgb(255, 255, 255)"
|
||||
};
|
||||
yield testSelectColors(TRANSLUCENT_SELECT_BECOMES_OPAQUE, 2, options);
|
||||
});
|
||||
|
||||
add_task(function* test_disabled_optgroup_and_options() {
|
||||
// The colors used by this test are platform-specific.
|
||||
if (AppConstants.platform != "win") {
|
||||
return;
|
||||
}
|
||||
|
||||
yield testSelectColors(DISABLED_OPTGROUP_AND_OPTIONS, 17,
|
||||
{skipSelectColorTest: true});
|
||||
});
|
||||
|
|
@ -0,0 +1,227 @@
|
|||
const PAGECONTENT_COLORS =
|
||||
"<html><head><style>" +
|
||||
" .blue { color: #fff; background-color: #00f; }" +
|
||||
" .green { color: #800080; background-color: green; }" +
|
||||
" .defaultColor { color: -moz-ComboboxText; }" +
|
||||
" .defaultBackground { background-color: -moz-Combobox; }" +
|
||||
"</style>" +
|
||||
"<body><select id='one'>" +
|
||||
' <option value="One" style="color: #fff; background-color: #f00;">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgb(255, 0, 0)"}</option>' +
|
||||
' <option value="Two" class="blue">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgb(0, 0, 255)"}</option>' +
|
||||
' <option value="Three" class="green">{"color": "rgb(128, 0, 128)", "backgroundColor": "rgb(0, 128, 0)"}</option>' +
|
||||
' <option value="Four" class="defaultColor defaultBackground">{"color": "-moz-ComboboxText", "backgroundColor": "rgba(0, 0, 0, 0)", "unstyled": "true"}</option>' +
|
||||
' <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>";
|
||||
|
||||
const PAGECONTENT_COLORS_ON_SELECT =
|
||||
"<html><head><style>" +
|
||||
" #one { background-color: #7E3A3A; color: #fff }" +
|
||||
"</style>" +
|
||||
"<body><select id='one'>" +
|
||||
' <option value="One">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <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>";
|
||||
|
||||
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>";
|
||||
|
||||
const 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>";
|
||||
|
||||
const 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>";
|
||||
|
||||
const DISABLED_OPTGROUP_AND_OPTIONS =
|
||||
"<html><head>" +
|
||||
"<body><select id='one'>" +
|
||||
" <optgroup label='{\"color\": \"rgb(0, 0, 0)\", \"backgroundColor\": \"buttonface\"}'>" +
|
||||
' <option disabled="">{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option disabled="">{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
" </optgroup>" +
|
||||
" <optgroup label='{\"color\": \"GrayText\", \"backgroundColor\": \"buttonface\"}' disabled=''>" +
|
||||
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
' <option>{"color": "GrayText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
|
||||
" </optgroup>" +
|
||||
' <option value="Two" 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) {
|
||||
// The label contains a JSON string of the expected colors for
|
||||
// `color` and `background-color`.
|
||||
let expected = JSON.parse(item.label);
|
||||
|
||||
for (let color of Object.keys(expected)) {
|
||||
if (color.toLowerCase().includes("color") &&
|
||||
!expected[color].startsWith("rgb")) {
|
||||
expected[color] = getSystemColor(expected[color]);
|
||||
}
|
||||
}
|
||||
|
||||
// Press Down to move the selected item to the next item in the
|
||||
// list and check the colors of this item when it's not selected.
|
||||
EventUtils.synthesizeKey("KEY_ArrowDown", { code: "ArrowDown" });
|
||||
|
||||
if (expected.end) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (expected.unstyled) {
|
||||
ok(!item.hasAttribute("customoptionstyling"),
|
||||
`Item ${index} should not have any custom option styling`);
|
||||
} else {
|
||||
is(getComputedStyle(item).color, expected.color,
|
||||
"Item " + (index) + " has correct foreground color");
|
||||
is(getComputedStyle(item).backgroundColor, expected.backgroundColor,
|
||||
"Item " + (index) + " has correct background color");
|
||||
}
|
||||
}
|
||||
|
||||
function* testSelectColors(select, itemCount, options) {
|
||||
const pageUrl = "data:text/html," + escape(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, itemCount, "Correct number of items");
|
||||
let child = selectPopup.firstChild;
|
||||
let idx = 1;
|
||||
|
||||
if (!options.skipSelectColorTest) {
|
||||
is(getComputedStyle(selectPopup).color, options.selectColor,
|
||||
"popup has expected foreground color");
|
||||
is(getComputedStyle(selectPopup).backgroundColor, options.selectBgColor,
|
||||
"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);
|
||||
}
|
||||
|
||||
// This test checks when a <select> element has styles applied to <option>s within it.
|
||||
add_task(function* test_colors_applied_to_popup_items() {
|
||||
yield testSelectColors(PAGECONTENT_COLORS, 7,
|
||||
{skipSelectColorTest: true});
|
||||
});
|
||||
|
||||
// This test checks when a <select> element has styles applied to itself.
|
||||
add_task(function* test_colors_applied_to_popup() {
|
||||
let options = {
|
||||
selectColor: "rgb(255, 255, 255)",
|
||||
selectBgColor: "rgb(126, 58, 58)"
|
||||
};
|
||||
yield testSelectColors(PAGECONTENT_COLORS_ON_SELECT, 4, options);
|
||||
});
|
||||
|
||||
// This test checks when a <select> element has a transparent background applied to itself.
|
||||
add_task(function* test_transparent_applied_to_popup() {
|
||||
let options = {
|
||||
selectColor: getSystemColor("-moz-ComboboxText"),
|
||||
selectBgColor: getSystemColor("-moz-Combobox")
|
||||
};
|
||||
yield testSelectColors(TRANSPARENT_SELECT, 2, options);
|
||||
});
|
||||
|
||||
// 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() {
|
||||
// The popup has a black background and white text, but the
|
||||
// options inside of it have flipped the colors.
|
||||
let options = {
|
||||
selectColor: "rgb(255, 255, 255)",
|
||||
selectBgColor: "rgb(0, 0, 0)"
|
||||
};
|
||||
yield testSelectColors(OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT,
|
||||
2, options);
|
||||
});
|
||||
|
||||
// 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(function* test_select_background_using_important() {
|
||||
yield testSelectColors(GENERIC_OPTION_STYLED_AS_IMPORTANT, 2,
|
||||
{skipSelectColorTest: true});
|
||||
});
|
||||
|
||||
// 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_translucent_select_becomes_opaque() {
|
||||
// The popup is requested to show a translucent background
|
||||
// but we force the alpha channel to 1 on the popup.
|
||||
let options = {
|
||||
selectColor: "rgb(0, 0, 0)",
|
||||
selectBgColor: "rgb(255, 255, 255)"
|
||||
};
|
||||
yield testSelectColors(TRANSLUCENT_SELECT_BECOMES_OPAQUE, 2, options);
|
||||
});
|
||||
|
||||
add_task(function* test_disabled_optgroup_and_options() {
|
||||
// The colors used by this test are platform-specific.
|
||||
if (AppConstants.platform != "win") {
|
||||
return;
|
||||
}
|
||||
|
||||
yield testSelectColors(DISABLED_OPTGROUP_AND_OPTIONS, 17,
|
||||
{skipSelectColorTest: true});
|
||||
});
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
/* eslint-env mozilla/frame-script */
|
||||
|
||||
function hideSelectPopup(selectPopup, mode = "enter", win = window) {
|
||||
let browser = win.gBrowser.selectedBrowser;
|
||||
let selectClosedPromise = ContentTask.spawn(browser, null, function*() {
|
||||
Cu.import("resource://gre/modules/SelectContentHelper.jsm");
|
||||
return ContentTaskUtils.waitForCondition(() => !SelectContentHelper.open);
|
||||
});
|
||||
|
||||
if (mode == "escape") {
|
||||
EventUtils.synthesizeKey("KEY_Escape", { code: "Escape" }, win);
|
||||
} else if (mode == "enter") {
|
||||
EventUtils.synthesizeKey("KEY_Enter", { code: "Enter" }, win);
|
||||
} else if (mode == "click") {
|
||||
EventUtils.synthesizeMouseAtCenter(selectPopup.lastChild, { }, win);
|
||||
}
|
||||
|
||||
return selectClosedPromise;
|
||||
}
|
||||
|
|
@ -324,8 +324,6 @@ skip-if = e10s && debug && os == "win" # Bug 1280505
|
|||
support-files =
|
||||
contentSearchUI.html
|
||||
contentSearchUI.js
|
||||
[browser_selectpopup.js]
|
||||
skip-if = os == "linux" # Bug 1329991 - test fails intermittently on Linux builds
|
||||
[browser_selectTabAtIndex.js]
|
||||
[browser_ssl_error_reports.js]
|
||||
[browser_star_hsts.js]
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ MOCHITEST_CHROME_MANIFESTS += [
|
|||
BROWSER_CHROME_MANIFESTS += [
|
||||
'content/test/alerts/browser.ini',
|
||||
'content/test/captivePortal/browser.ini',
|
||||
'content/test/forms/browser.ini',
|
||||
'content/test/general/browser.ini',
|
||||
'content/test/newtab/browser.ini',
|
||||
'content/test/pageinfo/browser.ini',
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче