Editing tests should use testRunner instead of layoutTestController
[WebKit-https.git] / 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>