third_party/WebKit/LayoutTests/fast/forms/number/number-size.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <style>
   6
   7 input.with-border::-webkit-inner-spin-button {
   8      border: 10px solid;
   9 }
  10 input.with-padding::-webkit-inner-spin-button {
  11      padding: 0 8px 0 8px;
  12 }
  13 input.with-margin::-webkit-inner-spin-button {
  14      margin: 0 10px 0 10px;
  15 }
  16
  17 input#number-without-spinbutton::-webkit-inner-spin-button {
  18      display: none;
  19      margin: 0;
  20 }
  21 input#number-with-width {
  22      width: 100px;
  23 }
  24
  25 </style>
  26 </head>
  27 <body>
  28 <p id="description"></p>
  29 <div id="console"></div>
  30
  31 <script>
  32 description('Test for size attribute of input');
  33
  34 var parent = document.createElement('div');
  35 document.body.appendChild(parent);
  36 parent.innerHTML = '<input type=text id=text>'
  37   + '<input type="number" id=number>'
  38   + '<input type="number" id="number-without-spinbutton" min="0" max="10" step="1">'
  39   + '<input type="number" id="number-with-spinbutton" min="0" max="10" step="1">'
  40   + '<input type="number" id="number-with-width">'
  41 var number = document.getElementById('number');
  42 var numberWithoutSpinButton = document.getElementById('number-without-spinbutton');
  43 var numberWithSpinButton = document.getElementById('number-with-spinbutton');
  44 var numberWithWidth = document.getElementById('number-with-width');
  45 var text = document.getElementById('text');
  46
  47 // The width of spin button should differ by environment. So it should be calculated here.
  48 var spinButtonWidth = numberWithSpinButton.offsetWidth - numberWithoutSpinButton.offsetWidth;
  49 // spinButtonWidth should have menaningful width.
  50 shouldBeGreaterThanOrEqual('spinButtonWidth', '1');
  51
  52 debug('The content area of the number input without min/max/step attribute should have the same width as text input');
  53 shouldBe('number.offsetWidth', 'text.offsetWidth');
  54 debug('');
  55
  56 debug('The number whose width is specified should respect the setting');
  57 shouldBe('numberWithWidth.offsetWidth', '100');
  58 shouldBe('numberWithWidth.min = 0; numberWithWidth.max = 100; numberWithWidth.offsetWidth', '100');
  59 debug('');
  60
  61 debug('The number input should ignore size attribute for layout');
  62 shouldBe('number.size = 10; number.offsetWidth', 'text.offsetWidth');
  63 shouldBe('number.size', '10');
  64 shouldBe('number.size = 100; number.offsetWidth', 'text.offsetWidth');
  65 shouldBe('number.size', '100');
  66 shouldThrow('number.size = null', '"IndexSizeError: Failed to set the \'size\' property on \'HTMLInputElement\': The value provided is 0, which is an invalid size."');
  67 debug('');
  68
  69 function numberWidth(min, max, step, className) {
  70     number.className = className;
  71     number.step = step;
  72     number.min = min;
  73     number.max = max;
  74     return number.offsetWidth;
  75 }
  76
  77 function textWidthPlusSpinButtonWidth(size) {
  78     text.size = size;
  79     return text.offsetWidth + spinButtonWidth;
  80 }
  81
  82 debug('If min or max is absent, the number input has the same width as input[type=text]')
  83 shouldBe('numberWidth(0, null, null)', 'text.offsetWidth');
  84 shouldBe('numberWidth(null, 100, null)', 'text.offsetWidth');
  85 shouldBe('numberWidth(null, null, 100)', 'text.offsetWidth');
  86 debug('');
  87
  88 debug('If step is any, the input[type=text] has the same width as input[type=text]')
  89 shouldBe('numberWidth(0, 1, "any")', 'text.offsetWidth');
  90 shouldBe('numberWidth(0, 10, "any")', 'text.offsetWidth');
  91 shouldBe('numberWidth(0, 1.1, "any")', 'text.offsetWidth');
  92 debug('');
  93
  94 debug('The case the inner spin button has border or padding.');
  95 var borderWidth = 20;
  96 var paddingWidth = 16;
  97 shouldBe('numberWidth(0, 10, 1, "with-border")', 'textWidthPlusSpinButtonWidth(2) + borderWidth');
  98 shouldBe('numberWidth(0, 10, 1, "with-padding")', 'textWidthPlusSpinButtonWidth(2) + paddingWidth');
  99 shouldBe('numberWidth(0, 10, 1, "with-margin")', 'textWidthPlusSpinButtonWidth(2)');
 100 shouldBe('numberWidth(0, 10, 1, "with-border with-padding")', 'textWidthPlusSpinButtonWidth(2) + borderWidth + paddingWidth');
 101 debug('');
 102
 103 debug('The default step does not need to be considered.')
 104 shouldBe('numberWidth(0, 1, null)', 'textWidthPlusSpinButtonWidth(1)');
 105 shouldBe('numberWidth(0, 100, null)', 'textWidthPlusSpinButtonWidth(3)');
 106 shouldBe('numberWidth(-100, 1, null)', 'textWidthPlusSpinButtonWidth(4)');
 107 shouldBe('numberWidth(0.0, 1.0, null)', 'textWidthPlusSpinButtonWidth(1)');
 108 shouldBe('numberWidth(0.5, 1.5, null)', 'textWidthPlusSpinButtonWidth(3)');
 109 shouldBe('numberWidth(-0.5, 1.5, null)', 'textWidthPlusSpinButtonWidth(4)');
 110 shouldBe('numberWidth(1e+10, 1e+10 + 1, null)', 'textWidthPlusSpinButtonWidth(11)');
 111 shouldBe('numberWidth(-1e+10, 1e+10 + 1, null)', 'textWidthPlusSpinButtonWidth(12)');
 112 debug('');
 113
 114 debug('Check the width of a number input when min/max/step is changed variously')
 115 shouldBe('numberWidth(0, 1, 1)', 'textWidthPlusSpinButtonWidth(1)');
 116 shouldBe('numberWidth(0, 10, 1)', 'textWidthPlusSpinButtonWidth(2)');
 117 shouldBe('numberWidth(0, 100, 1)', 'textWidthPlusSpinButtonWidth(3)');
 118 shouldBe('numberWidth(0, 1000, 1)', 'textWidthPlusSpinButtonWidth(4)');
 119 shouldBe('numberWidth(0, 10000, 1)', 'textWidthPlusSpinButtonWidth(5)');
 120 shouldBe('numberWidth(0, 100000, 1)', 'textWidthPlusSpinButtonWidth(6)');
 121 shouldBe('numberWidth(0, 1000000, 1)', 'textWidthPlusSpinButtonWidth(7)');
 122 shouldBe('numberWidth(0, 10000000, 1)', 'textWidthPlusSpinButtonWidth(8)');
 123 shouldBe('numberWidth(0, 100000000, 1)', 'textWidthPlusSpinButtonWidth(9)');
 124 shouldBe('numberWidth(0, 1000000000, 1)', 'textWidthPlusSpinButtonWidth(10)');
 125
 126 shouldBe('numberWidth(-1, 0, 1)', 'textWidthPlusSpinButtonWidth(2)');
 127 shouldBe('numberWidth(-10, 0, 1)', 'textWidthPlusSpinButtonWidth(3)');
 128 shouldBe('numberWidth(-100, 0, 1)', 'textWidthPlusSpinButtonWidth(4)');
 129 shouldBe('numberWidth(-1000, 0, 1)', 'textWidthPlusSpinButtonWidth(5)');
 130 shouldBe('numberWidth(-10000, 0, 1)', 'textWidthPlusSpinButtonWidth(6)');
 131 shouldBe('numberWidth(-100000, 0, 1)', 'textWidthPlusSpinButtonWidth(7)');
 132 shouldBe('numberWidth(-1000000, 0, 1)', 'textWidthPlusSpinButtonWidth(8)');
 133 shouldBe('numberWidth(-10000000, 0, 1)', 'textWidthPlusSpinButtonWidth(9)');
 134 shouldBe('numberWidth(-100000000, 0, 1)', 'textWidthPlusSpinButtonWidth(10)');
 135 shouldBe('numberWidth(-1000000000, 0, 1)', 'textWidthPlusSpinButtonWidth(11)');
 136
 137 shouldBe('numberWidth(0, 1, 0.5)', 'textWidthPlusSpinButtonWidth(3)');
 138 shouldBe('numberWidth(0, 1, 0.05)', 'textWidthPlusSpinButtonWidth(4)');
 139 shouldBe('numberWidth(0, 1, 0.005)', 'textWidthPlusSpinButtonWidth(5)');
 140 shouldBe('numberWidth(0, 1, 0.0005)', 'textWidthPlusSpinButtonWidth(6)');
 141 shouldBe('numberWidth(0, 1, 0.00005)', 'textWidthPlusSpinButtonWidth(7)');
 142 shouldBe('numberWidth(0, 1, 0.000005)', 'textWidthPlusSpinButtonWidth(8)');
 143 shouldBe('numberWidth(0, 1, 0.0000005)', 'textWidthPlusSpinButtonWidth(9)');
 144
 145 shouldBe('numberWidth(0.5, 1, 1)', 'textWidthPlusSpinButtonWidth(3)');
 146 shouldBe('numberWidth(0.05, 1, 1)', 'textWidthPlusSpinButtonWidth(4)');
 147 shouldBe('numberWidth(0.005, 1, 1)', 'textWidthPlusSpinButtonWidth(5)');
 148 shouldBe('numberWidth(1.5, 2, 1)', 'textWidthPlusSpinButtonWidth(3)');
 149 shouldBe('numberWidth(1.05, 2, 1)', 'textWidthPlusSpinButtonWidth(4)');
 150 shouldBe('numberWidth(1.005, 2, 1)', 'textWidthPlusSpinButtonWidth(5)');
 151
 152 shouldBe('numberWidth(123456, 123456, 0.0000005)', 'textWidthPlusSpinButtonWidth(14)');
 153
 154 debug('')
 155 </script>
 156
 157
 158 </body>
 159 </html>