src/third_party/WebKit/LayoutTests/fast/images/zoomed-img-size.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <script type="text/javascript">
   5       if (window.testRunner)
   6         testRunner.dumpAsText();
   7
   8       function update() {
   9
  10         // These arrays will become unnecessary if we fix the rounding issues that make us not always report "37x33".
  11         var expectedWidths, expectedHeights;
  12         expectedWidths = [100, 50, 33, 25, 40, 36, 36, 38, 37, 37, 37, 37, 37, 37, 37];
  13         expectedHeights = [100, 50, 33, 25, 40, 33, 33, 34, 32, 33, 33, 33, 33, 33, 33];
  14         for (i = 0; i < 15; ++i) {
  15           var oval = document.getElementById('oval' + i);
  16           var status = document.getElementById('status' + i);
  17           var sizes = document.getElementById('sizes' + i);
  18           if ((oval.width == expectedWidths[i]) && (oval.height == expectedHeights[i])) {
  19             status.style.color = "green";
  20             status.innerHTML = "PASS";
  21             sizes.innerHTML = oval.width + "x" + oval.height + (((oval.width != 37) || (oval.height != 33)) ? " close enough to 37x33" : "");
  22           } else {
  23             status.style.color = "red";
  24             status.innerHTML = "FAIL";
  25             sizes.innerHTML = oval.width + "x" + oval.height + " not close enough to 37x33";
  26           }
  27         }
  28       }
  29       window.onload = update;
  30     </script>
  31   </head>
  32   <body>
  33     <p>Ideally, all ovals below should be reported as having width=37, height=33.  Currently rounding prevents us from doing this.</p>
  34     <img id="oval0" src="resources/oval.png" style="zoom: 1%">
  35     <p>Zoom 1% <span id="status0"></span>: <span id="sizes0"></span></p>
  36     <img id="oval1" src="resources/oval.png" style="zoom: 2%">
  37     <p>Zoom 2% <span id="status1"></span>: <span id="sizes1"></span></p>
  38     <img id="oval2" src="resources/oval.png" style="zoom: 3%">
  39     <p>Zoom 3% <span id="status2"></span>: <span id="sizes2"></span></p>
  40     <img id="oval3" src="resources/oval.png" style="zoom: 4%">
  41     <p>Zoom 4% <span id="status3"></span>: <span id="sizes3"></span></p>
  42     <img id="oval4" src="resources/oval.png" style="zoom: 5%">
  43     <p>Zoom 5% <span id="status4"></span>: <span id="sizes4"></span></p>
  44     <img id="oval5" src="resources/oval.png" style="zoom: 30%">
  45     <p>Zoom 30% <span id="status5"></span>: <span id="sizes5"></span></p>
  46     <img id="oval6" src="resources/oval.png" style="zoom: 33%">
  47     <p>Zoom 33% <span id="status6"></span>: <span id="sizes6"></span></p>
  48     <img id="oval7" src="resources/oval.png" style="zoom: 50%">
  49     <p>Zoom 50% <span id="status7"></span>: <span id="sizes7"></span></p>
  50     <img id="oval8" src="resources/oval.png" style="zoom: 70%">
  51     <p>Zoom 70% <span id="status8"></span>: <span id="sizes8"></span></p>
  52     <img id="oval9" src="resources/oval.png" style="zoom: 100%">
  53     <p>Zoom 100% <span id="status9"></span>: <span id="sizes9"></span></p>
  54     <img id="oval10" src="resources/oval.png" style="zoom: 111%">
  55     <p>Zoom 111% <span id="status10"></span>: <span id="sizes10"></span></p>
  56     <img id="oval11" src="resources/oval.png" style="zoom: 150%">
  57     <p>Zoom 150% <span id="status11"></span>: <span id="sizes11"></span></p>
  58     <img id="oval12" src="resources/oval.png" style="zoom: 333%">
  59     <p>Zoom 333% <span id="status12"></span>: <span id="sizes12"></span></p>
  60     <img id="oval13" src="resources/oval.png" style="zoom: 400%">
  61     <p>Zoom 400% <span id="status13"></span>: <span id="sizes13"></span></p>
  62     <img id="oval14" src="resources/oval.png" style="zoom: 1234%">
  63     <p>Zoom 1234% <span id="status14"></span>: <span id="sizes14"></span></p>
  64   </body>
  65 </html>