<!DOCTYPE html>
<html>
<head>
<script src="../../../../resources/js-test-pre.js"></script>
<script src="../../../../resources/ui-helper.js"></script>
<style>
input {
    width: 300px;
    font-size: 30px;
}
</style>
</head>
<body>

<input id="input" type="month" value="2020-10">

<script>

description("Test for mouse events for &lt;input type=month&gt;");

clickEventsFired = 0;
function onClickEvent() {
    clickEventsFired++;
}

function mouseClickOn(x, y) {
    if (!window.eventSender)
        return;
    eventSender.mouseMoveTo(x + input.offsetLeft, y + input.offsetTop);
    eventSender.mouseDown();
    eventSender.mouseUp();
}

input.addEventListener("click", onClickEvent);
const center = input.offsetHeight / 2;

debug("Enabled Input\n");

// Click on month field.
mouseClickOn(20, center);
UIHelper.keyDown("9");
shouldBeEqualToString("input.value", "2020-09");

// Click on year field.
mouseClickOn(60, center);
UIHelper.keyDown("1");
UIHelper.keyDown("2");
shouldBeEqualToString("input.value", "0012-09");

// Click on control, but not a specific field, defaults to first field.
mouseClickOn(250, center);
UIHelper.keyDown("5");
shouldBeEqualToString("input.value", "0012-05");

// Click outside control.
mouseClickOn(input.offsetWidth + 5, input.offsetHeight + 5);
UIHelper.keyDown("7");
shouldBeEqualToString("input.value", "0012-05");

shouldBe("clickEventsFired", "3");

debug("\nDisabled Input\n");
clickEventsFired = 0;
input.disabled = true;
input.readOnly = false;

// Click on month field.
mouseClickOn(20, center);
// Click on year field.
mouseClickOn(60, center);
// Click on control, but not a specific field, defaults to first field.
mouseClickOn(250, center);
// Click outside control.
mouseClickOn(input.offsetWidth + 5, input.offsetHeight + 5);

shouldBe("clickEventsFired", "0");

debug("\nReadonly Input\n");
clickEventsFired = 0;
input.disabled = false;
input.readOnly = true;

// Click on month field.
mouseClickOn(20, center);
// Click on year field.
mouseClickOn(60, center);
// Click on control, but not a specific field, defaults to first field.
mouseClickOn(250, center);
// Click outside control.
mouseClickOn(input.offsetWidth + 5, input.offsetHeight + 5);

shouldBe("clickEventsFired", "3");

</script>

<script src="../../../../resources/js-test-post.js"></script>
</body>
</html>