<!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>