Content - 210944522a9a7dd6797d8b01f33c76e19b0b320b - 37f21ce/compat/webkit-appearance.html

visit type:

Tip revision: e15d2c1a2afc866b09d31558d1af451227be2dca authored by Raymond Toy on 20 September 2018, 21:42:05 UTC
Sub-sample accurate start for ABSN

Tip revision: e15d2c1

webkit-appearance.html

<!doctype html>
<title>-webkit-appearance</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<button id=button>Test</button>
<script>
  const button = document.getElementById('button');
  // values from https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
  // intersection of Firefox and Chrome.
  const values = ["none",
                  "button",
                  "button-bevel",
                  "caret",
                  "checkbox",
                  "listbox",
                  "listitem",
                  "menulist",
                  "menulist-button",
                  "menulist-text",
                  "menulist-textfield",
                  "radio",
                  "searchfield",
                  "textfield",
                 ];
  for (const value of values) {
    test(() => {
      button.removeAttribute('style');
      button.style.setProperty('-webkit-appearance', value);
      assert_equals(button.style.WebkitAppearance, value);
      assert_equals(button.style.webkitAppearance, value); // lowercase w
      const style = getComputedStyle(button);
      assert_equals(style.WebkitAppearance, value);
      assert_equals(style.webkitAppearance, value); // lowercase w
    }, `-webkit-appearance: ${value}`);
  }

  const invalidValues = ["bogus-button"];
  for (const invalidValue of invalidValues) {
    test(() => {
      button.removeAttribute('style');
      button.style.setProperty('-webkit-appearance', invalidValue);
      assert_equals(button.style.WebkitAppearance, "");
      assert_equals(button.style.webkitAppearance, ""); // lowercase w
      const style = getComputedStyle(button);
      assert_equals(style.WebkitAppearance, "button");
      assert_equals(style.webkitAppearance, "button"); // lowercase w
    }, `-webkit-appearance: ${invalidValue} (invalid)`);
  }

  test(() => {
    button.removeAttribute('style');
    button.style.setProperty('appearance', 'auto');
    assert_equals(button.style.appearance, undefined);
    const style = getComputedStyle(button);
    assert_equals(style.appearance, undefined);
  }, 'appearance');
</script>

Browse the archive

https://github.com/web-platform-tests/wpt