input-text-base-appearance-computed-style.html (3100B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://drafts.csswg.org/css-forms-1"> 4 <link rel=help href="https://github.com/w3c/csswg-drafts/issues/10857"> 5 <link rel=help href="https://github.com/w3c/csswg-drafts/issues/11486"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <style> 10 input { 11 appearance: base; 12 } 13 #parent { 14 text-transform: uppercase; 15 text-align: end; 16 text-indent: 5em; 17 } 18 </style> 19 20 <div id=parent> 21 <input value=value> 22 <div id=sibling>sibling</div> 23 </div> 24 <div id=initial></div> 25 26 <script> 27 const input = document.querySelector('input'); 28 const parent = document.getElementById('parent'); 29 const sibling = document.getElementById('sibling'); 30 const intial = document.getElementById('initial'); 31 32 // All of the elements should inherit these properties. 33 const expectedInheritedProperties = { 34 'font-size': '24px', 35 'font-family': 'monospace', 36 'font-stretch': '150%', 37 'font-style': 'italic', 38 'font-variant': 'small-caps', 39 'font-weight': '500', 40 'line-height': '13px', 41 'text-shadow': 'rgb(1, 1, 1) 1px 1px 1px', 42 'text-rendering': 'optimizelegibility', 43 'letter-spacing': '1px', 44 'word-spacing': '2px', 45 'color': 'rgb(255, 0, 0)', 46 }; 47 for (const [property, value] of Object.entries(expectedInheritedProperties)) { 48 parent.style[property] = value; 49 } 50 51 function testProperties(style, expectedProperties) { 52 const parentStyle = getComputedStyle(parent); 53 const initialStyle = getComputedStyle(initial); 54 55 for (let [property, value] of Object.entries(expectedProperties)) { 56 if (value == 'initial') { 57 value = initialStyle[property]; 58 } else if (value.endsWith('em')) { 59 // Properties with em units get serialized into px. In order to calculate 60 // the expected value of an em unit, we can set another element to the 61 // expected amount of ems and then serialize that one. 62 sibling.style[property] = value; 63 value = getComputedStyle(sibling)[property]; 64 } 65 assert_equals(style[property], value, property); 66 } 67 68 for (const [property, value] of Object.entries(expectedInheritedProperties)) { 69 // Don't test whether a property was inherited if expectedProperties 70 // already has an expected value for it. 71 if (!Object.keys(expectedProperties).includes(property)) { 72 assert_equals(style[property], value, property); 73 } 74 } 75 } 76 77 test(() => { 78 const expectedProperties = { 79 'background-color': 'rgba(0, 0, 0, 0)', 80 'border': '1px solid rgb(255, 0, 0)', /* color is currentColor */ 81 'display': 'inline-block', 82 'user-select': 'auto', 83 'padding-block-start': '0px', 84 'padding-block-end': '0px', 85 'padding-inline-start': '0px', 86 'padding-inline-end': '0px', 87 'border-radius': '0px', 88 'text-indent': 'initial', 89 'cursor': 'text', 90 'white-space': 'initial', 91 'align-items': 'initial', 92 'text-transform': 'initial', 93 'text-align': 'initial' 94 }; 95 testProperties(getComputedStyle(input), expectedProperties); 96 }, 'UA styles of base appearance <input type=text>.'); 97 </script>