<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
function assertMarkedText(tagName, compositionText, expected) {
  assert_selection(
    `<${tagName} contenteditable id="sample">^X|</${tagName}>`,
    selection => {
      selection.document.execCommand('delete');
      textInputController.setMarkedText(compositionText, 0,
                                        compositionText.length);
      const sample = selection.document.getElementById('sample');
      assert_equals(sample.firstChild.textContent, expected);
      textInputController.unmarkText();
    },
    `<${tagName} contenteditable id="sample">^${expected}|</${tagName}>`);
}

test(() => {
 assert_exists(window, 'textInputController',
               'this test requires window.textInputController.');

  assertMarkedText('div', 'AB', 'AB');
  assertMarkedText('div', 'A B', 'A B');
  assertMarkedText('div', 'A  B', 'A\xA0 B');
  assertMarkedText('div', 'A   B', 'A\xA0 \xA0B');
  assertMarkedText('div', 'A    B', 'A\xA0 \xA0 B');

  assertMarkedText('div', ' AB', '\xA0AB');
  assertMarkedText('div', '  AB', '\xA0 AB');
  assertMarkedText('div', '   AB', '\xA0 \xA0AB');
  assertMarkedText('div', '    AB', '\xA0 \xA0 AB');
  assertMarkedText('div', '     AB', '\xA0 \xA0 \xA0AB');
  assertMarkedText('div', '      AB', '\xA0 \xA0 \xA0 AB');
  assertMarkedText('div', '       AB', '\xA0 \xA0 \xA0 \xA0AB');
  assertMarkedText('div', 'AB  ', 'AB\xA0\xA0');
  assertMarkedText('div', 'AB   ', 'AB\xA0 \xA0');
  assertMarkedText('div', 'AB    ', 'AB\xA0 \xA0\xA0');
  assertMarkedText('div', 'AB     ', 'AB\xA0 \xA0 \xA0');
  assertMarkedText('div', 'AB      ', 'AB\xA0 \xA0 \xA0\xA0');
  assertMarkedText('div', 'AB       ', 'AB\xA0 \xA0 \xA0 \xA0');

  assertMarkedText('div', '  A  B  ', '\xA0 A\xA0 B\xA0\xA0');
  assertMarkedText('div', '\t\tA\t\tB\t\t', '\xA0 A\xA0 B\xA0\xA0');

  assertMarkedText('div', ' ', '\xA0');
  assertMarkedText('div', '  ', '\xA0\xA0');
  assertMarkedText('div', '   ', '\xA0 \xA0');

  assertMarkedText('pre', 'AB', 'AB');
  assertMarkedText('pre', 'A B', 'A B');
  assertMarkedText('pre', 'A  B', 'A  B');
  assertMarkedText('pre', 'A   B', 'A   B');
  assertMarkedText('pre', 'A    B', 'A    B');
  assertMarkedText('pre', 'AB  ', 'AB  ');
  assertMarkedText('pre', 'AB   ', 'AB   ');
  assertMarkedText('pre', 'AB    ', 'AB    ');
  assertMarkedText('pre', 'AB     ', 'AB     ');
  assertMarkedText('pre', 'AB      ', 'AB      ');
  assertMarkedText('pre', 'AB       ', 'AB       ');
  assertMarkedText('pre', '  AB', '  AB');
  assertMarkedText('pre', '   AB', '   AB');
  assertMarkedText('pre', '    AB', '    AB');
  assertMarkedText('pre', '     AB', '     AB');
  assertMarkedText('pre', '      AB', '      AB');
  assertMarkedText('pre', '       AB', '       AB');

  assertMarkedText('pre', '  A  B  ', '  A  B  ');
  assertMarkedText('pre', '\t\tA\t\tB\t\t', '\t\tA\t\tB\t\t');
  assertMarkedText('pre', ' ', ' ');
  assertMarkedText('pre', '  ', '  ');
  assertMarkedText('pre', '   ', '   ');
}, 'Insert space and TAB via TextInputController');
</script>
</body>
</html>