Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(452)

Side by Side Diff: LayoutTests/touchadjustment/pseudo-element.html

Issue 418133010: Fix touch adjustment to never return pseudo elements (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698