1 files changed, 56 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-ui/appearance-property.html b/testing/web-platform/tests/css/css-ui/appearance-property.html
new file mode 100644
index 0000000000..53b98ba605
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/appearance-property.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Property references to `appearance`</title>
+  <link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<script>
+function create(initialValue) {
+  var style = document.createElement('input').style;
+
+  style.setProperty('appearance', initialValue);
+
+  return style;
+}
+
+test(function() {
+  var style = create('');
+
+  style.setProperty('appearance', 'none');
+
+  assert_equals(style.appearance, 'none');
+}, 'setProperty');
+
+test(function() {
+  var style = create('none');
+
+  style.removeProperty('appearance');
+
+  assert_equals(style.appearance, '');
+}, 'removeProperty');
+
+test(function() {
+  var style = create('');
+
+  style['appearance'] = 'none';
+
+  assert_equals(style.appearance, 'none');
+}, 'property assignment');
+
+test(function() {
+  var style = create('none');
+
+  assert_equals(style.getPropertyValue('appearance'), 'none');
+}, 'getPropertyValue');
+
+test(function() {
+  var style = create('none');
+
+  assert_equals(style['appearance'], 'none');
+}, 'property access');
+</script>
+</body>