third_party/WebKit/LayoutTests/fast/images/image-zoom-to-500.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         newwindow.onresize = function() {
  25             var image = newwindow.document.querySelector("img");
  26             if (image.clientWidth == 0) {
  27               // On GTK+, sometimes the resize callback fires before the GTK
  28               // window has finished resizing. If that happens, try to resize
  29               // again.
  30               setTimeout(function() {
  31                 newwindow.resizeTo(400, 400);
  32               }, 0);
  33               return;
  34             }
  35
  36             if (window.eventSender) {
  37                 eventSender.zoomPageIn();
  38                 log("Size at zoom level" + (count) + " : "  + image.clientWidth + "x" + image.clientHeight);
  39                 ++count;
  40                 if (count == 10)
  41                     testRunner.notifyDone();
  42             }
  43         };
  44
  45         newwindow.resizeTo(400, 400);
  46     };
  47 }
  48 </script>
  49 <body onload="zoomPage()">
  50 <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 600px tall and zoom in 10 times.  The image should get bigger at each step proportionately.</p>
  51 <pre id="console"></pre>
  52 </body>
  53 </html>