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
|
<!DOCTYPE html>
<html>
<head>
<title>Touch Adjustment : Shadow DOM Element Search Cancel Button - bug 91894</title>
<script src="../resources/js-test.js"></script>
<script src="resources/touchadjustment.js"></script>
<style>
input[type='search'] {
-webkit-appearance: none;
-webkit-box-sizing: border-box;
border: 1px solid #999;
padding: 5px;
}
input[type='search']::-webkit-search-cancel-button {
-webkit-appearance: none;
-webkit-box-sizing: border-box;
background: #999;
height: 10px;
margin: 0;
padding: 0;
width: 10px;
}
</style>
</head>
<body>
<div>
<input id="target" type="search" value="abcd">
</div>
<p id='description'></p>
<div id='console'></div>
<script>
var element;
var adjustedNode;
var adjustedPoint;
var inputBounds;
var cancelBounds;
var textContentBounds;
var touchBounds;
var targetBounds;
var targetContainsPoint;
var touchContainsPoint;
function runTouchTests() {
document.addEventListener('click', function() {}, false);
element = document.getElementById('target');
element.focus();
inputBounds = findAbsoluteBounds(element);
var touchRadius = 20;
var offset = touchRadius / 2;
// Center of cancel button.
var midX = inputBounds.left + inputBounds.width - 11;
var midY = inputBounds.top + inputBounds.height / 2;
cancelBounds = {
left: midX - 5,
top: midY - 5,
width: 10,
height: 10
};
textContentBounds = {
left: inputBounds.left,
top: inputBounds.top,
width: inputBounds.width - 16,
height: inputBounds.height
};
debug('\nTouch centered on cancel button but overlapping neighboring candidate.');
testTouch(midX, midY, touchRadius, cancelBounds);
debug('\nOff-center touches enclosing cancel button.');
testTouch(midX - offset, midY, touchRadius, cancelBounds);
testTouch(midX - offset, midY + offset, touchRadius, cancelBounds);
testTouch(midX - offset, midY - offset, touchRadius, cancelBounds);
debug('\nTouches clipping left edge of cancel-button.');
testTouch(midX - touchRadius - 2, midY, touchRadius, textContentBounds);
testTouch(midX - touchRadius - 2, midY - offset, touchRadius, textContentBounds);
testTouch(midX - touchRadius - 2, midY + offset, touchRadius, textContentBounds);
}
function testTouch(touchX, touchY, radius, bounds) {
targetBounds = bounds;
touchBounds = {
left: touchX - radius,
top: touchY - radius,
width: 2 * radius,
height: 2 * radius
};
adjustedPoint = internals.touchPositionAdjustedToBestClickableNode(touchBounds.left, touchBounds.top, touchBounds.width, touchBounds.height, document);
targetContainsPoint = containsPoint(targetBounds, adjustedPoint);
touchContainsPoint = containsPoint(touchBounds, adjustedPoint);
shouldBeTrue('targetContainsPoint');
shouldBeTrue('touchContainsPoint');
}
function containsPoint(bounds, point) {
return bounds.left <= point.x && bounds.top <= point.y && bounds.left + bounds.width >= point.x && bounds.left + bounds.height >= point.y;
}
function runTests()
{
if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
description('Test touch adjustment on a search field with a visible cancel button.');
runTouchTests();
}
}
runTests();
</script>
</body>
</html>
|
