<!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>