src/third_party/WebKit/LayoutTests/editing/selection/hit-test-on-text-with-line-height.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 <style>
   6 #test { width: 300px; font-size: 50px; line-height: 10px; border: solid 1px black; padding: 5px; }
   7 #test span { border: solid 1px red; }
   8 </style>
   9 </head>
  10 <body>
  11 <p>This test ensures WebKit can place caret after the line even when the line-height is smaller than a line.
  12 To manually test, click inside the black box outside the red box.
  13 The caret should be placed at the end of "hello".</p>
  14 <p>Also test that when you click in the red box above or below the black box, caret is placed at where you clicked.</p>
  15 <div style="padding: 50px;">
  16 <div id="test" contenteditable><span>hello</span></div>
  17 </div>
  18 <div id="console"></div>
  19 <script>
  20
  21 var test = document.getElementById('test');
  22 var span = test.firstChild;
  23 var textNode = span.firstChild;
  24
  25 function clickAndVerify(title, x, y, expectedOffset) {
  26     eventSender.mouseMoveTo(x, y);
  27     eventSender.mouseDown();
  28     eventSender.leapForward(500);
  29     eventSender.mouseUp();
  30
  31     var selection = window.getSelection();
  32     if (!selection.isCollapsed)
  33         testFailed(title + ' - selection was not collapsed');
  34     else if (selection.baseNode != textNode)
  35         testFailed(title + ' - baseNode was not "' + textNode.textContent + '"');
  36     else if (selection.baseOffset != expectedOffset)
  37         testFailed(title + ' - caret was at ' + selection.baseOffset + ' but expected to be at ' + expectedOffset);
  38     else
  39         testPassed(title);
  40 }
  41
  42 function clickBetweenEachLetterAndVerify(y) {
  43     for (var i = 0; i <= textNode.textContent.length; i++) {
  44         x = span.offsetLeft + span.offsetWidth * i / 5;
  45         x = Math.max(span.offsetLeft + 1, Math.min(span.offsetLeft + span.offsetWidth - 1, x));
  46         if (i == textNode.textContent.length)
  47             title = 'after "' + textNode.textContent + '"';
  48         else
  49             title = 'before ' + textNode.textContent.charAt(i);
  50         clickAndVerify(title, x, y, i);
  51     }
  52 }
  53
  54 if (window.testRunner && !window.eventSender)
  55     testFailed('This test requires eventSender');
  56 else if (window.testRunner) {
  57     testRunner.dumpAsText();
  58     clickAndVerify('Click after hello', test.offsetLeft + test.offsetWidth - 5, test.offsetTop + test.offsetHeight / 2, 5);
  59     clickAndVerify('Click after hello (top)', test.offsetLeft + test.offsetWidth - 5, test.offsetTop + 1, 5);
  60     clickAndVerify('Click after hello (bottom)', test.offsetLeft + test.offsetWidth - 5, test.offsetTop + test.offsetHeight - 1, 5);
  61
  62     debug('');
  63     debug('Click above black box');
  64     clickBetweenEachLetterAndVerify(span.offsetTop + 1);
  65
  66     debug('');
  67     debug('Click below black box');
  68     clickBetweenEachLetterAndVerify(span.offsetTop + span.offsetHeight - 5);
  69
  70     test.style.display = 'none';
  71 }
  72
  73
  74 </script>
  75 </body>
  76 </html>