gecko/toolkit/content/tests/chrome/test_popupincontent.xul

<?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 type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>      
  <script type="application/javascript" 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;" 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.
      var bo = document.documentElement.boxObject;
      popup.setAttribute("top", bo.screenY + window.innerHeight - 5);
      synthesizeMouse(menu, 2, 2, { });
      break;
    case "open near bottom":
      step = "large menu";
      popup.removeAttribute("left");
      popup.removeAttribute("top");
      for (var i = 0; i < 80; i++)
        menu.appendItem("Test", "");
      synthesizeMouse(menu, 2, 2, { });
      break;
    case "large menu":
      step = "shorter menu again";
      for (var i = 0; i < 80; i++)
        menu.removeItemAt(menu.itemCount - 1);
      synthesizeMouse(menu, 2, 2, { });
      break;
    case "shorter menu again":
      SimpleTest.finish();
      break;
  }
}

function popupShown()
{
  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>