third_party/WebKit/LayoutTests/touchadjustment/small-target-test.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Touch Adjustment : Improved targetting for small controls - bug 92293</title>
   5 <script src="../resources/js-test.js"></script>
   6 <script src="resources/touchadjustment.js"></script>
   7
   8 <style>
   9   body {
  10     -webkit-margin-start: 20px;
  11     margin-top: 20px;
  12   }
  13   .control-pair {
  14     margin-bottom: 30px;
  15   }
  16
  17   #check {
  18     border: 1px solid black;
  19     display: inline-block;
  20     padding: 5px;
  21     vertical-align: middle;
  22   }
  23
  24   #remove-button {
  25     border: none;
  26     background: #999;
  27     display: inline-block;
  28     padding: 5px;
  29     vertical-align: middle;
  30   }
  31
  32   #combo-button {
  33     border: 1px solid #777;
  34     padding: 5px;
  35     margin-top: 20px;
  36   }
  37
  38   #combo-label {
  39     border: 1px solid #777;
  40     height: 1em;
  41     width: 4em;
  42   }
  43
  44   #combo-button,
  45   #combo-label,
  46   #drop-down-selector {
  47     display: inline-block;
  48     vertical-align: middle;
  49   }
  50
  51   #drop-down-selector {
  52     -webkit-box-sizing: content-box;
  53     width: 0;
  54     height: 0;
  55     border-left: 5px solid transparent;
  56     border-right: 5px solid transparent;
  57     border-top: 10px solid #777;
  58   }
  59
  60 </style>
  61
  62 </head>
  63
  64 <body id="mybody">
  65
  66 <div id=sandbox>
  67     <div class="control-pair">
  68         <!-- Small checkbox to the left of another control -->
  69         <div id="check" onclick="onClick();"></div>
  70         <input id="task" type="text" value="Task 1">
  71     </div>
  72     <div class="control-pair">
  73         <!-- Small remove button to the right of another control -->
  74         <input id = "item-label" type="text" value = "Option 1">
  75         <div id = "remove-button" onclick="onClick();"></div>
  76     </div>
  77     <div>
  78         <div id="combo-button">
  79             <!-- Combo-button controls -->
  80             <div id = "combo-label" onclick="function() {};"></div>
  81             <div id = "drop-down-selector" onclick="onClick();"></div>
  82         </div>
  83     </div>
  84 </div>
  85
  86 <p id='description'></p>
  87 <div id='console'></div>
  88
  89 <script>
  90     var touchRadius = 20;
  91     var touchOffset = 8;
  92
  93     var element;
  94     var adjustedNode;
  95
  96     function onClick()
  97     {
  98     }
  99
 100     function testDirectTouch(id)
 101     {
 102         testTouch(id, 'center');
 103     }
 104
 105     function testIndirectTouch(id)
 106     {
 107         testTouch(id, 'left');
 108         testTouch(id, 'right');
 109         testTouch(id, 'top-left');
 110         testTouch(id, 'top-right');
 111         testTouch(id, 'bottom-left');
 112         testTouch(id, 'bottom-right');
 113         testTouch(id, 'top');
 114         testTouch(id, 'bottom');
 115     }
 116
 117     function testTouch(id, relativePosition)
 118     {
 119         var element = document.getElementById(id);
 120         testTouchPoint(offsetTouchPoint(findAbsoluteBounds(element), relativePosition, touchOffset, touchRadius), element, /* allowTextNodes */ false, /* disallowShadowDOM */ true);
 121     }
 122
 123     function testDirectTouches()
 124     {
 125         debug('Testing small direct hits.');
 126
 127         testDirectTouch('check');
 128         testDirectTouch('task');
 129         testDirectTouch('item-label');
 130         testDirectTouch('remove-button');
 131         testDirectTouch('combo-label');
 132         testDirectTouch('drop-down-selector');
 133     }
 134
 135     function testIndirectTouches()
 136     {
 137         debug('Testing indirect hits.');
 138
 139         testIndirectTouch('check');
 140         testIndirectTouch('remove-button');
 141         testIndirectTouch('drop-down-selector');
 142     }
 143
 144     function runTests()
 145     {
 146         if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
 147             description('Tests if small clickable targets adjacent to larger clickable controls are properly targetted with touch adjustment.');
 148             testDirectTouches();
 149             testIndirectTouches();
 150             document.getElementById('sandbox').style.display = 'none';
 151         }
 152     }
 153     runTests();
 154 </script>
 155 </body>
 156 </html>