blob: 70215da81ad27608d9bb7295f4575f335ced7de1 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="../../resources/js-test-pre.js"></script>
<style type="text/css">
#tests { font-size: 2.5em; padding: 0px; margin: 0px; }
dt { width: 15ex; padding: 0px 10px; margin: 0px; }
dd { font-size: 0.6em; margin: 0px; padding: 0px 10px; }
.target { background-color: #bbeeff; }
.targetContainer { position: absolute; left: 10px; top: 0px; z-index: -5; }
</style>
</head>
<body>
<p>This test ensures WebKit lets user select bidirectional text intuitively.
To manually test, select text in blue box in each test case below by a mouse drag from left to right.
The changes in the selected text should match the expectations before |.
Do the same by a mouse drag from right to left and expectations are after |.</p>
<div>Selected text: <span id="log"></span></div>
<dl id="tests">
<dt contenteditable><span class="target">abcאבג</span></dt>
<dd>a,ab,abc,abcAB,abcA,abcABC|A,AB,ABC,cABC,bcABC,abcABC</dd>
<dt contenteditable><span class="target">אבגdef</span></dt>
<dd>C,BC,ABC,ABCd,ABCef,ABCdef|f,ef,def,BCdef,Cdef,ABCdef</dd>
<dt contenteditable>abc<span class="target">אבג</span>def</dt>
<dd>C,BC,ABC|A,AB,ABC</dd>
<dt dir="rtl" contenteditable><span class="target">אבג</span>def</dt>
<dd>C,BC,ABC|A,AB,ABC</dd>
<dt dir="rtl">אבגd<span class="target">ef</span></dt>
<dd>e,ef|f,ef</dd>
<dt contenteditable>abc<span class="target">אב</span>ג</dt>
<dd>B,AB|A,AB</dd>
<dt contenteditable>aקל<span class="target">12</span>יםd</dt>
<dd>1,12|2,12</dd>
<dt contenteditable dir="rtl"><span class="target">אבג 123</span></dt>
<dd>1,12,123, 123,C 123,BC 123,ABC 123|A,AB,ABC,ABC ,ABC 12,ABC 1,ABC 123</dd>
<dt contenteditable><span class="target">אבג 123</span></dt>
<dd>1,12, 123,C 123,BC 123,ABC 123|A,AB,ABC,ABC ,ABC 12,ABC 1,ABC 123</dd>
<dt contenteditable style="position: relative;">aאבגb<div class="targetContainer">a<span class="target">אבג</span>b</div></dt>
<dd>C,BC,ABC|A,AB,ABC</dd>
<dt contenteditable dir="ltr"><span class="target" dir="rtl">אבג<br></span></dt>
<dd>C,BC,ABC|A,AB,ABC</dd>
<!--<dt contenteditable><span class="target">אבג 123 - 456</span></dt>
<dd>1,12, 123,C 123,BC 123,ABC 123|A,AB,ABC,ABC ,ABC 12,ABC 1,ABC 123</dd>-->
</dl>
<div id="console"></div>
<pre><script>
var tests = document.getElementById('tests');
String.prototype.fold = function () {
var result = '';
for (var i = 0; i < this.length; i++) {
var code = this.charCodeAt(i);
if (0x05d0 <= code && code <= 0x05ea)// Hebrew Alef
code += -0x05d0 + 'A'.charCodeAt(0);
result += String.fromCharCode(code);
}
return result;
}
function assertEqual(expected, actual) {
document.writeln('E:' + expected + ' A:' + actual);
}
function selectByMouseDragAndVerifyResult(target, leftToRight, expectations) {
var y = target.offsetTop + target.offsetHeight / 2;
var left = target.offsetLeft;
offsetParent = target.offsetParent;
while (offsetParent) {
y += offsetParent.offsetTop;
left += offsetParent.offsetLeft;
offsetParent = offsetParent.offsetParent;
}
var startX = left + (leftToRight ? 0 : target.offsetWidth);
eventSender.dragMode = false;
// Clear click count
eventSender.mouseMoveTo(0, 0);
eventSender.mouseDown();
eventSender.mouseUp();
eventSender.mouseMoveTo(startX, y);
eventSender.mouseDown();
eventSender.leapForward(10);
var previousSelectedText = '';
var j = 0;
var xIncrement = leftToRight ? 1 : -1;
for (var x = startX; left <= x && x <= left + target.offsetWidth; x += xIncrement) {
eventSender.mouseMoveTo(x, y);
var selectedText = window.getSelection().toString().fold();
if (previousSelectedText != selectedText) {
if (expectations[j] == selectedText)
testPassed('selected "' + selectedText + '"');
else
testFailed('selected "' + selectedText + '" but expected "' + expectations[j] + '"');
previousSelectedText = selectedText;
j++;
}
}
eventSender.mouseUp();
}
if (window.testRunner) {
testRunner.dumpAsText();
var tests = document.getElementById('tests').getElementsByTagName('dt');
var testExpectations = document.getElementById('tests').getElementsByTagName('dd');
for (var i = 0; i < tests.length; i++) {
tests[i].style.display = null;
testExpectations[i].style.display = null;
var target = tests[i].getElementsByClassName('target')[0];
var relativeTargets = tests[i].getElementsByClassName('relativeTarget');
var testExpectation = testExpectations[i].textContent;
debug('Test "' + target.textContent.fold() + '" in "' + target.parentNode.textContent.fold() + '":');
debug('Selecting from left to right');
selectByMouseDragAndVerifyResult(target, true, testExpectation.split(/\|/)[0].split(/,/));
debug('Selecting from right to left');
selectByMouseDragAndVerifyResult(target, false, testExpectation.split(/\|/)[1].split(/,/));
debug('');
// Some tests may be ouside of the window so bring them in as we process.
tests[i].style.display = 'none';
testExpectations[i].style.display = 'none';
}
document.getElementById('tests').style.display = 'none';
document.getElementById('log').parentNode.style.display = 'none';
} else {
debug('This test requires eventSender');
document.onselectionchange = function () {
document.getElementById('log').textContent = window.getSelection().toString().fold();
}
}
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>