2007-07-17 05:21:53 -07:00
|
|
|
<?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"
|
2010-05-13 05:19:50 -07:00
|
|
|
onpopupshowing="popupShowingEventOccurred(event);"
|
|
|
|
|
onpopupshown="eventOccurred(event); openThePopup('inner')"
|
|
|
|
|
onpopuphiding="eventOccurred(event);"
|
|
|
|
|
onpopuphidden="eventOccurred(event); SimpleTest.finish();">
|
2007-07-17 05:21:53 -07:00
|
|
|
<button id="item1" label="First"/>
|
|
|
|
|
<label id="inner" value="Second" popup="innerpopup"/>
|
|
|
|
|
<button id="item2" label="Third"/>
|
|
|
|
|
</panel>
|
|
|
|
|
|
|
|
|
|
<menupopup id="innerpopup"
|
2010-05-13 05:19:50 -07:00
|
|
|
onpopupshowing="popupShowingEventOccurred(event);"
|
|
|
|
|
onpopupshown="eventOccurred(event); event.target.hidePopup();"
|
|
|
|
|
onpopuphiding="eventOccurred(event);"
|
|
|
|
|
onpopuphidden="eventOccurred(event); document.getElementById('outerpopup').hidePopup();">
|
2007-07-17 05:21:53 -07:00
|
|
|
<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, { });
|
|
|
|
|
}
|
|
|
|
|
|
2010-05-13 05:19:50 -07:00
|
|
|
function eventOccurred(event)
|
2007-07-17 05:21:53 -07:00
|
|
|
{
|
|
|
|
|
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");
|
|
|
|
|
}
|
|
|
|
|
|
2010-05-13 05:19:50 -07:00
|
|
|
function popupShowingEventOccurred(event)
|
2007-07-17 05:21:53 -07:00
|
|
|
{
|
|
|
|
|
// 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();
|
2008-11-26 13:52:42 -08:00
|
|
|
is(event.clientX, Math.round(rect.left + 4), testname + "clientX");
|
|
|
|
|
is(event.clientY, Math.round(rect.top + 5), testname + "clientY");
|
2007-07-17 05:21:53 -07:00
|
|
|
// 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>
|
