<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
test(() => {
    assert_not_equals(window.internals, undefined,
        'This test requires to access clipboard from JavaScript');

    assert_selection(
        [
            '<div contenteditable>',
                '<span style="background-color: red">^abc|</span>',
                '<span id="dst" style="background-color: red">def</span>',
            '</div>',
        ].join(''),
        selection => {
            selection.document.execCommand('copy');
            selection.collapse(selection.document.getElementById('dst'), 0);
            selection.document.execCommand('paste');
        },
        [
            '<div contenteditable>',
                '<span style="background-color: red">abc</span>',
                '<span id="dst" style="background-color: red">abc|def</span>',
            '</div>',
        ].join(''),
        'Paste to same background-color');

    assert_selection(
        [
            '<div contenteditable>',
                '<span style="background-color: red">^abc|</span>',
                '<span id="dst" style="background-color: green">def</span>',
            '</div>',
        ].join(''),
        selection => {
            selection.document.execCommand('copy');
            selection.collapse(selection.document.getElementById('dst'), 0);
            selection.document.execCommand('paste');
        },
        [
            '<div contenteditable>',
                '<span style="background-color: red">abc</span>',
                '<span id="dst" style="background-color: green">',
                    '<span style="background-color: rgb(255, 0, 0);">',
                        'abc|',
                    '</span>',
                    'def',
                '</span>',
            '</div>',
        ].join(''),
        'Paste to different background-color');

    assert_selection(
        [
            '<div contenteditable>',
                '<span style="background-color: red">^abc|</span>',
                '<span id="dst" style="background-color: rgba(255, 0, 0, 0)">',
                    'def',
                '</span>',
            '</div>',
        ].join(''),
        selection => {
            selection.document.execCommand('copy');
            selection.collapse(selection.document.getElementById('dst'), 0);
            selection.document.execCommand('paste');
        },
        [
            '<div contenteditable>',
                '<span style="background-color: red">abc</span>',
                '<span id="dst" style="background-color: rgba(255, 0, 0, 0)">',
                    '<span style="background-color: rgb(255, 0, 0);">',
                        'abc|',
                    '</span>',
                    'def',
                '</span>',
            '</div>',
        ].join(''),
        'Paste to transparent background-color');
});
</script>