appearance-cssom-001.html (7666B)
1 <!doctype html> 2 <title>CSS Basic User Interface Test: appearance CSSOM</title> 3 <link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> 4 <meta name="assert" content="CSSOM for the appearance/-webkit-appearance property is correct."> 5 <meta name="variant" content="?include=Invalid"> 6 <meta name="variant" content="?exclude=Invalid"> 7 <script src=/resources/testharness.js></script> 8 <script src=/resources/testharnessreport.js></script> 9 <script src="/common/subset-tests-by-key.js"></script> 10 <button id=button>Test</button> 11 <script> 12 const button = document.getElementById('button'); 13 const values = [ 14 "none", 15 "auto", 16 // <compat-special> 17 "textfield", 18 "menulist-button", 19 ]; 20 // <compat-auto> 21 const compat_values = [ 22 "button", 23 "checkbox", 24 "listbox", 25 "menulist", 26 "meter", 27 "progress-bar", 28 "radio", 29 "searchfield", 30 "textarea", 31 ]; 32 const invalid_values = [ 33 "bogus-button", 34 "attachment", 35 "button-bevel", 36 "borderless-attachment", 37 "button-arrow-down", 38 "button-arrow-next", 39 "button-arrow-previous", 40 "button-arrow-up", 41 "button-focus", 42 "caps-lock-indicator", 43 "caret", 44 "checkbox-container", 45 "checkbox-label", 46 "checkmenuitem", 47 "color-well", 48 "continuous-capacity-level-indicator", 49 "default-button", 50 "discrete-capacity-level-indicator", 51 "dualbutton", 52 "groupbox", 53 "image-controls-button", 54 "inner-spin-button", 55 "list-button", 56 "listitem", 57 "media-controls-background", 58 "media-controls-dark-bar-background", 59 "media-controls-fullscreen-background", 60 "media-controls-light-bar-background", 61 "media-current-time-display", 62 "media-enter-fullscreen-button", 63 "media-exit-fullscreen-button", 64 "media-fullscreen-volume-slider", 65 "media-fullscreen-volume-slider-thumb", 66 "media-mute-button", 67 "media-overlay-play-button", 68 "media-play-button", 69 "media-return-to-realtime-button", 70 "media-rewind-button", 71 "media-seek-back-button", 72 "media-seek-forward-button", 73 "media-slider", 74 "media-sliderthumb", 75 "media-time-remaining-display", 76 "media-toggle-closed-captions-button", 77 "media-volume-slider", 78 "media-volume-slider-container", 79 "media-volume-slider-mute-button", 80 "media-volume-sliderthumb", 81 "menuarrow", 82 "menubar", 83 "menucheckbox", 84 "menuimage", 85 "menuitem", 86 "menuitemtext", 87 "menulist-text", 88 "menulist-textfield", 89 "menupopup", 90 "menuradio", 91 "menuseparator", 92 "meterbar", 93 "meterchunk", 94 "number-input", 95 "progress-bar-value", 96 "progressbar", 97 "progressbar-vertical", 98 "progresschunk", 99 "progresschunk-vertical", 100 "push-button", 101 "radio-container", 102 "radio-label", 103 "radiomenuitem", 104 "range", 105 "range-thumb", 106 "rating-level-indicator", 107 "relevancy-level-indicator", 108 "resizer", 109 "resizerpanel", 110 "scale-horizontal", 111 "scale-vertical", 112 "scalethumb-horizontal", 113 "scalethumb-vertical", 114 "scalethumbend", 115 "scalethumbstart", 116 "scalethumbtick", 117 "scrollbarbutton-down", 118 "scrollbarbutton-left", 119 "scrollbarbutton-right", 120 "scrollbarbutton-up", 121 "scrollbarthumb-horizontal", 122 "scrollbarthumb-vertical", 123 "scrollbartrack-horizontal", 124 "scrollbartrack-vertical", 125 "searchfield-cancel-button", 126 "searchfield-decoration", 127 "searchfield-results-button", 128 "searchfield-results-decoration", 129 "separator", 130 "sheet", 131 "slider-horizontal", 132 "slider-vertical", 133 "sliderthumb-horizontal", 134 "sliderthumb-vertical", 135 "snapshotted-plugin-overlay", 136 "spinner", 137 "spinner-downbutton", 138 "spinner-textfield", 139 "spinner-upbutton", 140 "splitter", 141 "square-button", 142 "statusbar", 143 "statusbarpanel", 144 "tab", 145 "tab-scroll-arrow-back", 146 "tab-scroll-arrow-forward", 147 "tabpanel", 148 "tabpanels", 149 "textfield-multiline", 150 "toolbar", 151 "toolbarbutton", 152 "toolbarbutton-dropdown", 153 "toolbargripper", 154 "toolbox", 155 "tooltip", 156 "treeheader", 157 "treeheadercell", 158 "treeheadersortarrow", 159 "treeitem", 160 "treeline", 161 "treetwisty", 162 "treetwistyopen", 163 "treeview", 164 "-apple-pay-button", 165 "-moz-win-borderless-glass", 166 "-moz-win-browsertabbar-toolbox", 167 "-moz-win-communications-toolbox", 168 "-moz-win-communicationstext", 169 "-moz-win-exclude-glass", 170 "-moz-win-glass", 171 "-moz-win-media-toolbox", 172 "-moz-window-button-box", 173 "-moz-window-button-box-maximized", 174 "-moz-window-button-close", 175 "-moz-window-button-maximize", 176 "-moz-window-button-minimize", 177 "-moz-window-button-restore", 178 "-moz-window-frame-bottom", 179 "-moz-window-frame-left", 180 "-moz-window-frame-right", 181 "-moz-window-titlebar", 182 "-moz-window-titlebar-maximized", 183 ]; 184 const initial_appearance = getComputedStyle(button).appearance; 185 function assert_style_for_prop(style, prop, value) { 186 let values = Array.isArray(value) ? value : [value]; 187 if (prop === '-webkit-appearance') { 188 assert_in_array(style.WebkitAppearance, values, 'style.WebkitAppearance (uppercase W)'); 189 assert_in_array(style.webkitAppearance, values, 'style.webkitAppearance (lowercase w)'); 190 } else { 191 assert_in_array(style.appearance, values, 'style.appearance'); 192 } 193 assert_in_array(style.getPropertyValue(prop), values, `getPropertyValue(${prop})`); 194 } 195 for (const prop of ["-webkit-appearance", "appearance"]) { 196 for (const value of values) { 197 subsetTestByKey(`Values`, test, () => { 198 button.removeAttribute('style'); 199 button.style.setProperty(prop, value); 200 assert_style_for_prop(button.style, prop, value); 201 const style = getComputedStyle(button); 202 assert_style_for_prop(style, prop, value); 203 button.style.setProperty('background-color', 'black'); 204 assert_style_for_prop(style, prop, value, 205 'Computed value should be the specified value'); 206 }, `${prop}: ${value}`); 207 } 208 209 for (const value of compat_values) { 210 subsetTestByKey(`Compat`, test, () => { 211 button.removeAttribute('style'); 212 button.style.setProperty(prop, value); 213 assert_style_for_prop(button.style, prop, [value, ""]); 214 const style = getComputedStyle(button); 215 assert_style_for_prop(style, prop, [value, "auto"]); 216 button.style.setProperty('background-color', 'black'); 217 assert_style_for_prop(style, prop, [value, "auto"], 218 'Computed value should be the specified value or auto if not supported'); 219 }, `${prop}: ${value} (compat)`); 220 } 221 222 for (const value of invalid_values) { 223 subsetTestByKey(`Invalid`, test, () => { 224 button.removeAttribute('style'); 225 button.style.setProperty(prop, value); 226 assert_style_for_prop(button.style, prop, ""); 227 const style = getComputedStyle(button); 228 assert_style_for_prop(style, prop, initial_appearance); 229 }, `${prop}: ${value} (invalid)`); 230 } 231 } 232 233 for (const prefix of [ 234 "-ms-", 235 "mso-", 236 "-o-", 237 "-xv-", 238 "-atsc-", 239 "-wap-", 240 "-khtml-", 241 "-konq-", 242 "-apple-", 243 "prince-", 244 "-ah-", 245 "-hp-", 246 "-ro-", 247 "-rim-", 248 "-tc-", 249 ]) { 250 const prop = `${prefix}appearance`; 251 subsetTestByKey(`Prefixes`, test, () => { 252 button.removeAttribute('style'); 253 button.style.setProperty(prop, 'none'); 254 assert_equals(button.style.getPropertyValue(prop), ''); 255 const style = getComputedStyle(button); 256 assert_equals(style.getPropertyValue(prop), ''); 257 }, `${prop} (should not be supported)`); 258 } 259 </script>