<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../../../resources/js-test-pre.js"></script>
    <script src="../../../resources/ui-helper.js"></script>
</head>
<body>
    <div id="description">
        <p>The selectionchange event should only be fired once when clicking a node that is being edited.</p>
        <p>The selectionchange count in the editable node is: <span id="selectionChange">0</span></p>
        <p>The caret position in the editable node is: <span id="selectionStart">0</span></p>
    </div>
    <input id="input" style:"width: 100%"/>
</body>
<script>

if (window.testRunner) {
    testRunner.dumpAsText();
    jsTestIsAsync = true;

    const x = input.offsetLeft;
    const y = input.offsetTop + input.offsetHeight / 2;
    const string = "Thisisareallylongstringthatfillstheinputfield";
    input.value = string;

    UIHelper.activateAndWaitForInputSessionAt(x, y).then(() => {
        selectionChangeCount = 0;
        document.addEventListener("selectionchange", function(e) {
            selectionChangeCount += 1;
            selectionChange.textContent = selectionChangeCount;
            selectionStart.textContent = input.selectionStart;
        });

        UIHelper.activateElement(input).then(() => {
            shouldBeEqualToString("document.getElementById('selectionChange').textContent", `${selectionChangeCount}`);
            shouldBeEqualToString("document.getElementById('selectionStart').textContent", `${string.length}`);
            finishJSTest();
        });
    });
}
</script>
<script src="../../../resources/js-test-post.js"></script>
</html>