third_party/WebKit/LayoutTests/touchadjustment/html-label.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>Touch Adjustment : HTML Label and form fields - bug 78801</title>
   5     <script src="../resources/ahem.js"></script>
   6     <script src="../resources/js-test.js"></script>
   7     <script src="resources/touchadjustment.js"></script>
   8     <style>
   9         #sandbox {
  10             position: absolute;
  11             left: 0px;
  12             top: 0px;
  13             font: 16px Ahem;
  14         }
  15     </style>
  16 </head>
  17
  18 <body>
  19
  20 <div id=sandbox>
  21     <a href="#myform" id="mylink">Do not click here</a><br>
  22     <form id="myform">
  23     <label for="myinput" id="mylabel">Click here,</label>
  24     <span id="myspan">but not here.</span>
  25     <input type="text" id="myinput" value="To focus this."></input>
  26     </form>
  27 </div>
  28
  29 <p id='description'></p>
  30 <div id='console'></div>
  31
  32 <script>
  33     var element;
  34     var adjustedNode;
  35     // Set up shortcut access to elements
  36     var e = {};
  37     ['sandbox', 'mylink', 'myform', 'myinput', 'mylabel', 'myspan'].forEach(function(a) {
  38         e[a] = document.getElementById(a);
  39     });
  40
  41     function testDirectTouch(element)
  42     {
  43         var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'center', 0, 20, 30);
  44         testTouchPoint(touchpoint, element, /* allowTextNodes */ false, /* disallowShadowDOM */ true);
  45     }
  46
  47     function testIndirectTouch(element, offset)
  48     {
  49         // Touch just right of the element.
  50         var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'right', offset, 30, 20);
  51         testTouchPoint(touchpoint, element, /* allowTextNodes */ false, /* disallowShadowDOM */ true);
  52     }
  53
  54     function testDirectTouches()
  55     {
  56         debug('Testing small direct hits.');
  57
  58         testDirectTouch(e.mylink);
  59         testDirectTouch(e.mylabel);
  60         testDirectTouch(e.myinput);
  61     }
  62
  63     function testIndirectTouches()
  64     {
  65         debug('Testing indirect hits.');
  66
  67         testIndirectTouch(e.mylink, 10);
  68
  69         // This case is very borderline - there's not much reason to adjust
  70         // left to the label instead of up to the link (it's closer to
  71         // the label, but overlaps with more of the link).
  72         testIndirectTouch(e.mylabel, 1);
  73
  74         testIndirectTouch(e.myinput, 10);
  75     }
  76
  77     function runTests()
  78     {
  79         if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
  80             description('Tests if labels are treated as clickable if the input they control is.');
  81             testDirectTouches();
  82             testIndirectTouches();
  83             e.sandbox.style.display = 'none';
  84         }
  85     }
  86     runTests();
  87 </script>
  88 </body>
  89 </html>