<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
<style>
#text {
    margin-top: 1000px; /* Position outside the viewport so that we would have to scroll to see this element. */
    width: 256px;
    height: 256px;
    background-color: red;
    color: white;
}
</style>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<div id="test-container">
    <p id="text">If you see this text then the test FAILed.</p>
    <input type="text" id="text-field" placeholder="placeholder">
</div>
<script>
function handleSelectionChange() {
    // Trigger a re-layout of the text field.
    document.getElementById("text-field").style.width = "20px";

    // Use a zero timer to allow for a scroll to happen, if it were to happen. (We do not expect a scroll to happen).
    window.setTimeout(() => {
        shouldBeZero("window.scrollY");
        if (window.testRunner)
            document.body.removeChild(document.getElementById("test-container"));
        finishJSTest();
    }, 0);
};

window.jsTestIsAsync = true;

description("Tests that the page is not scrolled to the current selection when an unfocused text field is laid out.");

document.addEventListener("selectionchange", handleSelectionChange, { once: true });
let text = document.getElementById("text");
window.getSelection().setBaseAndExtent(text.firstChild, 0, text.firstChild, 0);
</script>
</body>
</html>