<!DOCTYPE html>
<html>
<head>
    <script src="../editing.js"></script>
    <script src="../../resources/dump-as-markup.js"></script>
    <script>
        Markup.waitUntilDone();
        Markup.description("This test verifies that we scroll to reveal the selection after pasting images in an editable area. To run the test manually, copy the selected images and paste into the red editable container above. The container should scroll to reveal the caret after the last image.");

        addEventListener("load", () => {
            editor = document.getElementById("editor");
            images = document.getElementById("images-to-copy");

            editor.addEventListener("scroll", () => {
                Markup.dump(editor, "Scrolled after pasting");
                Markup.notifyDone();
            }, { once: true });

            setSelectionCommand(images.firstChild, 0, images.lastChild, 1);

            if (!window.testRunner)
                return;

            execCopyCommand();
            editor.focus();
            execPasteCommand();
        });
    </script>
    <style>
        div#editor {
            width: 200px;
            height: 200px;
            overflow: scroll;
            border: 1px solid tomato;
        }
    </style>
</head>
<body>
    <div id="editor" contenteditable></div>
    <div id="images-to-copy">
        <div><img src="resources/mozilla.gif"></img></div>
        <div><img src="resources/apple.gif"></img></div>
        <div><img src="../resources/abe.png"></img></div>
    </div>
</body>
</html>