<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
test(() => assert_selection(
    [
        '<div contenteditable>',
            '<span>|foo</span>',
        '</div>',
    ].join(''),
    'insertText \t',
    [
        '<div contenteditable>',
            '<span>',
                '<span style="white-space:pre">\t|</span>',
                'foo',
             '</span>',
        '</div>'
    ].join('')),
    'Insert a tab character before text');

test(() => assert_selection(
    [
        '<div contenteditable>',
            '<span>foo|</span>',
        '</div>',
    ].join(''),
    'insertText \t',
    [
        '<div contenteditable>',
            '<span>',
                'foo',
                '<span style="white-space:pre">\t|</span>',
             '</span>',
        '</div>'
    ].join('')),
    'Insert a tab character after text');

test(() => assert_selection(
    [
        '<div contenteditable>',
            '<span>fo|o</span>',
        '</div>',
    ].join(''),
    'insertText \t',
    [
        '<div contenteditable>',
            '<span>',
                'fo',
                '<span style="white-space:pre">\t|</span>',
                'o',
             '</span>',
        '</div>'
    ].join('')),
    'Insert a tab character in text');

test(() => assert_selection(
    [
        '<div contenteditable>',
            '<span>|foo</span>',
        '</div>',
    ].join(''),
    selection => {
        selection.document.execCommand('insertLineBreak');
        selection.document.execCommand('insertText', false, '\t');
    },
    [
        '<div contenteditable>',
            '<span>',
                '<br>',
                '<span style="white-space:pre">\t|</span>',
                'foo',
             '</span>',
        '</div>'
    ].join('')),
    'Insert BR and a tab character before text');
</script>