<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../resources/common.js"></script>
<script src="../resources/picker-common.js"></script>
<script src="../calendar-picker/resources/calendar-picker-common.js"></script>
</head>
<body>
<input type="month" id="month" value="2019-02" oninput="inputEventCount++;" onchange="changeEventCount++">
<script>
'use strict';

var inputEventCount = 0;
var changeEventCount = 0;

let monthElement = document.getElementById("month");

promise_test(() => {
    assert_equals(internals.pagePopupWindow, null);
    return openPickerWithPromise(monthElement).then(() => {
        assert_equals(monthElement.value, "2019-02");
        assert_not_equals(internals.pagePopupWindow, null);
        assert_equals(inputEventCount, 0, "No input event should have not have fired before making changes.");
        assert_equals(changeEventCount, 0, "No change event should have fired before popup is closed.");

        eventSender.keyDown('ArrowRight');
        eventSender.keyDown('ArrowDown');

        assert_equals(monthElement.value, "2019-07");
        assert_equals(inputEventCount, 2, "One input event should have fired for each modification.");
        assert_equals(changeEventCount, 0, "No change event should have fired before popup is closed.");

        eventSender.keyDown('Enter');

        assert_equals(internals.pagePopupWindow, null, "Popup should have closed from Enter key");
        assert_equals(inputEventCount, 2, 'No extra input event should fire when closing popup.');
        assert_equals(changeEventCount, 0, 'Change event is fired asynchronously after closing popup.');
        return new Promise((resolve) => {
            window.setTimeout(() => {
                assert_equals(changeEventCount, 1, 'Change event should have fired (once) asynchronously after closing popup.');
                resolve();
            }, 1);
        });
    });
}, "Month picker: Test input and change event firing when popup value is modified");

promise_test(() => {
    inputEventCount = changeEventCount = 0;
    assert_equals(internals.pagePopupWindow, null);
    return openPickerWithPromise(monthElement).then(() => {
        assert_equals(monthElement.value, "2019-07");
        assert_not_equals(internals.pagePopupWindow, null);
        assert_equals(inputEventCount, 0, "No input event should have not have fired before making changes.");
        assert_equals(changeEventCount, 0, "No change event should have fired before popup is closed.");

        eventSender.keyDown('ArrowRight');

        assert_equals(monthElement.value, "2019-08");
        assert_equals(inputEventCount, 1, "One input event should have fired for the modification.");
        assert_equals(changeEventCount, 0, "No change event should have fired before popup is closed.");

        eventSender.keyDown('Escape');

        assert_equals(monthElement.value, "2019-07");
        assert_not_equals(internals.pagePopupWindow, null, "Popup should not have closed from single escape");
        assert_equals(inputEventCount, 2, "One input event should have fired when restoring the initial value.");
        assert_equals(changeEventCount, 0, "No change event should have fired before popup is closed.");

        eventSender.keyDown('Escape');

        assert_equals(internals.pagePopupWindow, null, "Popup should have closed from Enter key");
        assert_equals(inputEventCount, 2, 'No extra input event should fire when closing popup.');
        return new Promise((resolve) => {
            window.setTimeout(() => {
                assert_equals(changeEventCount, 0, 'No change event should fire if popup was submitted with value still matching the original.');
                resolve();
            }, 1);
        });
    });
}, "Month picker: Test that change does not fire if popup value is modified and then restored to original value.");

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