third_party/WebKit/LayoutTests/fast/images/image-zoom-to-25.html

   1 <!DOCTYPE html>
   2 <html>
   3 <script>
   4 var count = 0;
   5
   6 if (window.testRunner) {
   7     testRunner.dumpAsText();
   8     testRunner.setCanOpenWindows();
   9     testRunner.waitUntilDone();
  10 }
  11
  12 function log(message)
  13 {
  14     var console = document.getElementById("console");
  15     console.appendChild(document.createTextNode(message + "\n"));
  16 }
  17
  18 function zoomPage()
  19 {
  20     var newwindow = window.open("resources/dice.png");
  21     if (window.testRunner)
  22         testRunner.useUnfortunateSynchronousResizeMode();
  23     newwindow.onload = function() {
  24
  25         newwindow.onresize = function() {
  26             var image = newwindow.document.querySelector("img");
  27             if (image.clientWidth == 0) {
  28               // On GTK+, sometimes the resize callback fires before the GTK
  29               // window has finished resizing. If that happens, try to resize
  30               // again.
  31               setTimeout(function() {
  32                 newwindow.resizeTo(200, 200);
  33               }, 0);
  34               return;
  35             }
  36
  37             if (window.eventSender) {
  38                 eventSender.zoomPageOut();
  39                 var w = Math.round(image.clientWidth);
  40                 var h = Math.round(image.clientHeight);
  41                 log("Size at zoom level" + (count) + " : "  + w + " x " + h);
  42                 if (++count == 6)
  43                     testRunner.notifyDone();
  44             }
  45         };
  46
  47         newwindow.resizeTo(200, 200);
  48     };
  49 }
  50 </script>
  51 <body onload="zoomPage()">
  52 <p>This tests that page zoom and image auto-sizing interact well together.  This test requires testRunner to run.  To test manually, open <a href="resources/dice.png">this image</a> in a browser window, resize the window to 200px tall and zoom out 6 times.  The image should get smaller at each step.</p>
  53 <pre id="console"></pre>
  54 </body>
  55 </html>