<!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.">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<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 initial_appearance = getComputedStyle(button).appearance;
  function assert_style_for_prop(style, prop, value) {
    if (prop === '-webkit-appearance') {
      assert_equals(style.WebkitAppearance, value, 'style.WebkitAppearance (uppercase W)');
      assert_equals(style.webkitAppearance, value, 'style.webkitAppearance (lowercase w)');
    } else {
      assert_equals(style.appearance, value, 'style.appearance');
    }
    assert_equals(style.getPropertyValue(prop), value, `getPropertyValue(${prop})`);
  }
  for (const prop of ["-webkit-appearance", "appearance"]) {
    for (const value of 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}`);
    }

    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) {
      test(() => {
        button.removeAttribute('style');
        button.style.setProperty(prop, invalidValue);
        assert_style_for_prop(button.style, prop, "");
        const style = getComputedStyle(button);
        assert_style_for_prop(style, prop, initial_appearance);
      }, `${prop}: ${invalidValue} (invalid)`);
    }
  }

  for (const prefix of ["-ms-",
                        "mso-",
                        "-moz-",
                        "-o-",
                        "-xv-",
                        "-atsc-",
                        "-wap-",
                        "-khtml-",
                        "-konq-",
                        "-apple-",
                        "prince-",
                        "-ah-",
                        "-hp-",
                        "-ro-",
                        "-rim-",
                        "-tc-",
                        ]) {
    const prop = `${prefix}appearance`;
    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>