| <!DOCTYPE html> |
| <title>-webkit-appearance support</title> |
| <!-- There is no spec for -webkit-appearance. It is supported in Opera, Safari, |
| Chrome, and Edge. Firefox has expressed intent to support it. --> |
| <link rel="help" href="https://github.com/whatwg/compat/issues/6"> |
| <meta name="assert" content="This test checks for support of the -webkit-appearance CSS attribute." /> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <div id="tester"></div> |
| |
| <script> |
| const WEBKIT_APPEARANCE_VALUES = [ |
| 'none', |
| 'checkbox', |
| 'radio', |
| 'push-button', |
| 'square-button', |
| 'button', |
| 'button-bevel', |
| 'inner-spin-button', |
| 'listbox', |
| 'listitem', |
| 'media-enter-fullscreen-button', |
| 'media-exit-fullscreen-button', |
| 'media-mute-button', |
| 'media-play-button', |
| 'media-overlay-play-button', |
| 'media-toggle-closed-captions-button', |
| 'media-slider', |
| 'media-sliderthumb', |
| 'media-volume-slider-container', |
| 'media-volume-slider', |
| 'media-volume-sliderthumb', |
| 'media-controls-background', |
| 'media-controls-fullscreen-background', |
| 'media-current-time-display', |
| 'media-time-remaining-display', |
| 'menulist', |
| 'menulist-button', |
| 'menulist-text', |
| 'menulist-textfield', |
| 'meter', |
| 'progress-bar', |
| 'progress-bar-value', |
| 'slider-horizontal', |
| 'slider-vertical', |
| 'sliderthumb-horizontal', |
| 'sliderthumb-vertical', |
| 'caret', |
| 'searchfield', |
| 'searchfield-cancel-button', |
| 'textfield', |
| 'textarea', |
| ]; |
| |
| for (const appearance_value of WEBKIT_APPEARANCE_VALUES) { |
| test(() => { |
| const div = document.getElementById('tester'); |
| div.style = `-webkit-appearance: ${appearance_value}`; |
| assert_equals(getComputedStyle(div).webkitAppearance, appearance_value); |
| }); |
| } |
| </script> |
