<!doctype html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../editing/assert_selection.js"></script>
<script>
test(() => assert_selection(
    [
        '<div id="test">',
            '<div><a href="#">link</a></div>',
            '<div></div>',
            '<div><br><br><img id="img" src=""></div>',
            '<div><br><br>text</div>',
        '</div>',
    ].join(''),
    selection => {
      const document = selection.document
      const range = document.createRange();
      range.setStartBefore(document.getElementById('test').firstChild);
      range.setEndBefore(document.getElementById('img'));
      const contents = range.cloneContents();
      document.body.innerHTML = '';
      document.body.appendChild(contents);
    },
    '<div><a href="#">link</a></div><div></div><div><br><br></div>'),
    'Clone before IMG');

test(() => assert_selection(
    [
        '<div id="test">',
            '<div><a href="#">link</a></div>',
            '<div></div>',
            '<div><br><br><img id="img" src=""></div>',
            '<div><br><br>text</div>',
        '</div>',
    ].join(''),
    selection => {
      const document = selection.document
      const range = document.createRange();
      range.setStartAfter(document.getElementById('img'));
      range.setEndAfter(document.getElementById('test').lastChild);
      const contents = range.cloneContents();
      document.body.innerHTML = '';
      document.body.appendChild(contents);
    },
    '<div></div><div><br><br>text</div>'),
    'Clone after IMG');
</script>