LayoutTests/fast/forms/number/number-size.html - WebKit - Git at Google

 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
 <html>
 <head>
 <script src="../../../fast/js/resources/js-test-pre.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', '"Error: IndexSizeError: DOM Exception 1"');
 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="../../../fast/js/resources/js-test-post.js"></script>
 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
	<html>
	<head>
	<script src="../../../fast/js/resources/js-test-pre.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', '"Error: IndexSizeError: DOM Exception 1"');
	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="../../../fast/js/resources/js-test-post.js"></script>
	</body>
	</html>