third_party/WebKit/LayoutTests/fast/css/large-numbers.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <script src="../../resources/js-test.js"></script>
   5         <style>
   6             .test { position: absolute; width: 50px; left: 25px; }
   7         </style>
   8     </head>
   9     <body>
  10         <p>
  11             Test handling of numbers outside of the supported range.
  12         </p>
  13         <p>
  14             <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>
  15             As per the <a href="http://www.w3.org/TR/css3-values/#numeric-types">CSS3 specification</a>.
  16         </p>
  17         <script>
  18             function testSize(width, opt_expectedWidth)
  19             {
  20                 var expectedWidth = typeof opt_expectedWidth == 'number' ? opt_expectedWidth : width;
  21
  22                 el.style.width = width + 'px';
  23
  24                 var style = window.getComputedStyle(el, null);
  25                 var rect = el.getBoundingClientRect();
  26                 if (el.offsetWidth == expectedWidth && rect.width == expectedWidth)
  27                     testPassed('element.width = ' + width + 'px, returns offsetWidth, rect.width expected.');
  28                 else
  29                     testFailed('element.width = ' + width + 'px, returns offsetWidth ' + el.offsetWidth + ', rect.width ' + rect.width + ', expected ' + expectedWidth + '.');
  30             }
  31
  32             function testComputedWidth(width, opt_expectedWidth)
  33             {
  34                 var expectedWidth = typeof opt_expectedWidth == 'number' ? opt_expectedWidth : width;
  35
  36                 el.style.width = width + 'px';
  37
  38                 var style = window.getComputedStyle(el, null);
  39                 var computedWidth = Number(style.width.replace('px', ''));
  40                 if (computedWidth == expectedWidth)
  41                     testPassed('element.width = ' + width + 'px, returns computed width as expected.');
  42                 else
  43                     testFailed('element.width = ' + width + 'px, returns computed width ' + computedWidth + ', expected ' + expectedWidth + '.');
  44             }
  45
  46
  47             function testLeft(left, opt_expectedLeft)
  48             {
  49                 var expectedLeft = typeof opt_expectedLeft == 'number' ? opt_expectedLeft : left;
  50
  51                 el.style.left = left + 'px';
  52
  53                 var style = window.getComputedStyle(el, null);
  54                 var rect = el.getBoundingClientRect();
  55                 if (el.offsetLeft == expectedLeft && rect.left == expectedLeft)
  56                     testPassed('element.left = ' + left + 'px, returns offsetLeft, rect.left as expected.');
  57                 else
  58                     testFailed('element.left = ' + left + 'px, returns offsetLeft ' + el.offsetLeft + ', rect.left ' + rect.left + ', expected ' + expectedLeft + '.');
  59             }
  60
  61             function testComputedLeft(left, opt_expectedLeft)
  62             {
  63                 var expectedLeft = typeof opt_expectedLeft == 'number' ? opt_expectedLeft : left;
  64
  65                 el.style.left = left + 'px';
  66
  67                 var style = window.getComputedStyle(el, null);
  68                 var computedLeft = Number(style.left.replace('px', ''));
  69                 if (computedLeft == expectedLeft)
  70                     testPassed('element.left = ' + left + 'px, returns computed left as expected.');
  71                 else
  72                     testFailed('element.left = ' + left + 'px, returns computedLeft, expected ' + expectedLeft + '.');
  73             }
  74
  75             var el = document.createElement('div');
  76             el.className = 'test';
  77             document.body.appendChild(el);
  78
  79             var MAX_VALUE = 33554428;
  80             var MIN_VALUE = -33554430;
  81
  82             // Test setting style.width, negative values are considered invalid.
  83             testSize(0);
  84             testSize(1);
  85             testSize(10);
  86             testSize(100);
  87             testSize(10000);
  88             testSize(100000);
  89             testSize(1000000);
  90             testSize(10000000);
  91             testSize(100000000, MAX_VALUE);
  92             testSize(1000000000, MAX_VALUE);
  93             testSize(10000000000, MAX_VALUE);
  94             testSize(100000000000, MAX_VALUE);
  95             testSize(1000000000000, MAX_VALUE);
  96
  97             testSize(0, 0);
  98             testSize(-1, 0);
  99             testSize(-10, 0);
 100             testSize(-100, 0);
 101             testSize(-10000, 0);
 102             testSize(-100000, 0);
 103             testSize(-1000000, 0);
 104             testSize(-10000000, 0);
 105             testSize(-100000000, 0);
 106             testSize(-1000000000, 0);
 107             testSize(-10000000000, 0);
 108             testSize(-100000000000, 0);
 109
 110             MAX_VALUE = 33554400;
 111             MIN_VALUE = -33554400;
 112
 113             testComputedWidth(0);
 114             testComputedWidth(1);
 115             testComputedWidth(10);
 116             testComputedWidth(100);
 117             testComputedWidth(10000);
 118             testComputedWidth(100000);
 119             testComputedWidth(1000000);
 120             testComputedWidth(10000000);
 121             testComputedWidth(100000000, MAX_VALUE);
 122             testComputedWidth(1000000000, MAX_VALUE);
 123             testComputedWidth(10000000000, MAX_VALUE);
 124             testComputedWidth(100000000000, MAX_VALUE);
 125             testComputedWidth(1000000000000, MAX_VALUE);
 126
 127             testSize(0, 0);
 128             testSize(-1, 0);
 129             testSize(-10, 0);
 130             testSize(-100, 0);
 131             testSize(-10000, 0);
 132             testSize(-100000, 0);
 133             testSize(-1000000, 0);
 134             testSize(-10000000, 0);
 135             testSize(-100000000, 0);
 136             testSize(-1000000000, 0);
 137             testSize(-10000000000, 0);
 138             testSize(-100000000000, 0);
 139
 140             MAX_VALUE = 33554428;
 141             MIN_VALUE = -33554430;
 142
 143             // Test setting style.left, negative values are considered valid.
 144             testLeft(0);
 145             testLeft(1);
 146             testLeft(10);
 147             testLeft(100);
 148             testLeft(10000);
 149             testLeft(100000);
 150             testLeft(1000000);
 151             testLeft(10000000);
 152             testLeft(100000000, MAX_VALUE);
 153             testLeft(1000000000, MAX_VALUE);
 154             testLeft(10000000000, MAX_VALUE);
 155             testLeft(100000000000, MAX_VALUE);
 156             testLeft(1000000000000, MAX_VALUE);
 157
 158             testLeft(-1);
 159             testLeft(-10);
 160             testLeft(-100);
 161             testLeft(-10000);
 162             testLeft(-100000);
 163             testLeft(-1000000);
 164             testLeft(-10000000);
 165             testLeft(-100000000, MIN_VALUE);
 166             testLeft(-1000000000, MIN_VALUE);
 167             testLeft(-10000000000, MIN_VALUE);
 168             testLeft(-100000000000, MIN_VALUE);
 169             testLeft(-1000000000000, MIN_VALUE);
 170
 171             MAX_VALUE = 33554400;
 172             MIN_VALUE = -33554400;
 173
 174             testComputedLeft(0);
 175             testComputedLeft(1);
 176             testComputedLeft(10);
 177             testComputedLeft(100);
 178             testComputedLeft(10000);
 179             testComputedLeft(100000);
 180             testComputedLeft(1000000);
 181             testComputedLeft(10000000);
 182             testComputedLeft(100000000, MAX_VALUE);
 183             testComputedLeft(1000000000, MAX_VALUE);
 184             testComputedLeft(10000000000, MAX_VALUE);
 185             testComputedLeft(100000000000, MAX_VALUE);
 186             testComputedLeft(1000000000000, MAX_VALUE);
 187
 188             testComputedLeft(-1);
 189             testComputedLeft(-10);
 190             testComputedLeft(-100);
 191             testComputedLeft(-10000);
 192             testComputedLeft(-100000);
 193             testComputedLeft(-1000000);
 194             testComputedLeft(-10000000);
 195             testComputedLeft(-100000000, MIN_VALUE);
 196             testComputedLeft(-1000000000, MIN_VALUE);
 197             testComputedLeft(-10000000000, MIN_VALUE);
 198             testComputedLeft(-100000000000, MIN_VALUE);
 199             testComputedLeft(-1000000000000, MIN_VALUE);
 200
 201             document.body.removeChild(el);
 202         </script>
 203     </body>
 204 </html>