| <!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> |