116 lines
4.7 KiB
HTML
116 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.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();
|
|
var computedWidth = Number(style.width.replace('px', ''));
|
|
if (el.offsetWidth == expectedWidth && rect.width == expectedWidth && computedWidth == expectedWidth)
|
|
testPassed('element.width = ' + width + 'px, returns offsetWidth, rect.width and computed width as expected.');
|
|
else
|
|
testFailed('element.width = ' + width + 'px, returns offsetWidth ' + el.offsetWidth + ', rect.width ' + rect.width + ' and 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();
|
|
var computedLeft = Number(style.left.replace('px', ''));
|
|
if (el.offsetLeft == expectedLeft && rect.left == expectedLeft && computedLeft == expectedLeft)
|
|
testPassed('element.left = ' + left + 'px, returns offsetLeft, rect.left and computed left as expected.');
|
|
else
|
|
testFailed('element.left = ' + left + 'px, returns offsetLeft ' + el.offsetLeft + ', rect.left ' + rect.left + ' and computed left ' + 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);
|
|
|
|
// 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);
|
|
|
|
document.body.removeChild(el);
|
|
</script>
|
|
</body>
|
|
</html>
|