Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <title>Touch Adjustment: Shouldn't return pseudo elements - bug 395942</title> |
| 3 <head> | 3 <script src="../resources/js-test.js"></script> |
| 4 <title>Touch Adjustment : Too aggresive adjustments for large elements - bug 91262</title> | 4 <script src="resources/touchadjustment.js"></script> |
| 5 <script src="../resources/js-test.js"></script> | 5 <style> |
| 6 <script src="resources/touchadjustment.js"></script> | 6 #targetDiv { |
| 7 <style> | 7 height: 0; |
| 8 #targetDiv { | 8 width: 0; |
| 9 background: #00f; | 9 } |
| 10 height: 400px; | 10 #targetDiv:after { |
| 11 width: 400px; | 11 display: block; |
| 12 } | 12 position: relative; |
| 13 </style> | 13 left: 50px; |
| 14 </head> | 14 background-color: blue; |
| 15 | 15 width: 50px; |
| 16 <body> | 16 height: 50px; |
| 17 | 17 content: ''; |
| 18 } | |
| 19 </style> | |
| 18 <div id="targetDiv"> | 20 <div id="targetDiv"> |
| 19 </div> | 21 </div> |
| 20 | 22 |
| 21 <p id='description'></p> | 23 <p id='description'></p> |
| 22 <div id='console'></div> | 24 <div id='console'></div> |
| 23 | 25 |
| 24 <script> | 26 <script> |
| 25 var element; | 27 var element; |
| 26 var adjustedNode; | 28 var adjustedNode; |
| 27 var adjustedPoint; | 29 var adjustedPoint; |
| 28 var targetBounds; | 30 var targetBounds; |
| 29 var touchBounds; | 31 var touchBounds; |
| 30 | 32 |
| 31 function runTouchTests() { | 33 function runTouchTests() { |
| 32 element = document.getElementById("targetDiv"); | 34 element = document.getElementById("targetDiv"); |
| 33 element.addEventListener('click', function() {}, false); | 35 element.addEventListener('click', function() {}, false); |
| 34 document.addEventListener('click', function() {}, false); | 36 document.addEventListener('click', function() {}, false); |
| 35 | 37 |
| 36 targetBounds = findAbsoluteBounds(element); | 38 targetBounds = findAbsoluteBounds(element); |
| 37 | 39 |
| 40 // Adjust for offset to the pseudo element | |
| 41 targetBounds = { | |
| 42 left: targetBounds.left + 50, | |
| 43 top: targetBounds.top, | |
| 44 width: 50, | |
| 45 height: 50 | |
| 46 } | |
|
kevers
2014/07/25 20:46:55
nit: missing trailing semicolon.
| |
| 47 | |
| 38 var touchRadius = 10; | 48 var touchRadius = 10; |
| 39 var offset = touchRadius / 2; | 49 var offset = touchRadius / 2; |
| 40 var midX = targetBounds.left + targetBounds.width / 2; | 50 var midX = targetBounds.left + targetBounds.width / 2; |
| 41 var midY = targetBounds.top + targetBounds.height / 2; | 51 var midY = targetBounds.top + targetBounds.height / 2; |
| 42 | 52 |
| 43 debug('\nOverlapping touch above the target should snap to the top of th e target element.'); | 53 debug('Test touch area contained within the pseudo element.'); |
| 54 testTouch(midX, midY, touchRadius, targetBounds); | |
| 55 debug(''); | |
| 56 | |
| 57 debug('Overlapping touch above the target should snap to the top of the pseudo element.'); | |
| 44 testTouch(midX, targetBounds.top - offset, touchRadius, targetBounds); | 58 testTouch(midX, targetBounds.top - offset, touchRadius, targetBounds); |
| 45 debug('\nOverlapping touch below the target should snap to the bottom of the target element.'); | 59 debug(''); |
| 60 | |
| 61 debug('Overlapping touch below the target should snap to the bottom of t he pseudo element.'); | |
| 46 testTouch(midX, targetBounds.top + targetBounds.height + offset, touchRa dius, targetBounds); | 62 testTouch(midX, targetBounds.top + targetBounds.height + offset, touchRa dius, targetBounds); |
| 47 debug('\nOverlapping touch left of the target should snap to the left si de of the target element.'); | 63 debug(''); |
| 64 | |
| 65 debug('Overlapping touch left of the target should snap to the left side of the pseudo element.'); | |
| 48 testTouch(targetBounds.left - offset, midY, touchRadius, targetBounds); | 66 testTouch(targetBounds.left - offset, midY, touchRadius, targetBounds); |
| 49 debug('\nOverlapping touch right of the target should snap to the right side of the target element.'); | 67 debug(''); |
| 68 | |
| 69 debug('Overlapping touch right of the target should snap to the right si de of the pseudo element.'); | |
| 50 testTouch(targetBounds.left + targetBounds.width + offset, midY, touchRa dius, targetBounds); | 70 testTouch(targetBounds.left + targetBounds.width + offset, midY, touchRa dius, targetBounds); |
| 51 debug('\nTest touch area contained within the target element.'); | 71 debug(''); |
| 52 testTouch(midX, midY, touchRadius, targetBounds); | |
| 53 } | 72 } |
| 54 | 73 |
| 55 function testTouch(touchX, touchY, radius, targetBounds) { | 74 function testTouch(touchX, touchY, radius, targetBounds) { |
| 56 | 75 |
| 57 touchBounds = { | 76 touchBounds = { |
| 58 x: touchX - radius, | 77 x: touchX - radius, |
| 59 y: touchY - radius, | 78 y: touchY - radius, |
| 60 width: 2 * radius, | 79 width: 2 * radius, |
| 61 height: 2 * radius | 80 height: 2 * radius |
| 62 }; | 81 }; |
| 63 adjustedNode = internals.touchNodeAdjustedToBestClickableNode(touchBound s.x, touchBounds.y, touchBounds.width, touchBounds.height, document); | 82 adjustedNode = internals.touchNodeAdjustedToBestClickableNode(touchBound s.x, touchBounds.y, touchBounds.width, touchBounds.height, document); |
| 64 shouldBe('adjustedNode.id', 'element.id'); | 83 shouldBe('adjustedNode.id', 'element.id'); |
| 65 adjustedPoint = internals.touchPositionAdjustedToBestClickableNode(touch Bounds.x, touchBounds.y, touchBounds.width, touchBounds.height, document); | 84 adjustedPoint = internals.touchPositionAdjustedToBestClickableNode(touch Bounds.x, touchBounds.y, touchBounds.width, touchBounds.height, document); |
| 66 | 85 |
| 67 shouldBeTrue('adjustedPoint.x >= targetBounds.left'); | 86 shouldBeTrue('adjustedPoint.x >= targetBounds.left'); |
| 68 shouldBeTrue('adjustedPoint.x <= targetBounds.left + targetBounds.width' ); | 87 shouldBeTrue('adjustedPoint.x <= targetBounds.left + targetBounds.width' ); |
| 69 shouldBeTrue('adjustedPoint.y >= targetBounds.top'); | 88 shouldBeTrue('adjustedPoint.y >= targetBounds.top'); |
| 70 shouldBeTrue('adjustedPoint.y <= targetBounds.top + targetBounds.height' ); | 89 shouldBeTrue('adjustedPoint.y <= targetBounds.top + targetBounds.height' ); |
| 71 shouldBeTrue('adjustedPoint.x >= touchBounds.x'); | 90 shouldBeTrue('adjustedPoint.x >= touchBounds.x'); |
| 72 shouldBeTrue('adjustedPoint.x <= touchBounds.x + touchBounds.width'); | 91 shouldBeTrue('adjustedPoint.x <= touchBounds.x + touchBounds.width'); |
| 73 shouldBeTrue('adjustedPoint.y >= touchBounds.y'); | 92 shouldBeTrue('adjustedPoint.y >= touchBounds.y'); |
| 74 shouldBeTrue('adjustedPoint.y <= touchBounds.y + touchBounds.height'); | 93 shouldBeTrue('adjustedPoint.y <= touchBounds.y + touchBounds.height'); |
| 75 } | 94 } |
| 76 | 95 |
| 77 function runTests() | 96 description('Test touch adjustment over pseudo elements. Pseudo elements sh ould be candidates for adjustment, but should not themselves be returned as vali d target nodes.'); |
| 78 { | 97 |
| 79 if (window.testRunner && window.internals && internals.touchNodeAdjusted ToBestClickableNode) { | 98 if (window.internals) { |
|
kevers
2014/07/25 20:46:55
Should we be testing for window.testRunner as well
| |
| 80 description('Test touch adjustment on a large div. The adjusted tou ch point should lie inside the target element and within the touch area.'); | 99 runTouchTests(); |
| 81 runTouchTests(); | |
| 82 } | |
| 83 } | 100 } |
| 84 runTests(); | |
| 85 </script> | 101 </script> |
| 86 </body> | |
| 87 </html> | |
| OLD | NEW |