| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Touch Adjustment : Too aggresive adjustments for large elements - bug 91262</title> |
| <script src="../resources/js-test-pre.js"></script> |
| <script src="resources/touchadjustment.js"></script> |
| <style> |
| #targetDiv { |
| background: #00f; |
| height: 400px; |
| width: 400px; |
| } |
| </style> |
| </head> |
| |
| <body> |
| |
| <div id="targetDiv"> |
| </div> |
| |
| <p id='description'></p> |
| <div id='console'></div> |
| |
| <script> |
| var element; |
| var adjustedNode; |
| var adjustedPoint; |
| var targetBounds; |
| var touchBounds; |
| |
| function runTouchTests() { |
| element = document.getElementById("targetDiv"); |
| element.addEventListener('click', function() {}, false); |
| document.addEventListener('click', function() {}, false); |
| |
| targetBounds = findAbsoluteBounds(element); |
| |
| var touchRadius = 10; |
| var offset = touchRadius / 2; |
| var midX = targetBounds.left + targetBounds.width / 2; |
| var midY = targetBounds.top + targetBounds.height / 2; |
| |
| debug('\nOverlapping touch above the target should snap to the top of the target element.'); |
| testTouch(midX, targetBounds.top - offset, touchRadius, targetBounds); |
| debug('\nOverlapping touch below the target should snap to the bottom of the target element.'); |
| testTouch(midX, targetBounds.top + targetBounds.height + offset, touchRadius, targetBounds); |
| debug('\nOverlapping touch left of the target should snap to the left side of the target element.'); |
| testTouch(targetBounds.left - offset, midY, touchRadius, targetBounds); |
| debug('\nOverlapping touch right of the target should snap to the right side of the target element.'); |
| testTouch(targetBounds.left + targetBounds.width + offset, midY, touchRadius, targetBounds); |
| debug('\nTest touch area contained within the target element.'); |
| testTouch(midX, midY, touchRadius, targetBounds); |
| } |
| |
| function testTouch(touchX, touchY, radius, targetBounds) { |
| |
| touchBounds = { |
| x: touchX - radius, |
| y: touchY - radius, |
| width: 2 * radius, |
| height: 2 * radius |
| }; |
| adjustedNode = internals.touchNodeAdjustedToBestClickableNode(touchBounds.x, touchBounds.y, touchBounds.width, touchBounds.height, document); |
| shouldBe('adjustedNode.id', 'element.id'); |
| adjustedPoint = internals.touchPositionAdjustedToBestClickableNode(touchBounds.x, touchBounds.y, touchBounds.width, touchBounds.height, document); |
| |
| shouldBeTrue('adjustedPoint.x >= targetBounds.left'); |
| shouldBeTrue('adjustedPoint.x <= targetBounds.left + targetBounds.width'); |
| shouldBeTrue('adjustedPoint.y >= targetBounds.top'); |
| shouldBeTrue('adjustedPoint.y <= targetBounds.top + targetBounds.height'); |
| shouldBeTrue('adjustedPoint.x >= touchBounds.x'); |
| shouldBeTrue('adjustedPoint.x <= touchBounds.x + touchBounds.width'); |
| shouldBeTrue('adjustedPoint.y >= touchBounds.y'); |
| shouldBeTrue('adjustedPoint.y <= touchBounds.y + touchBounds.height'); |
| } |
| |
| function runTests() |
| { |
| if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) { |
| description('Test touch adjustment on a large div. The adjusted touch point should lie inside the target element and within the touch area.'); |
| runTouchTests(); |
| } |
| } |
| runTests(); |
| </script> |
| <script src="../resources/js-test-post.js"></script> |
| </body> |
| </html> |
