input-text-size.html (1649B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://html.spec.whatwg.org/C/#the-input-element-as-a-text-entry-widget"> 3 <title>Test `size` attribute behavior</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <body> 7 8 <input id="missing"> 9 <input id="invalid" size="-1"> 10 <input id="size0" size="0"> 11 <input id="size1" size="1"> 12 <input id="size10" size="10"> 13 <input id="size20" size="20"> 14 <input id="size21" size="21"> 15 <input id="computed" style="border:none; padding:0;" size="19"> 16 <input id="computedNone" style="display:none" size="17"> 17 18 <script> 19 test(() => { 20 assert_equals(missing.offsetWidth, size20.offsetWidth); 21 }, 'A misssing attribute is equivalent to size=20'); 22 23 test(() => { 24 assert_equals(invalid.offsetWidth, size20.offsetWidth, 'size="-1"'); 25 assert_equals(size0.offsetWidth, size20.offsetWidth, 'size="0"'); 26 }, 'An invalid attribute value is equivalent to size=20'); 27 28 test(() => { 29 assert_less_than(size1.offsetWidth, size10.offsetWidth, '1 < 10'); 30 assert_less_than(size10.offsetWidth, size20.offsetWidth, '10 < 20'); 31 assert_less_than(size20.offsetWidth, size21.offsetWidth, '20 < 21'); 32 }, 'The width depends on a size attribute'); 33 34 test(() => { 35 const computedString = getComputedStyle(computed).width; 36 assert_equals(computed.offsetWidth, 37 Math.round(computedString.substring(0, computedString.length - 2))); 38 }, 'Size attribute value affects layout-dependent computed style'); 39 40 test(() => { 41 const computedString = getComputedStyle(computedNone).width; 42 assert_equals(computedString, 'auto'); 43 }, 'Size attribute value is not a presentational hint'); 44 </script>