1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/toolkit/content/tests/widgets/test_mousecapture_area.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,109 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<head>
1.7 + <title>Mouse capture on area elements tests</title>
1.8 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.9 + <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
1.10 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.11 +</head>
1.12 +<body>
1.13 +<p id="display"></p>
1.14 +
1.15 +<div id="content">
1.16 + <!-- The border="0" on the images is needed so that when we use
1.17 + synthesizeMouse we don't accidentally target the border of the image and
1.18 + miss the area because synthesizeMouse gets the rect of the primary frame
1.19 + of the target (the area), which is the image due to bug 135040, which
1.20 + includes the border, but the events targetted at the border aren't
1.21 + targeted at the area. -->
1.22 +
1.23 + <!-- 20x20 of red -->
1.24 + <img id="image" border="0"
1.25 + src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
1.26 + usemap="#Map"/>
1.27 +
1.28 + <map name="Map">
1.29 + <!-- area over the whole image -->
1.30 + <area id="area" onmousedown="this.setCapture();" onmouseup="this.releaseCapture();"
1.31 + shape="poly" coords="0,0, 0,20, 20,20, 20,0" href="javascript:void(0);"/>
1.32 + </map>
1.33 +
1.34 +
1.35 + <!-- 20x20 of red -->
1.36 + <img id="img1" border="0"
1.37 + src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
1.38 + usemap="#sharedMap"/>
1.39 +
1.40 + <!-- 20x20 of red -->
1.41 + <img id="img2" border="0"
1.42 + src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
1.43 + usemap="#sharedMap"/>
1.44 +
1.45 + <map name="sharedMap">
1.46 + <!-- area over the whole image -->
1.47 + <area id="sharedarea" onmousedown="this.setCapture();" onmouseup="this.releaseCapture();"
1.48 + shape="poly" coords="0,0, 0,20, 20,20, 20,0" href="javascript:void(0);"/>
1.49 + </map>
1.50 +
1.51 +
1.52 + <div id="otherelement" style="width: 100px; height: 100px;"></div>
1.53 +</div>
1.54 +
1.55 +<pre id="test">
1.56 +<script class="testbody" type="text/javascript">
1.57 +
1.58 +SimpleTest.expectAssertions(3);
1.59 +
1.60 +SimpleTest.waitForExplicitFinish();
1.61 +
1.62 +function runTests()
1.63 +{
1.64 + //XXX We send a useless click to each image to force it to setup its image
1.65 + // map, because flushing layout won't do it. Hopefully bug 135040 will make
1.66 + // this not suck.
1.67 + synthesizeMouse($("image"), 5, 5, { type: "mousedown" });
1.68 + synthesizeMouse($("image"), 5, 5, { type: "mouseup" });
1.69 + synthesizeMouse($("img1"), 5, 5, { type: "mousedown" });
1.70 + synthesizeMouse($("img1"), 5, 5, { type: "mouseup" });
1.71 + synthesizeMouse($("img2"), 5, 5, { type: "mousedown" });
1.72 + synthesizeMouse($("img2"), 5, 5, { type: "mouseup" });
1.73 +
1.74 +
1.75 + // test that setCapture works on an area element (bug 517737)
1.76 + var area = document.getElementById("area");
1.77 + synthesizeMouse(area, 5, 5, { type: "mousedown" });
1.78 + synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
1.79 + area, "mousemove", "setCapture works on areas");
1.80 + synthesizeMouse(area, 5, 5, { type: "mouseup" });
1.81 +
1.82 + // test that setCapture works on an area element when it is part of an image
1.83 + // map that is used by two images
1.84 +
1.85 + var img1 = document.getElementById("img1");
1.86 + var sharedarea = document.getElementById("sharedarea");
1.87 + // synthesizeMouse just sends the event by coordinates, so this is really a click on the area
1.88 + synthesizeMouse(img1, 5, 5, { type: "mousedown" });
1.89 + synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
1.90 + sharedarea, "mousemove", "setCapture works on areas with multiple images");
1.91 + synthesizeMouse(img1, 5, 5, { type: "mouseup" });
1.92 +
1.93 + var img2 = document.getElementById("img2");
1.94 + // synthesizeMouse just sends the event by coordinates, so this is really a click on the area
1.95 + synthesizeMouse(img2, 5, 5, { type: "mousedown" });
1.96 + synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
1.97 + sharedarea, "mousemove", "setCapture works on areas with multiple images");
1.98 + synthesizeMouse(img2, 5, 5, { type: "mouseup" });
1.99 +
1.100 + // Bug 862673 - nuke all content so assertions in this test are attributed to
1.101 + // this test rather than the one which happens to follow.
1.102 + var content = document.getElementById("content");
1.103 + content.parentNode.removeChild(content);
1.104 + SimpleTest.finish();
1.105 +}
1.106 +
1.107 +SimpleTest.waitForFocus(runTests);
1.108 +
1.109 +</script>
1.110 +</pre>
1.111 +</body>
1.112 +</html>
