1 files changed, 106 insertions, 0 deletions
diff --git a/toolkit/content/tests/widgets/test_mousecapture_area.html b/toolkit/content/tests/widgets/test_mousecapture_area.html
new file mode 100644
index 0000000000..7217d971eb
--- /dev/null
+++ b/toolkit/content/tests/widgets/test_mousecapture_area.html
@@ -0,0 +1,106 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Mouse capture on area elements tests</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script 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 send a useless click to each image to force it to setup its image
+  // map, because flushing layout won't do it. Hopefully bug 135040 will make
+  // this not suck.
+  synthesizeMouse($("image"), 5, 5, { type: "mousedown" });
+  synthesizeMouse($("image"), 5, 5, { type: "mouseup" });
+  synthesizeMouse($("img1"), 5, 5, { type: "mousedown" });
+  synthesizeMouse($("img1"), 5, 5, { type: "mouseup" });
+  synthesizeMouse($("img2"), 5, 5, { type: "mousedown" });
+  synthesizeMouse($("img2"), 5, 5, { type: "mouseup" });
+
+
+  // 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" });
+
+  // Bug 862673 - nuke all content so assertions in this test are attributed to
+  // this test rather than the one which happens to follow.
+  var content = document.getElementById("content");
+  content.remove();
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForFocus(runTests);
+
+</script>
+</pre>
+</body>
+</html>