src/third_party/WebKit/LayoutTests/fast/sub-pixel/cssom-subpixel-precision.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>client rect precision test</title>
   5     <style>
   6         #test {
   7             width: 4.5px;
   8             height: 4.5px;
   9             background: navy;
  10         }
  11     </style>
  12 </head>
  13 <body>
  14     <div id="test"></div>
  15     <div id="console">
  16         Box above should be 5x5px.<br>
  17     </div>
  18 </body>
  19 <script>
  20     var testElement = document.getElementById('test');
  21     var consoleElement = document.getElementById('console');
  22
  23     function test()
  24     {
  25         var rect = testElement.getBoundingClientRect();
  26         var width = rect.right - rect.left;
  27
  28         if (width == 4.5 && testElement.clientWidth == 4.5 && testElement.offsetWidth == 4.5)
  29             log('PASS: getBoundingClientRect, clientWidth, and offsetWidth reports width with subpixel precision (4.5).');
  30         else
  31             log('FAIL: getBoundingClientRect reports width of ' + width +
  32                 ', expected 4.5. clientWidth reports width of ' + testElement.clientWidth +
  33                 ', expected 4.5. offsetWidth reports width of ' + testElement.offsetWidth +
  34                 ', expected 4.5.');
  35
  36         var height = rect.bottom - rect.top;
  37         if (height == 4.5 && testElement.clientHeight == 4.5 && testElement.offsetHeight == 4.5)
  38             log('PASS: getBoundingClientRect, clientHeight, and offsetHeight reports height with subpixel precision (4.5).');
  39         else
  40             log('FAIL: getBoundingClientRect reports height of ' + height +
  41                 ', expected 4.5. clientHeight reports height of ' + testElement.clientHeight +
  42                 ', expected 4.5. offsetHeight reports height of ' + testElement.offsetHeight +
  43                 ', expected 4.5.');
  44     }
  45
  46     function log(str)
  47     {
  48         consoleElement.appendChild(document.createTextNode(str));
  49         consoleElement.appendChild(document.createElement('br'));
  50     }
  51
  52     test();
  53 </script>
  54 </html>