third_party/WebKit/LayoutTests/fast/images/zoomed-offset-size.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             #test_wrap {
   6                 width: 250px;
   7                 height: 166px;
   8                 overflow: hidden;
   9             }
  10
  11             #test_img {
  12                 width: 100%;
  13                 height: 100%;
  14             }
  15         </style>
  16         <script src="../../resources/js-test.js"></script>
  17     </head>
  18     <body>
  19         <div id="test_wrap">
  20             <img id="test_img" src="resources/green-256x256.jpg">
  21         </div>
  22         <p>
  23             Image should return a size of 250x166 regardless of zoom level.
  24         </p>
  25         <script>
  26             var imageElement = document.getElementById('test_img');
  27             var wrapElement = document.getElementById('test_wrap');
  28
  29             function getSize(zoomLevel)
  30             {
  31                 document.body.zoom = zoomLevel;
  32                 return {
  33                     imageWidth: imageElement.offsetWidth,
  34                     imageHeight: imageElement.offsetHeight,
  35                     wrapWidth: wrapElement.offsetWidth,
  36                     wrapHeight: wrapElement.offsetHeight
  37                 };
  38             }
  39
  40             for (var i = 90; i <= 200; i += 5) {
  41                 shouldBe('getSize(' + (i / 100) + ').imageWidth', '250');
  42                 shouldBe('getSize(' + (i / 100) + ').imageHeight', '166');
  43                 shouldBe('getSize(' + (i / 100) + ').wrapWidth', '250');
  44                 shouldBe('getSize(' + (i / 100) + ').wrapHeight', '166');
  45             }
  46             document.body.zoom = 1.0;
  47         </script>
  48     </body>
  49 </html>