<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="/tests/SimpleTest/test.css" type="text/css"?>

<window title="Popup Coordinate Tests"
  onload="setTimeout(openThePopup, 0, 'outer');"
  xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <title>Popup Tests</title>
  <script type="application/javascript" src="/MochiKit/packed.js"></script>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>      
  <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>      

<deck style="margin-top: 5px; padding-top: 5px;">
  <label id="outer" popup="outerpopup" value="Popup"/>
</deck>

<panel id="outerpopup"
           onpopupshowing="popupShowingEventOccured(event);"
           onpopupshown="eventOccured(event); openThePopup('inner')"
           onpopuphiding="eventOccured(event);"
           onpopuphidden="eventOccured(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="popupShowingEventOccured(event);"
           onpopupshown="eventOccured(event); event.target.hidePopup();"
           onpopuphiding="eventOccured(event);"
           onpopuphidden="eventOccured(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 eventOccured(event)
{
  var testname = event.type + " on " + event.target.id + " ";
  ok(event instanceof MouseEvent, 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 popupShowingEventOccured(event)
{
  // the popupshowing event should have the event coordinates and
  // range position filled in.
  var testname = "popupshowing on " + event.target.id + " ";
  ok(event instanceof MouseEvent, 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 after the trigger element. As rangeOffset
  // considers the zeroth position to be before the first element, the value
  // should be one higher than its index within its parent.
  is(event.rangeParent, trigger.parentNode, testname + "rangeParent");
  is(event.rangeOffset, Array.indexOf(trigger.parentNode.childNodes, trigger) + 1, testname + "rangeOffset");
}
</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>
