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
|
<!DOCTYPE html>
<html>
<head>
<title>Touch Adjustment : Prefer deepest event handler - bug 78801</title>
<script src="../resources/ahem.js"></script>
<script src="../resources/js-test.js"></script>
<script src="resources/touchadjustment.js"></script>
<style>
#sandbox { font: 16px Ahem; }
.box { border: 1px solid black; border-radius: 5px 5px; margin: 12px; max-width: 40em; }
</style>
</head>
<body>
<div id=sandbox>
<div class=box id=mybox1>
Box with a local click handler.
</div>
<div class=box id=mybox2>
Box without a local click handler.
</div>
</div>
<script>
function monitor(e) { alert(e.target +( e.target.id ? ( ' #' + e.target.id) : '')); };
function doSomething(e) {};
var element = document.getElementById('mybox1');
element.addEventListener('click', doSomething, false);
element = document.body;
element.addEventListener('click', monitor, false);
</script>
<p id='description'></p>
<div id='console'></div>
<script>
var e = {};
['sandbox', 'mybox1', 'mybox2'].forEach(function(a) {
e[a] = document.getElementById(a);
});
function touchPointDoubleTouch(element1, element2, offset)
{
var bounds1 = findAbsoluteBounds(element1);
var bounds2 = findAbsoluteBounds(element2);
var bounds = new Object();
// We assume the elements have the same x coord and width.
bounds.left = bounds1.left + bounds1.width/2 - 1;
var y1 = bounds1.top + bounds1.height/2 + offset;
var y2 = bounds2.top + bounds2.height/2 - 1;
bounds.top = y1;
bounds.width = y2 - y1;
bounds.height = y2 - y1;
return bounds;
}
function testDirectTouches()
{
debug('Testing small direct hits.');
var touchpoint = offsetTouchPoint(findAbsoluteBounds(e.mybox1), 'center', 0, 2);
testTouchPoint(touchpoint, e.mybox1);
touchpoint = offsetTouchPoint(findAbsoluteBounds(e.mybox2), 'center', 0, 2);
testTouchPoint(touchpoint, e.mybox2);
}
function testPreferedTouch()
{
debug('Testing prefered hits.');
testTouchPoint(touchPointDoubleTouch(e.mybox1, e.mybox2, 0), e.mybox1);
// First test was centered, now move the test closer to the wrong node, and ensure we still get the prefered node.
testTouchPoint(touchPointDoubleTouch(e.mybox1, e.mybox2, 5), e.mybox1);
testTouchPoint(touchPointDoubleTouch(e.mybox1, e.mybox2, 8), e.mybox1);
}
function runTests()
{
if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
description('Test the case where a clickable target is nested inside a document that is monitoring clicks. The target with the local event-handler should be chosen if multiple targets are touched.');
testDirectTouches();
testPreferedTouch();
e['sandbox'].style.display = 'none';
}
}
runTests();
</script>
</body>
</html>
|
