blob: 290e7715e32a02a839878dde0e829a3ff3cd5be2 [file] [log] [blame]
<!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>