<!DOCTYPE html>
<html>
<body>
<button onclick="runTest()">1. Copy</button>
<div><br></div>
<div id="source" oncopy="copy(event)" contenteditable>
    <meta content="secret"><b onmouseover="dangerousCode()">hello</b><!-- secret-->, world
    <script>function dangerousCode() { }</script>
</div>
<div id="destination" onpaste="paste(event)" contenteditable>2. Paste here</div>
<script>

const originalHTML = document.getElementById('source').innerHTML;
function copy(event) {
    event.clipboardData.setData('text/html', originalHTML);
    event.preventDefault();
}

function paste(event) {
    parent.postMessage({
        originalHTML,
        html: event.clipboardData.getData('text/html'),
        types: event.clipboardData.types,
        items: Array.from(event.clipboardData.items).map((item) => ({kind: item.kind, type: item.type})),
    }, '*');
}

function runTest() {
    if (window.internals)
        internals.withUserGesture(() => { document.getElementById('source').focus(); });
    document.execCommand('selectAll');
    document.execCommand('copy');
    if (window.internals)
        internals.withUserGesture(() => { document.getElementById('destination').focus(); });
    if (window.testRunner)
        document.execCommand('paste');
}

if (window.testRunner)
    runTest();

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