зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1354196 - Forward the text-shadow CSS property to the select popup for styling. r=mossop
MozReview-Commit-ID: 3jzZOIiJyXT --HG-- extra : rebase_source : 1c223d7c90c72c32386a46dccaa745fd19418fae
This commit is contained in:
Jared Wein
Родитель
e0f097b470
Коммит
169ec2a84e
|
|
@ -139,6 +139,14 @@ const SELECT_STYLE_OF_OPTION_CHANGES_AFTER_TRANSITIONEND =
|
|||
' <option selected="true">{"end": "true"}</option>' +
|
||||
"</select></body></html>";
|
||||
|
||||
const SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW =
|
||||
"<html><head><style>" +
|
||||
" select { color: transparent; text-shadow: 0 0 0 #303030; }" +
|
||||
"</style></head><body><select id='one'>" +
|
||||
' <option>{"color": "rgba(0, 0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)", "textShadow": "rgb(48, 48, 48) 0px 0px 0px"}</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");
|
||||
|
|
@ -174,6 +182,10 @@ function testOptionColors(index, item, menulist) {
|
|||
"Item " + (index) + " has correct foreground color");
|
||||
is(getComputedStyle(item).backgroundColor, expected.backgroundColor,
|
||||
"Item " + (index) + " has correct background color");
|
||||
if (expected.textShadow) {
|
||||
is(getComputedStyle(item).textShadow, expected.textShadow,
|
||||
"Item " + (index) + " has correct text-shadow color");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -205,6 +217,11 @@ function* testSelectColors(select, itemCount, options) {
|
|||
is(getComputedStyle(selectPopup).color, options.selectColor,
|
||||
"popup has expected foreground color");
|
||||
|
||||
if (options.selectTextShadow) {
|
||||
is(getComputedStyle(selectPopup).textShadow, options.selectTextShadow,
|
||||
"popup has expected text-shadow color");
|
||||
}
|
||||
|
||||
// Combine the select popup's backgroundColor and the
|
||||
// backgroundImage color to get the color that is seen by
|
||||
// the user.
|
||||
|
|
@ -388,3 +405,12 @@ add_task(function* test_style_of_options_is_dependent_on_transitionend() {
|
|||
yield testSelectColors(SELECT_STYLE_OF_OPTION_CHANGES_AFTER_TRANSITIONEND, 2, options);
|
||||
});
|
||||
|
||||
add_task(function* test_transparent_color_with_text_shadow() {
|
||||
let options = {
|
||||
selectColor: "rgba(0, 0, 0, 0)",
|
||||
selectTextShadow: "rgb(48, 48, 48) 0px 0px 0px",
|
||||
selectBgColor: "rgb(255, 255, 255)"
|
||||
};
|
||||
|
||||
yield testSelectColors(SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW, 2, options);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1088,7 +1088,7 @@
|
|||
this._selectParentHelper.populate(menulist, data.options, data.selectedIndex, this._fullZoom,
|
||||
data.uaBackgroundColor, data.uaColor,
|
||||
data.uaSelectBackgroundColor, data.uaSelectColor,
|
||||
data.selectBackgroundColor, data.selectColor);
|
||||
data.selectBackgroundColor, data.selectColor, data.selectTextShadow);
|
||||
this._selectParentHelper.open(this, menulist, data.rect, data.isOpenedViaTouch);
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -478,7 +478,7 @@
|
|||
this._selectParentHelper.populate(menulist, data.options, data.selectedIndex,
|
||||
zoom, data.uaBackgroundColor, data.uaColor,
|
||||
data.uaSelectBackgroundColor, data.uaSelectColor,
|
||||
data.selectBackgroundColor, data.selectColor);
|
||||
data.selectBackgroundColor, data.selectColor, data.selectTextShadow);
|
||||
this._selectParentHelper.open(this, menulist, data.rect, data.isOpenedViaTouch);
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,6 +100,7 @@ this.SelectContentHelper.prototype = {
|
|||
let computedStyles = getComputedStyles(this.element);
|
||||
this._selectBackgroundColor = computedStyles.backgroundColor;
|
||||
this._selectColor = computedStyles.color;
|
||||
this._selectTextShadow = computedStyles.textShadow;
|
||||
DOMUtils.clearPseudoClassLocks(this.element);
|
||||
this.global.sendAsyncMessage("Forms:ShowDropDown", {
|
||||
direction: computedStyles.direction,
|
||||
|
|
@ -109,6 +110,7 @@ this.SelectContentHelper.prototype = {
|
|||
selectedIndex: this.element.selectedIndex,
|
||||
selectBackgroundColor: this._selectBackgroundColor,
|
||||
selectColor: this._selectColor,
|
||||
selectTextShadow: this._selectTextShadow,
|
||||
uaBackgroundColor: this.uaBackgroundColor,
|
||||
uaColor: this.uaColor,
|
||||
uaSelectBackgroundColor: this.uaSelectBackgroundColor,
|
||||
|
|
@ -138,12 +140,14 @@ this.SelectContentHelper.prototype = {
|
|||
let computedStyles = getComputedStyles(this.element);
|
||||
this._selectBackgroundColor = computedStyles.backgroundColor;
|
||||
this._selectColor = computedStyles.color;
|
||||
this._selectTextShadow = computedStyles.textShadow;
|
||||
DOMUtils.clearPseudoClassLocks(this.element);
|
||||
this.global.sendAsyncMessage("Forms:UpdateDropDown", {
|
||||
options: this._buildOptionList(),
|
||||
selectedIndex: this.element.selectedIndex,
|
||||
selectBackgroundColor: this._selectBackgroundColor,
|
||||
selectColor: this._selectColor,
|
||||
selectTextShadow: this._selectTextShadow,
|
||||
uaBackgroundColor: this.uaBackgroundColor,
|
||||
uaColor: this.uaColor,
|
||||
uaSelectBackgroundColor: this.uaSelectBackgroundColor,
|
||||
|
|
@ -335,6 +339,10 @@ function buildOptionListForChildren(node) {
|
|||
children: tagName == "OPTGROUP" ? buildOptionListForChildren(child) : []
|
||||
};
|
||||
|
||||
if (cs.textShadow != "none") {
|
||||
info.textShadow = cs.textShadow;
|
||||
}
|
||||
|
||||
// We must wait until all computedStyles have been
|
||||
// read before we clear the locks.
|
||||
DOMUtils.clearPseudoClassLocks(child);
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@ var usedSelectBackgroundColor;
|
|||
|
||||
this.SelectParentHelper = {
|
||||
populate(menulist, items, selectedIndex, zoom, uaBackgroundColor, uaColor,
|
||||
uaSelectBackgroundColor, uaSelectColor, selectBackgroundColor, selectColor) {
|
||||
uaSelectBackgroundColor, uaSelectColor, selectBackgroundColor, selectColor,
|
||||
selectTextShadow) {
|
||||
// Clear the current contents of the popup
|
||||
menulist.menupopup.textContent = "";
|
||||
let stylesheet = menulist.querySelector("#ContentSelectDropdownScopedStylesheet");
|
||||
|
|
@ -68,6 +69,11 @@ this.SelectParentHelper = {
|
|||
ruleBody += `color: ${selectColor};`;
|
||||
}
|
||||
|
||||
if (customStylingEnabled &&
|
||||
selectTextShadow != "none") {
|
||||
ruleBody += `text-shadow: ${selectTextShadow};`;
|
||||
}
|
||||
|
||||
if (ruleBody) {
|
||||
sheet.insertRule(`menupopup {
|
||||
${ruleBody}
|
||||
|
|
@ -195,10 +201,11 @@ this.SelectParentHelper = {
|
|||
let uaSelectColor = msg.data.uaSelectColor;
|
||||
let selectBackgroundColor = msg.data.selectBackgroundColor;
|
||||
let selectColor = msg.data.selectColor;
|
||||
let selectTextShadow = msg.data.selectTextShadow;
|
||||
this.populate(currentMenulist, options, selectedIndex,
|
||||
currentZoom, uaBackgroundColor, uaColor,
|
||||
uaSelectBackgroundColor, uaSelectColor,
|
||||
selectBackgroundColor, selectColor);
|
||||
selectBackgroundColor, selectColor, selectTextShadow);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -270,10 +277,25 @@ function populateChildren(menulist, options, selectedIndex, zoom,
|
|||
ruleBody += `color: ${option.color};`;
|
||||
}
|
||||
|
||||
if (customStylingEnabled &&
|
||||
option.textShadow) {
|
||||
ruleBody += `text-shadow: ${option.textShadow};`;
|
||||
}
|
||||
|
||||
if (ruleBody) {
|
||||
sheet.insertRule(`menupopup > :nth-child(${nthChildIndex}):not([_moz-menuactive="true"]) {
|
||||
${ruleBody}
|
||||
}`, 0);
|
||||
|
||||
if (option.textShadow) {
|
||||
// Need to explicitly disable the possibly inherited
|
||||
// text-shadow rule when _moz-menuactive=true since
|
||||
// _moz-menuactive=true disables custom option styling.
|
||||
sheet.insertRule(`menupopup > :nth-child(${nthChildIndex})[_moz-menuactive="true"] {
|
||||
text-shadow: none;
|
||||
}`, 0);
|
||||
}
|
||||
|
||||
item.setAttribute("customoptionstyling", "true");
|
||||
} else {
|
||||
item.removeAttribute("customoptionstyling");
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче