| <!DOCTYPE html> |
| <title>Touch Adjustment: Shouldn't return pseudo elements - bug 395942</title> |
| <script src="../resources/js-test.js"></script> |
| <script src="resources/touchadjustment.js"></script> |
| <style> |
| #targetDiv { |
| height: 0; |
| width: 0; |
| } |
| #targetDiv:after { |
| display: block; |
| position: relative; |
| left: 50px; |
| background-color: blue; |
| width: 50px; |
| height: 50px; |
| content: ''; |
| } |
| </style> |
| <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); |
| |
| // Adjust for offset to the pseudo element |
| targetBounds = { |
| left: targetBounds.left + 50, |
| top: targetBounds.top, |
| width: 50, |
| height: 50 |
| }; |
| |
| var touchRadius = 10; |
| var offset = touchRadius / 2; |
| var midX = targetBounds.left + targetBounds.width / 2; |
| var midY = targetBounds.top + targetBounds.height / 2; |
| |
| debug('Test touch area contained within the pseudo element.'); |
| testTouch(midX, midY, touchRadius, targetBounds); |
| debug(''); |
| |
| debug('Overlapping touch above the target should snap to the top of the pseudo element.'); |
| testTouch(midX, targetBounds.top - offset, touchRadius, targetBounds); |
| debug(''); |
| |
| debug('Overlapping touch below the target should snap to the bottom of the pseudo element.'); |
| testTouch(midX, targetBounds.top + targetBounds.height + offset, touchRadius, targetBounds); |
| debug(''); |
| |
| debug('Overlapping touch left of the target should snap to the left side of the pseudo element.'); |
| testTouch(targetBounds.left - offset, midY, touchRadius, targetBounds); |
| debug(''); |
| |
| debug('Overlapping touch right of the target should snap to the right side of the pseudo element.'); |
| testTouch(targetBounds.left + targetBounds.width + offset, midY, touchRadius, targetBounds); |
| debug(''); |
| } |
| |
| 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'); |
| } |
| |
| description('Test touch adjustment over pseudo elements. Pseudo elements should be candidates for adjustment, but should not themselves be returned as valid target nodes.'); |
| |
| if (window.internals) { |
| runTouchTests(); |
| } |
| </script> |
