<html> <head> <script> var w; function Open(sFeatures) { if (w && !w.closed) w.close(); w = window.open("resources/popup200x200.html", "popup", sFeatures); } function test1() { Open("width=200, height=200, left = 0, top = 0, scrollbars, resizable"); setConsole(document.getElementById('console1')); clearConsole(); shouldBe("w.innerHeight", 200); shouldBe("w.innerWidth", 200); shouldBe("w.outerWidth", 200); shouldBe("w.screenLeft", 0); shouldBe("w.screenTop", 22); // empirical result of low dpi testing shouldBe("w.outerHeight", 223); // empirical result of low dpi testing } function test2() { console = document.getElementById('console2'); Open("width=200, height=200, left = 0, top = 0, scrollbars, menubar, status, toolbar, resizable"); setConsole(document.getElementById('console2')); clearConsole(); shouldBe("w.innerHeight", 200); shouldBe("w.innerWidth", 200); shouldBe("w.outerWidth", 200); shouldBe("w.screenLeft", 0); shouldBe("w.screenTop", 22); // empirical result of low dpi testing shouldBe("w.outerHeight", 313); // empirical result of low dpi testing } function test3() { Open("width=200,height=200,left=" + (screen.width - 200) + ",screenY=0, resizable"); w.moveBy(0, screen.height - w.screenTop - w.outerHeight); // should be no-ops w.moveTo(w.screenLeft - 100, w.screenTop + 100); w.moveBy(100, -100); w.resizeTo(w.outerWidth - 100 , w.outerHeight - 100); w.resizeBy(100, 100); setConsole(document.getElementById('console3')); clearConsole(); shouldBe("w.innerHeight", 200); shouldBe("w.innerWidth", 200); shouldBe("w.outerWidth", 200); shouldBe("w.screenLeft", screen.width - 200); shouldBe("w.screenTop", screen.height - w.outerHeight); shouldBe("w.outerHeight", 223); // empirical result of low dpi testing } var console; function print(message, color) { var paragraph = document.createElement("div"); paragraph.appendChild(document.createTextNode(message)); paragraph.style.fontFamily = "monospace"; if (color) paragraph.style.color = color; console.appendChild(paragraph); } function clearConsole() { console.innerHTML = ""; } function setConsole(c) { console = c; } function shouldBe(a, b) { var evalA = eval(a); if (evalA == b) print("PASS: " + a + " should be " + b + " and is.", "green"); else print("FAIL: " + a + " should be " + b + " but instead is " + evalA + ".", "red"); } </script> </head> <body> <p>This test checks our support for window sizing and positioning.</p> <p>To test: Click each button below. Check to make sure that the window it opens has the specified attributes. Also check for a series of 'PASS' messages below the button.</p> <p style="color:red">NOTE: Make sure to test at magnified resolutions.</p> <p>To test @ 2X resolution:</p> <ol> <li>Open Quartz Debug (/Developer/Applications/Performance Tools).</li> <li>Select Tools -> Show User Interface Resolution.</li> <li>Set the resolution to 2.0.</li> <li>Restart Safari.</li> </ol> <hr> <p>Window size (no toolbars): You should see a red 1 pixel border along every edge of this page, and no scrollbars.</p> <input type="button" value="open it!" onclick="test1()"> <div id='console1'></div> <hr> <p>Window size (all toolbars): You should see a red 1 pixel border along every edge of this page, and no scrollbars.</p> <input type="button" value="open it!" onclick="test2()"> <div id='console2'></div> <hr> <p>Window positioning: This window should be aligned exactly to the bottom right corner of the screen.</p> <input type="button" value="open it!" onclick="test3()"> <div id='console3'></div> <hr> </body> </html>