<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="resources/extend-selection.css" />
<style>
test_move_by_word {display: none;}
*[dir] {unicode-bidi: embed}
</style>
<script src="resources/move-by-word-visually.js"></script>
<script>

onload = function() {
    try {
        runTest();
    } finally {
        flushLog();
    }
};

if (window.testRunner && window.internals) {
    testRunner.dumpAsText();
    internals.settings.setEditingBehavior('mac');
}
</script>
</head>
<body>
<div id="testMoveByWord">
<!-- 
Title saves the word breaks.
The format of title is "xxx|xxxx".

The sequence on the left of "|" is word boundaries when moving caret from left to right.
The sequence on the right of "|" is word boundaries when moving caret from right to left.

If there is a single node in the line the sequence are offsets.
If there are multiple nodes in the line the sequence is array of [anchor_node_id offset child_node_index] 
where child_node_index is optional default is the first child of the anchor node.
-->
<!-- pure English -->
<div dir=ltr class="test_move_by_word" title="0 3 7 11 15 19|19 16 12 8 4 0" contenteditable>abc def hij opq rst</div>
<div dir=rtl class="test_move_by_word" title="19 3 7 11 15 0|0 16 12 8 4 19" contenteditable>abc def hij opq rst</div>

<!-- pure Hebrew -->
<div dir=ltr class="test_move_by_word" title="0 16 12 8 4 19|19 3 7 11 15 0" contenteditable>ששש נננ בבב גגג קקק</div>
<div dir=rtl class="test_move_by_word" title="19 16 12 8 4 0|0 3 7 11 15 19" contenteditable>ששש נננ בבב גגג קקק</div>

<!-- bidi text -->
<!-- English Hebrew English -->
<div dir=ltr class="test_move_by_word" title="0 3 7 11 20 16 23 27 31 35|35 32 28 24 15 19 12 8 4 0" contenteditable>abc def hij אאא בבב צצצ opr uvw xyz</div>
<div dir=rtl class="test_move_by_word" title="35 27 31 24 20 16 12 3 7 0|0 8 4 11 15 19 23 32 28 35" contenteditable>abc def hij אאא בבב צצצ opr uvw xyz</div>

<div dir=ltr class="test_move_by_word" title="0 3 7 12 15 19 23|23 20 16 11 8 4 0" contenteditable>abc def שנב סטז uvw xyz</div>
<div dir=rtl class="test_move_by_word" title="23 19 16 12 8 3 0|0 4 7 11 15 20 23" contenteditable>abc def שנב סטז uvw xyz</div>

<div dir=ltr class="test_move_by_word" title="0 3 7 11|11 8 4 0" contenteditable>aaa אאא bbb</div>
<div dir=rtl class="test_move_by_word" title="11 8 4 0|0 3 7 11" contenteditable>aaa אאא bbb</div>

<!-- Hebrew English Hebrew -->
<div dir=ltr class="test_move_by_word" title="0 8 4 11 15 19 23 32 28 35|35 27 31 24 20 16 12 3 7 0" contenteditable>אאא בבב צצצ aaa bbb ccc דדד עעע פפפ</div>
<div dir=rtl class="test_move_by_word" title="35 32 28 24 15 19 12 8 4 0|0 3 7 11 20 16 23 27 31 35" contenteditable>אאא בבב צצצ aaa bbb ccc דדד עעע פפפ</div>

<div dir=ltr class="test_move_by_word" title="0 4 7 11 15 20 23|23 19 16 12 8 3 0" contenteditable>אאא בבב aaa bbb צצצ דדד</div>
<div dir=rtl class="test_move_by_word" title="23 20 16 11 8 4 0|0 3 7 12 15 19 23" contenteditable>אאא בבב aaa bbb צצצ דדד</div>

<div dir=ltr class="test_move_by_word" title="0 3 7 11|11 8 4 0" contenteditable>שנב abc סטז</div>
<div dir=rtl class="test_move_by_word" title="11 8 4 0|0 3 7 11" contenteditable>שנב abc סטז</div>

<!-- test multi-line -->
<div><span style="font-family:arial;font-size:10px" class="fix_width" id="span_size">אאא אאא</span></div>
<div style="font-family:arial;font-size:10px" contenteditable dir=ltr id="ml_1" class="test_move_by_word fix_width" title="[ml_1, 0][ml_1, 3][ml_1, 7][ml_1, 11][ml_1, 15][ml_1, 18][ml_1, 3, 5][ml_1, 7, 5][ml_1, 11, 5][ml_1, 15, 5]|[ml_1, 15, 5][ml_1, 12, 5][ml_1, 8, 5][ml_1, 4, 5][ml_1, 0, 5][ml_1, 16][ml_1, 12][ml_1, 8][ml_1, 4][ml_1, 0]">abc def ghi jkl mn <br/><br/><br/>opq rst uvw xyz</div>

<div style="font-family:arial;font-size:10px" contenteditable dir=rtl id="ml_12" class="test_move_by_word fix_width" title="
[ml_12, 25, 5][ml_12, 22, 5][ml_12, 18, 5][ml_12, 14, 5][ml_12, 11, 5][ml_12, 7, 5][ml_12, 4, 5][ml_12, 0, 5][ml_12, 32][ml_12, 29][ml_12, 25][ml_12, 21][ml_12, 17][ml_12, 13][ml_12, 9][ml_12, 4][ml_12, 1]|[ml_12, 1][ml_12, 5][ml_12, 8][ml_12, 12][ml_12, 16][ml_12, 20][ml_12, 24][ml_12, 28][ml_12, 33][ml_12, 36][ml_12, 3, 5][ml_12, 6, 5][ml_12, 10, 5][ml_12, 13, 5][ml_12, 17, 5][ml_12, 21, 5][ml_12, 25, 5]
"> abc def אאא אאא hij אאא אאא uvw xyz <div><br/></div><div><br/></div><div><br/></div>אאא kj אאא mn opq אאא אאא</div>

<div contenteditable dir=ltr id="ml_16" class="test_move_by_word" title="[ml_16, 0][ml_16, 3][ml_16, 4, 4]|[ml_16, 4, 4][ml_16, 1, 4][ml_16, 0]">abc<br><br>&nbsp;def</div>

<!-- test multispaces -->
<div dir=ltr class="test_move_by_word" title="0 3 7 14 18|18 15 8 4 0" contenteditable>abc def    hij opq</div>

<!-- There are multiple spaces in the test, and the spaces will be collapsed. Thus, given an offset 25, which is
     immediately before "opq", it's canonicalPosition is at offset 22, and the VisiblePosition created is based on
     Position(22). That is why '22'(instead of 25) is the expected result when moving caret left by word from "opq|".
     Same for the result of 15 and 8.
 -->
<div dir=ltr class="test_move_by_word" title="4 7 14 21 28|28 22 15 8 4" contenteditable>    abc    def    hij    opq    </div>

<div style="white-space:pre" dir=rtl class="test_move_by_word" title="67 49 56 46 39 32 25 7 14 4 0|0 18 11 21 28 35 42 60 53 63 67" contenteditable>    abc    def    hij    אבצ    דעפ    היח    opq    rst    uvw    </div>
<div style="white-space:pre" dir=rtl class="test_move_by_word" title="32 25 18 11 4 0|0 7 14 21 28 32" contenteditable>    אבצ    דעפ    חיח    ופק    </div>

<!-- test inline element -->
<div dir=rtl id="d_4" class="test_move_by_word" title="[d_4, 8, 3][d_4, 3, 1][d_4, 7, 1][s_4, 3, 1][s_4, 7, 1][d_4, 4, 3][d_4, 0, 1]|[d_4, 0, 1][d_4, 5, 3][d_4, 1, 3][s_4, 4, 1][d_4, 8, 1][d_4, 4, 1][d_4, 8, 3]" contenteditable>abc def <span id="s_4">hij opq</span> rst uvw</div>

<div id="d_20" dir=rtl class="test_move_by_word" title="[d_20, 15, 3][d_20, 12, 3][d_20, 7, 3][d_20, 4, 3][s_20, 3, 1][s_20, 7, 1][s_20, 8, 1][s_20, 15, 1][d_20, 16, 1][d_20, 12, 1][d_20, 7, 1][d_20, 4, 1][d_20, 0, 1]|[d_20, 0, 1][d_20, 3, 1][d_20, 8, 1][d_20, 11, 1][d_20, 15, 1][s_20, 16, 1][s_20, 12, 1][s_20, 11, 1][s_20, 4, 1][d_20, 3, 3][d_20, 8, 3][d_20, 11, 3][d_20, 15, 3]" contenteditable>אבד opq rst דעפ <span dir=ltr id="s_20">abc uvw אאא def lmn</span>אבצ hij xyz וקק</div>

</div>

<pre id="console"></pre>
</body>
</html>
