1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
<!--
XUL Widget Test for positioning
-->
<window title="position" width="500" height="600"
onload="setTimeout(runTest, 0);"
style="margin: 0; border: 0; padding; 0;"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<hbox id="box1">
<button label="0" style="width: 100px; height: 40px; margin: 3px;"/>
</hbox>
<scrollbox id="box2" orient="vertical" align="start"
style="height: 50px; overflow: hidden; margin-left: 2px; padding: 1px;">
<deck>
<scrollbox id="box3" orient="vertical" align="start"
style="height: 100px; overflow: scroll; margin: 1px; padding: 0;">
<vbox id="innerscroll" style="width: 200px" align="start">
<button id="button1" label="1" style="width: 90px; max-width: 100px; min-width: 80px; min-height: 25px; height: 35px; max-height: 50px; margin: 5px; border: 4px; padding: 7px; appearance: none;"/>
<menu id="menu">
<menupopup id="popup" style="appearance: none; margin:0; border: 0; padding: 0;"
onpopupshown="menuOpened()"
onpopuphidden="if (event.target == this) SimpleTest.finish()">
<menuitem label="One"/>
<menu id="submenu" label="Three">
<menupopup id="subpopup" style="appearance: none; margin:0; border: 0; padding: 0;"
onpopupshown="submenuOpened()">
<menuitem label="Four"/>
</menupopup>
</menu>
</menupopup>
</menu>
<button label="2" style="max-width: 100px; max-height: 20px; margin: 5px;"/>
<button label="3" style="max-width: 100px; max-height: 20px; margin: 5px;"/>
<button label="4" style="max-width: 100px; max-height: 20px; margin: 5px;"/>
</vbox>
<box style="height: 200px"/>
</scrollbox>
</deck>
</scrollbox>
<body xmlns="http://www.w3.org/1999/xhtml">
<p id="display"></p>
<div id="content" style="display: none">
</div>
<pre id="test">
</pre>
</body>
<script>
<![CDATA[
SimpleTest.waitForExplicitFinish();
function runTest()
{
var winwidth = document.documentElement.getBoundingClientRect().width;
var box1 = $("box1");
checkPosition("box1", box1, 0, 0, winwidth, 46);
var box2 = $("box2");
checkPosition("box2", box2, 2, 46, winwidth, 96);
// height is height(box1) = 46 + margin-top(box3) = 1 + margin-top(button1) = 5
var button1 = $("button1");
checkPosition("button1", button1, 9, 53, 99, 88);
box2.scrollTo(7, 16);
// clientRect height is offset from root so is 16 pixels vertically less
checkPosition("button1 scrolled", button1, 9, 37, 99, 72);
var box3 = $("box3");
box3.scrollTo(1, 2);
checkPosition("button1 scrolled", button1, 9, 35, 99, 70);
$("menu").open = true;
}
function menuOpened()
{
$("submenu").open = true;
}
function submenuOpened()
{
var menu = $("menu");
var menuleft = Math.round(menu.getBoundingClientRect().left);
var menubottom = Math.round(menu.getBoundingClientRect().bottom);
var submenu = $("submenu");
var submenutop = Math.round(submenu.getBoundingClientRect().top);
var submenuright = Math.round(submenu.getBoundingClientRect().right);
checkPosition("popup", $("popup"), menuleft, menubottom, -1, -1);
checkPosition("subpopup", $("subpopup"), submenuright, submenutop, -1, -1);
menu.open = false;
}
function checkPosition(testid, elem, cleft, ctop, cright, cbottom)
{
// -1 for right or bottom means that the exact size should not be
// checked, just ensure it is larger then the left or top position
var rect = elem.getBoundingClientRect();
is(Math.round(rect.left), cleft, testid + " client rect left");
if (testid != "popup")
is(Math.round(rect.top), ctop, testid + " client rect top");
if (cright >= 0)
is(Math.round(rect.right), cright, testid + " client rect right");
else
ok(rect.right - rect.left > 20, testid + " client rect right");
if (cbottom >= 0)
is(Math.round(rect.bottom), cbottom, testid + " client rect bottom");
else
ok(rect.bottom - rect.top > 15, testid + " client rect bottom");
}
]]>
</script>
</window>
|
