number-size.html | Explore in Territory

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<style>

input.with-border::-webkit-inner-spin-button {
     border: 10px solid;
}
input.with-padding::-webkit-inner-spin-button {
     padding: 0 8px 0 8px;
}
input.with-margin::-webkit-inner-spin-button {
     margin: 0 10px 0 10px;
}

input#number-without-spinbutton::-webkit-inner-spin-button {
     display: none;
     margin: 0;
}
input#number-with-width {
     width: 100px;
}

</style>
</head>
<body>
<p id="description"></p>
<div id="console"></div>

<script>
description('Test for size attribute of input');

var parent = document.createElement('div');
document.body.appendChild(parent);
parent.innerHTML = '<input type=text id=text>'
  + '<input type="number" id=number>'
  + '<input type="number" id="number-without-spinbutton" min="0" max="10" step="1">'
  + '<input type="number" id="number-with-spinbutton" min="0" max="10" step="1">'
  + '<input type="number" id="number-with-width">'
var number = document.getElementById('number');
var numberWithoutSpinButton = document.getElementById('number-without-spinbutton');
var numberWithSpinButton = document.getElementById('number-with-spinbutton');
var numberWithWidth = document.getElementById('number-with-width');
var text = document.getElementById('text');

// The width of spin button should differ by environment. So it should be calculated here.
var spinButtonWidth = numberWithSpinButton.offsetWidth - numberWithoutSpinButton.offsetWidth;
// spinButtonWidth should have menaningful width.
shouldBeGreaterThanOrEqual('spinButtonWidth', '1');

debug('The content area of the number input without min/max/step attribute should have the same width as text input');
shouldBe('number.offsetWidth', 'text.offsetWidth');
debug('');

debug('The number whose width is specified should respect the setting');
shouldBe('numberWithWidth.offsetWidth', '100');
shouldBe('numberWithWidth.min = 0; numberWithWidth.max = 100; numberWithWidth.offsetWidth', '100');
debug('');

debug('The number input should ignore size attribute for layout');
shouldBe('number.size = 10; number.offsetWidth', 'text.offsetWidth');
shouldBe('number.size', '10');
shouldBe('number.size = 100; number.offsetWidth', 'text.offsetWidth');
shouldBe('number.size', '100');
shouldThrow('number.size = null', '"IndexSizeError: Failed to set the \'size\' property on \'HTMLInputElement\': The value provided is 0, which is an invalid size."');
debug('');

function numberWidth(min, max, step, className) {
    number.className = className;
    number.step = step;
    number.min = min;
    number.max = max;
    return number.offsetWidth;
}

function textWidthPlusSpinButtonWidth(size) {
    text.size = size;
    return text.offsetWidth + spinButtonWidth;
}

debug('If min or max is absent, the number input has the same width as input[type=text]')
shouldBe('numberWidth(0, null, null)', 'text.offsetWidth');
shouldBe('numberWidth(null, 100, null)', 'text.offsetWidth');
shouldBe('numberWidth(null, null, 100)', 'text.offsetWidth');
debug('');

debug('If step is any, the input[type=text] has the same width as input[type=text]')
shouldBe('numberWidth(0, 1, "any")', 'text.offsetWidth');
shouldBe('numberWidth(0, 10, "any")', 'text.offsetWidth');
shouldBe('numberWidth(0, 1.1, "any")', 'text.offsetWidth');
debug('');

debug('The case the inner spin button has border or padding.');
var borderWidth = 20;
var paddingWidth = 16;
shouldBe('numberWidth(0, 10, 1, "with-border")', 'textWidthPlusSpinButtonWidth(2) + borderWidth');
shouldBe('numberWidth(0, 10, 1, "with-padding")', 'textWidthPlusSpinButtonWidth(2) + paddingWidth');
shouldBe('numberWidth(0, 10, 1, "with-margin")', 'textWidthPlusSpinButtonWidth(2)');
shouldBe('numberWidth(0, 10, 1, "with-border with-padding")', 'textWidthPlusSpinButtonWidth(2) + borderWidth + paddingWidth');
debug('');

debug('The default step does not need to be considered.')
shouldBe('numberWidth(0, 1, null)', 'textWidthPlusSpinButtonWidth(1)');
shouldBe('numberWidth(0, 100, null)', 'textWidthPlusSpinButtonWidth(3)');
shouldBe('numberWidth(-100, 1, null)', 'textWidthPlusSpinButtonWidth(4)');
shouldBe('numberWidth(0.0, 1.0, null)', 'textWidthPlusSpinButtonWidth(1)');
shouldBe('numberWidth(0.5, 1.5, null)', 'textWidthPlusSpinButtonWidth(3)');
shouldBe('numberWidth(-0.5, 1.5, null)', 'textWidthPlusSpinButtonWidth(4)');
shouldBe('numberWidth(1e+10, 1e+10 + 1, null)', 'textWidthPlusSpinButtonWidth(11)');
shouldBe('numberWidth(-1e+10, 1e+10 + 1, null)', 'textWidthPlusSpinButtonWidth(12)');
debug('');

debug('Check the width of a number input when min/max/step is changed variously')
shouldBe('numberWidth(0, 1, 1)', 'textWidthPlusSpinButtonWidth(1)');
shouldBe('numberWidth(0, 10, 1)', 'textWidthPlusSpinButtonWidth(2)');
shouldBe('numberWidth(0, 100, 1)', 'textWidthPlusSpinButtonWidth(3)');
shouldBe('numberWidth(0, 1000, 1)', 'textWidthPlusSpinButtonWidth(4)');
shouldBe('numberWidth(0, 10000, 1)', 'textWidthPlusSpinButtonWidth(5)');
shouldBe('numberWidth(0, 100000, 1)', 'textWidthPlusSpinButtonWidth(6)');
shouldBe('numberWidth(0, 1000000, 1)', 'textWidthPlusSpinButtonWidth(7)');
shouldBe('numberWidth(0, 10000000, 1)', 'textWidthPlusSpinButtonWidth(8)');
shouldBe('numberWidth(0, 100000000, 1)', 'textWidthPlusSpinButtonWidth(9)');
shouldBe('numberWidth(0, 1000000000, 1)', 'textWidthPlusSpinButtonWidth(10)');

shouldBe('numberWidth(-1, 0, 1)', 'textWidthPlusSpinButtonWidth(2)');
shouldBe('numberWidth(-10, 0, 1)', 'textWidthPlusSpinButtonWidth(3)');
shouldBe('numberWidth(-100, 0, 1)', 'textWidthPlusSpinButtonWidth(4)');
shouldBe('numberWidth(-1000, 0, 1)', 'textWidthPlusSpinButtonWidth(5)');
shouldBe('numberWidth(-10000, 0, 1)', 'textWidthPlusSpinButtonWidth(6)');
shouldBe('numberWidth(-100000, 0, 1)', 'textWidthPlusSpinButtonWidth(7)');
shouldBe('numberWidth(-1000000, 0, 1)', 'textWidthPlusSpinButtonWidth(8)');
shouldBe('numberWidth(-10000000, 0, 1)', 'textWidthPlusSpinButtonWidth(9)');
shouldBe('numberWidth(-100000000, 0, 1)', 'textWidthPlusSpinButtonWidth(10)');
shouldBe('numberWidth(-1000000000, 0, 1)', 'textWidthPlusSpinButtonWidth(11)');

shouldBe('numberWidth(0, 1, 0.5)', 'textWidthPlusSpinButtonWidth(3)');
shouldBe('numberWidth(0, 1, 0.05)', 'textWidthPlusSpinButtonWidth(4)');
shouldBe('numberWidth(0, 1, 0.005)', 'textWidthPlusSpinButtonWidth(5)');
shouldBe('numberWidth(0, 1, 0.0005)', 'textWidthPlusSpinButtonWidth(6)');
shouldBe('numberWidth(0, 1, 0.00005)', 'textWidthPlusSpinButtonWidth(7)');
shouldBe('numberWidth(0, 1, 0.000005)', 'textWidthPlusSpinButtonWidth(8)');
shouldBe('numberWidth(0, 1, 0.0000005)', 'textWidthPlusSpinButtonWidth(9)');

shouldBe('numberWidth(0.5, 1, 1)', 'textWidthPlusSpinButtonWidth(3)');
shouldBe('numberWidth(0.05, 1, 1)', 'textWidthPlusSpinButtonWidth(4)');
shouldBe('numberWidth(0.005, 1, 1)', 'textWidthPlusSpinButtonWidth(5)');
shouldBe('numberWidth(1.5, 2, 1)', 'textWidthPlusSpinButtonWidth(3)');
shouldBe('numberWidth(1.05, 2, 1)', 'textWidthPlusSpinButtonWidth(4)');
shouldBe('numberWidth(1.005, 2, 1)', 'textWidthPlusSpinButtonWidth(5)');

shouldBe('numberWidth(123456, 123456, 0.0000005)', 'textWidthPlusSpinButtonWidth(14)');

debug('')
</script>


</body>
</html>
chromium/third_party/blink/web_tests/fast/forms/number/number-size.html
