mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-23 12:51:06 +00:00
Bug 1695565 - Fix appearance-cssom-001.html. r=boris
* Remove some legacy appearance aliases that other engines don't implement. * Allow to pass with unimplemented <compat-auto> values, since per the spec the idea of these is to get them removed, see https://github.com/w3c/csswg-drafts/issues/8506 for the ones we don't implement. * Also allow the `-moz-` prefix to be implemented, because we can't quite get rid of it (people use it to remove the <input type=number> buttons with -moz-appearance: textfield and so on), and the alternative is to implement a bunch of non-standard ::-webkit- pseudo-elements. Differential Revision: https://phabricator.services.mozilla.com/D171243
This commit is contained in:
Emilio Cobos Álvarez
parent
a5b8d26af6
commit
f93fd7bede
@ -253,12 +253,10 @@ exports.CSS_PROPERTIES = {
|
||||
"menuradio",
|
||||
"menuseparator",
|
||||
"meter",
|
||||
"meterbar",
|
||||
"meterchunk",
|
||||
"none",
|
||||
"number-input",
|
||||
"progress-bar",
|
||||
"progressbar",
|
||||
"progresschunk",
|
||||
"radio",
|
||||
"radio-container",
|
||||
@ -297,7 +295,6 @@ exports.CSS_PROPERTIES = {
|
||||
"tabpanels",
|
||||
"textarea",
|
||||
"textfield",
|
||||
"textfield-multiline",
|
||||
"toolbar",
|
||||
"toolbarbutton",
|
||||
"toolbarbutton-dropdown",
|
||||
@ -1508,12 +1505,10 @@ exports.CSS_PROPERTIES = {
|
||||
"menuradio",
|
||||
"menuseparator",
|
||||
"meter",
|
||||
"meterbar",
|
||||
"meterchunk",
|
||||
"none",
|
||||
"number-input",
|
||||
"progress-bar",
|
||||
"progressbar",
|
||||
"progresschunk",
|
||||
"radio",
|
||||
"radio-container",
|
||||
@ -1552,7 +1547,6 @@ exports.CSS_PROPERTIES = {
|
||||
"tabpanels",
|
||||
"textarea",
|
||||
"textfield",
|
||||
"textfield-multiline",
|
||||
"toolbar",
|
||||
"toolbarbutton",
|
||||
"toolbarbutton-dropdown",
|
||||
@ -3518,12 +3512,10 @@ exports.CSS_PROPERTIES = {
|
||||
"menuradio",
|
||||
"menuseparator",
|
||||
"meter",
|
||||
"meterbar",
|
||||
"meterchunk",
|
||||
"none",
|
||||
"number-input",
|
||||
"progress-bar",
|
||||
"progressbar",
|
||||
"progresschunk",
|
||||
"radio",
|
||||
"radio-container",
|
||||
@ -3562,7 +3554,6 @@ exports.CSS_PROPERTIES = {
|
||||
"tabpanels",
|
||||
"textarea",
|
||||
"textfield",
|
||||
"textfield-multiline",
|
||||
"toolbar",
|
||||
"toolbarbutton",
|
||||
"toolbarbutton-dropdown",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<hbox style="appearance: auto; -moz-default-appearance: textfield-multiline; width: 200px; height: 200px;"/>
|
||||
<hbox style="appearance: auto; -moz-default-appearance: textarea; width: 200px; height: 200px;"/>
|
||||
<html:div style="position:fixed;top:0;left:0;width:100%;height:100%;"></html:div>
|
||||
|
||||
</window>
|
||||
|
||||
@ -1726,7 +1726,6 @@ pub enum Appearance {
|
||||
/// A searchfield.
|
||||
Searchfield,
|
||||
/// A multi-line text field, e.g. HTML <textarea>.
|
||||
#[parse(aliases = "textfield-multiline")]
|
||||
Textarea,
|
||||
/// A checkbox element.
|
||||
Checkbox,
|
||||
@ -1737,10 +1736,8 @@ pub enum Appearance {
|
||||
/// List boxes.
|
||||
Listbox,
|
||||
/// A horizontal meter bar.
|
||||
#[parse(aliases = "meterbar")]
|
||||
Meter,
|
||||
/// A horizontal progress bar.
|
||||
#[parse(aliases = "progressbar")]
|
||||
ProgressBar,
|
||||
/// A typical dialog button.
|
||||
Button,
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
[appearance-cssom-001.html]
|
||||
[-webkit-appearance: square-button]
|
||||
expected: FAIL
|
||||
|
||||
[-webkit-appearance: progressbar (invalid)]
|
||||
expected: FAIL
|
||||
|
||||
[-webkit-appearance: push-button]
|
||||
expected: FAIL
|
||||
|
||||
[appearance: square-button]
|
||||
expected: FAIL
|
||||
|
||||
[appearance: push-button]
|
||||
expected: FAIL
|
||||
|
||||
[appearance: slider-horizontal]
|
||||
expected: FAIL
|
||||
|
||||
[-webkit-appearance: meterbar (invalid)]
|
||||
expected: FAIL
|
||||
|
||||
[-webkit-appearance: slider-horizontal]
|
||||
expected: FAIL
|
||||
|
||||
[appearance: textfield-multiline (invalid)]
|
||||
expected: FAIL
|
||||
|
||||
[appearance: meterbar (invalid)]
|
||||
expected: FAIL
|
||||
|
||||
[-moz-appearance (should not be supported)]
|
||||
expected: FAIL
|
||||
|
||||
[appearance: progressbar (invalid)]
|
||||
expected: FAIL
|
||||
|
||||
[-webkit-appearance: textfield-multiline (invalid)]
|
||||
expected: FAIL
|
||||
|
||||
@ -7,32 +7,187 @@
|
||||
<button id=button>Test</button>
|
||||
<script>
|
||||
const button = document.getElementById('button');
|
||||
const values = ["none",
|
||||
"auto",
|
||||
"button",
|
||||
"checkbox",
|
||||
"listbox",
|
||||
"menulist",
|
||||
"menulist-button",
|
||||
"meter",
|
||||
"progress-bar",
|
||||
"push-button",
|
||||
"radio",
|
||||
"searchfield",
|
||||
"slider-horizontal",
|
||||
"square-button",
|
||||
"textarea",
|
||||
"textfield",
|
||||
];
|
||||
const values = [
|
||||
"none",
|
||||
"auto",
|
||||
// <compat-special>
|
||||
"textfield",
|
||||
"menulist-button",
|
||||
];
|
||||
// <compat-auto>
|
||||
const compat_values = [
|
||||
"button",
|
||||
"checkbox",
|
||||
"listbox",
|
||||
"menulist",
|
||||
"meter",
|
||||
"progress-bar",
|
||||
"radio",
|
||||
"searchfield",
|
||||
"textarea",
|
||||
"slider-horizontal",
|
||||
"push-button",
|
||||
"square-button",
|
||||
];
|
||||
const invalid_values = [
|
||||
"bogus-button",
|
||||
"attachment",
|
||||
"button-bevel",
|
||||
"borderless-attachment",
|
||||
"button-arrow-down",
|
||||
"button-arrow-next",
|
||||
"button-arrow-previous",
|
||||
"button-arrow-up",
|
||||
"button-focus",
|
||||
"caps-lock-indicator",
|
||||
"caret",
|
||||
"checkbox-container",
|
||||
"checkbox-label",
|
||||
"checkmenuitem",
|
||||
"color-well",
|
||||
"continuous-capacity-level-indicator",
|
||||
"default-button",
|
||||
"discrete-capacity-level-indicator",
|
||||
"dualbutton",
|
||||
"groupbox",
|
||||
"image-controls-button",
|
||||
"inner-spin-button",
|
||||
"list-button",
|
||||
"listitem",
|
||||
"media-controls-background",
|
||||
"media-controls-dark-bar-background",
|
||||
"media-controls-fullscreen-background",
|
||||
"media-controls-light-bar-background",
|
||||
"media-current-time-display",
|
||||
"media-enter-fullscreen-button",
|
||||
"media-exit-fullscreen-button",
|
||||
"media-fullscreen-volume-slider",
|
||||
"media-fullscreen-volume-slider-thumb",
|
||||
"media-mute-button",
|
||||
"media-overlay-play-button",
|
||||
"media-play-button",
|
||||
"media-return-to-realtime-button",
|
||||
"media-rewind-button",
|
||||
"media-seek-back-button",
|
||||
"media-seek-forward-button",
|
||||
"media-slider",
|
||||
"media-sliderthumb",
|
||||
"media-time-remaining-display",
|
||||
"media-toggle-closed-captions-button",
|
||||
"media-volume-slider",
|
||||
"media-volume-slider-container",
|
||||
"media-volume-slider-mute-button",
|
||||
"media-volume-sliderthumb",
|
||||
"menuarrow",
|
||||
"menubar",
|
||||
"menucheckbox",
|
||||
"menuimage",
|
||||
"menuitem",
|
||||
"menuitemtext",
|
||||
"menulist-text",
|
||||
"menulist-textfield",
|
||||
"menupopup",
|
||||
"menuradio",
|
||||
"menuseparator",
|
||||
"meterbar",
|
||||
"meterchunk",
|
||||
"number-input",
|
||||
"progress-bar-value",
|
||||
"progressbar",
|
||||
"progressbar-vertical",
|
||||
"progresschunk",
|
||||
"progresschunk-vertical",
|
||||
"radio-container",
|
||||
"radio-label",
|
||||
"radiomenuitem",
|
||||
"range",
|
||||
"range-thumb",
|
||||
"rating-level-indicator",
|
||||
"relevancy-level-indicator",
|
||||
"resizer",
|
||||
"resizerpanel",
|
||||
"scale-horizontal",
|
||||
"scale-vertical",
|
||||
"scalethumb-horizontal",
|
||||
"scalethumb-vertical",
|
||||
"scalethumbend",
|
||||
"scalethumbstart",
|
||||
"scalethumbtick",
|
||||
"scrollbarbutton-down",
|
||||
"scrollbarbutton-left",
|
||||
"scrollbarbutton-right",
|
||||
"scrollbarbutton-up",
|
||||
"scrollbarthumb-horizontal",
|
||||
"scrollbarthumb-vertical",
|
||||
"scrollbartrack-horizontal",
|
||||
"scrollbartrack-vertical",
|
||||
"searchfield-cancel-button",
|
||||
"searchfield-decoration",
|
||||
"searchfield-results-button",
|
||||
"searchfield-results-decoration",
|
||||
"separator",
|
||||
"sheet",
|
||||
"slider-vertical",
|
||||
"sliderthumb-horizontal",
|
||||
"sliderthumb-vertical",
|
||||
"snapshotted-plugin-overlay",
|
||||
"spinner",
|
||||
"spinner-downbutton",
|
||||
"spinner-textfield",
|
||||
"spinner-upbutton",
|
||||
"splitter",
|
||||
"statusbar",
|
||||
"statusbarpanel",
|
||||
"tab",
|
||||
"tab-scroll-arrow-back",
|
||||
"tab-scroll-arrow-forward",
|
||||
"tabpanel",
|
||||
"tabpanels",
|
||||
"textfield-multiline",
|
||||
"toolbar",
|
||||
"toolbarbutton",
|
||||
"toolbarbutton-dropdown",
|
||||
"toolbargripper",
|
||||
"toolbox",
|
||||
"tooltip",
|
||||
"treeheader",
|
||||
"treeheadercell",
|
||||
"treeheadersortarrow",
|
||||
"treeitem",
|
||||
"treeline",
|
||||
"treetwisty",
|
||||
"treetwistyopen",
|
||||
"treeview",
|
||||
"-apple-pay-button",
|
||||
"-moz-win-borderless-glass",
|
||||
"-moz-win-browsertabbar-toolbox",
|
||||
"-moz-win-communications-toolbox",
|
||||
"-moz-win-communicationstext",
|
||||
"-moz-win-exclude-glass",
|
||||
"-moz-win-glass",
|
||||
"-moz-win-media-toolbox",
|
||||
"-moz-window-button-box",
|
||||
"-moz-window-button-box-maximized",
|
||||
"-moz-window-button-close",
|
||||
"-moz-window-button-maximize",
|
||||
"-moz-window-button-minimize",
|
||||
"-moz-window-button-restore",
|
||||
"-moz-window-frame-bottom",
|
||||
"-moz-window-frame-left",
|
||||
"-moz-window-frame-right",
|
||||
"-moz-window-titlebar",
|
||||
"-moz-window-titlebar-maximized",
|
||||
];
|
||||
const initial_appearance = getComputedStyle(button).appearance;
|
||||
function assert_style_for_prop(style, prop, value) {
|
||||
let values = Array.isArray(value) ? value : [value];
|
||||
if (prop === '-webkit-appearance') {
|
||||
assert_equals(style.WebkitAppearance, value, 'style.WebkitAppearance (uppercase W)');
|
||||
assert_equals(style.webkitAppearance, value, 'style.webkitAppearance (lowercase w)');
|
||||
assert_in_array(style.WebkitAppearance, values, 'style.WebkitAppearance (uppercase W)');
|
||||
assert_in_array(style.webkitAppearance, values, 'style.webkitAppearance (lowercase w)');
|
||||
} else {
|
||||
assert_equals(style.appearance, value, 'style.appearance');
|
||||
assert_in_array(style.appearance, values, 'style.appearance');
|
||||
}
|
||||
assert_equals(style.getPropertyValue(prop), value, `getPropertyValue(${prop})`);
|
||||
assert_in_array(style.getPropertyValue(prop), values, `getPropertyValue(${prop})`);
|
||||
}
|
||||
for (const prop of ["-webkit-appearance", "appearance"]) {
|
||||
for (const value of values) {
|
||||
@ -48,182 +203,47 @@
|
||||
}, `${prop}: ${value}`);
|
||||
}
|
||||
|
||||
const invalidValues = ["bogus-button",
|
||||
"attachment",
|
||||
"button-bevel",
|
||||
"borderless-attachment",
|
||||
"button-arrow-down",
|
||||
"button-arrow-next",
|
||||
"button-arrow-previous",
|
||||
"button-arrow-up",
|
||||
"button-focus",
|
||||
"caps-lock-indicator",
|
||||
"caret",
|
||||
"checkbox-container",
|
||||
"checkbox-label",
|
||||
"checkmenuitem",
|
||||
"color-well",
|
||||
"continuous-capacity-level-indicator",
|
||||
"default-button",
|
||||
"discrete-capacity-level-indicator",
|
||||
"dualbutton",
|
||||
"groupbox",
|
||||
"image-controls-button",
|
||||
"inner-spin-button",
|
||||
"list-button",
|
||||
"listitem",
|
||||
"media-controls-background",
|
||||
"media-controls-dark-bar-background",
|
||||
"media-controls-fullscreen-background",
|
||||
"media-controls-light-bar-background",
|
||||
"media-current-time-display",
|
||||
"media-enter-fullscreen-button",
|
||||
"media-exit-fullscreen-button",
|
||||
"media-fullscreen-volume-slider",
|
||||
"media-fullscreen-volume-slider-thumb",
|
||||
"media-mute-button",
|
||||
"media-overlay-play-button",
|
||||
"media-play-button",
|
||||
"media-return-to-realtime-button",
|
||||
"media-rewind-button",
|
||||
"media-seek-back-button",
|
||||
"media-seek-forward-button",
|
||||
"media-slider",
|
||||
"media-sliderthumb",
|
||||
"media-time-remaining-display",
|
||||
"media-toggle-closed-captions-button",
|
||||
"media-volume-slider",
|
||||
"media-volume-slider-container",
|
||||
"media-volume-slider-mute-button",
|
||||
"media-volume-sliderthumb",
|
||||
"menuarrow",
|
||||
"menubar",
|
||||
"menucheckbox",
|
||||
"menuimage",
|
||||
"menuitem",
|
||||
"menuitemtext",
|
||||
"menulist-text",
|
||||
"menulist-textfield",
|
||||
"menupopup",
|
||||
"menuradio",
|
||||
"menuseparator",
|
||||
"meterbar",
|
||||
"meterchunk",
|
||||
"number-input",
|
||||
"progress-bar-value",
|
||||
"progressbar",
|
||||
"progressbar-vertical",
|
||||
"progresschunk",
|
||||
"progresschunk-vertical",
|
||||
"radio-container",
|
||||
"radio-label",
|
||||
"radiomenuitem",
|
||||
"range",
|
||||
"range-thumb",
|
||||
"rating-level-indicator",
|
||||
"relevancy-level-indicator",
|
||||
"resizer",
|
||||
"resizerpanel",
|
||||
"scale-horizontal",
|
||||
"scale-vertical",
|
||||
"scalethumb-horizontal",
|
||||
"scalethumb-vertical",
|
||||
"scalethumbend",
|
||||
"scalethumbstart",
|
||||
"scalethumbtick",
|
||||
"scrollbarbutton-down",
|
||||
"scrollbarbutton-left",
|
||||
"scrollbarbutton-right",
|
||||
"scrollbarbutton-up",
|
||||
"scrollbarthumb-horizontal",
|
||||
"scrollbarthumb-vertical",
|
||||
"scrollbartrack-horizontal",
|
||||
"scrollbartrack-vertical",
|
||||
"searchfield-cancel-button",
|
||||
"searchfield-decoration",
|
||||
"searchfield-results-button",
|
||||
"searchfield-results-decoration",
|
||||
"separator",
|
||||
"sheet",
|
||||
"slider-vertical",
|
||||
"sliderthumb-horizontal",
|
||||
"sliderthumb-vertical",
|
||||
"snapshotted-plugin-overlay",
|
||||
"spinner",
|
||||
"spinner-downbutton",
|
||||
"spinner-textfield",
|
||||
"spinner-upbutton",
|
||||
"splitter",
|
||||
"statusbar",
|
||||
"statusbarpanel",
|
||||
"tab",
|
||||
"tab-scroll-arrow-back",
|
||||
"tab-scroll-arrow-forward",
|
||||
"tabpanel",
|
||||
"tabpanels",
|
||||
"textfield-multiline",
|
||||
"toolbar",
|
||||
"toolbarbutton",
|
||||
"toolbarbutton-dropdown",
|
||||
"toolbargripper",
|
||||
"toolbox",
|
||||
"tooltip",
|
||||
"treeheader",
|
||||
"treeheadercell",
|
||||
"treeheadersortarrow",
|
||||
"treeitem",
|
||||
"treeline",
|
||||
"treetwisty",
|
||||
"treetwistyopen",
|
||||
"treeview",
|
||||
"-apple-pay-button",
|
||||
"-moz-win-borderless-glass",
|
||||
"-moz-win-browsertabbar-toolbox",
|
||||
"-moz-win-communications-toolbox",
|
||||
"-moz-win-communicationstext",
|
||||
"-moz-win-exclude-glass",
|
||||
"-moz-win-glass",
|
||||
"-moz-win-media-toolbox",
|
||||
"-moz-window-button-box",
|
||||
"-moz-window-button-box-maximized",
|
||||
"-moz-window-button-close",
|
||||
"-moz-window-button-maximize",
|
||||
"-moz-window-button-minimize",
|
||||
"-moz-window-button-restore",
|
||||
"-moz-window-frame-bottom",
|
||||
"-moz-window-frame-left",
|
||||
"-moz-window-frame-right",
|
||||
"-moz-window-titlebar",
|
||||
"-moz-window-titlebar-maximized",
|
||||
];
|
||||
for (const invalidValue of invalidValues) {
|
||||
for (const value of compat_values) {
|
||||
test(() => {
|
||||
button.removeAttribute('style');
|
||||
button.style.setProperty(prop, invalidValue);
|
||||
button.style.setProperty(prop, value);
|
||||
assert_style_for_prop(button.style, prop, [value, ""]);
|
||||
const style = getComputedStyle(button);
|
||||
assert_style_for_prop(style, prop, [value, "auto"]);
|
||||
button.style.setProperty('background-color', 'black');
|
||||
assert_style_for_prop(style, prop, [value, "auto"],
|
||||
'Computed value should be the specified value or auto if not supported');
|
||||
}, `${prop}: ${value} (compat)`);
|
||||
}
|
||||
|
||||
for (const value of invalid_values) {
|
||||
test(() => {
|
||||
button.removeAttribute('style');
|
||||
button.style.setProperty(prop, value);
|
||||
assert_style_for_prop(button.style, prop, "");
|
||||
const style = getComputedStyle(button);
|
||||
assert_style_for_prop(style, prop, initial_appearance);
|
||||
}, `${prop}: ${invalidValue} (invalid)`);
|
||||
}, `${prop}: ${value} (invalid)`);
|
||||
}
|
||||
}
|
||||
|
||||
for (const prefix of ["-ms-",
|
||||
"mso-",
|
||||
"-moz-",
|
||||
"-o-",
|
||||
"-xv-",
|
||||
"-atsc-",
|
||||
"-wap-",
|
||||
"-khtml-",
|
||||
"-konq-",
|
||||
"-apple-",
|
||||
"prince-",
|
||||
"-ah-",
|
||||
"-hp-",
|
||||
"-ro-",
|
||||
"-rim-",
|
||||
"-tc-",
|
||||
]) {
|
||||
for (const prefix of [
|
||||
"-ms-",
|
||||
"mso-",
|
||||
"-o-",
|
||||
"-xv-",
|
||||
"-atsc-",
|
||||
"-wap-",
|
||||
"-khtml-",
|
||||
"-konq-",
|
||||
"-apple-",
|
||||
"prince-",
|
||||
"-ah-",
|
||||
"-hp-",
|
||||
"-ro-",
|
||||
"-rim-",
|
||||
"-tc-",
|
||||
]) {
|
||||
const prop = `${prefix}appearance`;
|
||||
test(() => {
|
||||
button.removeAttribute('style');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user