test_popup_moveToAnchor.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 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>

<vbox align="start" style="margin-left: 80px;">

  <button id="button1" label="Button 1" style="margin-top: 80px;"/>

  <button id="button2" label="Button 2" style="margin-top: 70px;"/>

</vbox>

<menupopup id="popup" onpopupshown="popupshown()" onpopuphidden="SimpleTest.finish()">

  <menuitem label="One"/>

  <menuitem label="Two"/>

</menupopup>

<script>

SimpleTest.waitForExplicitFinish();

function runTest()

  $("popup").openPopup($("button1"), "after_start");

function popupshown()

  var popup = $("popup");

  var popupheight = popup.getBoundingClientRect().height;

  var button1rect = $("button1").getBoundingClientRect();

  var button2rect = $("button2").getBoundingClientRect();

  var marginLeft = parseFloat(getComputedStyle(popup).marginLeft);

  var marginTop = parseFloat(getComputedStyle(popup).marginTop);

  checkCoords(popup, button1rect.left + marginLeft, button1rect.bottom + marginTop, "initial");

  popup.moveToAnchor($("button1"), "after_start", 0, 8);

  checkCoords(popup, button1rect.left + marginLeft, button1rect.bottom + 8 + marginTop, "move anchor top + 8");

  popup.moveToAnchor($("button1"), "after_start", 6, -10);

  checkCoords(popup, button1rect.left + 6 + marginLeft, button1rect.bottom - 10 + marginTop, "move anchor left + 6, top - 10");

  popup.moveToAnchor($("button1"), "before_start", -2, 0);

  checkCoords(popup, button1rect.left - 2 + marginLeft, button1rect.top - popupheight - marginTop, "move anchor before_start");

  popup.moveToAnchor($("button2"), "before_start");

  checkCoords(popup, button2rect.left + marginLeft, button2rect.top - popupheight - marginTop, "move button2");

  popup.moveToAnchor($("button1"), "end_before");

  checkCoords(popup, button1rect.right + marginLeft, button1rect.top + marginTop, "move anchor end_before");

  popup.moveToAnchor($("button2"), "after_start", 5, 4);

  checkCoords(popup, button2rect.left + 5 + marginLeft, button2rect.bottom + 4 + marginTop, "move button2 left + 5, top + 4");

  popup.moveTo($("button1").screenX + 10, $("button1").screenY + 12);

  checkCoords(popup, button1rect.left + 10, button1rect.top + 12, "move to button1 screen with offset");

  popup.moveToAnchor($("button1"), "after_start", 1, 2);

  checkCoords(popup, button1rect.left + 1 + marginLeft, button1rect.bottom + 2 + marginTop, "move button2 after screen");

  popup.hidePopup();

function checkCoords(popup, expectedx, expectedy, testid)

  var rect = popup.getBoundingClientRect();

  is(Math.round(rect.left), Math.round(expectedx), testid + " left");

  is(Math.round(rect.top), Math.round(expectedy), testid + " top");

SimpleTest.waitForFocus(runTest);

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