Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-11 12:25:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1352963 - Update the styling of the select popup after transitionend. r=mossop

Browse Source 
MozReview-Commit-ID: 5WuRvMDYahZ

--HG--
extra : rebase_source : ab841ad17194a7ff9506155e13747bb9bd750833
This commit is contained in:
Jared Wein 2017-04-03 22:52:16 -04:00
parent ef29d11729
commit 8507a1dbb7
2 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
browser/base/content/test/forms/browser_selectpopup_colors.js
View File

@ -130,6 +130,15 @@ const SELECT_STYLE_OF_OPTION_CHANGES_AFTER_FOCUS_EVENT =
" select.addEventListener('focus', () => select.style.color = 'red');" +
"</script></html>";
const SELECT_STYLE_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>";
function getSystemColor(color) {
// Need to convert system color to RGB color.
let textarea = document.createElementNS("http://www.w3.org/1999/xhtml", "textarea");
@ -355,7 +364,7 @@ add_task(function* test_style_of_options_is_dependent_on_focus_of_select() {
yield testSelectColors(SELECT_STYLE_OF_OPTION_IS_BASED_ON_FOCUS_OF_SELECT, 2, options);
});
add_task(function* test_style_of_options_is_dependent_on_focus_of_select() {
add_task(function* test_style_of_options_is_dependent_on_focus_of_select_after_event() {
let options = {
skipSelectColorTest: true,
waitForComputedStyle: {
@ -365,3 +374,17 @@ add_task(function* test_style_of_options_is_dependent_on_focus_of_select() {
};
yield testSelectColors(SELECT_STYLE_OF_OPTION_CHANGES_AFTER_FOCUS_EVENT, 2, options);
});
add_task(function* test_style_of_options_is_dependent_on_transitionend() {
let options = {
selectColor: "rgb(0, 0, 0)",
selectBgColor: "rgb(255, 165, 0)",
waitForComputedStyle: {
property: "background-image",
value: "linear-gradient(rgb(255, 165, 0), rgb(255, 165, 0))"
}
};
yield testSelectColors(SELECT_STYLE_OF_OPTION_CHANGES_AFTER_TRANSITIONEND, 2, options);
});

5
toolkit/modules/SelectContentHelper.jsm
View File

@ -63,6 +63,7 @@ this.SelectContentHelper.prototype = {
this.global.addEventListener("pagehide", this, { mozSystemGroup: true });
this.global.addEventListener("mozhidedropdown", this, { mozSystemGroup: true });
this.element.addEventListener("blur", this, { mozSystemGroup: true });
this.element.addEventListener("transitionend", this, { mozSystemGroup: true });
let MutationObserver = this.element.ownerGlobal.MutationObserver;
this.mut = new MutationObserver(mutations => {
// Something changed the <select> while it was open, so
@ -83,6 +84,7 @@ this.SelectContentHelper.prototype = {
this.global.removeEventListener("pagehide", this, { mozSystemGroup: true });
this.global.removeEventListener("mozhidedropdown", this, { mozSystemGroup: true });
this.element.removeEventListener("blur", this, { mozSystemGroup: true });
this.element.removeEventListener("transitionend", this, { mozSystemGroup: true });
this.element = null;
this.global = null;
this.mut.disconnect();
@ -281,6 +283,9 @@ this.SelectContentHelper.prototype = {
this.uninit();
}
break;
case "transitionend":
this._update();
break;
}
}