<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/testdriver.js"></script>
<script src="../../../resources/testdriver-vendor.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="datetime-local" id="datetime-local" value="2019-02-14T13:02">
<script>
promise_test(() => {
let dateTimeElement = document.getElementById("datetime-local");
return openPicker(dateTimeElement)
.then(() => {
eventSender.keyDown('ArrowRight');
eventSender.keyDown('ArrowDown');
assert_equals(dateTimeElement.value, "2019-02-22T13:02", "Using arrow keys to navigate calendar part of control should update in-page control without pressing Enter key.");
// TODO crbug.com/1061145 Remove the focus() call and use the commented Tab
// navigations instead.
internals.pagePopupWindow.document.querySelectorAll(".time-column")[0].focus();
// eventSender.keyDown('Tab');
// eventSender.keyDown('Tab');
eventSender.keyDown('ArrowDown');
assert_equals(dateTimeElement.value, "2019-02-22T14:02", "Using arrow keys to navigate time part of control should update in-page control without pressing Enter key.");
eventSender.keyDown('Escape');
assert_equals(dateTimeElement.value, "2019-02-14T13:02", "Escape key should restore control to initial value.");
eventSender.keyDown('Escape');
assert_equals(internals.pagePopupWindow, null, "Second escape key should dismiss popup.");
});
}, "DateTime-local picker: Navigating with arrow keys should update in-page control without Enter key");
</script>
</body>
</html>