input-text-size.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/rendering/widgets/input-text-size.html - WPT Dashboard Interop Dashboard

<!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>