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
131
132
133
134
135
136
137
|
<?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"?>
<window title="Popup in Content Positioning Tests"
onload="setTimeout(nextTest, 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>
<!--
This test checks that popups in content areas don't extend past the content area.
-->
<hbox>
<spacer width="100"/>
<menu id="menu" label="Menu">
<menupopup style="margin:10px;-moz-window-input-region-margin:0;" id="popup" onpopupshown="popupShown()" onpopuphidden="nextTest()">
<menuitem label="One"/>
<menuitem label="Two"/>
<menuitem label="Three"/>
<menuitem label="A final longer label that is actually quite long. Very long indeed."/>
</menupopup>
</menu>
</hbox>
<script class="testbody" type="application/javascript">
<![CDATA[
SimpleTest.waitForExplicitFinish();
var step = "";
var originalHeight = -1;
function nextTest()
{
// there are five tests here:
// openPopupAtScreen - checks that opening a popup using openPopupAtScreen
// constrains the popup to the content area
// left and top - check with the left and top attributes set
// open near bottom - open the menu near the bottom of the window
// large menu - try with a menu that is very large and should be scaled
// shorter menu again - try with a menu that is shorter again. It should have
// the same height as the 'left and top' test
var popup = $("popup");
var menu = $("menu");
switch (step) {
case "":
step = "openPopupAtScreen";
popup.openPopupAtScreen(1000, 1200);
break;
case "openPopupAtScreen":
step = "left and top";
popup.setAttribute("left", "800");
popup.setAttribute("top", "2900");
synthesizeMouse(menu, 2, 2, { });
break;
case "left and top":
step = "open near bottom";
// request that the menu be opened with a target point near the bottom of the window,
// so that the menu's top margin will push it completely outside the window.
popup.setAttribute("top", document.documentElement.screenY + window.innerHeight - 5);
synthesizeMouse(menu, 2, 2, { });
break;
case "open near bottom":
step = "large menu";
popup.removeAttribute("left");
popup.removeAttribute("top");
for (let i = 0; i < 80; i++)
menu.appendItem("Test", "");
synthesizeMouse(menu, 2, 2, { });
break;
case "large menu":
step = "shorter menu again";
for (let i = 0; i < 80; i++)
popup.lastChild.remove();
synthesizeMouse(menu, 2, 2, { });
break;
case "shorter menu again":
SimpleTest.finish();
break;
}
}
async function popupShown()
{
// Popup may have wrong initial size in non e10s mode tests, because
// layout is not yet ready for popup content lazy population on
// popupshowing event.
await new Promise(r =>
requestAnimationFrame(() => requestAnimationFrame(r))
);
var windowrect = document.documentElement.getBoundingClientRect();
var popuprect = $("popup").getBoundingClientRect();
// subtract one off the edge due to a rounding issue
ok(popuprect.left >= windowrect.left, step + " left");
ok(popuprect.right - 1 <= windowrect.right, step + " right");
if (step == "left and top") {
originalHeight = popuprect.bottom - popuprect.top;
}
else if (step == "open near bottom") {
// check that the menu flipped up so it's above our requested point
ok(popuprect.bottom - 1 <= windowrect.bottom - 5, step + " bottom");
}
else if (step == "large menu") {
// add 10 to account for the margin
is(popuprect.top, $("menu").getBoundingClientRect().bottom + 10, step + " top");
ok(popuprect.bottom == windowrect.bottom ||
popuprect.bottom - 1 == windowrect.bottom, step + " bottom");
}
else {
ok(popuprect.top >= windowrect.top, step + " top");
ok(popuprect.bottom - 1 <= windowrect.bottom, step + " bottom");
if (step == "shorter menu again")
is(popuprect.bottom - popuprect.top, originalHeight, step + " height shortened");
}
$("menu").open = false;
}
]]>
</script>
<body xmlns="http://www.w3.org/1999/xhtml">
<p id="display">
</p>
<div id="content" style="display: none">
</div>
<pre id="test">
</pre>
</body>
</window>
|
