test_mousecapture_area.html

Enable keyboard shortcuts

<!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>