<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="../../../resources/js-test.js"></script>
<script src="../../../resources/ui-helper.js"></script>
</head>
<body>
<input inputmode="text">
<div id="countdown"></div>
<script>
jsTestIsAsync = true;

description('This tests updating inputmode of an input element from "none" to "text". The software keyboard should be updated.<br>'
    + 'To manually test, focus the input element below. The software keyboard should show up after 3 seconds');

const input = document.querySelector("input");
if (!window.testRunner) {
    input.addEventListener('focus', () => {
        let countdown = 3;
        const id = setInterval(() => {
            document.getElementById('countdown').textContent = countdown ? countdown : '';
            if (!countdown) {
                clearInterval(id);
                input.setAttribute('inputmode', 'decimal');
            }
            countdown--;
        }, 1000);
    });
}

async function runTest() {
    await UIHelper.setHardwareKeyboardAttached(false);

    debug('inputmode="text"');

    let didResize = () => { };
    window.visualViewport.addEventListener('resize', () => didResize());

    if (window.testRunner) {
        await UIHelper.activateFormControl(input);
        window.keyboardRect = await UIHelper.inputViewBounds();
        shouldBeTrue('textHeight = keyboardRect.height; keyboardRect.height > 0');
    } else {
        await new Promise((resolve) => { didResize = resolve; });
        shouldBeTrue('textHeight = document.documentElement.clientHeight - visualViewport.height; document.documentElement.clientHeight - visualViewport.height < 100');
    }

    if (window.testRunner)
        input.setAttribute('inputmode', 'decimal');

    await new Promise((resolve) => { didResize = resolve; });

    debug('');
    debug('inputmode="number"');

    if (window.testRunner) {
        window.keyboardRect = await UIHelper.inputViewBounds();
        shouldNotBe('keyboardRect.height', 'textHeight');
    } else
        shouldNotBe('document.documentElement.clientHeight - visualViewport.height', 'textHeight');

    finishJSTest();
}

window.onload = () => setTimeout(runTest, 0);

</script>
</body>
</html>