test_popup_coords.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 Coordinate Tests"

  onload="setTimeout(openThePopup, 0, 'outer');"

  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>

<deck style="margin-top: 5px; padding-top: 5px;">

  <label id="outer" style="display: block" popup="outerpopup" value="Popup"/>

</deck>

<panel id="outerpopup"

           onpopupshowing="popupShowingEventOccurred(event);"

           onpopupshown="eventOccurred(event); openThePopup('inner')"

           onpopuphiding="eventOccurred(event);"

           onpopuphidden="eventOccurred(event); SimpleTest.finish();">

  <button id="item1" label="First"/>

  <label id="inner" value="Second" popup="innerpopup"/>

  <button id="item2" label="Third"/>

</panel>

<menupopup id="innerpopup"

           onpopupshowing="popupShowingEventOccurred(event);"

           onpopupshown="eventOccurred(event); event.target.hidePopup();"

           onpopuphiding="eventOccurred(event);"

           onpopuphidden="eventOccurred(event); document.getElementById('outerpopup').hidePopup();">

  <menuitem id="inner1" label="Inner First"/>

  <menuitem id="inner2" label="Inner Second"/>

</menupopup>

<script>

SimpleTest.waitForExplicitFinish();

function openThePopup(id)

  if (id == "inner")

    document.getElementById("item1").focus();

  var trigger = document.getElementById(id);

  synthesizeMouse(trigger, 4, 5, { });

function eventOccurred(event)

  var testname = event.type + " on " + event.target.id + " ";

  ok(MouseEvent.isInstance(event), testname + "is a mouse event");

  is(event.clientX, 0, testname + "clientX");

  is(event.clientY, 0, testname + "clientY");

  is(event.rangeParent, null, testname + "rangeParent");

  is(event.rangeOffset, 0, testname + "rangeOffset");

function popupShowingEventOccurred(event)

  // the popupshowing event should have the event coordinates and

  // range position filled in.

  var testname = "popupshowing on " + event.target.id + " ";

  ok(MouseEvent.isInstance(event), testname + "is a mouse event");

  var trigger = document.getElementById(event.target.id == "outerpopup" ? "outer" : "inner");

  var rect = trigger.getBoundingClientRect();

  is(event.clientX, Math.round(rect.left + 4), testname + "clientX");

  is(event.clientY, Math.round(rect.top + 5), testname + "clientY");

  // rangeOffset should be just at the trigger element, since they are labels

  // they don't have any childrens so the offset should be zero.

  is(event.rangeParent, trigger, testname + "rangeParent");

  is(event.rangeOffset, 0, testname + "rangeOffset");

  var popuprect = event.target.getBoundingClientRect();

  var marginLeft = parseFloat(getComputedStyle(event.target).marginLeft);

  var marginTop = parseFloat(getComputedStyle(event.target).marginTop);

  is(Math.round(popuprect.left - marginLeft), Math.round(rect.left + 4), "popup left");

  is(Math.round(popuprect.top - marginTop), Math.round(rect.top + 5), "popup top");

  ok(popuprect.width > 0, "popup width");

  ok(popuprect.height > 0, "popup height");

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