date-keyoperation.html | Explore in Territory

<!DOCTYPE html>
<html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<title>Test for input type date arrow key operations.</title>
<body></body>
<script>
function testKeyOperations(writingMode) {
    if (!window.eventSender)
        return;
    let stepDownKey;
    let stepUpKey;
    let focusNextKey;
    let focusPrevKey;
    if (writingMode == "horizontal-tb") {
      stepDownKey = 'ArrowDown';
      stepUpKey = 'ArrowUp';
      focusNextKey = 'ArrowRight';
      focusPrevKey = 'ArrowLeft';
    } else if (writingMode == 'sideways-lr') {
      stepDownKey = 'ArrowRight';
      stepUpKey = 'ArrowLeft';
      focusNextKey = 'ArrowUp';
      focusPrevKey = 'ArrowDown';
    } else {
      stepDownKey = 'ArrowLeft';
      stepUpKey = 'ArrowRight';
      focusNextKey = 'ArrowDown';
      focusPrevKey = 'ArrowUp';
    }
    test(() => {
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.type = "date";
        input.style.writingMode = writingMode;
        input.value = "2023-07-22";
        input.min = "2023-07-22";
        input.max = "2023-07-24";
        input.focus();
        // Using step down goes to max value
        eventSender.keyDown(stepDownKey);
        assert_equals(input.value, "2023-07-24");
        eventSender.keyDown(stepDownKey);
        assert_equals(input.value, "2023-07-23");
        eventSender.keyDown(stepUpKey);
        assert_equals(input.value, "2023-07-24");
        document.body.removeChild(input);
    }, `input[type=date writing-mode=${writingMode}] key operations should respect max/min`);

    test(() => {
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.type = "date";
        input.style.writingMode = writingMode;
        input.value = "2023-07-22";
        input.focus();
        eventSender.keyDown(stepDownKey);
        eventSender.keyDown(focusNextKey);
        eventSender.keyDown(stepDownKey);
        eventSender.keyDown(focusNextKey);
        eventSender.keyDown(stepDownKey);
        assert_equals(input.value, "2022-06-21");
        eventSender.keyDown(stepUpKey);
        eventSender.keyDown(focusPrevKey);
        eventSender.keyDown(stepUpKey);
        eventSender.keyDown(focusPrevKey);
        eventSender.keyDown(stepUpKey);
        assert_equals(input.value, "2023-07-22");
        document.body.removeChild(input);
    }, `input[type=date writing-mode=${writingMode}] key operations should move between DD/MM/YYYY`);

    test(() => {
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.type = "week";
        input.style.writingMode = writingMode;
        input.value = "2023-W26";
        input.min = "2023-W25";
        input.max = "2023-W27";
        input.focus();
        eventSender.keyDown(stepDownKey);
        assert_equals(input.value, "2023-W25");
        // Using step down goes to max value
        eventSender.keyDown(stepDownKey);
        assert_equals(input.value, "2023-W27");
        eventSender.keyDown(stepUpKey);
        assert_equals(input.value, "2023-W25");
        document.body.removeChild(input);
    }, `input[type=week writing-mode=${writingMode}] key operations should respect max/min`);

    test(() => {
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.type = "week";
        input.style.writingMode = writingMode;
        input.value = "2023-W10";
        input.focus();
        eventSender.keyDown(stepDownKey);
        eventSender.keyDown(focusNextKey);
        eventSender.keyDown(stepDownKey);
        assert_equals(input.value, "2022-W09");
        eventSender.keyDown(stepUpKey);
        eventSender.keyDown(focusPrevKey);
        eventSender.keyDown(stepUpKey);
        assert_equals(input.value, "2023-W10");
        document.body.removeChild(input);
    }, `input[type=week writing-mode=${writingMode}] key operations should move between YYYY-WW`);

    test(() => {
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.type = "month";
        input.style.writingMode = writingMode;
        input.value = "2023-07";
        input.min = "2023-05";
        input.max = "2023-10";
        input.focus();
        eventSender.keyDown(stepDownKey);
        assert_equals(input.value, "2023-06");
        // Using step up cannot access year
        eventSender.keyDown(focusNextKey);
        eventSender.keyDown(stepUpKey);
        assert_equals(input.value, "2023-07");
        document.body.removeChild(input);
    }, `input[type=month writing-mode=${writingMode}] key operations should respect max/min`);

    test(() => {
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.type = "month";
        input.style.writingMode = writingMode;
        input.value = "2023-07";
        input.focus();
        eventSender.keyDown(stepDownKey);
        eventSender.keyDown(focusNextKey);
        eventSender.keyDown(stepDownKey);
        assert_equals(input.value, "2022-06");
        eventSender.keyDown(stepUpKey);
        eventSender.keyDown(focusPrevKey);
        eventSender.keyDown(stepUpKey);
        assert_equals(input.value, "2023-07");
        document.body.removeChild(input);
    }, `input[type=month writing-mode=${writingMode}] key operations should move between MM YYYY`);

    test(() => {
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.type = "time";
        input.style.writingMode = writingMode;
        input.value = "10:00";
        input.step = 60 * 5;
        input.focus();
        eventSender.keyDown(stepDownKey);
        assert_equals(input.value, "09:00");
        eventSender.keyDown(focusNextKey);
        eventSender.keyDown(stepDownKey);
        assert_equals(input.value, "09:55");
        eventSender.keyDown(stepUpKey);
        assert_equals(input.value, "09:00");
        eventSender.keyDown(focusNextKey);
        eventSender.keyDown(stepUpKey);
        assert_equals(input.value, "21:00");
        eventSender.keyDown(focusPrevKey);
        eventSender.keyDown(focusPrevKey);
        eventSender.keyDown(stepUpKey);
        assert_equals(input.value, "22:00");
        document.body.removeChild(input);
    }, `input[type=time writing-mode=${writingMode}] key operations should respect step and move between HH:MM`);

    test(() => {
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.type = "datetime-local";
        input.style.writingMode = writingMode;
        input.value = "2023-06-12T19:30";
        // Given min/max, we cannot modify month and year
        input.max = "2023-06-15T00:00";
        input.min = "2023-06-10T00:00";
        input.step = 60 * 30;
        input.focus();
        eventSender.keyDown(stepDownKey);
        assert_equals(input.value, "2023-06-11T19:30");
        eventSender.keyDown(focusNextKey);
        eventSender.keyDown(stepDownKey);
        assert_equals(input.value, "2023-06-11T18:30");
        eventSender.keyDown(focusNextKey);
        eventSender.keyDown(stepDownKey);
        assert_equals(input.value, "2023-06-11T18:00");
        eventSender.keyDown(focusNextKey);
        eventSender.keyDown(stepDownKey);
        assert_equals(input.value, "2023-06-11T06:00");

        eventSender.keyDown(stepUpKey);
        eventSender.keyDown(focusPrevKey);
        eventSender.keyDown(stepUpKey);
        eventSender.keyDown(focusPrevKey);
        eventSender.keyDown(stepUpKey);
        eventSender.keyDown(focusPrevKey);
        eventSender.keyDown(stepUpKey);
        assert_equals(input.value, "2023-06-12T19:30");
        // Cannot modify month and year so moving left will still modify day
        eventSender.keyDown(focusPrevKey);
        eventSender.keyDown(stepUpKey);
        assert_equals(input.value, "2023-06-13T19:30");
        document.body.removeChild(input);
    }, `input[type=datetime writing-mode=${writingMode}] key operations should respect max/min, step and move between YYYY-MM-DDTHH:MM`);
}

testKeyOperations('horizontal-tb');
testKeyOperations('vertical-lr');
testKeyOperations('vertical-rl');
testKeyOperations('sideways-lr');
testKeyOperations('sideways-rl');
</script>
</html>
chromium/third_party/blink/web_tests/fast/forms/date/date-keyoperation.html
