<!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 "Web", 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"><b>hello <span id="host">world</span></b> rocks</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 shadowRoot = host.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<slot style="color: blue;"></slot> WebKit';

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, shadowRoot.lastChild, shadowRoot.lastChild.data.indexOf('Kit'));
    document.execCommand('copy');
    destination.focus();
    document.execCommand('paste');
}

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