gecko/toolkit/content/tests/widgets/test_mousecapture_area.html
2010-02-02 20:07:19 -06:00

106 lines
4.1 KiB
HTML

<!DOCTYPE HTML>
<html>
<head>
<title>Mouse capture on area elements tests</title>
<script type="text/javascript" src="/MochiKit/packed.js"></script>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<p id="display"></p>
<div id="content">
<!-- The border="0" on the images is needed so that when we use
synthesizeMouse we don't accidentally target the border of the image and
miss the area because synthesizeMouse gets the rect of the primary frame
of the target (the area), which is the image due to bug 135040, which
includes the border, but the events targetted at the border aren't
targeted at the area. -->
<!-- 20x20 of red -->
<img id="image" border="0"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
usemap="#Map"/>
<map name="Map">
<!-- area over the whole image -->
<area id="area" onmousedown="this.setCapture();" onmouseup="this.releaseCapture();"
shape="poly" coords="0,0, 0,20, 20,20, 20,0" href="javascript:void(0);"/>
</map>
<!-- 20x20 of red -->
<img id="img1" border="0"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
usemap="#sharedMap"/>
<!-- 20x20 of red -->
<img id="img2" border="0"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
usemap="#sharedMap"/>
<map name="sharedMap">
<!-- area over the whole image -->
<area id="sharedarea" onmousedown="this.setCapture();" onmouseup="this.releaseCapture();"
shape="poly" coords="0,0, 0,20, 20,20, 20,0" href="javascript:void(0);"/>
</map>
<div id="otherelement" style="width: 100px; height: 100px;"></div>
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
SimpleTest.waitForExplicitFinish();
function runTests()
{
//XXX We need to make sure a paint has happened on the images because that is
// when the image maps actually get setup.
// Flush layout
document.body.offsetWidth;
// Flush out invalidation
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
var utils = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor).
getInterface(Components.interfaces.nsIDOMWindowUtils);
utils.processUpdates();
// test that setCapture works on an area element (bug 517737)
var area = document.getElementById("area");
synthesizeMouse(area, 5, 5, { type: "mousedown" });
synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
area, "mousemove", "setCapture works on areas");
synthesizeMouse(area, 5, 5, { type: "mouseup" });
// test that setCapture works on an area element when it is part of an image
// map that is used by two images
var img1 = document.getElementById("img1");
var sharedarea = document.getElementById("sharedarea");
// synthesizeMouse just sends the event by coordinates, so this is really a click on the area
synthesizeMouse(img1, 5, 5, { type: "mousedown" });
synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
sharedarea, "mousemove", "setCapture works on areas with multiple images");
synthesizeMouse(img1, 5, 5, { type: "mouseup" });
var img2 = document.getElementById("img2");
// synthesizeMouse just sends the event by coordinates, so this is really a click on the area
synthesizeMouse(img2, 5, 5, { type: "mousedown" });
synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
sharedarea, "mousemove", "setCapture works on areas with multiple images");
synthesizeMouse(img2, 5, 5, { type: "mouseup" });
SimpleTest.finish();
}
SimpleTest.waitForFocus(runTests);
</script>
</pre>
</body>
</html>