<!DOCTYPE html>
<html>
<head>
    <script src="../../../resources/ui-helper.js"></script>
    <meta name=viewport content="width=device-width">
    <style>
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #target0, #target1 {
            font-size: 40px;
            width: 100%;
        }
    </style>
</head>
<body>
    <input type='date' id='target0' autocomplete='cc-exp'>
    <br>
    <input type='date' id='target1'>
    <pre id="output"></pre>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        function appendOutput(s)
        {
            const paragraph = document.createElement("div");
            paragraph.innerHTML = s;
            output.appendChild(paragraph);
        }

        (async () => {
            if (!window.testRunner || !testRunner.runUIScript) {
                appendOutput(`This test checks if a gregorian calendar is presented when a date input control marked
                    as a credit card expiry date field (ie. through autocomplete='cc-exp') is tapped on Safari iOS. For
                    manual testing, tap the date field(s) and ensure the proper calendar types are presented.`);
                return;
            }

            for (const calendarType of ["japanese", "gregorian"]) {
                await UIHelper.setDefaultCalendarType(calendarType);
                for (const element of [target0, target1]) {
                    await UIHelper.activateFormControl(element);
                    const isCreditCardField = element.getAttribute("autocomplete") === "cc-exp";
                    appendOutput(`Date input control${isCreditCardField ? "" : " not"} marked as 'cc-exp' (default calendar set to ${calendarType}):`);
                    appendOutput(`{ calendarType = ${await UIHelper.calendarType()} }`);
                    await UIHelper.deactivateFormControl(element);
                }
            }

            testRunner.notifyDone();

        })()

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