<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../assert_selection.js"></script>
<script>
const kQuoteStyle = `
<style>
 .quote::before { content: "\""; }
 .quote::after { content: "\""; }
</style>
`;

selection_test(
    [
      kQuoteStyle,
      '<div contenteditable>before |<span class="quote">content</span> after</div>'
    ],
    selection => selection.modify('move', 'right', 'character'),
    [
      kQuoteStyle,
      '<div contenteditable>before <span class="quote">c|ontent</span> after</div>'
    ],
    'ltr enter quote at front');

selection_test(
    [
      kQuoteStyle,
      '<div contenteditable>before <span class="quote">c|ontent</span> after</div>'
    ],
    selection => selection.modify('move', 'left', 'character'),
    [
      kQuoteStyle,
      '<div contenteditable>before |<span class="quote">content</span> after</div>'
    ],
    'ltr exit quote at front');

selection_test(
    [
      kQuoteStyle,
      '<div contenteditable>before <span class="quote">content|</span> after</div>'
    ],
    selection => selection.modify('move', 'right', 'character'),
    [
      kQuoteStyle,
      '<div contenteditable>before <span class="quote">content</span> |after</div>'
    ],
    'ltr exit quote at back');

selection_test(
    [
      kQuoteStyle,
      '<div contenteditable>before <span class="quote">content</span> |after</div>'
    ],
    selection => selection.modify('move', 'left', 'character'),
    [
      kQuoteStyle,
      '<div contenteditable>before <span class="quote">content|</span> after</div>'
    ],
    'ltr enter quote at back');

selection_test(
    [
      kQuoteStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 |<span class="quote">\u05D3\u05D4\u05D5</span> \u05D6\u05D7\u05D8</div>'
    ],
    selection => selection.modify('move', 'left', 'character'),
    [
      kQuoteStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 <span class="quote">\u05D3|\u05D4\u05D5</span> \u05D6\u05D7\u05D8</div>'
    ],
    'rtl enter quote at front');

selection_test(
    [
      kQuoteStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 <span class="quote">\u05D3|\u05D4\u05D5</span> \u05D6\u05D7\u05D8</div>'
    ],
    selection => selection.modify('move', 'right', 'character'),
    [
      kQuoteStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 |<span class="quote">\u05D3\u05D4\u05D5</span> \u05D6\u05D7\u05D8</div>'
    ],
    'rtl exit quote at front');

selection_test(
    [
      kQuoteStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 <span class="quote">\u05D3\u05D4\u05D5|</span> \u05D6\u05D7\u05D8</div>'
    ],
    selection => selection.modify('move', 'left', 'character'),
    [
      kQuoteStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 <span class="quote">\u05D3\u05D4\u05D5</span> |\u05D6\u05D7\u05D8</div>'
    ],
    'rtl exit quote at back');

selection_test(
    [
      kQuoteStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 <span class="quote">\u05D3\u05D4\u05D5</span> |\u05D6\u05D7\u05D8</div>'
    ],
    selection => selection.modify('move', 'right', 'character'),
    [
      kQuoteStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 <span class="quote">\u05D3\u05D4\u05D5|</span> \u05D6\u05D7\u05D8</div>'
    ],
    'rtl enter quote at back');

const kBidiStyle = `
<style>
  .bidi::before { content: "aפb"; }
  .bidi::after { content: "aפb"; }
</style>
`;

selection_test(
    [
      kBidiStyle,
      '<div contenteditable>before |<span class="bidi">content</span> after</div>'
    ],
    selection => selection.modify('move', 'right', 'character'),
    [
      kBidiStyle,
      '<div contenteditable>before <span class="bidi">c|ontent</span> after</div>'
    ],
    'ltr enter bidi at front');

selection_test(
    [
      kBidiStyle,
      '<div contenteditable>before <span class="bidi">c|ontent</span> after</div>'
    ],
    selection => selection.modify('move', 'left', 'character'),
    [
      kBidiStyle,
      '<div contenteditable>before |<span class="bidi">content</span> after</div>'
    ],
    'ltr exit bidi at front');

selection_test(
    [
      kBidiStyle,
      '<div contenteditable>before <span class="bidi">content|</span> after</div>'
    ],
    selection => selection.modify('move', 'right', 'character'),
    [
      kBidiStyle,
      '<div contenteditable>before <span class="bidi">content</span> |after</div>'
    ],
    'ltr exit bidi at back');

selection_test(
    [
      kBidiStyle,
      '<div contenteditable>before <span class="bidi">content</span> |after</div>'
    ],
    selection => selection.modify('move', 'left', 'character'),
    [
      kBidiStyle,
      '<div contenteditable>before <span class="bidi">content|</span> after</div>'
    ],
    'ltr enter bidi at back');

selection_test(
    [
      kBidiStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 |<span class="bidi">\u05D3\u05D4\u05D5</span> \u05D6\u05D7\u05D8</div>'
    ],
    selection => selection.modify('move', 'left', 'character'),
    [
      kBidiStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 <span class="bidi">\u05D3|\u05D4\u05D5</span> \u05D6\u05D7\u05D8</div>'
    ],
    'rtl enter bidi at front');

selection_test(
    [
      kBidiStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 <span class="bidi">\u05D3|\u05D4\u05D5</span> \u05D6\u05D7\u05D8</div>'
    ],
    selection => selection.modify('move', 'right', 'character'),
    [
      kBidiStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 |<span class="bidi">\u05D3\u05D4\u05D5</span> \u05D6\u05D7\u05D8</div>'
    ],
    'rtl exit bidi at front');

selection_test(
    [
      kBidiStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 <span class="bidi">\u05D3\u05D4\u05D5|</span> \u05D6\u05D7\u05D8</div>'
    ],
    selection => selection.modify('move', 'left', 'character'),
    [
      kBidiStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 <span class="bidi">\u05D3\u05D4\u05D5</span> |\u05D6\u05D7\u05D8</div>'
    ],
    'rtl exit bidi at back');

selection_test(
    [
      kBidiStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 <span class="bidi">\u05D3\u05D4\u05D5</span> |\u05D6\u05D7\u05D8</div>'
    ],
    selection => selection.modify('move', 'right', 'character'),
    [
      kBidiStyle,
      '<div contenteditable dir="rtl">\u05D0\u05D1\u05D2 <span class="bidi">\u05D3\u05D4\u05D5|</span> \u05D6\u05D7\u05D8</div>'
    ],
    'rtl enter bidi at back');
</script>