<!DOCTYPE html>
<meta charset="utf-8">
<style>
.embed span[dir] {
  unicode-bidi:embed;
  background-color:yellow;
}
.isolate span[dir] {
  unicode-bidi:-moz-isolate;
  unicode-bidi:-ms-isolate;
  unicode-bidi:-webkit-isolate;
  unicode-bidi:isolate;
  background-color:orange;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id=container>
  <p>This test ensures that move right behaves the same for unicode-bidi:embed and isolate.
  <div id="t1" dir=rtl contenteditable>דעפ <span dir=ltr>xyz</span> וקק</div>
  <div id="t2" dir=rtl contenteditable>abc <span dir=ltr>xyz</span> uvw</div>
</div>
<pre id=result></pre>
<script>
var selection = window.getSelection();

[t1, t2].forEach(runTest);

function runTest(element) {
  var elements = createEmbedAndIsolateElements(element);
  var results = elements.map(moveByCharacterPositions);
  test(function () {
    assert_equals(results[0].length, results[1].length);
  }, element.id + ".length");
  for (var i = 0; i < results[0].length; i++) {
    test(function () {
      assert_equals(results[0][i], results[1][i]);
    }, element.id + "[" + i + "]");
  }
}

function createEmbedAndIsolateElements(element) {
  var isolate = element.cloneNode(true);
  element.className = "embed";
  isolate.className = "isolate";
  element.parentNode.insertBefore(isolate, element.nextSibling);
  return [element, isolate];
}

function moveByCharacterPositions(element) {
  selection.collapse(element, 0);
  var result = [];
  var last = { node: selection.anchorNode, offset: selection.anchorOffset };
  for (;;) {
    result.push(selectedNodeAsText());
    selection.modify("move", "left", "character");
    if (last.node == selection.anchorNode && last.offset == selection.anchorOffset)
      return result;
    if (result.length > 30) {
      result.push("...");
      return result;
    }
    last = { node: selection.anchorNode, offset: selection.anchorOffset };
  }
}

function selectedNodeAsText() {
  var text = selection.anchorNode.textContent;
  var offset = selection.anchorOffset;
  return text.substring(0, offset) + "|" + text.substring(offset);
}

if (window.testRunner)
  container.style.display = "none";
</script>