83 lines
2.9 KiB
HTML
83 lines
2.9 KiB
HTML
<?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="XUL Panel reflow placement test"
|
|
xmlns:html="http://www.w3.org/1999/xhtml"
|
|
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
|
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
|
|
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"/>
|
|
|
|
<body xmlns="http://www.w3.org/1999/xhtml">
|
|
</body>
|
|
|
|
<script><![CDATA[
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
function openPopup()
|
|
{
|
|
synthesizeMouseAtCenter(document.getElementById("thebutton"), {}, window);
|
|
}
|
|
|
|
async function popupShown(event)
|
|
{
|
|
document.getElementById("parent").className = "";
|
|
var popup = document.getElementById("thepopup");
|
|
|
|
var buttonbcr = document.getElementById("thebutton").getBoundingClientRect();
|
|
|
|
await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
|
|
|
|
var popupbcr = popup.getOuterScreenRect();
|
|
var popupMarginLeft = parseFloat(getComputedStyle(popup).marginLeft);
|
|
var popupMarginTop = parseFloat(getComputedStyle(popup).marginTop);
|
|
|
|
info(`button: ${buttonbcr.width}x${buttonbcr.height} @ (${buttonbcr.x}, ${buttonbcr.y}) screen (${buttonbcr.x + window.mozInnerScreenX}, ${buttonbcr.y + window.mozInnerScreenY})`);
|
|
info(`popup: ${popupbcr.width}x${popupbcr.height} @ (${popupbcr.x}, ${popupbcr.y})`);
|
|
|
|
ok(Math.abs(popupbcr.x - popupMarginLeft - window.mozInnerScreenX - buttonbcr.x) < 3, "x pos is correct");
|
|
ok(Math.abs(popupbcr.y - popupMarginTop - window.mozInnerScreenY - buttonbcr.bottom) < 3, "y pos is correct");
|
|
|
|
event.target.hidePopup();
|
|
}
|
|
|
|
SimpleTest.waitForFocus(openPopup);
|
|
]]></script>
|
|
|
|
<html:style>
|
|
.mbox {
|
|
display: inline-block;
|
|
width: 33%;
|
|
height: 50px;
|
|
background: green;
|
|
vertical-align: middle;
|
|
}
|
|
.orange {
|
|
background: orange;
|
|
}
|
|
.change > .mbox {
|
|
width: 60px;
|
|
}
|
|
</html:style>
|
|
|
|
<html:div style="width: 300px; height: 200px;">
|
|
<html:div id="parent" class="change" style="background: red; border: 1px solid black; width: 300px; height: 200px;">
|
|
<html:div class="mbox"></html:div>
|
|
<html:div class="mbox"></html:div>
|
|
<html:div class="mbox"></html:div>
|
|
<html:div class="mbox orange">
|
|
|
|
<button label="Show" type="menu" id="thebutton">
|
|
<menupopup id="thepopup" onpopupshown="popupShown(event)" onpopuphidden="SimpleTest.finish()">
|
|
<menuitem label="New"/>
|
|
<menuitem label="Open"/>
|
|
<menuitem label="Save"/>
|
|
<menuseparator/>
|
|
<menuitem label="Exit"/>
|
|
</menupopup>
|
|
</button>
|
|
|
|
</html:div>
|
|
</html:div>
|
|
</html:div>
|
|
|
|
</window>
|