LayoutTests/editing/selection/select-bidi-run.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
   5 <script src="../../fast/js/resources/js-test-pre.js"></script>
   6 <style type="text/css">
   7 #tests { font-size: 2.5em; padding: 0px; margin: 0px; }
   8 dt { width: 15ex; padding: 0px 10px; margin: 0px; }
   9 dd { font-size: 0.6em; margin: 0px; padding: 0px 10px; }
  10 .target { background-color: #bbeeff; }
  11 .targetContainer { position: absolute; left: 10px; top: 0px; z-index: -5; }
  12 </style>
  13 </head>
  14 <body>
  15 <p>This test ensures WebKit lets user select bidirectional text intuitively.
  16 To manually test, select text in blue box in each test case below by a mouse drag from left to right.
  17 The changes in the selected text should match the expectations before |.
  18 Do the same by a mouse drag from right to left and expectations are after |.</p>
  19 <div>Selected text: <span id="log"></span></div>
  20 <dl id="tests">
  21 <dt contenteditable><span class="target">abcאבג</span></dt>
  22 <dd>a,ab,abc,abcAB,abcA,abcABC|A,AB,ABC,cABC,bcABC,abcABC</dd>
  23
  24 <dt contenteditable><span class="target">אבגdef</span></dt>
  25 <dd>C,BC,ABC,ABCd,ABCef,ABCdef|f,ef,def,BCdef,Cdef,ABCdef</dd>
  26
  27 <dt contenteditable>abc<span class="target">אבג</span>def</dt>
  28 <dd>C,BC,ABC|A,AB,ABC</dd>
  29
  30 <dt dir="rtl" contenteditable><span class="target">אבג</span>def</dt>
  31 <dd>C,BC,ABC|A,AB,ABC</dd>
  32
  33 <dt dir="rtl">אבגd<span class="target">ef</span></dt>
  34 <dd>e,ef|f,ef</dd>
  35
  36 <dt contenteditable>abc<span class="target">אב</span>ג</dt>
  37 <dd>B,AB|A,AB</dd>
  38
  39 <dt contenteditable>aקל<span class="target">12</span>יםd</dt>
  40 <dd>1,12|2,12</dd>
  41
  42 <dt contenteditable dir="rtl"><span class="target">אבג 123</span></dt>
  43 <dd>1,12,123, 123,C 123,BC 123,ABC 123|A,AB,ABC,ABC ,ABC 12,ABC 1,ABC 123</dd>
  44
  45 <dt contenteditable><span class="target">אבג 123</span></dt>
  46 <dd>1,12, 123,C 123,BC 123,ABC 123|A,AB,ABC,ABC ,ABC 12,ABC 1,ABC 123</dd>
  47
  48 <dt contenteditable style="position: relative;">aאבגb<div class="targetContainer">a<span class="target">אבג</span>b</div></dt>
  49 <dd>C,BC,ABC|A,AB,ABC</dd>
  50
  51 <dt contenteditable dir="ltr"><span class="target" dir="rtl">אבג<br></span></dt>
  52 <dd>C,BC,ABC|A,AB,ABC</dd>
  53
  54 <!--<dt contenteditable><span class="target">אבג 123 - 456</span></dt>
  55 <dd>1,12, 123,C 123,BC 123,ABC 123|A,AB,ABC,ABC ,ABC 12,ABC 1,ABC 123</dd>-->
  56
  57 </dl>
  58 <div id="console"></div>
  59 <pre><script>
  60 var tests = document.getElementById('tests');
  61
  62 String.prototype.fold = function () {
  63     var result = '';
  64     for (var i = 0; i < this.length; i++) {
  65         var code = this.charCodeAt(i);
  66         if (0x05d0 <= code && code <= 0x05ea)// Hebrew Alef
  67             code += -0x05d0 + 'A'.charCodeAt(0);
  68         result += String.fromCharCode(code);
  69     }
  70     return result;
  71 }
  72
  73 function assertEqual(expected, actual) {
  74     document.writeln('E:' + expected + ' A:' + actual);
  75 }
  76
  77 function selectByMouseDragAndVerifyResult(target, leftToRight, expectations) {
  78     var y = target.offsetTop + target.offsetHeight / 2;
  79     var left = target.offsetLeft;
  80
  81     offsetParent = target.offsetParent;
  82     while (offsetParent) {
  83         y += offsetParent.offsetTop;
  84         left += offsetParent.offsetLeft;
  85         offsetParent = offsetParent.offsetParent;
  86     }
  87
  88     var startX = left + (leftToRight ? 0 : target.offsetWidth);
  89     eventSender.dragMode = false;
  90
  91     // Clear click count
  92     eventSender.mouseMoveTo(0, 0);
  93     eventSender.mouseDown();
  94     eventSender.mouseUp();
  95
  96     eventSender.mouseMoveTo(startX, y);
  97     eventSender.mouseDown();
  98     eventSender.leapForward(10);
  99
 100     var previousSelectedText = '';
 101     var j = 0;
 102     var xIncrement = leftToRight ? 1 : -1;
 103     for (var x = startX; left <= x && x <= left + target.offsetWidth; x += xIncrement) {
 104         eventSender.mouseMoveTo(x, y);
 105
 106         var selectedText = window.getSelection().toString().fold();
 107         if (previousSelectedText != selectedText) {
 108             if (expectations[j] == selectedText)
 109                 testPassed('selected "' + selectedText + '"');
 110             else
 111                 testFailed('selected "' + selectedText + '" but expected "' + expectations[j] + '"');
 112             previousSelectedText = selectedText;
 113             j++;
 114         }
 115     }
 116
 117     eventSender.mouseUp();
 118 }
 119
 120 if (window.testRunner) {
 121     testRunner.dumpAsText();
 122
 123     var tests = document.getElementById('tests').getElementsByTagName('dt');
 124     var testExpectations = document.getElementById('tests').getElementsByTagName('dd');
 125
 126     for (var i = 0; i < tests.length; i++) {
 127         tests[i].style.display = null;
 128         testExpectations[i].style.display = null;
 129
 130         var target = tests[i].getElementsByClassName('target')[0];
 131         var relativeTargets = tests[i].getElementsByClassName('relativeTarget');
 132         var testExpectation = testExpectations[i].textContent;
 133
 134         debug('Test "' + target.textContent.fold() + '" in "' + target.parentNode.textContent.fold() + '":');
 135         debug('Selecting from left to right');
 136         selectByMouseDragAndVerifyResult(target, true, testExpectation.split(/\|/)[0].split(/,/));
 137         debug('Selecting from right to left');
 138         selectByMouseDragAndVerifyResult(target, false, testExpectation.split(/\|/)[1].split(/,/));
 139         debug('');
 140
 141         // Some tests may be ouside of the window so bring them in as we process.
 142         tests[i].style.display = 'none';
 143         testExpectations[i].style.display = 'none';
 144     }
 145
 146     document.getElementById('tests').style.display = 'none';
 147     document.getElementById('log').parentNode.style.display = 'none';
 148 } else {
 149     debug('This test requires eventSender');
 150     document.onselectionchange = function () {
 151         document.getElementById('log').textContent = window.getSelection().toString().fold();
 152     }
 153 }
 154
 155
 156 </script>
 157 <script src="../../fast/js/resources/js-test-post.js"></script>
 158 </body>
 159 </html>