ManualTests/window-sizing.html

   1 <html>
   2 <head>
   3 <script>
   4 var w;
   5 function Open(sFeatures)
   6 {
   7     if (w && !w.closed)
   8         w.close();
   9
  10     w = window.open("resources/popup200x200.html", "popup", sFeatures);
  11
  12 }
  13
  14 function test1()
  15 {
  16     Open("width=200, height=200, left = 0, top = 0, scrollbars, resizable");
  17
  18     setConsole(document.getElementById('console1'));
  19     clearConsole();
  20     shouldBe("w.innerHeight", 200);
  21     shouldBe("w.innerWidth", 200);
  22     shouldBe("w.outerWidth", 200);
  23     shouldBe("w.screenLeft", 0);
  24     shouldBe("w.screenTop", 22); // empirical result of low dpi testing
  25     shouldBe("w.outerHeight", 223); // empirical result of low dpi testing
  26 }
  27
  28 function test2()
  29 {
  30     console = document.getElementById('console2');
  31     Open("width=200, height=200, left = 0, top = 0, scrollbars, menubar, status, toolbar, resizable");
  32
  33     setConsole(document.getElementById('console2'));
  34     clearConsole();
  35     shouldBe("w.innerHeight", 200);
  36     shouldBe("w.innerWidth", 200);
  37     shouldBe("w.outerWidth", 200);
  38     shouldBe("w.screenLeft", 0);
  39     shouldBe("w.screenTop", 22); // empirical result of low dpi testing
  40     shouldBe("w.outerHeight", 313); // empirical result of low dpi testing
  41 }
  42
  43 function test3()
  44 {
  45     Open("width=200,height=200,left=" + (screen.width - 200) + ",screenY=0, resizable");
  46     w.moveBy(0, screen.height - w.screenTop - w.outerHeight);
  47
  48     // should be no-ops
  49     w.moveTo(w.screenLeft - 100, w.screenTop + 100);
  50     w.moveBy(100, -100);
  51     w.resizeTo(w.outerWidth - 100 , w.outerHeight - 100);
  52     w.resizeBy(100, 100);
  53
  54     setConsole(document.getElementById('console3'));
  55     clearConsole();
  56     shouldBe("w.innerHeight", 200);
  57     shouldBe("w.innerWidth", 200);
  58     shouldBe("w.outerWidth", 200);
  59     shouldBe("w.screenLeft", screen.width - 200);
  60     shouldBe("w.screenTop", screen.height - w.outerHeight);
  61     shouldBe("w.outerHeight", 223); // empirical result of low dpi testing
  62 }
  63
  64 var console;
  65 function print(message, color)
  66 {
  67     var paragraph = document.createElement("div");
  68     paragraph.appendChild(document.createTextNode(message));
  69     paragraph.style.fontFamily = "monospace";
  70     if (color)
  71         paragraph.style.color = color;
  72     console.appendChild(paragraph);
  73 }
  74
  75 function clearConsole()
  76 {
  77     console.innerHTML = "";
  78 }
  79
  80 function setConsole(c)
  81 {
  82     console = c;
  83 }
  84
  85 function shouldBe(a, b)
  86 {
  87     var evalA = eval(a);
  88     if (evalA == b)
  89         print("PASS: " + a + " should be " + b + " and is.", "green");
  90     else
  91         print("FAIL: " + a + " should be " + b + " but instead is " + evalA + ".", "red");
  92 }
  93 </script>
  94 </head>
  95 <body>
  96
  97 <p>This test checks our support for window sizing and positioning.</p>
  98 <p>To test: Click each button below. Check to make sure that the window it opens has the specified attributes.
  99    Also check for a series of 'PASS' messages below the button.</p>
 100 <p style="color:red">NOTE: Make sure to test at magnified resolutions.</p>
 101 <p>To test @ 2X resolution:</p>
 102 <ol>
 103 <li>Open Quartz Debug (/Developer/Applications/Performance Tools).</li>
 104 <li>Select Tools -> Show User Interface Resolution.</li>
 105 <li>Set the resolution to 2.0.</li>
 106 <li>Restart Safari.</li>
 107 </ol>
 108 <hr>
 109
 110 <p>Window size (no toolbars): You should see a red 1 pixel border along every edge of this page, and no scrollbars.</p>
 111 <input type="button" value="open it!" onclick="test1()">
 112 <div id='console1'></div>
 113 <hr>
 114
 115 <p>Window size (all toolbars): You should see a red 1 pixel border along every edge of this page, and no scrollbars.</p>
 116 <input type="button" value="open it!" onclick="test2()">
 117 <div id='console2'></div>
 118 <hr>
 119
 120 <p>Window positioning: This window should be aligned exactly to the bottom right corner of the screen.</p>
 121 <input type="button" value="open it!" onclick="test3()">
 122 <div id='console3'></div>
 123 <hr>
 124
 125 </body>
 126 </html>