<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/assert-selection.js"></script>
<script>
test(() => assert_selection(
  '<div contenteditable><p>A|B</p></div>',
  'insertText \ ',
  '<div contenteditable><p>A |B</p></div>'),
  'insert a plain space in the middle of text node');

test(() => assert_selection(
  '<div contenteditable><p id="para"></p></div>',
  selection => {
    var para = selection.document.getElementById('para');
    para.appendChild(selection.document.createTextNode('A'));
    para.appendChild(selection.document.createTextNode('B'));
    selection.collapse(para.firstChild, 1);

    selection.document.execCommand('insertText', false, ' ');
  },
  '<div contenteditable><p id="para">A |B</p></div>'),
  'insert a plain space between two inserted text nodes');

test(() => assert_selection(
  '<div contenteditable><p id="para"></p></div>',
  selection => {
    var para = selection.document.getElementById('para');
    para.appendChild(selection.document.createTextNode('A'));
    para.appendChild(selection.document.createTextNode(''));
    selection.collapse(para.firstChild, 1);

    selection.document.execCommand('insertText', false, ' ');
  },
  '<div contenteditable><p id="para">A\u00A0|</p></div>'),
  'Insert a &nbsp; instead of plain space when it is inserted before the empty text node');

test(() => assert_selection(
  '<div contenteditable><p id="para"></p></div>',
  selection => {
    var para = selection.document.getElementById('para');
    para.appendChild(selection.document.createTextNode('A'));
    para.appendChild(selection.document.createTextNode(' B'));
    selection.collapse(para.firstChild, 1);

    selection.document.execCommand('insertText', false, ' ');
  },
  '<div contenteditable><p id="para">A\u00A0| B</p></div>'),
  'Insert a &nbsp; instead of plain space when it is inserted before the text node that has a leading plain space');

test(() => assert_selection(
  '<div contenteditable>|<br> </div>',
  selection => {
    selection.document.execCommand('insertText', false, ' ');
    selection.document.execCommand('insertText', false, ' ');
    selection.document.execCommand('insertText', false, ' ');
  },
  '<div contenteditable>\u00A0 \u00A0| </div>'),
  'Insert spaces into the editable <div> that only has <br> and space as child');

test(() => assert_selection(
  '<div contenteditable>|<br>\u000A</div>',
  selection => {
    selection.document.execCommand('insertText', false, ' ');
    selection.document.execCommand('insertText', false, ' ');
    selection.document.execCommand('insertText', false, ' ');
  },
  '<div contenteditable>\u00A0 \u00A0|\u000A</div>'),
  'Insert spaces into the editable <div> that only has <br> and enter as child');
</script>