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 |