<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
    <script src="../../resources/ui-helper.js"></script>
    <script src="../../resources/js-test.js"></script>
    <style>
        input {
            font-size: 20px;
        }

        input[type="password"] {
            display: none;
        }
    </style>
</head>
<body>
    <input type="text" value="Click me">
    <input type="password">
    <script>
        jsTestIsAsync = true;
        didFinishActivatingElement = false;
        textInput = document.querySelector("input[type='text']");
        passwordInput = document.querySelector("input[type='password']");

        textInput.addEventListener("focus", async () => {
            getComputedStyle(passwordInput).display; // This is necessary in order to reproduce the bug.
            passwordInput.style.display = "block";
            passwordInput.focus();

            shouldBe("document.activeElement", "passwordInput");
            passwordInput.remove();
            textInput.remove();

            await new Promise(resolve => shouldBecomeEqual("didFinishActivatingElement", "true", resolve));
            finishJSTest();
        });

        addEventListener("load", async () => {
            description("This test verifies that programmatically focusing a newly displayed input field changes the active element. To test manually, tap or click the input field below.");
            if (window.testRunner)
                await UIHelper.activateElement(textInput);
            didFinishActivatingElement = true;
        });
    </script>
</body>
</html>