third_party/WebKit/LayoutTests/touchadjustment/touch-inlines.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>Touch Adjustment : Inlines and line-breaks - 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 { position: absolute; top: 0px; left: 0px; font: 16px Ahem; line-height: 20px }
  10     </style>
  11 </head>
  12 <body>
  13
  14 <div id=sandbox>
  15     <p style="width: 22em;">
  16     <a id="1" href="#1">some link</a><br>
  17     <a id="2" href="#2">some link breaking lines</a> and <a id="3" href="#3">link</a><br>
  18     hola mundo! <a id="4" href="#4">a split up link</a><br>
  19     hello world <a id="5" href="#5">some link also breaking</a><br>
  20     hi there <a id="6" href="#6">some link that is breaking multiple lines just for the very fun of it</a><br><br>
  21     </p>
  22 </div>
  23
  24 <p id='description'></p>
  25 <div id='console'></div>
  26
  27 <script>
  28     // Set up shortcut access to elements
  29     var e = {};
  30     ['sandbox', '1', '2', '3', '4', '5', '6'].forEach(function(a) {
  31         e[a] = document.getElementById(a);
  32     });
  33
  34     function testDirectTouches()
  35     {
  36         debug('Test some direct hits.');
  37         testTouchPoint(touchPoint(30, 25, 10), e['1']);
  38         testTouchPoint(touchPoint(20, 65, 10), e['2']);
  39         testTouchPoint(touchPoint(220, 85, 10), e['4']);
  40         testTouchPoint(touchPoint(80, 195, 10), e['6']);
  41     }
  42
  43     function testDirectMisses()
  44     {
  45         debug('Test a few direct misses.');
  46         // Hit 'and' betwen link 2 and 3
  47         testTouchPoint(touchPoint(120, 75, 6), null);
  48         // Hit 'hi there' above and to the left of link 6.
  49         testTouchPoint(touchPoint(72, 166, 6), null);
  50     }
  51
  52     function testIndirectTouches()
  53     {
  54         debug('Test some indirect hits.');
  55
  56         testTouchPoint(touchPoint(50, 60, 20), e['2']);
  57         testTouchPoint(touchPoint(172, 83, 20), e['3']);
  58         testTouchPoint(touchPoint(230, 74, 20), e['4']);
  59         testTouchPoint(touchPoint(30, 100, 20), e['4']);
  60         testTouchPoint(touchPoint(24, 170, 20), e['6']);
  61
  62     }
  63
  64     function runTests()
  65     {
  66         if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
  67             description('Tests touch-adjustment on inline links. Making sure we can hit over line-breaks, and can miss when tapping between parts of a line-broken link.');
  68             testDirectTouches();
  69             testDirectMisses();
  70             testIndirectTouches();
  71             e['sandbox'].style.display = 'none';
  72         }
  73     }
  74     runTests();
  75 </script>
  76 </body>
  77 </html>