<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<html>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<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 calendarAndLocale of [["japanese", "en_US@calendar=japanese"], ["gregorian", "en_US"]]) {
                const [calendar, locale] = calendarAndLocale;
                await UIHelper.setDefaultCalendarType(calendar, locale);
                for (const element of [target0, target1]) {
                    await UIHelper.activateElementAndWaitForInputSession(element);
                    const isCreditCardField = element.getAttribute("autocomplete") === "cc-exp";
                    appendOutput(`Date input control${isCreditCardField ? "" : " not"} marked as 'cc-exp' (default calendar set to ${calendar}):`);
                    appendOutput(`{ calendarType = ${await UIHelper.calendarType()} }`);
                    element.blur();
                    await UIHelper.waitForInputSessionToDismiss(element);
                }
            }

            testRunner.notifyDone();

        })()

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