test_popupincontent.xhtml

Enable keyboard shortcuts

<?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>