<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
<style>
.test { position: absolute; width: 50px; left: 25px; }
</style>
</head>
<body>
<p>
Test handling of numbers outside of the supported range.
</p>
<p>
<q cite="http://www.w3.org/TR/css3-values/#numeric-types">Properties may restrict numeric values to some range. If the value is outside the allowed range, the declaration is invalid and must be ignored.</q>
As per the <a href="http://www.w3.org/TR/css3-values/#numeric-types">CSS3 specification</a>.
</p>
<script>
function testSize(width, opt_expectedWidth)
{
var expectedWidth = typeof opt_expectedWidth == 'number' ? opt_expectedWidth : width;
el.style.width = width + 'px';
var style = window.getComputedStyle(el, null);
var rect = el.getBoundingClientRect();
if (el.offsetWidth == expectedWidth && rect.width == expectedWidth)
testPassed('element.width = ' + width + 'px, returns offsetWidth, rect.width expected.');
else
testFailed('element.width = ' + width + 'px, returns offsetWidth ' + el.offsetWidth + ', rect.width ' + rect.width + ', expected ' + expectedWidth + '.');
}
function testComputedWidth(width, opt_expectedWidth)
{
var expectedWidth = typeof opt_expectedWidth == 'number' ? opt_expectedWidth : width;
el.style.width = width + 'px';
var style = window.getComputedStyle(el, null);
var computedWidth = Number(style.width.replace('px', ''));
if (computedWidth == expectedWidth)
testPassed('element.width = ' + width + 'px, returns computed width as expected.');
else
testFailed('element.width = ' + width + 'px, returns computed width ' + computedWidth + ', expected ' + expectedWidth + '.');
}
function testLeft(left, opt_expectedLeft)
{
var expectedLeft = typeof opt_expectedLeft == 'number' ? opt_expectedLeft : left;
el.style.left = left + 'px';
var style = window.getComputedStyle(el, null);
var rect = el.getBoundingClientRect();
if (el.offsetLeft == expectedLeft && rect.left == expectedLeft)
testPassed('element.left = ' + left + 'px, returns offsetLeft, rect.left as expected.');
else
testFailed('element.left = ' + left + 'px, returns offsetLeft ' + el.offsetLeft + ', rect.left ' + rect.left + ', expected ' + expectedLeft + '.');
}
function testComputedLeft(left, opt_expectedLeft)
{
var expectedLeft = typeof opt_expectedLeft == 'number' ? opt_expectedLeft : left;
el.style.left = left + 'px';
var style = window.getComputedStyle(el, null);
var computedLeft = Number(style.left.replace('px', ''));
if (computedLeft == expectedLeft)
testPassed('element.left = ' + left + 'px, returns computed left as expected.');
else
testFailed('element.left = ' + left + 'px, returns computedLeft, expected ' + expectedLeft + '.');
}
var el = document.createElement('div');
el.className = 'test';
document.body.appendChild(el);
var MAX_VALUE = 33554428;
var MIN_VALUE = -33554430;
// Test setting style.width, negative values are considered invalid.
testSize(0);
testSize(1);
testSize(10);
testSize(100);
testSize(10000);
testSize(100000);
testSize(1000000);
testSize(10000000);
testSize(100000000, MAX_VALUE);
testSize(1000000000, MAX_VALUE);
testSize(10000000000, MAX_VALUE);
testSize(100000000000, MAX_VALUE);
testSize(1000000000000, MAX_VALUE);
testSize(0, 0);
testSize(-1, 0);
testSize(-10, 0);
testSize(-100, 0);
testSize(-10000, 0);
testSize(-100000, 0);
testSize(-1000000, 0);
testSize(-10000000, 0);
testSize(-100000000, 0);
testSize(-1000000000, 0);
testSize(-10000000000, 0);
testSize(-100000000000, 0);
MAX_VALUE = 33554400;
MIN_VALUE = -33554400;
testComputedWidth(0);
testComputedWidth(1);
testComputedWidth(10);
testComputedWidth(100);
testComputedWidth(10000);
testComputedWidth(100000);
testComputedWidth(1000000);
testComputedWidth(10000000);
testComputedWidth(100000000, MAX_VALUE);
testComputedWidth(1000000000, MAX_VALUE);
testComputedWidth(10000000000, MAX_VALUE);
testComputedWidth(100000000000, MAX_VALUE);
testComputedWidth(1000000000000, MAX_VALUE);
testSize(0, 0);
testSize(-1, 0);
testSize(-10, 0);
testSize(-100, 0);
testSize(-10000, 0);
testSize(-100000, 0);
testSize(-1000000, 0);
testSize(-10000000, 0);
testSize(-100000000, 0);
testSize(-1000000000, 0);
testSize(-10000000000, 0);
testSize(-100000000000, 0);
MAX_VALUE = 33554428;
MIN_VALUE = -33554430;
// Test setting style.left, negative values are considered valid.
testLeft(0);
testLeft(1);
testLeft(10);
testLeft(100);
testLeft(10000);
testLeft(100000);
testLeft(1000000);
testLeft(10000000);
testLeft(100000000, MAX_VALUE);
testLeft(1000000000, MAX_VALUE);
testLeft(10000000000, MAX_VALUE);
testLeft(100000000000, MAX_VALUE);
testLeft(1000000000000, MAX_VALUE);
testLeft(-1);
testLeft(-10);
testLeft(-100);
testLeft(-10000);
testLeft(-100000);
testLeft(-1000000);
testLeft(-10000000);
testLeft(-100000000, MIN_VALUE);
testLeft(-1000000000, MIN_VALUE);
testLeft(-10000000000, MIN_VALUE);
testLeft(-100000000000, MIN_VALUE);
testLeft(-1000000000000, MIN_VALUE);
MAX_VALUE = 33554400;
MIN_VALUE = -33554400;
testComputedLeft(0);
testComputedLeft(1);
testComputedLeft(10);
testComputedLeft(100);
testComputedLeft(10000);
testComputedLeft(100000);
testComputedLeft(1000000);
testComputedLeft(10000000);
testComputedLeft(100000000, MAX_VALUE);
testComputedLeft(1000000000, MAX_VALUE);
testComputedLeft(10000000000, MAX_VALUE);
testComputedLeft(100000000000, MAX_VALUE);
testComputedLeft(1000000000000, MAX_VALUE);
testComputedLeft(-1);
testComputedLeft(-10);
testComputedLeft(-100);
testComputedLeft(-10000);
testComputedLeft(-100000);
testComputedLeft(-1000000);
testComputedLeft(-10000000);
testComputedLeft(-100000000, MIN_VALUE);
testComputedLeft(-1000000000, MIN_VALUE);
testComputedLeft(-10000000000, MIN_VALUE);
testComputedLeft(-100000000000, MIN_VALUE);
testComputedLeft(-1000000000000, MIN_VALUE);
document.body.removeChild(el);
</script>
</body>
</html>
Codebase Browser
chromium