<!doctype html>
<title>CSS Basic User Interface Test: appearance CSSOM</title>
<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching">
<meta name="assert" content="CSSOM for the appearance/-webkit-appearance property is correct.">
<meta name="variant" content="?include=Invalid">
<meta name="variant" content="?exclude=Invalid">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script src="/common/subset-tests-by-key.js"></script>
<button id=button>Test</button>
<script>
const button = document.getElementById('button');
const values = [
"none",
"auto",
// <compat-special>
"textfield",
"menulist-button",
];
// <compat-auto>
const compat_values = [
"button",
"checkbox",
"listbox",
"menulist",
"meter",
"progress-bar",
"radio",
"searchfield",
"textarea",
];
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",
"push-button",
"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-horizontal",
"slider-vertical",
"sliderthumb-horizontal",
"sliderthumb-vertical",
"snapshotted-plugin-overlay",
"spinner",
"spinner-downbutton",
"spinner-textfield",
"spinner-upbutton",
"splitter",
"square-button",
"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_in_array(style.WebkitAppearance, values, 'style.WebkitAppearance (uppercase W)');
assert_in_array(style.webkitAppearance, values, 'style.webkitAppearance (lowercase w)');
} else {
assert_in_array(style.appearance, values, 'style.appearance');
}
assert_in_array(style.getPropertyValue(prop), values, `getPropertyValue(${prop})`);
}
for (const prop of ["-webkit-appearance", "appearance"]) {
for (const value of values) {
subsetTestByKey(`Values`, test, () => {
button.removeAttribute('style');
button.style.setProperty(prop, value);
assert_style_for_prop(button.style, prop, value);
const style = getComputedStyle(button);
assert_style_for_prop(style, prop, value);
button.style.setProperty('background-color', 'black');
assert_style_for_prop(style, prop, value,
'Computed value should be the specified value');
}, `${prop}: ${value}`);
}
for (const value of compat_values) {
subsetTestByKey(`Compat`, test, () => {
button.removeAttribute('style');
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) {
subsetTestByKey(`Invalid`, 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}: ${value} (invalid)`);
}
}
for (const prefix of [
"-ms-",
"mso-",
"-o-",
"-xv-",
"-atsc-",
"-wap-",
"-khtml-",
"-konq-",
"-apple-",
"prince-",
"-ah-",
"-hp-",
"-ro-",
"-rim-",
"-tc-",
]) {
const prop = `${prefix}appearance`;
subsetTestByKey(`Prefixes`, test, () => {
button.removeAttribute('style');
button.style.setProperty(prop, 'none');
assert_equals(button.style.getPropertyValue(prop), '');
const style = getComputedStyle(button);
assert_equals(style.getPropertyValue(prop), '');
}, `${prop} (should not be supported)`);
}
</script>
Codebase Browser
chromium