[css-grid] Unprefix CSS Grid Layout properties
[WebKit-https.git] / 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>