input-line-height-computed.html (1646B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>used value and computed value of 'line-height' on input elements as text entry widgets</title> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-input-element-as-a-text-entry-widget"> 5 <link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"> 6 <link rel="help" href="https://drafts.css-houdini.org/css-typed-om/#computed-stylepropertymapreadonly-objects"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 input { line-height: 1px; } 11 </style> 12 <p><input type=text value=text> 13 <p><input type=tel value=tel> 14 <p><input type=search value=search> 15 <p><input type=url value=url> 16 <p><input type=email value=email> 17 <p><input type=password value=password></p> 18 <script> 19 const inputs = document.querySelectorAll('input'); 20 for (const input of inputs) { 21 test(() => { 22 const usedLineHeight = getComputedStyle(input).lineHeight; 23 assert_not_equals(usedLineHeight, '1px', 'usedLineHeight'); 24 assert_not_equals(usedLineHeight, 'normal', 'usedLineHeight'); 25 }, `getComputedStyle(<input type=${input.type}>).lineHeight should return a used value that is no smaller than 'normal' (but should not literally be 'normal')`); 26 test(() => { 27 const computedLineHeight = input.computedStyleMap().get('line-height'); 28 assert_equals(computedLineHeight.value, 1, 'computedLineHeight.value'); 29 assert_equals(computedLineHeight.unit, 'px', 'computedLineHeight.unit'); 30 }, `<input type=${input.type}>.computedStyleMap().get('line-height') should not be affected by the used value clamping`); 31 } 32 </script>