third_party/WebKit/LayoutTests/fast/images/image-click-scale-restore-zoomed-image.html

   1 <!DOCTYPE html>
   2
   3 <script>
   4 var clicked = false;
   5 var count = 0;
   6 var requestId = 0;
   7
   8 if (window.testRunner) {
   9     testRunner.dumpAsText();
  10     testRunner.setCanOpenWindows();
  11     testRunner.waitUntilDone();
  12 }
  13
  14 function log(message)
  15 {
  16     var console = document.getElementById("console");
  17     console.appendChild(document.createTextNode(message + "\n"));
  18 }
  19
  20 function click(newwindow, image)
  21 {
  22     var e = newwindow.document.createEvent("MouseEvent");
  23     e.initMouseEvent("click", true, true, newwindow, 1, 1, 1, 1, 1, false, false, false, false, 0, newwindow.document);
  24     image.dispatchEvent(e);
  25 }
  26
  27 window.onload = function()
  28 {
  29     var newwindow = window.open("resources/flowchart.jpg");
  30     if (window.testRunner)
  31         testRunner.useUnfortunateSynchronousResizeMode();
  32     newwindow.onload = function() {
  33
  34         newwindow.onresize = function() {
  35             var image = newwindow.document.querySelector("img");
  36             if (image.clientWidth == 0) {
  37                 // On GTK+, sometimes the resize callback fires before the GTK
  38                 // window has finished resizing. If that happens, try to resize
  39                 // again.
  40                 requestId = newWindow.requestAnimationFrame(function() {
  41                     newwindow.resizeTo(100, 100);
  42                     if (requestId)
  43                         newwindow.cancelAnimationFrame(requestId);
  44                     requestId = 0;
  45                 });
  46                 return;
  47             }
  48
  49             if (window.eventSender) {
  50                 if (!clicked) {
  51                     // Zoom in level 1
  52                     eventSender.zoomPageIn();
  53                     var w = Math.round(image.clientWidth);
  54                     var h = Math.round(image.clientHeight);
  55                     log("Size at zoomed in level : "  + w + " x " + h);
  56                     clicked = true;
  57                     count++;
  58                     click(newwindow, image);
  59                 } else {
  60                     var w = Math.round(image.clientWidth);
  61                     var h = Math.round(image.clientHeight);
  62                     log("Size at zoomed level after scale up click " + count + " : "  + w + " x " + h);
  63                     if (count == 3)
  64                         testRunner.notifyDone();
  65
  66                     // Restore the image size
  67                     click(newwindow, image);
  68                     count++;
  69                     // Brings to normal zoom
  70                     eventSender.zoomPageOut();
  71                     // Zoom out level 1
  72                     eventSender.zoomPageOut();
  73                     // Restore the image size
  74                     var w = Math.round(image.clientWidth);
  75                     var h = Math.round(image.clientHeight);
  76                     log("Size at zoomed out level after click " + count + " (Image restored): "  + w + " x " + h);
  77                     count++;
  78                     click(newwindow, image);
  79                 }
  80             }
  81         };
  82
  83         newwindow.resizeTo(100, 100);
  84     };
  85 }
  86 </script>
  87 <p>This tests that on a zoomed page, click to scale up / down works fine.  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 100px tall and zoom out and click on the image to scale it up.</p>
  88 <pre id="console"></pre>