Google Git
Sign in
webkit / WebKit / 3280e000eb50f51518640837f991471c4062489a / . / LayoutTests / fast / forms / number / number-size.html
blob: 93c4106780d03c22580862bed3a4edf3993fbafd [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
<script src="../../../resources/platform-helper.js"></script>
<script src="../resources/common.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-with-width {
width: 100px;
}
</style>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
function widthSpecified(size) {
// GTK+ port overrides the style width and always increments it with the spinbuttons size.
if (isGtk())
size += spinButtonWidth;
return size;
}
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-with-width">'
var number = document.getElementById('number');
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 = getElementByPseudoId(internals.shadowRoot(number), "-webkit-inner-spin-button").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', 'widthSpecified(100)');
shouldBe('numberWithWidth.min = 0; numberWithWidth.max = 100; numberWithWidth.offsetWidth', 'widthSpecified(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');
shouldThrowErrorName('number.size = null', 'IndexSizeError');
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>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>