2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 -webkit-user-modify: read-write;
7 border: 1px dashed lightblue;
8 margin: 4px 4px 4px 24px;
10 font-family: Lucida Grande;
11 counter-increment: test-number;
13 div.test:before { content: counter(test-number); position: absolute; left: 8px; font-size: x-small; text-align: right; width: 20px; }
14 div.test span { background-color: #def; }
15 div.test img { width: 1em; height: 1em; background-color: lightgreen; }
16 div.test img + img { background-color: lightblue; }
17 div.test div { border: 1px dashed pink; padding: 3px; height: 2em; }
22 document.getElementById("console").appendChild(document.createTextNode(message));
25 function positionsMovingInDirection(sel, direction)
28 positions.push({ node: sel.anchorNode, offset: sel.focusOffset});
29 sel.modify("move", direction, "lineBoundary");
30 positions.push({ node: sel.anchorNode, offset: sel.focusOffset});
37 for (var i = 0; i < string.length; ++i) {
38 var char = string.charCodeAt(i);
41 else if (char == 10) {
45 result += String.fromCharCode(char);
50 function logPositions(positions)
52 for (var i = 0; i < positions.length; ++i) {
54 if (positions[i].node != positions[i - 1].node)
58 if (!i || positions[i].node != positions[i - 1].node)
59 log((positions[i].node instanceof Text ? '"' + fold(positions[i].node.data) + '"' : "<" + positions[i].node.tagName + ">") + "[");
60 log(positions[i].offset);
67 if (!window.testRunner)
70 testRunner.dumpAsText();
72 var tests = document.getElementsByClassName("test");
73 var sel = getSelection();
74 log("Test Moving forward/backward\n");
75 for (var i = 0; i < tests.length; ++i) {
76 var positionsMovingForward;
77 var positionsMovingBackward;
79 log("Test " + (i + 1) + ", LTR:\n Moving forward: ");
80 sel.collapse(tests[i], 0);
81 positionsMovingForward = positionsMovingInDirection(sel, "forward");
82 logPositions(positionsMovingForward);
85 log(" Moving backward: ");
86 positionsMovingBackward = positionsMovingInDirection(sel, "backward");
87 logPositions(positionsMovingBackward);
90 tests[i].style.direction = "rtl";
92 log("Test " + (i + 1) + ", RTL:\n Moving forward: ");
93 sel.collapse(tests[i], 0);
94 positionsMovingForward = positionsMovingInDirection(sel, "forward");
95 logPositions(positionsMovingForward);
98 log(" Moving backward: ");
99 positionsMovingBackward = positionsMovingInDirection(sel, "backward");
100 logPositions(positionsMovingBackward);
104 log("Test Moving right/left\n");
105 for (var i = 0; i < tests.length; ++i) {
106 var positionsMovingRight;
107 var positionsMovingLeft;
109 tests[i].style.direction = "ltr";
111 log("Test " + (i + 1) + ", LTR:\n Moving right: ");
112 sel.collapse(tests[i], 0);
113 positionsMovingRight = positionsMovingInDirection(sel, "right");
114 logPositions(positionsMovingRight);
117 log(" Moving left: ");
118 positionsMovingLeft = positionsMovingInDirection(sel, "left");
119 logPositions(positionsMovingLeft);
122 tests[i].style.direction = "rtl";
124 log("Test " + (i + 1) + ", RTL:\n Moving left: ");
125 sel.collapse(tests[i], 0);
126 positionsMovingLeft = positionsMovingInDirection(sel, "left");
127 logPositions(positionsMovingLeft);
130 log(" Moving right: ");
131 positionsMovingRight = positionsMovingInDirection(sel, "right");
132 logPositions(positionsMovingRight);
135 tests[i].style.display = "none";
143 <div contenteditable class="test">
144 abc אבג xyz דהו def
146 <div contenteditable class="test">
147 אבג xyz דהו def זחט
149 <div contenteditable class="test">
150 אבג דהו אבג
152 <div contenteditable class="test">
156 <div contenteditable class="test">Lorem <span style="direction: rtl">ipsum dolor sit</span> amet</div>
157 <div contenteditable class="test">Lorem <span style="direction: rtl">ipsum dolor<div > just a test</div> sit</span> amet</div>
158 <div contenteditable class="test">Lorem <span dir="rtl">ipsum dolor sit</span> amet</div>
159 <div contenteditable class="test">Lorem <div dir="rtl">ipsum dolor sit</div> amet</div>
161 <div contenteditable class="test">Lorem <span style="direction: ltr">ipsum dolor sit</span> amet</div>
162 <div contenteditable class="test">Lorem <span style="direction: ltr">ipsum dolor<div > just a test</div> sit</span> amet</div>
163 <div contenteditable class="test">Lorem <span dir="ltr">ipsum dolor sit</span> amet</div>
164 <div contenteditable class="test">Lorem <div dir="ltr">ipsum dolor sit</div> amet</div>
166 <div class="test" style="direction: ltr;" contenteditable>
168 <span>testing רק</span>
172 <div class="test" style="direction: ltr;" contenteditable>
174 <span>testing what</span>
179 <div class="test" contenteditable>car means אבג.</div>
180 <div class="test" contenteditable>‫car דהו אבג.‬</div>
181 <div class="test" contenteditable>he said "‫car דהו אבג‬."</div>
182 <div class="test" contenteditable>זחט יךכ לםמ '‪he said "‫car דהו אבג‬"‬'?</div>
185 <div class="test" contenteditable>אבג abc דהו<br />edf זחט abrebg</div>
186 <div class="test" contenteditable style="line-break:before-white-space; width:100px">abcdefg abcdefg abcdefg a abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </div>
187 <div class="test" contenteditable style="line-break:after-white-space; width:100px">abcdefg abcdefg abcdefg a abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </div>
188 <pre id="console"></pre>