Bug 1486548 [wpt PR 12700] - Compat: Test -webkit-appearance and appe…

…arance properties, a=testonly Automatic update from web-platform-testsCompat: Test -webkit-appearance and appearance properties See whatwg/compat#104 -- wpt-commits: 5d94e928e6e04c7506b11c8b10fcd7a9caffac82 wpt-pr: 12700 UltraBlame original commit: 069971381d90dae4091924fdce90db18b16846c9
marco-c · Oct 3, 2019 · 29e5799 · 29e5799
1 parent 87c294e
commit 29e5799
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/testing/web-platform/meta/MANIFEST.json b/testing/web-platform/meta/MANIFEST.json
@@ -324998,6 +324998,12 @@
      {}
     ]
    ],
+   "compat/webkit-appearance.html": [
+    [
+     "/compat/webkit-appearance.html",
+     {}
+    ]
+   ],
    "compat/webkit-text-fill-color-currentColor.html": [
     [
      "/compat/webkit-text-fill-color-currentColor.html",
@@ -436563,6 +436569,10 @@
    "91793af71e741ef6546d1eca37e93338ab2779f7",
    "testharness"
   ],
+  "compat/webkit-appearance.html": [
+   "210944522a9a7dd6797d8b01f33c76e19b0b320b",
+   "testharness"
+  ],
   "compat/webkit-background-origin-text-ref.html": [
    "d1f183874c09d7984d461e577151008e5b363b2c",
    "support"

diff --git a/testing/web-platform/tests/compat/webkit-appearance.html b/testing/web-platform/tests/compat/webkit-appearance.html
@@ -0,0 +1,57 @@
+<!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>