<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="assert_selection.js"></script>
<script>
function checked_assert_selection(input, command, output) {
    try {
        assert_selection(input, command, output);
    } catch (exception) {
        return exception.message;
    }
    return 'no exception';
}

test(() => {
    assert_selection('foo', 'noop', 'foo');
    assert_selection('|foo', 'noop', '|foo');
    assert_selection('f|oo', 'noop', 'f|oo');
    assert_selection('foo|', 'noop', 'foo|');
    assert_selection('^foo|', 'noop', '^foo|');
    assert_selection('f^oo|', 'noop', 'f^oo|');
    assert_selection('f^o|o', 'noop', 'f^o|o');
    assert_selection('|foo^', 'noop', '|foo^');
    assert_selection(
        '|foo^',
        selection => selection.modify('extend', 'forward', 'character'),
        'f|oo^', 'selection.modify');
    assert_selection(
        '<div contenteditable>^foo|</div>',
        'bold',
        '<div contenteditable><b>^foo|</b></div>',
        'execCommand');
}, 'markers in text');

test(() => {
    assert_selection('|<img>', 'noop', '|<img>');
    assert_selection('^<img>|', 'noop', '^<img>|');
    assert_selection('|<img>^', 'noop', '|<img>^');
    assert_selection('<a>|<br></a>', 'noop', '<a>|<br></a>');
    assert_selection('<a><img>|</a>', 'noop', '<a><img>|</a>');
    assert_selection('<a>^<img>|</a>', 'noop', '<a>^<img>|</a>');
    assert_selection('<a>|<img>^</a>', 'noop', '<a>|<img>^</a>');
    assert_selection('<a><img>|<img></a>', 'noop', '<a><img>|<img></a>');
    assert_selection('<a><img>|<img>^</a>', 'noop', '<a><img>|<img>^</a>');
    assert_selection('<a><img>^<img>|</a>', 'noop', '<a><img>^<img>|</a>');
}, 'markers at element');

test(() => {
    assert_selection(
        '|<table><tr><td>foo</td></tr></table>', 'noop',
        '|<table><tbody><tr><td>foo</td></tr></tbody></table>');
    assert_selection(
        '<table><tr><td>foo</td></tr></table>|', 'noop',
        '<table><tbody><tr><td>foo</td></tr></tbody></table>|');
    assert_selection(
        '^<table><tr><td>foo</td></tr></table>|', 'noop',
        '^<table><tbody><tr><td>foo</td></tr></tbody></table>|');
    assert_selection(
        '|<table><tr><td>foo</td></tr></table>^', 'noop',
        '|<table><tbody><tr><td>foo</td></tr></tbody></table>^');
}, 'markers around table');

selection_test(
    '<div>foo</div>',
    selection => {
        let doc = selection.document;
        doc.documentElement.replaceChild(
            doc.createTextNode('baz'), doc.body);
    },
    '<html><head></head>baz</html>',
    'Serialize document element instead of document.body when it is null.');

// Tests for TEXTAREA
selection_test(
    '<div>|<textarea>foo</textarea></div>',
    'noop',
    '<div>|<textarea>foo</textarea></div>',
    'We can place caret before TEXTAREA');

selection_test(
    '<div><textarea>foo</textarea>|</div>',
    'noop',
    '<div><textarea>foo</textarea>|</div>',
    'We can place caret after TEXTAREA');

selection_test(
    '<div>^<textarea>foo</textarea>|</div>',
    'noop',
    '<div>^<textarea>foo</textarea>|</div>',
    'We can select TEXTAREA');

selection_test(
    '<div><textarea>f|oo</textarea></div>',
    selection => {
      const textarea = selection.document.querySelector('textarea');
      textarea.value = 'bar';
    },
    '<div><textarea>bar|</textarea></div>',
    'TEXTAREA is serialized with value property');

selection_test(
    '<div><textarea>01234|56789</textarea></div>',
    selection => {
      const textarea = selection.document.querySelector('textarea');
      textarea.setSelectionRange(3, 7);
    },
    '<div><textarea>012^3456|789</textarea></div>',
    'HTMLTextArea#setSelectionRange()');

selection_test(
    '<textarea>0123^456|789</textarea>',
    selection => {
      const textarea = selection.document.querySelector('textarea');
      assert_equals(textarea.selectionStart, 4, 'selectionStart');
      assert_equals(textarea.selectionEnd, 7, 'selectionEnd');
    },
    '<textarea>0123^456|789</textarea>',
    'range selection');

selection_test(
    '<textarea>0123|456^789</textarea>',
    selection => {
      const textarea = selection.document.querySelector('textarea');
      assert_equals(textarea.selectionStart, 4, 'selectionStart');
      assert_equals(textarea.selectionEnd, 7, 'selectionEnd');
      assert_equals(textarea.selectionDirection, 'backward', 'selectionEnd');
    },
    '<textarea>0123|456^789</textarea>',
    'backward range selection');

selection_test(
    '<textarea>01234|56789</textarea>',
    selection => {
      const textarea = selection.document.querySelector('textarea');
      assert_equals(textarea.selectionStart, 5, 'selectionStart');
      assert_equals(textarea.selectionEnd, 5, 'selectionEnd');
    },
    '<textarea>01234|56789</textarea>',
    'caret selection');

// Shadow DOM
selection_test(
    [
        '<div id="host">',
            '<b id="abc">abc</b>',
            '<b id="def">def</b>',
        '</div>',
    ],
    selection => {
      const document = selection.document;
      const host = document.getElementById('host');
      const shadowRoot = host.createShadowRoot();
      shadowRoot.innerHTML = [
        '<span id="ghi">ghi</span>',
        '<content select="#def"></content>',
        '<span id="jkl">jkl</span>',
        '<content select="#abc"></content>',
        '<span id="mno">mno</span>',
      ].join('');
      selection.collapse(document.getElementById('abc'), 0);
      selection.extend(document.getElementById('def'), 0);
    },
    [
        '<div id="host">',
            '<span id="ghi">ghi</span>',
            '<b id="def">|def</b>',
            '<span id="jkl">jkl</span>',
            '<b id="abc">^abc</b>',
            '<span id="mno">mno</span>',
        '</div>',
    ],
    {dumpAs: 'flattree'}, 'dump flat tree for shadow DOM V0');

selection_test(
    [
        '<div id="host">',
            '<b id="abc" slot="abc">abc</b>',
            '<b id="def" slot="def">def</b>',
        '</div>',
    ].join(''),
    selection => {
      const document = selection.document;
      const host = document.getElementById('host');
      const shadowRoot = host.attachShadow({mode: 'open'});
      shadowRoot.innerHTML = [
        '<span id="ghi">ghi</span>',
        '<slot name="def"></slot>',
        '<span id="jkl">jkl</span>',
        '<slot name="abc"></slot>',
        '<span id="mno">mno</span>',
      ].join('');
      selection.collapse(document.getElementById('abc'), 0);
      selection.extend(document.getElementById('def'), 0);
    },
    [
        '<div id="host">',
            '<span id="ghi">ghi</span>',
            '<slot name="def">',
                '<b id="def" slot="def">|def</b>',
            '</slot>',
            '<span id="jkl">jkl</span>',
            '<slot name="abc">',
                '<b id="abc" slot="abc">^abc</b>',
            '</slot>',
            '<span id="mno">mno</span>',
        '</div>',
    ].join(''),
    {dumpAs: 'flattree'}, 'dump flat tree for shadow DOM V1');

selection_test(
    [
        '<style>* { font-family: monospace; }</style>',
        '<div>',
          '<span id="start">ABC</span>',
          '<p><a slot="a">111</a><b slot="b">222</b></p>',
          'DEF',
        '</div>',
    ],
    selection => {
      if (!window.eventSender)
        throw 'This test requires eventSender.';
      const document = selection.document;
      const host = document.querySelector('p');
      const shadowRoot = host.attachShadow({mode: 'open'});
      shadowRoot.innerHTML = [
        'ghi',
        '<slot name="b"></slot>',
        '<span id="end">jkl</span>',
        '<slot name="a"></slot>',
        'mno',
      ].join('');
      const start = document.getElementById('start');
      const end = shadowRoot.getElementById('end');
      eventSender.mouseMoveTo(
        selection.computeLeft(start),
        selection.computeTop(start) + start.offsetHeight / 2);
      eventSender.mouseDown();
      eventSender.leapForward(300);
      eventSender.mouseMoveTo(
        selection.computeLeft(end) + end.offsetWidth - 1,
        selection.computeTop(end) + end.offsetHeight / 2);
      eventSender.mouseUp();
    },
    [
        '<style>* { font-family: monospace; }</style>',
        '<div>',
          '<span id="start">^ABC</span>',
          '<p>',
            'ghi',
            '<slot name="b"><b slot="b">222</b></slot>',
            '<span id="end">jkl|</span>',
            '<slot name="a"><a slot="a">111</a></slot>',
            'mno',
          '</p>',
          'DEF',
        '</div>',
    ],
    {dumpAs: 'flattree'}, 'selection crossing shadow boundary');

selection_test(
    '<br>',
    selection => {
        selection.document.documentElement.prepend('Pre-HEAD');
        selection.document.body.before('Pre-BODY');
        selection.document.documentElement.append('Post-BODY');
    },
    '<html>Pre-HEAD<head></head>Pre-BODY<body><br></body>Post-BODY</html>',
    {dumpFromRoot: true},
    'Serialize with dumpFromRoot option');

test(() => {
    assert_equals(checked_assert_selection('fo|o', 'noop', 'fo|o'),
        'no exception');
}, 'no marker in output');

test(() => {
    assert_equals(checked_assert_selection('fo|o|', 'noop', 'foo'),
        'You should have at least one focus marker "|" in "fo|o|".');
}, 'multiple focus markers in input');

test(() => {
    assert_equals(checked_assert_selection('fo|o', 'noop', '|fo|o'),
        'You should have at most one focus marker "|" in "|fo|o".');
}, 'multiple focus markers in output');

test(() => {
    assert_equals(checked_assert_selection('^fo|o^', 'noop', 'foo'),
        'You should have at most one anchor marker "^" in "^fo|o^".');
}, 'multiple anchor markers in input');

test(() => {
    assert_equals(checked_assert_selection('fo|o', 'noop', '^fo|o^'),
        'You should have at most one anchor marker "^" in "^fo|o^".');
}, 'multiple anchor markers in output');

test(() => {
    assert_equals(checked_assert_selection('^foo', 'noop', 'baz'),
        'You should specify caret position in "^foo".');
}, 'anchor marker only in input');

test(() => {
    assert_equals(checked_assert_selection('|foo', 'noop', 'b^az'),
        'You should have a focus marker "|" in "b^az".');
}, 'anchor marker only in output');

test(() => {
    assert_equals(checked_assert_selection('^|foo', 'noop', 'baz'),
        'You should have focus marker and should not have anchor marker if and only if selection is a caret in "^|foo".');
}, 'anchor == focus in input');

test(() => {
    assert_equals(checked_assert_selection('|foo', 'noop', 'b^|az'),
        'You should have focus marker and should not have anchor marker if and only if selection is a caret in "b^|az".');
}, 'anchor == focus in output');

// TODO: It's better to have more powerful diff like
// |CreateUnifiedDiff()| in gtest or "Longest common substring"
test(() => {
    assert_equals(checked_assert_selection('foo', 'noop', 'foz'),
        `LayoutTests/editing/assert_selection.html:8:9)\n` +
        `\t expected foz,\n` +
        `\t but got  foo,\n` +
        `\t sameupto fo`);
}, 'Compare result');

selection_test(
    '<div contenteditable><p>^test|</p></div>',
    'insertHTML <span style="color: green">green</span>',
    '<div contenteditable><p><span style="color: green">green|</span></p></div>',
    'multiple spaces in function');

test(() => {
    assert_selection(
        '<div contenteditable>|</div>',
        selection => {
            selection.setClipboardData('<b>foo</b>');
            selection.document.execCommand('paste');
        },
        '<div contenteditable><b>foo|</b></div>',
        'set HTML fragment to clipboard and paste');

    assert_selection(
        '<div contenteditable>|</div>',
        selection => {
            selection.setClipboardData('<b>foo</b>');
            selection.document.execCommand('pasteAndMatchStyle');
        },
        '<div contenteditable>foo|</div>',
        'set HTML fragment to clipboard and pasteAndMatchStyle');

    assert_selection(
        '<div contenteditable>|</div>',
        selection => {
            selection.setClipboardData('<b>foo</b>', 'FOO');
            selection.document.execCommand('pasteAndMatchStyle');
        },
        '<div contenteditable>FOO|</div>',
        'set HTML fragment and text to clipboard and pasteAndMatchStyle');
}, 'selection.setClipboardData');

test(() => {
    const sample1 = assert_selection('abc', '', 'abc',
        {removeSampleIfSucceeded: false});
    assert_equals(sample1.iframe_.parentNode, document.body,
        'removeSampleIfSucceeded: false');

    const sample2 = assert_selection('abc', '', 'abc',
        {removeSampleIfSucceeded: true});
    assert_equals(sample2.iframe_.id, Sample.playgroundId,
        'removeSampleIfSucceeded: true: id');
    assert_equals(sample2.iframe_.style.display, 'none',
        'removeSampleIfSucceeded: true: style.display');

    const sample3 = assert_selection('abc', '', 'abc');
    assert_equals(sample3.iframe_.id, Sample.playgroundId,
        'with default options: id');
    assert_equals(sample3.iframe_.style.display, 'none',
        'with default options: id');

    const sample4 = assert_selection('abc', '', 'abc', 'description');
    assert_equals(sample4.iframe_.id, Sample.playgroundId,
        'with description: id');
    assert_equals(sample4.iframe_.style.display, 'none',
        'with description: id');
}, 'removeSampleIfSucceeded');

test(() => {
    assert_own_property(window, 'internals');
    assert_own_property(window, 'eventSender');
    assert_selection(
        'foo|bar',
        () => { assert_equals(internals.textAffinity, 'Downstream'); },
        'foo|bar');
    assert_selection(
        '<div contenteditable style="width: 25px;">foobar</div>',
        selection => {
            eventSender.dragMode = false;
            var document =  selection.document;
            var div = document.querySelector('div');
            eventSender.mouseMoveTo(document.offsetLeft + div.offsetLeft + 20,
                document.offsetTop + div.offsetTop + 5);
            eventSender.mouseDown();
            eventSender.mouseUp();
            assert_equals(internals.textAffinity, 'Upstream'); },
        '<div contenteditable style="width: 25px;">foo|bar</div>');
}, 'Textaffinity');

test(() => {
  assert_own_property(window, 'eventSender');
  assert_selection(
    [
      '<div id="first">one <span id="start"></span>two three</div>',
      '<div id="second">four <span id="end"></span>five six</div>',
    ].join(''),
    selection => {
      const start = selection.document.getElementById('start');
      const end = selection.document.getElementById('end');
      eventSender.mouseMoveTo(selection.computeLeft(start),
                              selection.computeTop(start));
      eventSender.mouseDown();
      eventSender.mouseMoveTo(selection.computeLeft(end),
                              selection.computeTop(end));
      eventSender.mouseUp();
    },
    [
      '<div id="first">one <span id="start"></span>^two three</div>',
      '<div id="second">four |<span id="end"></span>five six</div>',
    ].join(''));
}, 'computeLeft() and computeTop()');
</script>