third_party/WebKit/LayoutTests/touchadjustment/big-div.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>Touch Adjustment : Too aggresive adjustments for large elements - bug 91262</title>
   5     <script src="../resources/js-test.js"></script>
   6     <script src="resources/touchadjustment.js"></script>
   7     <style>
   8         #targetDiv {
   9             background: #00f;
  10             height: 400px;
  11             width: 400px;
  12         }
  13     </style>
  14 </head>
  15
  16 <body>
  17
  18 <div id="targetDiv">
  19 </div>
  20
  21 <p id='description'></p>
  22 <div id='console'></div>
  23
  24 <script>
  25     var element;
  26     var adjustedNode;
  27     var adjustedPoint;
  28     var targetBounds;
  29     var touchBounds;
  30
  31     function runTouchTests() {
  32         element = document.getElementById("targetDiv");
  33         element.addEventListener('click', function() {}, false);
  34         document.addEventListener('click', function() {}, false);
  35
  36         targetBounds = findAbsoluteBounds(element);
  37
  38         var touchRadius = 10;
  39         var offset = touchRadius / 2;
  40         var midX = targetBounds.left + targetBounds.width / 2;
  41         var midY = targetBounds.top + targetBounds.height / 2;
  42
  43         debug('\nOverlapping touch above the target should snap to the top of the target element.');
  44         testTouch(midX, targetBounds.top - offset, touchRadius, targetBounds);
  45         debug('\nOverlapping touch below the target should snap to the bottom of the target element.');
  46         testTouch(midX, targetBounds.top + targetBounds.height + offset, touchRadius, targetBounds);
  47         debug('\nOverlapping touch left of the target should snap to the left side of the target element.');
  48         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.');
  50         testTouch(targetBounds.left + targetBounds.width + offset, midY, touchRadius, targetBounds);
  51         debug('\nTest touch area contained within the target element.');
  52         testTouch(midX, midY, touchRadius, targetBounds);
  53     }
  54
  55     function testTouch(touchX, touchY, radius, targetBounds) {
  56
  57         touchBounds = {
  58             x: touchX - radius,
  59             y: touchY - radius,
  60             width: 2 * radius,
  61             height: 2 * radius
  62         };
  63         adjustedNode = internals.touchNodeAdjustedToBestClickableNode(touchBounds.x, touchBounds.y, touchBounds.width, touchBounds.height, document);
  64         shouldBe('adjustedNode.id', 'element.id');
  65         adjustedPoint = internals.touchPositionAdjustedToBestClickableNode(touchBounds.x, touchBounds.y, touchBounds.width, touchBounds.height, document);
  66
  67         shouldBeTrue('adjustedPoint.x >= targetBounds.left');
  68         shouldBeTrue('adjustedPoint.x <= targetBounds.left + targetBounds.width');
  69         shouldBeTrue('adjustedPoint.y >= targetBounds.top');
  70         shouldBeTrue('adjustedPoint.y <= targetBounds.top + targetBounds.height');
  71         shouldBeTrue('adjustedPoint.x >= touchBounds.x');
  72         shouldBeTrue('adjustedPoint.x <= touchBounds.x + touchBounds.width');
  73         shouldBeTrue('adjustedPoint.y >= touchBounds.y');
  74         shouldBeTrue('adjustedPoint.y <= touchBounds.y + touchBounds.height');
  75     }
  76
  77     function runTests()
  78     {
  79         if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
  80             description('Test touch adjustment on a large div.  The adjusted touch point should lie inside the target element and within the touch area.');
  81             runTouchTests();
  82         }
  83     }
  84     runTests();
  85 </script>
  86 </body>
  87 </html>