<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Property references to `-webkit-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('-webkit-appearance', 'none'); assert_equals(style.appearance, 'none'); }, 'setProperty - CSS property name'); test(function() { var style = create(''); style.setProperty('WebkitAppearance', 'none'); assert_equals(style.appearance, ''); }, 'setProperty - camel-cased property name (ignored)'); test(function() { var style = create(''); style.setProperty('webkitAppearance', 'none'); assert_equals(style.appearance, ''); }, 'setProperty - webkit-cased property name (ignored)'); test(function() { var style = create('none'); style.removeProperty('-webkit-appearance'); assert_equals(style.appearance, ''); }, 'removeProperty - CSS property name'); test(function() { var style = create('none'); style.removeProperty('WebkitAppearance'); assert_equals(style.appearance, 'none'); }, 'removeProperty - camel-cased property name (ignored)'); test(function() { var style = create('none'); style.removeProperty('webkitAppearance'); assert_equals(style.appearance, 'none'); }, 'removeProperty - webkit-cased property name (ignored)'); test(function() { var style = create(''); style['-webkit-appearance'] = 'none'; assert_equals(style.appearance, 'none'); }, 'property assignment - CSS property name'); test(function() { var style = create(''); style['WebkitAppearance'] = 'none'; assert_equals(style.appearance, 'none'); }, 'property assignment - camel-cased property name'); test(function() { var style = create(''); style['webkitAppearance'] = 'none'; assert_equals(style.appearance, 'none'); }, 'property assignment - webkit-cased property name'); test(function() { var style = create('none'); assert_equals(style.getPropertyValue('-webkit-appearance'), 'none'); }, 'getPropertyValue - CSS property name'); test(function() { var style = create('none'); assert_equals(style.getPropertyValue('WebkitAppearance'), ''); }, 'getPropertyValue - camel-cased property name (ignored)'); test(function() { var style = create('none'); assert_equals(style.getPropertyValue('webkitAppearance'), ''); }, 'getPropertyValue - webkit-cased property name (ignored)'); test(function() { var style = create('none'); assert_equals(style['-webkit-appearance'], 'none'); }, 'property access - CSS property name'); test(function() { var style = create('none'); assert_equals(style['WebkitAppearance'], 'none'); }, 'property access - camel-cased property name'); test(function() { var style = create('none'); assert_equals(style['webkitAppearance'], 'none'); }, 'property access - webkit-cased property name'); </script> </body>