third_party/WebKit/LayoutTests/touchadjustment/search-cancel.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>Touch Adjustment : Shadow DOM Element Search Cancel Button - bug 91894</title>
   5     <script src="../resources/js-test.js"></script>
   6     <script src="resources/touchadjustment.js"></script>
   7     <style>
   8         input[type='search'] {
   9         -webkit-appearance: none;
  10         -webkit-box-sizing: border-box;
  11         border: 1px solid #999;
  12         padding: 5px;
  13         }
  14
  15         input[type='search']::-webkit-search-cancel-button {
  16         -webkit-appearance: none;
  17         -webkit-box-sizing: border-box;
  18         background: #999;
  19         height: 10px;
  20         margin: 0;
  21         padding: 0;
  22         width: 10px;
  23         }
  24     </style>
  25 </head>
  26
  27 <body>
  28
  29 <div>
  30   <input id="target" type="search" value="abcd">
  31 </div>
  32
  33 <p id='description'></p>
  34 <div id='console'></div>
  35
  36 <script>
  37     var element;
  38     var adjustedNode;
  39     var adjustedPoint;
  40     var inputBounds;
  41     var cancelBounds;
  42     var textContentBounds;
  43     var touchBounds;
  44     var targetBounds;
  45     var targetContainsPoint;
  46     var touchContainsPoint;
  47
  48     function runTouchTests() {
  49         document.addEventListener('click', function() {}, false);
  50
  51         element = document.getElementById('target');
  52         element.focus();
  53
  54         inputBounds = findAbsoluteBounds(element);
  55
  56         var touchRadius = 20;
  57         var offset = touchRadius / 2;
  58
  59         // Center of cancel button.
  60         var midX = inputBounds.left + inputBounds.width - 11;
  61         var midY = inputBounds.top + inputBounds.height / 2;
  62
  63         cancelBounds = {
  64             left: midX - 5,
  65             top: midY - 5,
  66             width: 10,
  67             height: 10
  68         };
  69
  70         textContentBounds = {
  71            left: inputBounds.left,
  72            top: inputBounds.top,
  73            width: inputBounds.width - 16,
  74            height: inputBounds.height
  75         };
  76
  77         debug('\nTouch centered on cancel button but overlapping neighboring candidate.');
  78         testTouch(midX, midY, touchRadius, cancelBounds);
  79
  80         debug('\nOff-center touches enclosing cancel button.');
  81         testTouch(midX - offset, midY, touchRadius, cancelBounds);
  82         testTouch(midX - offset, midY + offset, touchRadius, cancelBounds);
  83         testTouch(midX - offset, midY - offset, touchRadius, cancelBounds);
  84
  85         debug('\nTouches clipping left edge of cancel-button.');
  86         testTouch(midX - touchRadius - 2, midY, touchRadius, textContentBounds);
  87         testTouch(midX - touchRadius - 2, midY - offset, touchRadius, textContentBounds);
  88         testTouch(midX - touchRadius - 2, midY + offset, touchRadius, textContentBounds);
  89     }
  90
  91     function testTouch(touchX, touchY, radius, bounds) {
  92
  93         targetBounds = bounds;
  94
  95         touchBounds = {
  96             left: touchX - radius,
  97             top: touchY - radius,
  98             width: 2 * radius,
  99             height: 2 * radius
 100         };
 101         adjustedPoint = internals.touchPositionAdjustedToBestClickableNode(touchBounds.left, touchBounds.top, touchBounds.width, touchBounds.height, document);
 102         targetContainsPoint = containsPoint(targetBounds, adjustedPoint);
 103         touchContainsPoint = containsPoint(touchBounds, adjustedPoint);
 104         shouldBeTrue('targetContainsPoint');
 105         shouldBeTrue('touchContainsPoint');
 106     }
 107
 108     function containsPoint(bounds, point) {
 109         return bounds.left <= point.x && bounds.top <= point.y && bounds.left + bounds.width >= point.x && bounds.left + bounds.height >= point.y;
 110     }
 111
 112     function runTests()
 113     {
 114         if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
 115             description('Test touch adjustment on a search field with a visible cancel button.');
 116             runTouchTests();
 117         }
 118     }
 119     runTests();
 120 </script>
 121 </body>
 122 </html>