<!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="time" id="time" value="23:15" step="2">
<script>

let t = async_test('Test select invalid 12PM value in time popup');

function selectValue() {
  let timeElement = document.getElementById("time");
  timeElement.addEventListener("change", t.step_func_done(() => {
    assert_equals(timeElement.value, "12:17:05");
    assert_true(timeElement.validity.stepMismatch);
    assert_false(timeElement.validity.valid);
  }));
  clickTimeCellAt(0, 1);
  clickTimeCellAt(1, 2);
  clickTimeCellAt(2, 5);
  eventSender.keyDown('Enter');
}

t.step(() => {
  openPicker(document.getElementById('time'), t.step_func(selectValue));
});
</script>
</body>
</html>