1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
<!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>
<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>
</body>
</html>
|
