third_party/WebKit/LayoutTests/editing/selection/caret-bidi-first-and-last-letters.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4 <p>
   5 This tests that clicking in a contenteditable div will set the caret in the right position for LTR/RTL text in a RTL/LTR block.
   6 </p>
   7 <dl>
   8     <dt>Clicking the first letter of RTL text in a LTR block</dt>
   9     <dd><div id="rtl-in-ltr-first" style="font-size: 70px; width: 20ex; border: solid thin black; padding: 10px;" contenteditable>&#x05e9;&#x05d3;&#x05d4; &#x05d1;&#x05d5;&#x05e8;</div></dd>
  10     <dt>Clicking the last letter of RTL text in a LTR block</dt>
  11     <dd><div id="rtl-in-ltr-last" style="font-size: 70px; width: 20ex; border: solid thin black; padding: 10px;" contenteditable>&#x05e9;&#x05d3;&#x05d4; &#x05d1;&#x05d5;&#x05e8;</div></dd>
  12     <dt>Clicking the first letter of LTR text in a RTL block</dt>
  13     <dd><div id="ltr-in-rtl-first" style="direction: rtl; font-size: 70px; width: 20ex; border: solid thin black; padding: 10px;" contenteditable>WebKitW</div></dd>
  14     <dt>Clicking the last letter of LTR text in a RTL block</dt>
  15     <dd><div id="ltr-in-rtl-last" style="direction: rtl; font-size: 70px; width: 20ex; border: solid thin black; padding: 10px;" contenteditable>WebKitW</div></dd>
  16 </dl>
  17 <script src="resources/caret-edge-shared.js"></script>
  18 <script>
  19
  20 if (window.testRunner)
  21     testRunner.dumpAsText();
  22
  23 function runTest(div, clickOn, expectedOffset) {
  24     var elementToCalulateTextWidth = document.createElement('span');
  25     elementToCalulateTextWidth.appendChild(div.firstChild.cloneNode());
  26     document.body.appendChild(elementToCalulateTextWidth);
  27     elementToCalulateTextWidth.style.fontSize = '70px';
  28
  29     var inRTLBlock = div.style.direction == 'rtl';
  30     var x = 20;
  31     if ((!inRTLBlock && clickOn == 'last') || (inRTLBlock && clickOn == 'first'))
  32         x = elementToCalulateTextWidth.offsetWidth;
  33     if (inRTLBlock)
  34         x = div.offsetWidth - x;
  35
  36     document.body.removeChild(elementToCalulateTextWidth);
  37
  38     var verify = function() {
  39         if (!window.getSelection().isCollapsed)
  40             return log(div, 'FAIL: selection not collapsed');
  41
  42         var range = window.getSelection().getRangeAt(0);
  43         if (range.startContainer != div.firstChild)
  44             return log(div, 'FAIL: wrong container');
  45         if (range.startOffset != expectedOffset)
  46             return log(div, 'FAIL: wrong offset ' + range.startOffset + ', expected ' + expectedOffset);
  47
  48         return log(div, 'PASS');
  49     }
  50
  51     if (!window.testRunner) {
  52         div.addEventListener('mouseup', verify);
  53         return;
  54     }
  55
  56     eventSender.mouseMoveTo(div.offsetLeft + x, div.offsetTop + div.offsetHeight / 2);
  57     eventSender.leapForward(200);
  58     eventSender.mouseDown();
  59     eventSender.leapForward(200);
  60     eventSender.mouseUp();
  61     verify({target: div});
  62 }
  63
  64 function log(div, message) {
  65     div.innerHTML = message;
  66 }
  67
  68 runTest(document.getElementById('rtl-in-ltr-first'), 'first', 0);
  69 runTest(document.getElementById('rtl-in-ltr-last'), 'last', 7);
  70 runTest(document.getElementById('ltr-in-rtl-first'), 'first', 7);
  71 runTest(document.getElementById('ltr-in-rtl-last'), 'last', 0);
  72
  73 </script>
  74 </body>
  75 </html>