default-styles.html (3746B)
1 <!doctype html> 2 <title>HTML: default style for 'appearance'</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <body> 6 <script> 7 // namespaces 8 const htmlns = 'http://www.w3.org/1999/xhtml'; 9 const svgns = 'http://www.w3.org/2000/svg'; 10 11 // auto 12 testAppearance(htmlns, 'input', null, 'auto'); 13 testAppearance(htmlns, 'input', {type: 'text'}, 'auto'); 14 testAppearance(htmlns, 'input', {type: 'TEXT'}, 'auto'); 15 testAppearance(htmlns, 'input', {type: 'search'}, 'auto'); 16 testAppearance(htmlns, 'input', {type: 'tel'}, 'auto'); 17 testAppearance(htmlns, 'input', {type: 'url'}, 'auto'); 18 testAppearance(htmlns, 'input', {type: 'email'}, 'auto'); 19 testAppearance(htmlns, 'input', {type: 'password'}, 'auto'); 20 testAppearance(htmlns, 'input', {type: 'date'}, 'auto'); 21 testAppearance(htmlns, 'input', {type: 'month'}, 'auto'); 22 testAppearance(htmlns, 'input', {type: 'week'}, 'auto'); 23 testAppearance(htmlns, 'input', {type: 'time'}, 'auto'); 24 testAppearance(htmlns, 'input', {type: 'datetime-local'}, 'auto'); 25 testAppearance(htmlns, 'input', {type: 'number'}, 'auto'); 26 testAppearance(htmlns, 'input', {type: 'range'}, 'auto'); 27 testAppearance(htmlns, 'input', {type: 'color'}, 'auto'); 28 testAppearance(htmlns, 'input', {type: 'checkbox'}, 'auto'); 29 testAppearance(htmlns, 'input', {type: 'radio'}, 'auto'); 30 testAppearance(htmlns, 'input', {type: 'submit'}, 'auto'); 31 testAppearance(htmlns, 'input', {type: 'reset'}, 'auto'); 32 testAppearance(htmlns, 'input', {type: 'button'}, 'auto'); 33 testAppearance(htmlns, 'input', {type: 'unknowntype'}, 'auto'); 34 testAppearance(htmlns, 'select', null, 'auto'); 35 testAppearance(htmlns, 'select', {multiple: ''}, 'auto'); 36 testAppearance(htmlns, 'select', {size: '2'}, 'auto'); 37 testAppearance(htmlns, 'button', null, 'auto'); 38 testAppearance(htmlns, 'textarea', null, 'auto'); 39 testAppearance(htmlns, 'meter', null, 'auto'); 40 testAppearance(htmlns, 'progress', null, 'auto'); 41 42 // none 43 testAppearance(htmlns, 'input', {type: 'hidden'}, 'none'); 44 testAppearance(htmlns, 'input', {type: 'HIDDEN'}, 'none'); 45 testAppearance(htmlns, 'input', {type: 'file'}, 'none'); 46 testAppearance(htmlns, 'input', {type: 'image'}, 'none'); 47 testAppearance(htmlns, 'div', null, 'none'); 48 testAppearance(htmlns, 'details', null, 'none'); 49 testAppearance(htmlns, 'summary', null, 'none'); 50 testAppearance(htmlns, 'video', null, 'none'); 51 testAppearance(htmlns, 'video', {controls: ''}, 'none'); 52 testAppearance(htmlns, 'menuitem', null, 'none'); 53 testAppearance(htmlns, 'marquee', null, 'none'); 54 testAppearance(htmlns, 'keygen', null, 'none'); 55 testAppearance(null, 'input', null, 'none'); 56 testAppearance(svgns, 'input', null, 'none'); 57 58 test(t => { 59 assertAppearance(document.documentElement, 'none'); 60 }, 'The html element'); 61 62 test(t => { 63 assertAppearance(document.body, 'none'); 64 }, 'The body element'); 65 66 67 function testAppearance(ns, tag, attributes, expected) { 68 test(t => { 69 const elm = document.createElementNS(ns, tag); 70 for (const att in attributes) { 71 elm.setAttribute(att, attributes[att]); 72 } 73 document.body.appendChild(elm); 74 t.add_cleanup(() => elm.remove()); 75 assertAppearance(elm, expected); 76 }, formatTestName(ns, tag, attributes)); 77 } 78 79 function assertAppearance(elm, expected) { 80 const computedStyle = getComputedStyle(elm); 81 assert_equals(computedStyle.getPropertyValue('-webkit-appearance'), expected, '-webkit-appearance'); 82 assert_equals(computedStyle.getPropertyValue('appearance'), expected, 'appearance (no prefix)'); 83 } 84 85 function formatTestName(ns, tag, attributes) { 86 let s = `<${tag}`; 87 for (const att in attributes) { 88 s += ` ${att}="${attributes[att]}"`; 89 } 90 s += '>'; 91 if (ns !== htmlns) { 92 s += ` (namespace: ${ns})`; 93 } 94 return s; 95 } 96 </script>