| <!DOCTYPE html> |
| <link rel="help" href="https://html.spec.whatwg.org/C/#the-input-element-as-a-text-entry-widget"> |
| <title>Test `size` attribute behavior</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <body> |
| |
| <input id="missing"> |
| <input id="invalid" size="-1"> |
| <input id="size0" size="0"> |
| <input id="size1" size="1"> |
| <input id="size10" size="10"> |
| <input id="size20" size="20"> |
| <input id="size21" size="21"> |
| <input id="computed" style="border:none; padding:0;" size="19"> |
| <input id="computedNone" style="display:none" size="17"> |
| |
| <script> |
| test(() => { |
| assert_equals(missing.offsetWidth, size20.offsetWidth); |
| }, 'A misssing attribute is equivalent to size=20'); |
| |
| test(() => { |
| assert_equals(invalid.offsetWidth, size20.offsetWidth, 'size="-1"'); |
| assert_equals(size0.offsetWidth, size20.offsetWidth, 'size="0"'); |
| }, 'An invalid attribute value is equivalent to size=20'); |
| |
| test(() => { |
| assert_less_than(size1.offsetWidth, size10.offsetWidth, '1 < 10'); |
| assert_less_than(size10.offsetWidth, size20.offsetWidth, '10 < 20'); |
| assert_less_than(size20.offsetWidth, size21.offsetWidth, '20 < 21'); |
| }, 'The width depends on a size attribute'); |
| |
| test(() => { |
| const computedString = getComputedStyle(computed).width; |
| assert_equals(computed.offsetWidth, |
| Math.round(computedString.substring(0, computedString.length - 2))); |
| }, 'Size attribute value affects layout-dependent computed style'); |
| |
| test(() => { |
| const computedString = getComputedStyle(computedNone).width; |
| assert_equals(computedString, 'auto'); |
| }, 'Size attribute value is not a presentational hint'); |
| </script> |
| |
