259 lines
7.5 KiB
HTML
259 lines
7.5 KiB
HTML
<!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>
|