|
Line 0
LayoutTests/editing/selection/select-bidi-run.html_sec1
|
|
|
1 |
<!DOCTYPE html> |
| 2 |
<html> |
| 3 |
<head> |
| 4 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
| 5 |
<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css"> |
| 6 |
<script src="../../fast/js/resources/js-test-pre.js"></script> |
| 7 |
<style type="text/css"> |
| 8 |
#tests { font-size: 2.5em; padding: 0px; margin: 0px; } |
| 9 |
dt { width: 15ex; padding: 0px 10px; margin: 0px; } |
| 10 |
dd { font-size: 0.6em; margin: 0px; padding: 0px 10px; } |
| 11 |
.target { background-color: #bbeeff; } |
| 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><span class="target">אבג 123 - 456</span></dt> |
| 49 |
<dd>1,12, 123,C 123,BC 123,ABC 123|A,AB,ABC,ABC ,ABC 12,ABC 1,ABC 123</dd>--> |
| 50 |
|
| 51 |
</dl> |
| 52 |
<div id="console"></div> |
| 53 |
<pre><script> |
| 54 |
var tests = document.getElementById('tests'); |
| 55 |
|
| 56 |
String.prototype.fold = function () { |
| 57 |
var result = ''; |
| 58 |
for (var i = 0; i < this.length; i++) { |
| 59 |
var code = this.charCodeAt(i); |
| 60 |
if (0x05d0 <= code && code <= 0x05ea)// Hebrew Alef |
| 61 |
code += -0x05d0 + 'A'.charCodeAt(0); |
| 62 |
result += String.fromCharCode(code); |
| 63 |
} |
| 64 |
return result; |
| 65 |
} |
| 66 |
|
| 67 |
function assertEqual(expected, actual) { |
| 68 |
document.writeln('E:' + expected + ' A:' + actual); |
| 69 |
} |
| 70 |
|
| 71 |
function selectByMouseDragAndVerifyResult(target, leftToRight, expectations) { |
| 72 |
var y = target.offsetTop + target.offsetHeight / 2; |
| 73 |
var left = target.offsetLeft; |
| 74 |
|
| 75 |
var startX = left + (leftToRight ? 0 : target.offsetWidth); |
| 76 |
eventSender.dragMode = false; |
| 77 |
eventSender.leapForward(3000); |
| 78 |
eventSender.mouseMoveTo(startX, y); |
| 79 |
eventSender.mouseDown(); |
| 80 |
|
| 81 |
var previousSelectedText = ''; |
| 82 |
var j = 0; |
| 83 |
var xIncrement = leftToRight ? 1 : -1; |
| 84 |
for (var x = startX; left <= x && x <= left + target.offsetWidth; x += xIncrement) { |
| 85 |
eventSender.leapForward(100); |
| 86 |
eventSender.mouseMoveTo(x, y); |
| 87 |
|
| 88 |
var selectedText = window.getSelection().toString().fold(); |
| 89 |
if (previousSelectedText != selectedText) { |
| 90 |
if (expectations[j] == selectedText) |
| 91 |
testPassed('selected "' + selectedText + '"'); |
| 92 |
else |
| 93 |
testFailed('selected "' + selectedText + '" but expected "' + expectations[j] + '"'); |
| 94 |
previousSelectedText = selectedText; |
| 95 |
j++; |
| 96 |
} |
| 97 |
} |
| 98 |
|
| 99 |
eventSender.mouseUp(); |
| 100 |
} |
| 101 |
|
| 102 |
if (window.layoutTestController) { |
| 103 |
layoutTestController.dumpAsText(); |
| 104 |
|
| 105 |
var tests = document.getElementById('tests').getElementsByTagName('dt'); |
| 106 |
var testExpectations = document.getElementById('tests').getElementsByTagName('dd'); |
| 107 |
|
| 108 |
for (var i = 0; i < tests.length; i++) { |
| 109 |
tests[i].style.display = null; |
| 110 |
testExpectations[i].style.display = null; |
| 111 |
|
| 112 |
var target = tests[i].getElementsByClassName('target')[0]; |
| 113 |
var testExpectation = testExpectations[i].textContent; |
| 114 |
|
| 115 |
debug('Test "' + target.textContent.fold() + '" in "' + target.parentNode.textContent.fold() + '":'); |
| 116 |
debug('Selecting from left to right'); |
| 117 |
selectByMouseDragAndVerifyResult(target, true, testExpectation.split(/\|/)[0].split(/,/)); |
| 118 |
debug('Selecting from right to left'); |
| 119 |
selectByMouseDragAndVerifyResult(target, false, testExpectation.split(/\|/)[1].split(/,/)); |
| 120 |
debug(''); |
| 121 |
|
| 122 |
// Some tests may be ouside of the window so bring them in as we process. |
| 123 |
tests[i].style.display = 'none'; |
| 124 |
testExpectations[i].style.display = 'none'; |
| 125 |
} |
| 126 |
|
| 127 |
document.getElementById('tests').style.display = 'none'; |
| 128 |
document.getElementById('log').parentNode.style.display = 'none'; |
| 129 |
} else { |
| 130 |
debug('This test requires eventSender'); |
| 131 |
document.onselectionchange = function () { |
| 132 |
document.getElementById('log').textContent = window.getSelection().toString().fold(); |
| 133 |
} |
| 134 |
} |
| 135 |
|
| 136 |
var successfullyParsed = true; |
| 137 |
|
| 138 |
</script> |
| 139 |
<script src="../../fast/js/resources/js-test-post.js"></script> |
| 140 |
</body> |
| 141 |
</html> |