<!DOCTYPE html><!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<html>
<head>
<script src="../../../resources/ui-helper.js"></script>
<script src="../../../resources/js-test.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
body, html {
    margin: 0;
}

div[contenteditable] {
    border: 2px solid tomato;
    width: 300px;
    height: 300px;
    box-sizing: border-box;
    font-size: 32px;
    padding: 10px;
}

#console, #description {
    width: 300px;
    height: 100px;
    overflow: scroll;
}
</style>
<script>
jsTestIsAsync = true;

async function waitUntilMenuContainsCopyAction() {
    while (true) {
        if (await UIHelper.rectForMenuAction("Copy"))
            break;
        await UIHelper.delayFor(100);
    }
}

addEventListener("load", async () => {
    if (!window.testRunner)
        return;

    description("This test verifies that the callout bar is shown after selecting a word in an editable element using the callout bar. To test manually, focus the editable area and tap 'Select' in the callout bar; the callout bar should appear again, with an option to 'Copy'.");

    const editor = document.querySelector("div[contenteditable]");

    await UIHelper.activateElementAndWaitForInputSession(editor);
    await UIHelper.activateAt(250, 250);
    await UIHelper.waitForMenuToShow();
    testPassed("Showed menu by tapping");

    await UIHelper.chooseMenuAction("Select");
    await UIHelper.waitForSelectionToAppear();
    testPassed("Selected word using menu action");

    await waitUntilMenuContainsCopyAction();
    testPassed("Callout bar contains 'Copy' action");

    editor.remove();
    finishJSTest();
});
</script>
</head>
<body>
<div contenteditable>WebKit</div>
<div id="description"></div>
<div id="console"></div>
</body>
</html>