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