src/third_party/WebKit/LayoutTests/touchadjustment/editable-content.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>Touch Adjustment : content editable div - bug 97576</title>
   5     <script src="../resources/js-test.js"></script>
   6     <script src="resources/touchadjustment.js"></script>
   7     <style>
   8         body {
   9             font-size: 12px;
  10             line-height: 14px;
  11         }
  12
  13         #text-area,
  14         #rich-text {
  15             background: #eee;
  16             border: none;
  17             margin: 0 5px;
  18             padding: 0;
  19         }
  20
  21         #rich-text {
  22             margin-top: 50px;
  23             outline: none;
  24             width: 300px;
  25         }
  26     </style>
  27 </head>
  28
  29 <body>
  30
  31 <div id=sandbox>
  32     <textarea id="text-area" rows="5" cols="40">A lengthy line of text.
  33
  34 Another line of text separated by a blank line.</textarea>
  35
  36     <div id="rich-text" contentEditable>
  37         <b>Hello</b><br><br><i>World</i>
  38     </div>
  39 </div>
  40
  41 <p id='description'></p>
  42 <div id='console'></div>
  43
  44 <script>
  45     var element;
  46     var rowHeight;
  47     var touchOffset = 4;
  48     var touchRadius = 20;
  49     var origin;
  50     var adjustedNode;
  51     var adjustedPoint;
  52
  53     function testTouchOnRow(row, offset) {
  54         var bounds = findAbsoluteBounds(element);
  55         var midPoint = bounds.left + 0.5 * bounds.width;
  56         var x = bounds.left + 2 * touchRadius;
  57         var y = bounds.top + (row + 0.5) * rowHeight + offset; // Vertically centered on row when offset is zero.
  58         var point = touchPoint(x, y, touchRadius, touchRadius);
  59         adjustedPoint = adjustTouchPoint(point);
  60         origin = bounds.top;
  61         shouldEvaluateTo('Math.floor((adjustedPoint.y - origin) / rowHeight)', row);
  62     }
  63
  64     function testDirectTouches() {
  65         debug('test direct touches');
  66         // Touches centered on the blank line should not be adjusted a neighboring text line.
  67         for (var row = 0; row < 3; row++) {
  68             for (var offset = -touchOffset; offset <= touchOffset; offset += touchOffset) {
  69                 testTouchOnRow(row, offset);
  70             }
  71         }
  72     }
  73
  74     function testTouchOnBoundary(position) {
  75         var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), position, touchOffset, touchRadius, touchRadius);
  76         testTouchPoint(touchpoint, element, /* allowTextNodes */ false, /* disallowShadowDOM */ true);
  77     }
  78
  79     function testIndirectTouches() {
  80       debug('test indirect touches');
  81       testTouchOnBoundary('bottom');
  82       testTouchOnBoundary('left');
  83       testTouchOnBoundary('right');
  84       testTouchOnBoundary('top');
  85     }
  86
  87     function runTests()
  88     {
  89         if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
  90             description('Tests touch adjustment on a text-area.');
  91             debug('test textarea');
  92             element = document.getElementById('text-area');
  93             rowHeight = 15; // Height of each row is line-height + 1
  94             testDirectTouches();
  95             testIndirectTouches();
  96             debug('test richly editable div');
  97             element = document.getElementById('rich-text');
  98             rowHeight = 14;
  99             testDirectTouches();
 100             testIndirectTouches();
 101         }
 102     }
 103     runTests();
 104 </script>
 105 </body>
 106 </html>