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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
|
<!DOCTYPE HTML>
<html id="html" style="height:100%">
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=780847
-->
<head>
<title>Test radii for mouse events</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
.target { position:absolute; left:100px; top:100px; width:100px; height:100px; background:blue; }
</style>
</head>
<body id="body" onload="setTimeout(startTest, 0)" style="margin:0; width:100%; height:100%; overflow:hidden">
<p id="display"></p>
<div id="content">
<div id="ruler" style="position:absolute; left:0; top:0; width:1mozmm; height:0;"></div>
<!-- the iframe holding this test is only 300px tall on B2G, so we need to
make the t target shorter than normal to test the bottom edge fluffing
-->
<div class="target" style="height:80px" id="t" onmousedown="x=1"></div>
<div class="target" id="t2" hidden></div>
<input class="target" id="t3_1" hidden></input>
<a href="#" class="target" id="t3_2" hidden></a>
<label class="target" id="t3_3" hidden></label>
<button class="target" id="t3_4" hidden></button>
<select class="target" id="t3_5" hidden></select>
<textarea class="target" id="t3_6" hidden></textarea>
<div role="button" class="target" id="t3_7" hidden></div>
<div role="key" class="target" id="t3_8" hidden></div>
<img class="target" id="t3_9" hidden></img>
<div class="target" style="transform:translate(-80px,0);" id="t4" onmousedown="x=1" hidden></div>
<div class="target" style="left:0; z-index:1" id="t5_left" onmousedown="x=1" hidden></div>
<div class="target" style="left:106px;" id="t5_right" onmousedown="x=1" hidden></div>
<div class="target" style="left:0; top:210px;" id="t5_below" onmousedown="x=1" hidden></div>
<div class="target" id="t6" onmousedown="x=1" style="width: 300px" hidden>
<div id="t6_inner" style="position:absolute; left:-40px; top:20px; width:60px; height:60px; background:yellow;"></div>
<div id="t6_inner_clickable" style="position:absolute; left:-40px; top: 80px; width: 60px; height: 5px; background:red" onmousedown="x=1"></div>
</div>
<div id="t6_outer" style="position:absolute; left:360px; top:120px; width:60px; height:60px; background:green;" onmousedown="x=1" hidden></div>
<div class="target" id="t7" onmousedown="x=1" hidden></div>
<div class="target" id="t7_over" hidden></div>
<div id="t8" contenteditable="true" class="target" hidden></div>
<div id="t9" class="target" ontouchend="x=1" hidden></div>
<div id="t10_left" class="target" style="left:-50px;" onmousedown="x=1" hidden></div>
<div id="t10_right" class="target" style="left:auto;right:-50px" onmousedown="x=1" hidden></div>
<div id="t10_top" class="target" style="top:-50px;" onmousedown="x=1" hidden></div>
<div id="t10_bottom" class="target" style="top:auto;bottom:-50px;" onmousedown="x=1" hidden></div>
<div id="t10_over" style="position:absolute; left:0; top:0; width:100%; height:100%; background:yellow;" hidden></div>
</div>
<pre id="test">
<script type="application/javascript">
function startTest() {
SpecialPowers.pushPrefEnv({"set": [["ui.mouse.radius.enabled", true],
["ui.mouse.radius.inputSource.touchOnly", false],
["ui.mouse.radius.leftmm", 12],
["ui.mouse.radius.topmm", 8],
["ui.mouse.radius.rightmm", 4],
["ui.mouse.radius.bottommm", 4],
["ui.mouse.radius.visitedweight", 50]]}, runTest);
}
SimpleTest.waitForExplicitFinish();
function endTest() {
SimpleTest.finish();
}
var eventTarget;
window.onmousedown = function(event) { eventTarget = event.target; };
function testMouseClick(idPosition, dx, dy, idTarget, msg, options) {
eventTarget = null;
synthesizeMouse(document.getElementById(idPosition), dx, dy, options || {});
try {
is(eventTarget.id, idTarget,
"checking '" + idPosition + "' offset " + dx + "," + dy + " [" + msg + "]");
} catch (ex) {
ok(false, "checking '" + idPosition + "' offset " + dx + "," + dy + " [" + msg + "]; got " + eventTarget);
}
}
function setShowing(id, show) {
var e = document.getElementById(id);
e.hidden = !show;
}
var mm;
function runTest() {
let resolution = 1;
if (SpecialPowers.Services.appinfo.name == "B2G") {
// This test runs on B2G as well, zoomed out. Therefore we need to account
// for the resolution as well, because the fluff area is relative to screen
// pixels rather than CSS pixels.
let out = {};
SpecialPowers.getDOMWindowUtils(window.top).getResolution(out);
resolution = 1.0 / out.value;
}
mm = document.getElementById("ruler").getBoundingClientRect().width * resolution;
ok(4*mm >= 10, "WARNING: mm " + mm + " too small in this configuration. Test results will be bogus");
// Test basic functionality: clicks sufficiently close to the element
// should be allowed to hit the element. We test points just inside and
// just outside the edges we set up in the prefs.
testMouseClick("t", 100 + 13*mm, 10, "body", "basic functionality");
testMouseClick("t", 100 + 11*mm, 10, "t", "basic functionality");
testMouseClick("t", 10, 80 + 9*mm, "body", "basic functionality");
testMouseClick("t", 10, 80 + 7*mm, "t", "basic functionality");
testMouseClick("t", -5*mm, 10, "body", "basic functionality");
testMouseClick("t", -3*mm, 10, "t", "basic functionality");
testMouseClick("t", 10, -5*mm, "body", "basic functionality");
testMouseClick("t", 10, -3*mm, "t", "basic functionality");
// When inputSource.touchOnly is true, mouse input is not retargeted.
SpecialPowers.pushPrefEnv({"set": [["ui.mouse.radius.inputSource.touchOnly", true]]}, test2);
}
function test2() {
testMouseClick("t", 100 + 11*mm, 10, "body", "disabled for mouse input");
testMouseClick("t", 100 + 11*mm, 10, "t", "enabled for touch input", {
inputSource: SpecialPowers.Ci.nsIDOMMouseEvent.MOZ_SOURCE_TOUCH
});
testMouseClick("t", 100 + 13*mm, 10, "body", "basic functionality for touch", {
inputSource: SpecialPowers.Ci.nsIDOMMouseEvent.MOZ_SOURCE_TOUCH
});
SpecialPowers.pushPrefEnv({"set": [["ui.mouse.radius.inputSource.touchOnly", false]]}, test3);
}
function test3() {
setShowing("t", false);
// Now test the criteria we use to determine which elements are hittable
// this way.
setShowing("t2", true);
var t2 = document.getElementById("t2");
// Unadorned DIVs are not click radius targets
testMouseClick("t2", 100 + 11*mm, 10, "body", "unadorned DIV");
// DIVs with the right event handlers are click radius targets
t2.onmousedown = function() {};
testMouseClick("t2", 100 + 11*mm, 10, "t2", "DIV with onmousedown");
t2.onmousedown = null;
testMouseClick("t2", 100 + 11*mm, 10, "body", "DIV with onmousedown removed");
t2.onmouseup = function() {};
testMouseClick("t2", 100 + 11*mm, 10, "t2", "DIV with onmouseup");
t2.onmouseup = null;
t2.onclick = function() {};
testMouseClick("t2", 100 + 11*mm, 10, "t2", "DIV with onclick");
t2.onclick = null;
// Keypresses don't make click radius targets
t2.onkeypress = function() {};
testMouseClick("t2", 100 + 11*mm, 10, "body", "DIV with onkeypress");
t2.onkeypress = null;
setShowing("t2", false);
// Now check that certain elements are click radius targets and others are not
for (var i = 1; i <= 9; ++i) {
var id = "t3_" + i;
var shouldHit = i <= 8;
setShowing(id, true);
testMouseClick(id, 100 + 11*mm, 10, shouldHit ? id : "body",
"<" + document.getElementById(id).tagName + "> element");
setShowing(id, false);
}
// Check that our targeting computations take into account the effects of
// CSS transforms
setShowing("t4", true);
testMouseClick("t4", -1, 10, "t4", "translated DIV");
setShowing("t4", false);
// Test the prioritization of multiple targets based on distance to
// the target.
setShowing("t5_left", true);
setShowing("t5_right", true);
setShowing("t5_below", true);
testMouseClick("t5_left", 102, 10, "t5_left", "closest DIV is left");
testMouseClick("t5_left", 102.5, 10, "t5_left",
"closest DIV to midpoint is left because of its higher z-index");
testMouseClick("t5_left", 104, 10, "t5_right", "closest DIV is right");
testMouseClick("t5_left", 10, 104, "t5_left", "closest DIV is left");
testMouseClick("t5_left", 10, 105, "t5_left",
"closest DIV to midpoint is left because of its higher z-index");
testMouseClick("t5_left", 10, 106, "t5_below", "closest DIV is below");
setShowing("t5_left", false);
setShowing("t5_right", false);
setShowing("t5_below", false);
// Test behavior of nested elements.
// The following behaviors are questionable and may need to be changed.
setShowing("t6", true);
setShowing("t6_outer", true);
testMouseClick("t6_inner", -1, 10, "t6_inner",
"inner element is clickable because its parent is, even when it sticks outside parent");
testMouseClick("t6_inner", 39, -1, "t6_inner",
"when outside both inner and parent, but in range of both, the inner is selected");
testMouseClick("t6_inner", 45, -1, "t6_inner",
"clicking in clickable parent close to inner activates inner, not parent");
testMouseClick("t6_inner_clickable", 1, -1, "t6_inner",
"clicking on inner doesn't get redirected to inner_clickable because they are both clickable");
testMouseClick("t6_inner_clickable", 1, 1, "t6_inner_clickable",
"clicking on inner_clickable doesn't get redirected to inner because they are both clickable");
testMouseClick("t6_inner_clickable", 45, -1, "t6_inner",
"clicking on inner while backed by its parent still doesn't get redirected to inner_clickable");
testMouseClick("t6_inner_clickable", 45, 1, "t6_inner_clickable",
"clicking on inner_clickable while backed by its parent still doesn't get redirected to inner");
testMouseClick("t6_inner_clickable", 45, 6, "t6_inner_clickable",
"clicking on parent near inner_clickable gets redirected to inner_clickable rather than inner because it is closer");
// 280 is the distance from t6_inner's right edge to t6's right edge
// 240 is the distance from t6_inner's right edge to t6_outer's right edge.
// we want to click on t6, but at least 13mm away from t6_inner, so that
// t6_inner doesn't steal the click.
ok(13*mm < 280, "no point inside t6 that's not within radius of t6_inner; adjust layout of t6/inner/outer as needed");
testMouseClick("t6_outer", -240 + 13*mm, -1, "t6",
"clicking in clickable container close to outer activates parent, not outer");
testMouseClick("t6_outer", 1, 1, "t6_outer",
"clicking directly on the outer activates it");
setShowing("t6", false);
setShowing("t6_outer", false);
setShowing("t7", true);
setShowing("t7_over", true);
testMouseClick("t7", 100 + 11*mm, 10, "body", "covered div is not clickable");
testMouseClick("t7", 10, 10, "t7_over", "covered div is not clickable even within its bounds");
setShowing("t7", false);
setShowing("t7_over", false);
// Check that contenteditable elements are considered clickable for fluffing.
setShowing("t8", true);
var rect = document.getElementById("t8").getBoundingClientRect();
testMouseClick("t8", rect.left + 1, rect.top + 1, "t8", "content editable enabled for mouse input");
testMouseClick("t8", rect.left + 1, rect.top + 1, "t8", "content editable enabled for touch input", {
inputSource: SpecialPowers.Ci.nsIDOMMouseEvent.MOZ_SOURCE_TOUCH
});
setShowing("t8", false);
// Check that elements are touchable
setShowing("t9", true);
var rect = document.getElementById("t9").getBoundingClientRect();
testMouseClick("t9", rect.left + 1, rect.top + 1, "t9", "div enabled with mouse input");
testMouseClick("t9", rect.left + 1, rect.top + 1, "t9", "div enabled with touch input", {
inputSource: SpecialPowers.Ci.nsIDOMMouseEvent.MOZ_SOURCE_TOUCH
});
setShowing("t9", false);
setShowing("t10_over", true);
setShowing("t10_left", true);
setShowing("t10_right", true);
setShowing("t10_top", true);
setShowing("t10_bottom", true);
testMouseClick("t10_left", 51, 10, "t10_over", "element outside of visible area is not selected");
if (self.frameElement &&
(self.frameElement.offsetLeft + self.innerWidth >
SpecialPowers.wrap(top).innerWidth)) {
info("WARNING: Window is too narrow, can't test t10_right");
} else {
testMouseClick("t10_right", 49, 10, "t10_over", "element outside of visible area is not selected");
}
testMouseClick("t10_top", 10, 51, "t10_over", "element outside of visible area is not selected");
if (self.frameElement &&
(self.frameElement.offsetTop + self.innerHeight >
SpecialPowers.wrap(top).innerHeight)) {
info("WARNING: Window is too short, can't test t10_bottom");
} else {
testMouseClick("t10_bottom", 10, 49, "t10_over", "element outside of visible area is not selected");
}
setShowing("t10_over", false);
setShowing("t10_left", false);
setShowing("t10_right", false);
setShowing("t10_top", false);
setShowing("t10_bottom", false);
// Not yet tested:
// -- visited link weight
// -- "Closest" using Euclidean distance
endTest();
}
</script>
</pre>
</body>
</html>
|
