<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../../resources/ui-helper.js"></script>
</head>
<body>
    <div class="editor" contenteditable>Hello world</div>
    <pre>The selected text after clicking is: "<span class="output"></span>"</pre>
    <div>
        <button>Click here</button>
    </div>
    <p>This test verifies that clicking a button which hides itself on mousedown does not clear the selection. To test manually, select "Hello world" above and click the button. The <code>pre</code> element above should indicate that "Hello world" was selected after clicking.</p>
    <script>
    if (window.testRunner) {
        testRunner.waitUntilDone();
        testRunner.dumpAsText();
    }

    const editor = document.querySelector(".editor");
    const button = document.querySelector("button");
    const output = document.querySelector(".output");

    function checkDone() {
        doneCount = window.doneCount ? doneCount : 0;
        if (++doneCount == 2 && window.testRunner)
            testRunner.notifyDone();
    }

    getSelection().selectAllChildren(editor);
    button.addEventListener("mousedown", () => {
        button.style.display = "none";
        setTimeout(() => {
            output.textContent = getSelection().toString();
            checkDone();
        });
    });

    addEventListener("load", () => {
        if (window.testRunner)
            UIHelper.activateElement(button).then(checkDone);
    });
    </script>
</body>
</html>