2010-02-02 18:07:19 -08:00
|
|
|
<!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()
|
|
|
|
|
{
|
2010-05-01 11:42:47 -07:00
|
|
|
//XXX We send a useless click to each image to force it to setup its image
|
2010-06-08 12:17:54 -07:00
|
|
|
// map, because flushing layout won't do it. Hopefully bug 135040 will make
|
|
|
|
|
// this not suck.
|
2010-02-19 14:14:24 -08:00
|
|
|
synthesizeMouse($("image"), 5, 5, { type: "mousedown" });
|
|
|
|
|
synthesizeMouse($("image"), 5, 5, { type: "mouseup" });
|
2010-05-01 11:42:47 -07:00
|
|
|
synthesizeMouse($("img1"), 5, 5, { type: "mousedown" });
|
|
|
|
|
synthesizeMouse($("img1"), 5, 5, { type: "mouseup" });
|
|
|
|
|
synthesizeMouse($("img2"), 5, 5, { type: "mousedown" });
|
|
|
|
|
synthesizeMouse($("img2"), 5, 5, { type: "mouseup" });
|
2010-02-19 14:14:24 -08:00
|
|
|
|
2010-02-02 18:07:19 -08:00
|
|
|
|
|
|
|
|
// 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>
|
