<!DOCTYPE html>
<html>
<body>
<p id="description">This tests copying and pasting content across shadow boundaries.<br>
To test manually, copy text blow starting from "hello" ending with "WebKit", and paste into the green box below. All the text shoul be copied & pasted.</p>
<style> .box { border: solid 1px; padding: 0.2rem; margin-bottom: 1rem; } </style>
<div id="source" class="box" style="border-color: blue"><div style="font-style: italic" id="host1"><b>hello</b></div><div id="host2">rocks</div></div>
<div id="destination" class="box" style="border-color: blue" contenteditable></div>
<pre id="htmlResult"></pre>
<pre id="textResult"></pre>
<script src="../../resources/dump-as-markup.js"></script>
<script>

Markup.description(description.textContent);
Markup.waitUntilDone();

const shadowRoot1 = host1.attachShadow({mode: 'open'});
shadowRoot1.innerHTML = '<slot style="color: blue;"></slot> world';

const shadowRoot2 = host2.attachShadow({mode: 'open'});
shadowRoot2.innerHTML = '<u>WebKit <slot></slot></u>';

destination.addEventListener('paste', (event) => {
    htmlResult.textContent = event.clipboardData.getData('text/html');
    textResult.textContent = event.clipboardData.getData('text/plain');
    setTimeout(() => {
        Markup.dump(destination, 'pasted html');
        Markup.dump(textResult, 'text/plain');
        Markup.notifyDone();
    }, 0);
});

if (window.testRunner) {
    internals.setSelectionWithoutValidation(source, 0, shadowRoot2.querySelector('u'), 1);
    document.execCommand('copy');
    destination.focus();
    document.execCommand('paste');
}

</script>
</body>
</html>