toolkit/content/tests/widgets/test_mousecapture_area.html@6474c204b198
toolkit/content/tests/widgets/test_mousecapture_area.html
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>Mouse capture on area elements tests</title>
5 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
6 <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
8 </head>
9 <body>
10 <p id="display"></p>
12 <div id="content">
13 <!-- The border="0" on the images is needed so that when we use
14 synthesizeMouse we don't accidentally target the border of the image and
15 miss the area because synthesizeMouse gets the rect of the primary frame
16 of the target (the area), which is the image due to bug 135040, which
17 includes the border, but the events targetted at the border aren't
18 targeted at the area. -->
20 <!-- 20x20 of red -->
21 <img id="image" border="0"
22 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
23 usemap="#Map"/>
25 <map name="Map">
26 <!-- area over the whole image -->
27 <area id="area" onmousedown="this.setCapture();" onmouseup="this.releaseCapture();"
28 shape="poly" coords="0,0, 0,20, 20,20, 20,0" href="javascript:void(0);"/>
29 </map>
32 <!-- 20x20 of red -->
33 <img id="img1" border="0"
34 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
35 usemap="#sharedMap"/>
37 <!-- 20x20 of red -->
38 <img id="img2" border="0"
39 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
40 usemap="#sharedMap"/>
42 <map name="sharedMap">
43 <!-- area over the whole image -->
44 <area id="sharedarea" onmousedown="this.setCapture();" onmouseup="this.releaseCapture();"
45 shape="poly" coords="0,0, 0,20, 20,20, 20,0" href="javascript:void(0);"/>
46 </map>
49 <div id="otherelement" style="width: 100px; height: 100px;"></div>
50 </div>
52 <pre id="test">
53 <script class="testbody" type="text/javascript">
55 SimpleTest.expectAssertions(3);
57 SimpleTest.waitForExplicitFinish();
59 function runTests()
60 {
61 //XXX We send a useless click to each image to force it to setup its image
62 // map, because flushing layout won't do it. Hopefully bug 135040 will make
63 // this not suck.
64 synthesizeMouse($("image"), 5, 5, { type: "mousedown" });
65 synthesizeMouse($("image"), 5, 5, { type: "mouseup" });
66 synthesizeMouse($("img1"), 5, 5, { type: "mousedown" });
67 synthesizeMouse($("img1"), 5, 5, { type: "mouseup" });
68 synthesizeMouse($("img2"), 5, 5, { type: "mousedown" });
69 synthesizeMouse($("img2"), 5, 5, { type: "mouseup" });
72 // test that setCapture works on an area element (bug 517737)
73 var area = document.getElementById("area");
74 synthesizeMouse(area, 5, 5, { type: "mousedown" });
75 synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
76 area, "mousemove", "setCapture works on areas");
77 synthesizeMouse(area, 5, 5, { type: "mouseup" });
79 // test that setCapture works on an area element when it is part of an image
80 // map that is used by two images
82 var img1 = document.getElementById("img1");
83 var sharedarea = document.getElementById("sharedarea");
84 // synthesizeMouse just sends the event by coordinates, so this is really a click on the area
85 synthesizeMouse(img1, 5, 5, { type: "mousedown" });
86 synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
87 sharedarea, "mousemove", "setCapture works on areas with multiple images");
88 synthesizeMouse(img1, 5, 5, { type: "mouseup" });
90 var img2 = document.getElementById("img2");
91 // synthesizeMouse just sends the event by coordinates, so this is really a click on the area
92 synthesizeMouse(img2, 5, 5, { type: "mousedown" });
93 synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
94 sharedarea, "mousemove", "setCapture works on areas with multiple images");
95 synthesizeMouse(img2, 5, 5, { type: "mouseup" });
97 // Bug 862673 - nuke all content so assertions in this test are attributed to
98 // this test rather than the one which happens to follow.
99 var content = document.getElementById("content");
100 content.parentNode.removeChild(content);
101 SimpleTest.finish();
102 }
104 SimpleTest.waitForFocus(runTests);
106 </script>
107 </pre>
108 </body>
109 </html>
