| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| <style> |
| div.test { |
| -webkit-user-modify: read-write; |
| padding: 4px; |
| border: 1px dashed lightblue; |
| margin: 4px 4px 4px 24px; |
| outline: none; |
| font-family: Lucida Grande; |
| counter-increment: test-number; |
| } |
| div.test:before { content: counter(test-number); position: absolute; left: 8px; font-size: x-small; text-align: right; width: 20px; } |
| div.test span { background-color: #def; } |
| div.test img { width: 1em; height: 1em; background-color: lightgreen; } |
| div.test img + img { background-color: lightblue; } |
| div.test div { border: 1px dashed pink; padding: 3px; height: 2em; } |
| </style> |
| <script> |
| function log(message) |
| { |
| document.getElementById("console").appendChild(document.createTextNode(message)); |
| } |
| |
| function positionsMovingInDirection(sel, direction) |
| { |
| var positions = []; |
| positions.push({ node: sel.anchorNode, offset: sel.focusOffset}); |
| sel.modify("move", direction, "lineBoundary"); |
| positions.push({ node: sel.anchorNode, offset: sel.focusOffset}); |
| return positions; |
| } |
| |
| function fold(string) |
| { |
| var result = ""; |
| for (var i = 0; i < string.length; ++i) { |
| var char = string.charCodeAt(i); |
| if (char >= 0x05d0) |
| char -= 0x058f; |
| else if (char == 10) { |
| result += "\\n"; |
| continue; |
| } |
| result += String.fromCharCode(char); |
| } |
| return result; |
| } |
| |
| function logPositions(positions) |
| { |
| for (var i = 0; i < positions.length; ++i) { |
| if (i) { |
| if (positions[i].node != positions[i - 1].node) |
| log("]"); |
| log(", "); |
| } |
| if (!i || positions[i].node != positions[i - 1].node) |
| log((positions[i].node instanceof Text ? '"' + fold(positions[i].node.data) + '"' : "<" + positions[i].node.tagName + ">") + "["); |
| log(positions[i].offset); |
| } |
| log("]"); |
| } |
| |
| onload = function() |
| { |
| if (!window.layoutTestController) |
| return; |
| |
| layoutTestController.dumpAsText(); |
| |
| var tests = document.getElementsByClassName("test"); |
| var sel = getSelection(); |
| for (var i = 0; i < tests.length; ++i) { |
| var positionsMovingRight; |
| var positionsMovingLeft; |
| |
| log("Test " + (i + 1) + ", LTR:\n Moving forward: "); |
| sel.setPosition(tests[i], 0); |
| positionsMovingRight = positionsMovingInDirection(sel, "forward"); |
| logPositions(positionsMovingRight); |
| log("\n"); |
| |
| log(" Moving backward: "); |
| positionsMovingLeft = positionsMovingInDirection(sel, "backward"); |
| logPositions(positionsMovingLeft); |
| log("\n"); |
| |
| tests[i].style.direction = "rtl"; |
| |
| log("Test " + (i + 1) + ", RTL:\n Moving forward: "); |
| sel.setPosition(tests[i], 0); |
| positionsMovingLeft = positionsMovingInDirection(sel, "forward"); |
| logPositions(positionsMovingLeft); |
| log("\n"); |
| |
| log(" Moving backward: "); |
| positionsMovingRight = positionsMovingInDirection(sel, "backward"); |
| logPositions(positionsMovingRight); |
| log("\n"); |
| |
| tests[i].style.display = "none"; |
| } |
| } |
| |
| </script> |
| </head> |
| <body> |
| |
| <div contenteditable class="test"> |
| abc אבג xyz דהו def |
| </div> |
| <div contenteditable class="test"> |
| אבג xyz דהו def זחט |
| </div> |
| <div contenteditable class="test"> |
| אבג דהו אבג |
| </div> |
| <div contenteditable class="test"> |
| abc efd dabeb |
| </div> |
| |
| <div contenteditable class="test">Lorem <span style="direction: rtl">ipsum dolor sit</span> amet</div> |
| <div contenteditable class="test">Lorem <span style="direction: rtl">ipsum dolor<div > just a test</div> sit</span> amet</div> |
| <div contenteditable class="test">Lorem <span dir="rtl">ipsum dolor sit</span> amet</div> |
| <div contenteditable class="test">Lorem <div dir="rtl">ipsum dolor sit</div> amet</div> |
| |
| <div contenteditable class="test">Lorem <span style="direction: ltr">ipsum dolor sit</span> amet</div> |
| <div contenteditable class="test">Lorem <span style="direction: ltr">ipsum dolor<div > just a test</div> sit</span> amet</div> |
| <div contenteditable class="test">Lorem <span dir="ltr">ipsum dolor sit</span> amet</div> |
| <div contenteditable class="test">Lorem <div dir="ltr">ipsum dolor sit</div> amet</div> |
| |
| <div class="test" style="direction: ltr;" contenteditable> |
| Just |
| <span>testing רק</span> |
| בודק |
| </div> |
| |
| <div class="test" style="direction: ltr;" contenteditable> |
| Just |
| <span>testing what</span> |
| ever |
| </div> |
| |
| |
| <div class="test" contenteditable>car means אבג.</div> |
| <div class="test" contenteditable>‫car דהו אבג.‬</div> |
| <div class="test" contenteditable>he said "‫car דהו אבג‬."</div> |
| <div class="test" contenteditable>זחט יךכ לםמ '‪he said "‫car דהו אבג‬"‬'?</div> |
| |
| |
| <div class="test" contenteditable>אבג abc דהו<br />edf זחט abrebg</div> |
| <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> |
| <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> |
| <pre id="console"></pre> |
| </body> |
