<!DOCTYPE html> <!-- webkit-test-runner [ domPasteAllowed=false useFlexibleViewport=true experimental:AsyncClipboardAPIEnabled=true ] -->
<html>
    <meta charset="utf8">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <script src="../../resources/js-test.js"></script>
        <script src="../../resources/ui-helper.js"></script>
        <script src="./resources/async-clipboard-helpers.js"></script>
        <style>
            button {
                display: block;
                margin: 40px 0;
            }

            iframe {
                width: 240px;
                height: 120px;
            }
        </style>
    </head>
    <script>
        jsTestIsAsync = true;
        finishedCopying = false;

        async function runTest() {
            description("This test verifies that navigator.clipboard.writeText sanitizes 'text/html'. To manually run the test, click the button in the subframe below to copy HTML, and then click the paste button.");

            const frame = document.querySelector("iframe");
            const button = document.querySelector("button");
            button.addEventListener("click", async () => {
                try {
                    items = await navigator.clipboard.read();
                    testPassed("Read items from the clipboard.");
                    shouldBe("items.length", "2");

                    shouldBe("items[0].types", "['text/html']");
                    fragment1 = await loadDocument(await items[0].getType("text/html"));
                    shouldBeEqualToString("fragment1.documentElement.textContent", "Hello world 1");
                    shouldBeNonNull("fragment1.querySelector('p')");
                    shouldBeNull("fragment1.querySelector('script')");
                    shouldBeNull("fragment1.querySelector('p').onclick");

                    shouldBe("items[1].types", "['text/html']");
                    fragment2 = await loadDocument(await items[1].getType("text/html"));
                    shouldBeEqualToString("fragment2.documentElement.textContent", "Hello world 2");
                    shouldBeNonNull("fragment2.querySelector('span')");
                    shouldBeNull("fragment2.querySelector('p')");
                } catch (exception) {
                    testFailed("Did not write to or read from the clipboard.");
                } finally {
                    button.remove();
                    frame.remove();
                    finishJSTest();
                }
            });

            addEventListener("message", event => {
                testPassed("Wrote markup to the clipboard.");
                finishedCopying = event.data === "finished-copying";
            });

            if (!window.testRunner)
                return;

            await UIHelper.activateElement(document.querySelector("iframe"));
            await new Promise(resolve => shouldBecomeEqual("finishedCopying", "true", resolve));
            await triggerProgrammaticPaste(button);
        }

        addEventListener("load", runTest);
    </script>
    <body>
        <iframe src="data:text/html,
            <button id='copy' style='font-size: 40px; text-align: center;'>Click to copy</button>
            <script>
                const markup1 = `<script>console.log('This script tag should be sanitized out.')</${'script'}><p onclick='javascript:void()'>Hello world 1</p>`;
                const markup2 = `<p style='display: none;'>You should not see this text.</p><span>Hello world 2</span>`;
                copy.addEventListener('click', async () => {
                    await navigator.clipboard.write([
                        new ClipboardItem({ 'text/html' : markup1 }),
                        new ClipboardItem({ 'text/html' : markup2 })
                    ]);
                    parent.postMessage('finished-copying', '*');
                });
            </script>"></iframe>
        <button>Click to paste</button>
        <p id="description"></p>
        <p id="console"></p>
    </body>
</html>