<!DOCTYPE html>
<pre id="log"></pre>

<div id="ltrTextContainer" contenteditable>foo bar <span contenteditable=false>baz</span> qux quux</div>
<div id="rtlTextContainer" contenteditable dir="rtl">&#x05E9;&#x05D5;&#x05BC;&#x05E8;&#x05D4; &#x05E9;&#x05D5;&#x05BC;&#x05E8;&#x05D4;
<span contenteditable=false>&#x05E9;&#x05D5;&#x05BC;&#x05E8;&#x05D4;</span>
&#x05E9;&#x05D5;&#x05BC;&#x05E8;&#x05D4; &#x05E9;&#x05D5;&#x05BC;&#x05E8;&#x05D4;</div>

<script>
function log(s) {
  document.getElementById("log").appendChild(document.createTextNode(s + "\n"));
}

function placeCursorAfterFirstNoneditableChild(container) {
  for (var i = 0; i < container.childNodes.length; i++) {
    var node = container.childNodes[i];
    if (node.isContentEditable !== undefined && !node.isContentEditable) {
      getSelection().setPosition(node.nextSibling, 0);
      return node;
    }
  }
  throw "Couldn't find noneditable child of " + container.textContent;
}

function extendBackwardByWord(container, bidiName) {
  noneditableChild = placeCursorAfterFirstNoneditableChild(container);
  getSelection().modify("extend", "backward", "word");
  if (getSelection().toString() === noneditableChild.textContent)
    log("PASS for " + bidiName);
  else
    log("FAIL for " + bidiName + ", selection is \"" + getSelection() + "\" but should be \"" + noneditableChild.textContent + "\"");
}

extendBackwardByWord(document.getElementById("ltrTextContainer"), "LTR");
extendBackwardByWord(document.getElementById("rtlTextContainer"), "RTL");

if (window.testRunner)
    testRunner.dumpAsText();
</script>