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