Skip to content

Commit

Permalink
[macOS] Fix keyboard selection/editing of date/time inputs in vertica…
Browse files Browse the repository at this point in the history 
…l writing mode

https://bugs.webkit.org/show_bug.cgi?id=264466
rdar://118159670

Reviewed by Wenson Hsieh.

In vertical writing mode, vertical arrow keys should select the next/previous
editable date/time component, and horizontal arrow keys should increment and
decrement the value of the currently selected component.

Update existing keyboard selection/editing tests to include vertical writing
modes.

* LayoutTests/fast/forms/date/date-editable-components/date-editable-components-keyboard-events-expected.txt:
* LayoutTests/fast/forms/date/date-editable-components/date-editable-components-keyboard-events.html:
* LayoutTests/fast/forms/datetimelocal/datetimelocal-editable-components/datetimelocal-editable-components-keyboard-events-expected.txt:
* LayoutTests/fast/forms/datetimelocal/datetimelocal-editable-components/datetimelocal-editable-components-keyboard-events.html:
* LayoutTests/fast/forms/month/month-editable-components/month-editable-components-keyboard-events-expected.txt:
* LayoutTests/fast/forms/month/month-editable-components/month-editable-components-keyboard-events.html:
* LayoutTests/fast/forms/time/time-editable-components/time-editable-components-keyboard-events-expected.txt:
* LayoutTests/fast/forms/time/time-editable-components/time-editable-components-keyboard-events.html:
* Source/WebCore/html/shadow/DateTimeEditElement.cpp:
(WebCore::DateTimeEditElement::isFieldOwnerHorizontal const):
* Source/WebCore/html/shadow/DateTimeEditElement.h:
* Source/WebCore/html/shadow/DateTimeFieldElement.cpp:
(WebCore::DateTimeFieldElement::defaultKeyboardEventHandler):
(WebCore::DateTimeFieldElement::isFieldOwnerHorizontal const):
* Source/WebCore/html/shadow/DateTimeFieldElement.h:

Canonical link: https://commits.webkit.org/270480@main
  • Loading branch information
@pxlcoder
pxlcoder committed Nov 9, 2023
1 parent ee9e553 commit 5884708
Show file tree
Hide file tree
Showing 12 changed files with 454 additions and 8 deletions.
28 changes: 28 additions & 0 deletions ...forms/date/date-editable-components/date-editable-components-keyboard-events-expected.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,22 @@ PASS input.value is "0002-03-03"
PASS changeEventsFired is 3
PASS inputEventsFired is 3

Left/Right arrow keys (vertical-lr)
PASS input.value is "2020-01-20"
PASS input.value is "2020-02-20"
PASS input.value is "2020-01-20"
PASS input.value is "2020-12-20"
PASS changeEventsFired is 4
PASS inputEventsFired is 4

Left/Right arrow keys (vertical-rl)
PASS input.value is "2020-01-20"
PASS input.value is "2020-02-20"
PASS input.value is "2020-01-20"
PASS input.value is "2020-12-20"
PASS changeEventsFired is 4
PASS inputEventsFired is 4

Advance field keys
PASS input.value is "2020-06-03"
PASS input.value is "2020-06-04"
Expand All @@ -53,6 +69,18 @@ PASS input.value is "2020-12-20"
PASS changeEventsFired is 4
PASS inputEventsFired is 4

Up/Down arrow keys (vertical-lr)
PASS input.value is "0002-02-02"
PASS input.value is "0002-03-03"
PASS changeEventsFired is 3
PASS inputEventsFired is 3

Up/Down arrow keys (vertical-rl)
PASS input.value is "0002-02-02"
PASS input.value is "0002-03-03"
PASS changeEventsFired is 3
PASS inputEventsFired is 3

Tab key
PASS input.value is "0002-02-02"
PASS document.activeElement.id is "after"
Expand Down
57 changes: 56 additions & 1 deletion ...ts/fast/forms/date/date-editable-components/date-editable-components-keyboard-events.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,10 @@
inputEventsFired++;
}

function beginTest(title, value) {
function beginTest(title, value, style) {
debug("\n" + title);
input.value = value || "";
input.style = style || "";
input.blur();
input.focus();

Expand Down Expand Up @@ -130,6 +131,30 @@
shouldBe("changeEventsFired", "3");
shouldBe("inputEventsFired", "3");

beginTest("Left/Right arrow keys (vertical-lr)", "2020-12-20", "writing-mode: vertical-lr"); // [12]/20/2020
UIHelper.keyDown("rightArrow"); // [01]/20/2020
shouldBeEqualToString("input.value", "2020-01-20");
UIHelper.keyDown("rightArrow"); // [02]/20/2020
shouldBeEqualToString("input.value", "2020-02-20");
UIHelper.keyDown("leftArrow"); // [01]/20/2020
shouldBeEqualToString("input.value", "2020-01-20");
UIHelper.keyDown("leftArrow"); // [12]/20/2020
shouldBeEqualToString("input.value", "2020-12-20");
shouldBe("changeEventsFired", "4");
shouldBe("inputEventsFired", "4");

beginTest("Left/Right arrow keys (vertical-rl)", "2020-12-20", "writing-mode: vertical-rl"); // [12]/20/2020
UIHelper.keyDown("rightArrow"); // [01]/20/2020
shouldBeEqualToString("input.value", "2020-01-20");
UIHelper.keyDown("rightArrow"); // [02]/20/2020
shouldBeEqualToString("input.value", "2020-02-20");
UIHelper.keyDown("leftArrow"); // [01]/20/2020
shouldBeEqualToString("input.value", "2020-01-20");
UIHelper.keyDown("leftArrow"); // [12]/20/2020
shouldBeEqualToString("input.value", "2020-12-20");
shouldBe("changeEventsFired", "4");
shouldBe("inputEventsFired", "4");

beginTest("Advance field keys", "2020-06-05"); // [06]/05/2020
UIHelper.keyDown("/"); // -> 06/[05]/2020
UIHelper.keyDown("3"); // -> 06/[03]/2020
Expand Down Expand Up @@ -169,6 +194,36 @@
shouldBe("changeEventsFired", "4");
shouldBe("inputEventsFired", "4");

beginTest("Up/Down arrow keys (vertical-lr)", "", "writing-mode: vertical-lr"); // [mm]/dd/yyyy
UIHelper.keyDown("2"); // -> [02]/dd/yyyy
UIHelper.keyDown("downArrow"); // -> 02/[dd]/yyyy
UIHelper.keyDown("2"); // -> 02/[02]/yyyy
UIHelper.keyDown("downArrow"); // -> 02/02/[yyyy]
UIHelper.keyDown("2"); // -> 02/02/[0002]
shouldBeEqualToString("input.value", "0002-02-02");
UIHelper.keyDown("upArrow"); // -> 02/[02]/0002
UIHelper.keyDown("3"); // -> 02/[03]/0002
UIHelper.keyDown("upArrow"); // -> [02]/03/0002
UIHelper.keyDown("3"); // -> [03]/03/0002
shouldBeEqualToString("input.value", "0002-03-03");
shouldBe("changeEventsFired", "3");
shouldBe("inputEventsFired", "3");

beginTest("Up/Down arrow keys (vertical-rl)", "", "writing-mode: vertical-rl"); // [mm]/dd/yyyy
UIHelper.keyDown("2"); // -> [02]/dd/yyyy
UIHelper.keyDown("downArrow"); // -> 02/[dd]/yyyy
UIHelper.keyDown("2"); // -> 02/[02]/yyyy
UIHelper.keyDown("downArrow"); // -> 02/02/[yyyy]
UIHelper.keyDown("2"); // -> 02/02/[0002]
shouldBeEqualToString("input.value", "0002-02-02");
UIHelper.keyDown("upArrow"); // -> 02/[02]/0002
UIHelper.keyDown("3"); // -> 02/[03]/0002
UIHelper.keyDown("upArrow"); // -> [02]/03/0002
UIHelper.keyDown("3"); // -> [03]/03/0002
shouldBeEqualToString("input.value", "0002-03-03");
shouldBe("changeEventsFired", "3");
shouldBe("inputEventsFired", "3");

beginTest("Tab key");
UIHelper.keyDown("2"); // -> [02]/dd/yyyy
UIHelper.keyDown("\t"); // -> 02/[dd]/yyyy
Expand Down
42 changes: 42 additions & 0 deletions ...elocal-editable-components/datetimelocal-editable-components-keyboard-events-expected.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,36 @@ PASS input.value is "0003-03-03T03:03"
PASS changeEventsFired is 11
PASS inputEventsFired is 11

Left/Right arrow keys (vertical-lr)
PASS input.value is "2020-01-20T23:59"
PASS input.value is "2020-02-20T23:59"
PASS input.value is "2020-01-20T23:59"
PASS input.value is "2020-12-20T23:59"
PASS input.value is "2020-12-20T12:59"
PASS input.value is "2020-12-20T13:59"
PASS input.value is "2020-12-20T12:59"
PASS input.value is "2020-12-20T23:59"
PASS input.value is "2020-12-20T11:59"
PASS input.value is "2020-12-20T23:59"
PASS input.value is "2020-12-20T11:59"
PASS changeEventsFired is 11
PASS inputEventsFired is 11

Left/Right arrow keys (vertical-rl)
PASS input.value is "2020-01-20T23:59"
PASS input.value is "2020-02-20T23:59"
PASS input.value is "2020-01-20T23:59"
PASS input.value is "2020-12-20T23:59"
PASS input.value is "2020-12-20T12:59"
PASS input.value is "2020-12-20T13:59"
PASS input.value is "2020-12-20T12:59"
PASS input.value is "2020-12-20T23:59"
PASS input.value is "2020-12-20T11:59"
PASS input.value is "2020-12-20T23:59"
PASS input.value is "2020-12-20T11:59"
PASS changeEventsFired is 11
PASS inputEventsFired is 11

Advance field keys
PASS input.value is "2020-06-03T16:27"
PASS input.value is "2020-06-04T16:27"
Expand All @@ -62,6 +92,18 @@ PASS input.value is "2020-12-20T11:59"
PASS changeEventsFired is 11
PASS inputEventsFired is 11

Up/Down arrow keys (vertical-lr)
PASS input.value is "0002-02-02T02:02"
PASS input.value is "0003-03-03T03:03"
PASS changeEventsFired is 11
PASS inputEventsFired is 11

Up/Down arrow keys (vertical-rl)
PASS input.value is "0002-02-02T02:02"
PASS input.value is "0003-03-03T03:03"
PASS changeEventsFired is 11
PASS inputEventsFired is 11

Tab key
PASS input.value is "0002-02-02T02:02"
PASS document.activeElement.id is "after"
Expand Down
Loading

0 comments on commit 5884708

Please sign in to comment.