src/third_party/WebKit/LayoutTests/touchadjustment/pseudo-element.html

   1 <!DOCTYPE html>
   2 <title>Touch Adjustment: Shouldn't return pseudo elements - bug 395942</title>
   3 <script src="../resources/js-test.js"></script>
   4 <script src="resources/touchadjustment.js"></script>
   5 <style>
   6     #targetDiv {
   7         height: 0;
   8         width: 0;
   9     }
  10     #targetDiv:after {
  11         display: block;
  12         position: relative;
  13         left: 50px;
  14         background-color: blue;
  15         width: 50px;
  16         height: 50px;
  17         content: '';
  18     }
  19 </style>
  20 <div id="targetDiv">
  21 </div>
  22
  23 <p id='description'></p>
  24 <div id='console'></div>
  25
  26 <script>
  27     var element;
  28     var adjustedNode;
  29     var adjustedPoint;
  30     var targetBounds;
  31     var touchBounds;
  32
  33     function runTouchTests() {
  34         element = document.getElementById("targetDiv");
  35         element.addEventListener('click', function() {}, false);
  36         document.addEventListener('click', function() {}, false);
  37
  38         targetBounds = findAbsoluteBounds(element);
  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         };
  47
  48         var touchRadius = 10;
  49         var offset = touchRadius / 2;
  50         var midX = targetBounds.left + targetBounds.width / 2;
  51         var midY = targetBounds.top + targetBounds.height / 2;
  52
  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.');
  58         testTouch(midX, targetBounds.top - offset, touchRadius, targetBounds);
  59         debug('');
  60
  61         debug('Overlapping touch below the target should snap to the bottom of the pseudo element.');
  62         testTouch(midX, targetBounds.top + targetBounds.height + offset, touchRadius, targetBounds);
  63         debug('');
  64
  65         debug('Overlapping touch left of the target should snap to the left side of the pseudo element.');
  66         testTouch(targetBounds.left - offset, midY, touchRadius, targetBounds);
  67         debug('');
  68
  69         debug('Overlapping touch right of the target should snap to the right side of the pseudo element.');
  70         testTouch(targetBounds.left + targetBounds.width + offset, midY, touchRadius, targetBounds);
  71         debug('');
  72     }
  73
  74     function testTouch(touchX, touchY, radius, targetBounds) {
  75
  76         touchBounds = {
  77             x: touchX - radius,
  78             y: touchY - radius,
  79             width: 2 * radius,
  80             height: 2 * radius
  81         };
  82         adjustedNode = internals.touchNodeAdjustedToBestClickableNode(touchBounds.x, touchBounds.y, touchBounds.width, touchBounds.height, document);
  83         shouldBe('adjustedNode.id', 'element.id');
  84         adjustedPoint = internals.touchPositionAdjustedToBestClickableNode(touchBounds.x, touchBounds.y, touchBounds.width, touchBounds.height, document);
  85
  86         shouldBeTrue('adjustedPoint.x >= targetBounds.left');
  87         shouldBeTrue('adjustedPoint.x <= targetBounds.left + targetBounds.width');
  88         shouldBeTrue('adjustedPoint.y >= targetBounds.top');
  89         shouldBeTrue('adjustedPoint.y <= targetBounds.top + targetBounds.height');
  90         shouldBeTrue('adjustedPoint.x >= touchBounds.x');
  91         shouldBeTrue('adjustedPoint.x <= touchBounds.x + touchBounds.width');
  92         shouldBeTrue('adjustedPoint.y >= touchBounds.y');
  93         shouldBeTrue('adjustedPoint.y <= touchBounds.y + touchBounds.height');
  94     }
  95
  96     description('Test touch adjustment over pseudo elements.  Pseudo elements should be candidates for adjustment, but should not themselves be returned as valid target nodes.');
  97
  98     if (window.internals) {
  99         runTouchTests();
 100     }
 101 </script>