<!DOCTYPE html>
<html>
<body>
    <div id="source" contenteditable onbeforeinput=beforeInput(event)><span style="color:red"><b>LayoutTests<i>are<u>fun!</i></u></b></span></div>
    <div id="destinationHTML" contenteditable></div>
    <div id="destinationPlain" contenteditable></div>
    <script src="../../resources/dump-as-markup.js"></script>
    <script>
        Markup.description(`To manually test this, copy and paste into the first contenteditable. The following contenteditables should reflect the pasted contents.`);
        source.focus();
        document.execCommand("selectAll", false, null);

        if (window.testRunner) {
            testRunner.execCommand("Cut");
            testRunner.execCommand("Paste");
        }
        source.blur();

        Markup.dump("destinationHTML", "destination after pasting (text/html)");
        Markup.dump("destinationPlain", "destination after pasting (text/plain)");

        function beforeInput(event)
        {
            if (event.inputType !== "insertFromPaste")
                return;

            destinationHTML.innerHTML = event.dataTransfer.getData("text/html");
            destinationPlain.textContent = event.dataTransfer.getData("text/plain");
            event.preventDefault();
        }
    </script>
</body>
</html>