summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/html/interaction/focus/focusgroup/tentative')
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/descends-into-extending-focusgroup.html37
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-on-focusgroup-root.html30
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-on-non-focusgroup-item.html33
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-only-one-item-and-wraps.html29
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-only-one-item.html29
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-outside-focusgroup.html31
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-wrap-when-not-supported.html30
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/ascends-to-parent-focusgroup.html36
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/does-not-ascend-out-of-non-extending-focusgroup.html30
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/does-not-move-when-axis-not-supported.html27
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/does-not-wrap-in-orthogonal-axis.html28
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/moves-when-only-current-axis-supported.html28
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/skips-focusgroup-that-extends-in-orthogonal-axis-complex-case.html38
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/skips-focusgroup-that-extends-in-orthogonal-axis.html34
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/wraps-in-axis.html29
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/moves-to-previous-item-and-skips-focusable-item.html32
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/moves-to-previous-item.html31
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-empty-wrapping-focusgroup.html37
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-non-focusgroup-subtree.html35
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-root-focusgroup-complex-case.html41
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-root-focusgroup.html37
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/ascends-to-parent-focusgroup.html36
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/does-not-ascend-out-of-non-extending-focusgroup.html30
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/does-not-move-when-axis-not-supported.html27
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/does-not-wrap-in-orthogonal-axis.html28
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/moves-when-only-current-axis-supported.html28
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/skips-focusgroup-that-extends-in-orthogonal-axis-complex-case.html38
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/skips-focusgroup-that-extends-in-orthogonal-axis.html34
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/wraps-in-axis.html29
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/wraps-in-extending-focusgroup.html43
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/wraps-successfully-complex-case.html40
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/wraps-successfully.html32
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-on-focusgroup-root.html30
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-on-non-item.html33
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-only-one-item-and-wraps.html29
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-only-one-item.html29
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-outside-focusgroup.html31
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-wrap-in-focusgroup-with-no-items.html35
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-wrap-when-not-supported.html30
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/descends-in-horizontal-inner-focusgroup.html30
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/does-not-move-when-axis-not-supported.html27
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/does-not-wrap-even-when-other-axis-supported.html31
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/moves-when-only-current-axis-supported.html28
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/skips-focusgroup-that-extends-in-orthogonal-axis.html30
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/wraps-and-skips-orthogonal-inner-focusgroup.html32
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/wraps-in-appropriate-focusgroup.html35
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/wraps-in-inner-focusgroup.html33
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-inside-extending-focusgroup.html34
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item-and-skips-non-focusable.html32
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item-outside-extending-focusgroup.html34
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item-within-descendants.html37
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item.html31
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/descends-in-vertical-inner-focusgroup.html30
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/does-not-move-when-axis-not-supported.html27
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/does-not-wrap-even-when-other-axis-supported.html31
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/moves-when-only-current-axis-supported.html28
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/skips-focusgroup-that-extends-in-orthogonal-axis.html30
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/wraps-and-skips-orthogonal-inner-focusgroup.html32
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/wraps-in-appropriate-focusgroup.html35
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/wraps-in-inner-focusgroup.html33
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/wraps-and-goes-into-inner-focusgroup.html34
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/wraps-successfully.html31
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/wraps-to-parent-focusgroup.html34
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/col-flow-only.html58
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/col-wrap-and-row-flow.html60
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/col-wrap-only.html58
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/colspan.html93
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/css-table-not-focusgroup.html32
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/css-table.html44
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/does-not-wrap-or-flow.html56
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/empty-spaces.html144
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/flows-in-both-axes.html60
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/moves-across-table-sections.html97
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/non-table.html26
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/relayout-before-navigation.html39
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/row-flow-only.html58
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/row-wrap-and-col-flow.html60
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/row-wrap-only.html58
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/rowspan.html148
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/simple-case-with-non-focusable-cell-in-the-center.html65
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/simple-case.html60
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/wraps-in-both-axes.html60
-rw-r--r--testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/resources/focusgroup-utils.js15
83 files changed, 3314 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/descends-into-extending-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/descends-into-extending-focusgroup.html
new file mode 100644
index 0000000000..2590bc3250
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/descends-into-extending-focusgroup.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to previous item within extending focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap>
+ <span id=item1 tabindex=0>item1</span>
+ <div>
+ <div focusgroup=extend>
+ <span id=item2 tabindex=-1>item2</span>
+ <span id=item3 tabindex=-1>item3</span>
+ </div>
+ </div>
+ <span id=item4 tabindex=-1>item4</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item3 = document.getElementById("item3");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowUp);
+ assert_equals(document.activeElement, item3);
+
+ await focusAndKeyPress(item4, kArrowLeft);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on the last item of a focusgroup and the previous item is a descendant of a subtree, a backward arrow key press should move the focus to that previous item within the subtree.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-on-focusgroup-root.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-on-focusgroup-root.html
new file mode 100644
index 0000000000..3dd9cf2da5
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-on-focusgroup-root.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not move when initially set on the focusgroup root.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div id=root tabindex=-1 focusgroup>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var root = document.getElementById("root");
+
+ await focusAndKeyPress(root, kArrowUp);
+ assert_equals(document.activeElement, root);
+
+ await focusAndKeyPress(root, kArrowLeft);
+ assert_equals(document.activeElement, root);
+ }, "When the focus is set on the root of a focusgroup element, an arrow key press shouldn't move the focus at all.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-on-non-focusgroup-item.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-on-non-focusgroup-item.html
new file mode 100644
index 0000000000..0ec7827664
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-on-non-focusgroup-item.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not move when initially set a focusable element that isn't a focusgroup item.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+ <div>
+ <span id=nonitem1 tabindex=0>nonitem1</span>
+ </div>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var nonitem1 = document.getElementById("nonitem1");
+
+ await focusAndKeyPress(nonitem1, kArrowUp);
+ assert_equals(document.activeElement, nonitem1);
+
+ await focusAndKeyPress(nonitem1, kArrowLeft);
+ assert_equals(document.activeElement, nonitem1);
+ }, "When the focus is set on a focusable element that isn't a focusgroup item, an arrow key press shouldn't move the focus at all.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-only-one-item-and-wraps.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-only-one-item-and-wraps.html
new file mode 100644
index 0000000000..475acdc7f1
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-only-one-item-and-wraps.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not move when there is only one item, even though it wraps.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap>
+ <span id=item1 tabindex=0>item1</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+
+ await focusAndKeyPress(item1, kArrowUp);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item1, kArrowLeft);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the only focusgroup item and the focusgroup wraps in the axis of the arrow key pressed, the focus shouldn't move and we shouldn't get stuck in an infinite loop.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-only-one-item.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-only-one-item.html
new file mode 100644
index 0000000000..f046769459
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-only-one-item.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not move when there is only one item.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup>
+ <span id=item1 tabindex=0>item1</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+
+ await focusAndKeyPress(item1, kArrowUp);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item1, kArrowLeft);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the only focusgroup item, the focus shouldn't move and we shouldn't get stuck in an infinite loop.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-outside-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-outside-focusgroup.html
new file mode 100644
index 0000000000..78ee0dadeb
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-move-when-outside-focusgroup.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not move when initially set on an element not included in the focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+<span id=out tabindex=-1>out</span>
+
+<script>
+
+ promise_test(async t => {
+ var out = document.getElementById("out");
+
+ await focusAndKeyPress(out, kArrowUp);
+ assert_equals(document.activeElement, out);
+
+ await focusAndKeyPress(out, kArrowLeft);
+ assert_equals(document.activeElement, out);
+ }, "When the focus is set on an element outside of the focusgroup, an arrow keypress shouldn't move the focus at all.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-wrap-when-not-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-wrap-when-not-supported.html
new file mode 100644
index 0000000000..742daedfef
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/does-not-wrap-when-not-supported.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not wrap when 'wrap' not specified.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+
+ await focusAndKeyPress(item1, kArrowUp);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item1, kArrowLeft);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the first item of a focusgroup, a backward arrow key press shouldn't move the focus since there aren't any previous item.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/ascends-to-parent-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/ascends-to-parent-focusgroup.html
new file mode 100644
index 0000000000..00ef3db90c
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/ascends-to-parent-focusgroup.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus ascends to parent focusgroup successfully.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=horizontal>
+ <span id=item1 tabindex=0>item1</span>
+ <div id=item2 tabindex=-1>
+ <div>
+ <div focusgroup="extend vertical">
+ <span id=item3 tabindex=-1>item3</span>
+ <span id=item4 tabindex=-1>item4</span>
+ </div>
+ </div>
+ </div>
+ <span id=item5 tabindex=-1>item5</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item2 = document.getElementById("item2");
+ var item3 = document.getElementById("item3");
+
+ await focusAndKeyPress(item3, kArrowLeft);
+ assert_equals(document.activeElement, item2);
+ }, "When the focus is set on the first item of an extending focusgroup that doesn't support the axis of the arrow key pressed but the parent focusgroup does, ascend to that focusgroup. This should work whether the extending focusgroup is the child of the other focusgroup or a distant descendant.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/does-not-ascend-out-of-non-extending-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/does-not-ascend-out-of-non-extending-focusgroup.html
new file mode 100644
index 0000000000..b00958719d
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/does-not-ascend-out-of-non-extending-focusgroup.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not ascend out of current focusgroup if it does not extend the parent focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<ul focusgroup=horizontal>
+ <li id=item1 tabindex="-1">
+ <ul focusgroup=vertical>
+ <li id=item2 tabindex="-1">item2</li>
+ </ul>
+ </li>
+</ul>
+
+<script>
+
+ promise_test(async t => {
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(item2, kArrowLeft);
+ assert_equals(document.activeElement, item2);
+ }, "When the focus is set on the first element of a non-extending focusgroup located inside another focusgroup, we should be able to ascend to that other focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/does-not-move-when-axis-not-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/does-not-move-when-axis-not-supported.html
new file mode 100644
index 0000000000..e671a25844
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/does-not-move-when-axis-not-supported.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not move to previous focusgroup item when the axis of the arrow key pressed isn't supported.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup=vertical>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(item2, kArrowLeft);
+ assert_equals(document.activeElement, item2);
+ }, "When the focus is set on the last element of a focusgroup that only supports the orthogonal axis of the arrow key pressed, the focus shouldn't move.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/does-not-wrap-in-orthogonal-axis.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/does-not-wrap-in-orthogonal-axis.html
new file mode 100644
index 0000000000..de09fa813c
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/does-not-wrap-in-orthogonal-axis.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not wrap in the arrow key pressed orthogonal axis.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div focusgroup="vertical wrap">
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+ <span id=item3 tabindex=-1>item3</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+
+ await focusAndKeyPress(item1, kArrowLeft);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the first item of a focusgroup that wraps and supports only the orthogonal axis of the pressed arrow key, a backward arrow key press shouldn't move the focus.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/moves-when-only-current-axis-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/moves-when-only-current-axis-supported.html
new file mode 100644
index 0000000000..12f7934866
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/moves-when-only-current-axis-supported.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to previous focusgroup item when only the axis of the arrow key pressed is supported.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup=horizontal>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(item2, kArrowLeft);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on an item of a focusgroup that only supports the axis of the arrow key pressed the focus should move.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/skips-focusgroup-that-extends-in-orthogonal-axis-complex-case.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/skips-focusgroup-that-extends-in-orthogonal-axis-complex-case.html
new file mode 100644
index 0000000000..2fadddac27
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/skips-focusgroup-that-extends-in-orthogonal-axis-complex-case.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to previous item, skipping the focusgroup that extends in the orthogonal axis (complex case).</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap>
+ <span id=item1 tabindex=0>item1</span>
+ <div>
+ <div focusgroup="extend vertical">
+ <div id=item2 tabindex=-1>
+ <div focusgroup=extend>
+ <span id=item3 tabindex=-1>item3</span>
+ <span id=item4 tabindex=-1>item4</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <span id=item5 tabindex=-1>item5</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item5 = document.getElementById("item5");
+
+ await focusAndKeyPress(item5, kArrowLeft);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the last item of a focusgroup and the previous item is located past an extending focusgroup that only supports the orthogonal axis, a backward arrow key press should move the focus to that previous item without getting stuck in the inner focusgroup that doesn't support the axis. The same should still be true when inside a focusgroup that extends another extending focusgroup that supports only the orthogonal axis within the original focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/skips-focusgroup-that-extends-in-orthogonal-axis.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/skips-focusgroup-that-extends-in-orthogonal-axis.html
new file mode 100644
index 0000000000..44dace8461
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/skips-focusgroup-that-extends-in-orthogonal-axis.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to previous item, skipping the focusgroup that extends in the orthogonal axis.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap>
+ <span id=item1 tabindex=0>item1</span>
+ <div>
+ <div focusgroup="extending vertical">
+ <span id=item2 tabindex=-1>item2</span>
+ <span id=item3 tabindex=-1>item3</span>
+ </div>
+ </div>
+ <span id=item4 tabindex=-1>item4</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowLeft);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the last item of a focusgroup and the previous item is a descendant of a subtree, a backward arrow key press should move the focus to that previous item within the subtree. However, if that subtree is an extending focusgroup that supports only the orthogonal axis, it should be skipped.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/wraps-in-axis.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/wraps-in-axis.html
new file mode 100644
index 0000000000..956d3f6406
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal/wraps-in-axis.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus wraps in the arrow key pressed axis.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div focusgroup="horizontal wrap">
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+ <span id=item3 tabindex=-1>item3</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item3 = document.getElementById("item3");
+
+ await focusAndKeyPress(item1, kArrowLeft);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on the first item of a focusgroup that wraps and supports only the axis of the pressed arrow key, a backward arrow key press should move the focus to the last item within the focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/moves-to-previous-item-and-skips-focusable-item.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/moves-to-previous-item-and-skips-focusable-item.html
new file mode 100644
index 0000000000..9bab38a24d
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/moves-to-previous-item-and-skips-focusable-item.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to previous item and skips non-focusable elements.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2>item2</span> <!--NOT FOCUSABLE-->
+ <span id=item3 tabindex=-1>item3</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item3 = document.getElementById("item3");
+
+ await focusAndKeyPress(item3, kArrowUp);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item3, kArrowLeft);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on a focusgroup item, an arrow key press should move the focus to the previous item and skip non-focusable items.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/moves-to-previous-item.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/moves-to-previous-item.html
new file mode 100644
index 0000000000..228a4aad63
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/moves-to-previous-item.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to previous focusgroup item.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(item2, kArrowUp);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item2, kArrowLeft);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on a focusgroup item, an arrow key press should move the focus to the previous item.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-empty-wrapping-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-empty-wrapping-focusgroup.html
new file mode 100644
index 0000000000..fb0b66e30e
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-empty-wrapping-focusgroup.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to previous item, skipping over an empty extending focusgroup that wraps on itself.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap>
+ <span id=item1 tabindex=0>item1</span>
+ <div>
+ <div focusgroup="extend wrap">
+ <span id=item2>item2</span> <!-- Not focusable -->
+ <span id=item3>item3</span> <!-- Not focusable -->
+ </div>
+ </div>
+ <span id=item4 tabindex=-1>item4</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowUp);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item4, kArrowLeft);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the last item of a focusgroup and the previous item is located past an extending focusgroup that wraps but has no item in it, a backward arrow key press should move the focus to that previous item without getting stuck in the inner focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-non-focusgroup-subtree.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-non-focusgroup-subtree.html
new file mode 100644
index 0000000000..140950202b
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-non-focusgroup-subtree.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to previous item, skipping over a subtree that isn't an extending focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap>
+ <span id=item1 tabindex=0>item1</span>
+ <div>
+ <span id=item2 tabindex=-1>item2</span>
+ <span id=item3 tabindex=-1>item3</span>
+ </div>
+ <span id=item4 tabindex=-1>item4</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowUp);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item4, kArrowLeft);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the last item of a focusgroup and the previous item is located past a non-focusgroup subtree, a backward arrow key press should move the focus to that previous item without getting stuck in the subtree.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-root-focusgroup-complex-case.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-root-focusgroup-complex-case.html
new file mode 100644
index 0000000000..79731e7b2a
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-root-focusgroup-complex-case.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to previous item and skips focusgroup root subtree (complex case).</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap>
+ <span id=item1 tabindex=0>item1</span>
+ <div>
+ <div focusgroup>
+ <div id=item2 tabindex=-1>
+ <div focusgroup=extend>
+ <span id=item3 tabindex=-1>item3</span>
+ <span id=item4 tabindex=-1>item4</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <span id=item5 tabindex=-1>item5</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item5 = document.getElementById("item5");
+
+ await focusAndKeyPress(item5, kArrowUp);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item5, kArrowLeft);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the last item of a focusgroup and the previous item is located past an other (non-extending) focusgroup subtree, a backward arrow key press should move the focus to that previous item without getting stuck in the other focusgroup. The same should still be true when inside a focusgroup that extends a root focusgroup within the original focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-root-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-root-focusgroup.html
new file mode 100644
index 0000000000..c40ce02b5d
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/skips-root-focusgroup.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to previous item, skipping over a subtree that is a root focusgroup (unrelated to the one we're in).</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap>
+ <span id=item1 tabindex=0>item1</span>
+ <div>
+ <div focusgroup>
+ <span id=item2 tabindex=-1>item2</span>
+ <span id=item3 tabindex=-1>item3</span>
+ </div>
+ </div>
+ <span id=item4 tabindex=-1>item4</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowUp);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item4, kArrowLeft);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the last item of a focusgroup and the previous item is located past an other (non-extending) focusgroup subtree, a backward arrow key press should move the focus to that previous item without getting stuck in the other focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/ascends-to-parent-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/ascends-to-parent-focusgroup.html
new file mode 100644
index 0000000000..b95f2c527b
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/ascends-to-parent-focusgroup.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus ascends to parent focusgroup successfully.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=vertical>
+ <span id=item1 tabindex=0>item1</span>
+ <div id=item2 tabindex=-1>
+ <div>
+ <div focusgroup="extend horizontal">
+ <span id=item3 tabindex=-1>item3</span>
+ <span id=item4 tabindex=-1>item4</span>
+ </div>
+ </div>
+ </div>
+ <span id=item5 tabindex=-1>item5</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item2 = document.getElementById("item2");
+ var item3 = document.getElementById("item3");
+
+ await focusAndKeyPress(item3, kArrowUp);
+ assert_equals(document.activeElement, item2);
+ }, "When the focus is set on the first item of an extending focusgroup that doesn't support the axis of the arrow key pressed but the parent focusgroup does, ascend to that focusgroup. This should work whether the extending focusgroup is the child of the other focusgroup or a distant descendant.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/does-not-ascend-out-of-non-extending-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/does-not-ascend-out-of-non-extending-focusgroup.html
new file mode 100644
index 0000000000..08dc466603
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/does-not-ascend-out-of-non-extending-focusgroup.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not ascend out of current focusgroup if it does not extend the parent focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<ul focusgroup=vertical>
+ <li id=item1 tabindex="-1">
+ <ul focusgroup=horizontal>
+ <li id=item2 tabindex="-1">item2</li>
+ </ul>
+ </li>
+</ul>
+
+<script>
+
+ promise_test(async t => {
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(item2, kArrowUp);
+ assert_equals(document.activeElement, item2);
+ }, "When the focus is set on the first element of a non-extending focusgroup located inside another focusgroup, we should be able to ascend to that other focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/does-not-move-when-axis-not-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/does-not-move-when-axis-not-supported.html
new file mode 100644
index 0000000000..0cf6ad3be2
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/does-not-move-when-axis-not-supported.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not move to previous focusgroup item when the axis of the arrow key pressed isn't supported.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup=horizontal>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(item2, kArrowUp);
+ assert_equals(document.activeElement, item2);
+ }, "When the focus is set on the last element of a focusgroup that only supports the orthogonal axis of the arrow key pressed, the focus shouldn't move.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/does-not-wrap-in-orthogonal-axis.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/does-not-wrap-in-orthogonal-axis.html
new file mode 100644
index 0000000000..0ec4f02247
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/does-not-wrap-in-orthogonal-axis.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not wrap in the arrow key pressed orthogonal axis.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div focusgroup="horizontal wrap">
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+ <span id=item3 tabindex=-1>item3</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+
+ await focusAndKeyPress(item1, kArrowUp);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the first item of a focusgroup that wraps and supports only the orthogonal axis of the pressed arrow key, a backward arrow key press shouldn't move the focus.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/moves-when-only-current-axis-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/moves-when-only-current-axis-supported.html
new file mode 100644
index 0000000000..ad46be76b2
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/moves-when-only-current-axis-supported.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to previous focusgroup item when only the axis of the arrow key pressed is supported.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup=vertical>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(item2, kArrowUp);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on an item of a focusgroup that only supports the axis of the arrow key pressed the focus should move.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/skips-focusgroup-that-extends-in-orthogonal-axis-complex-case.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/skips-focusgroup-that-extends-in-orthogonal-axis-complex-case.html
new file mode 100644
index 0000000000..86ea79122c
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/skips-focusgroup-that-extends-in-orthogonal-axis-complex-case.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to previous item, skipping the focusgroup that extends in the orthogonal axis (complex case).</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap>
+ <span id=item1 tabindex=0>item1</span>
+ <div>
+ <div focusgroup="extend horizontal">
+ <div id=item2 tabindex=-1>
+ <div focusgroup=extend>
+ <span id=item3 tabindex=-1>item3</span>
+ <span id=item4 tabindex=-1>item4</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <span id=item5 tabindex=-1>item5</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item5 = document.getElementById("item5");
+
+ await focusAndKeyPress(item5, kArrowUp);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the last item of a focusgroup and the previous item is located past an extending focusgroup that only supports the orthogonal axis, a backward arrow key press should move the focus to that previous item without getting stuck in the inner focusgroup that doesn't support the axis. The same should still be true when inside a focusgroup that extends another extending focusgroup that supports only the orthogonal axis within the original focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/skips-focusgroup-that-extends-in-orthogonal-axis.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/skips-focusgroup-that-extends-in-orthogonal-axis.html
new file mode 100644
index 0000000000..960b8604b0
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/skips-focusgroup-that-extends-in-orthogonal-axis.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to previous item, skipping the focusgroup that extends in the orthogonal axis.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap>
+ <span id=item1 tabindex=0>item1</span>
+ <div>
+ <div focusgroup="extending horizontal">
+ <span id=item2 tabindex=-1>item2</span>
+ <span id=item3 tabindex=-1>item3</span>
+ </div>
+ </div>
+ <span id=item4 tabindex=-1>item4</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowUp);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the last item of a focusgroup and the previous item is a descendant of a subtree, a backward arrow key press should move the focus to that previous item within the subtree. However, if that subtree is an extending focusgroup that supports only the orthogonal axis, it should be skipped.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/wraps-in-axis.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/wraps-in-axis.html
new file mode 100644
index 0000000000..fdccee9742
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/vertical/wraps-in-axis.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus wraps in the arrow key pressed axis.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div focusgroup="vertical wrap">
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+ <span id=item3 tabindex=-1>item3</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item3 = document.getElementById("item3");
+
+ await focusAndKeyPress(item1, kArrowUp);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on the first item of a focusgroup that wraps and supports only the axis of the pressed arrow key, a backward arrow key press should move the focus to the last item within the focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/wraps-in-extending-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/wraps-in-extending-focusgroup.html
new file mode 100644
index 0000000000..6727d93f75
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/wraps-in-extending-focusgroup.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus wraps from first to last element when 'wrap' is specified (jumping into extending focusgroup).</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap>
+ <div focusgroup=extend>
+ <span id=item1 tabindex=0>item1</span>
+ <div focusgroup=extend>
+ <span id=item2 tabindex=-1>item2</span>
+ <span id=item3 tabindex=-1>item3</span>
+ </div>
+ </div>
+ <span id=item4 tabindex=-1>item4</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item3 = document.getElementById("item3");
+
+ await focusAndKeyPress(item1, kArrowUp);
+ assert_equals(document.activeElement, item4);
+
+ await focusAndKeyPress(item2, kArrowUp);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item1, kArrowLeft);
+ assert_equals(document.activeElement, item4);
+
+ await focusAndKeyPress(item2, kArrowLeft);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the first item of an extending focusgroup that inherited its wrapping behavior, it should only wrap if the focused item is also the first item of that parent focusgroup. If it is, then it should wrap within the parent focusgroup, not within the extending focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/wraps-successfully-complex-case.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/wraps-successfully-complex-case.html
new file mode 100644
index 0000000000..11ebea349d
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/wraps-successfully-complex-case.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus wraps from first to last focusgroup item, even though there are non items in the way.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap>
+ <div>
+ <span id=nonitem1>nonitem1</span>
+ <span id=nonitem2>nonitem2</span>
+ </div>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+ <span id=item3 tabindex=-1>item3</span>
+ <div>
+ <span id=nonitem3>nonitem3</span>
+ <span id=nonitem4>nonitem4</span>
+ </div>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item3 = document.getElementById("item3");
+
+ await focusAndKeyPress(item1, kArrowUp);
+ assert_equals(document.activeElement, item3);
+
+ await focusAndKeyPress(item1, kArrowUp);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on the first item of an extending focusgroup while there are other non-item elements before, we should still be able to wrap to the last item. Also, if the last item has other non-item elements after itself, skipping these non-item elements shouldn't be an issue.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/wraps-successfully.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/wraps-successfully.html
new file mode 100644
index 0000000000..19df794e19
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/wraps-successfully.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus wraps from first to last element when 'wrap' is specified.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+ <span id=item3 tabindex=-1>item3</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item3 = document.getElementById("item3");
+
+ await focusAndKeyPress(item1, kArrowUp);
+ assert_equals(document.activeElement, item3);
+
+ await focusAndKeyPress(item1, kArrowLeft);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on the first item of a focusgroup that wraps, a backward arrow key press should move the focus to the last item within the focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-on-focusgroup-root.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-on-focusgroup-root.html
new file mode 100644
index 0000000000..30c70ad3b3
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-on-focusgroup-root.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not move when initially set on the focusgroup root.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div id=root tabindex=-1 focusgroup>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var root = document.getElementById("root");
+
+ await focusAndKeyPress(root, kArrowDown);
+ assert_equals(document.activeElement, root);
+
+ await focusAndKeyPress(root, kArrowRight);
+ assert_equals(document.activeElement, root);
+ }, "When the focus is set on the root of a focusgroup element, an arrow key press shouldn't move the focus at all.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-on-non-item.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-on-non-item.html
new file mode 100644
index 0000000000..3afcd184c1
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-on-non-item.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not move when initially set a focusable element that isn't a focusgroup item.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div tabindex=-1 focusgroup>
+ <div>
+ <span id=nonitem1 tabindex=0>nonitem1</span>
+ </div>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var nonitem1 = document.getElementById("nonitem1");
+
+ await focusAndKeyPress(nonitem1, kArrowDown);
+ assert_equals(document.activeElement, nonitem1);
+
+ await focusAndKeyPress(nonitem1, kArrowRight);
+ assert_equals(document.activeElement, nonitem1);
+ }, "When the focus is set on a focusable element that isn't a focusgroup item, an arrow key press shouldn't move the focus at all.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-only-one-item-and-wraps.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-only-one-item-and-wraps.html
new file mode 100644
index 0000000000..20cc5eb57d
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-only-one-item-and-wraps.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not move when there is only one item, even though it wraps.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap>
+ <span id=item1 tabindex=0>item1</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+
+ await focusAndKeyPress(item1, kArrowDown);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item1, kArrowRight);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the only focusgroup item and the focusgroup wraps in the axis of the arrow key pressed, the focus shouldn't move and we shouldn't get stuck in an infinite loop.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-only-one-item.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-only-one-item.html
new file mode 100644
index 0000000000..0178494d87
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-only-one-item.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not move when there is only one item.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup>
+ <span id=item1 tabindex=0>item1</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+
+ await focusAndKeyPress(item1, kArrowDown);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item1, kArrowRight);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the only focusgroup item, the focus shouldn't move and we shouldn't get stuck in an infinite loop.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-outside-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-outside-focusgroup.html
new file mode 100644
index 0000000000..1c35805f80
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-outside-focusgroup.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not move when initially set on an element not included in the focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<span id=out tabindex=-1>out</span>
+<div focusgroup>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var out = document.getElementById("out");
+
+ await focusAndKeyPress(out, kArrowDown);
+ assert_equals(document.activeElement, out);
+
+ await focusAndKeyPress(out, kArrowRight);
+ assert_equals(document.activeElement, out);
+ }, "When the focus is set on an element outside of the focusgroup, an arrow keypress shouldn't move the focus at all.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-wrap-in-focusgroup-with-no-items.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-wrap-in-focusgroup-with-no-items.html
new file mode 100644
index 0000000000..602feed001
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-wrap-in-focusgroup-with-no-items.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not wrap in wrapping extending focusgroup that doesn't have focusgroup items.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup>
+ <span id=item1 tabindex=0>item1</span>
+ <div focusgroup="extend wrap">
+ <span id=item2>item2</span> <!--NOT FOCUSABLE-->
+ <span id=item3>item3</span> <!--NOT FOCUSABLE-->
+ </div>
+ <span id=item4 tabindex=-1>item4</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item1, kArrowDown);
+ assert_equals(document.activeElement, item4);
+
+ await focusAndKeyPress(item1, kArrowRight);
+ assert_equals(document.activeElement, item4);
+ }, "This test validates that we don't get stuck in an infinite loop searching for a focusable element in the extending focusgroup that wraps that doesn't contain one. Wrapping should only be allowed in the focusgroup that contains the focusable element we started on or in one of its ancestors.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-wrap-when-not-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-wrap-when-not-supported.html
new file mode 100644
index 0000000000..550a4ba8a1
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-wrap-when-not-supported.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not wrap when not supported.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(item2, kArrowDown);
+ assert_equals(document.activeElement, item2);
+
+ await focusAndKeyPress(item2, kArrowRight);
+ assert_equals(document.activeElement, item2);
+ }, "When the focus is set on the last item of a focusgroup that doesn't support wrapping in the axis of the arrow key pressed, the focus shouldn't move.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/descends-in-horizontal-inner-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/descends-in-horizontal-inner-focusgroup.html
new file mode 100644
index 0000000000..3d0d7f0fa5
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/descends-in-horizontal-inner-focusgroup.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus descends from vertical focusgroup into horizontal focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=fg1 focusgroup=vertical>
+ <span id=item1 tabindex=0>item1</span>
+ <div id=fg2 tabindex=-1 focusgroup="extend horizontal">
+ <span id=item2 tabindex=-1>item2</span>
+ </div>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var fg2 = document.getElementById("fg2");
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(fg2, kArrowRight);
+ assert_equals(document.activeElement, item2);
+ }, "When the focus is set on the root of an extending focusgroup that supports an orthogonal axis to the outer focusgroup, an arrow key press aligned with the inner focusgroup axis should move the focus within that inner focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/does-not-move-when-axis-not-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/does-not-move-when-axis-not-supported.html
new file mode 100644
index 0000000000..ebf7238c54
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/does-not-move-when-axis-not-supported.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not move to next focusgroup item when the axis of the arrow key pressed isn't supported.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup=vertical>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+
+ await focusAndKeyPress(item1, kArrowRight);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on an item of a focusgroup that only supports the orthogonal axis to the arrow key pressed, the arrow pressed shouldn't move the focus.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/does-not-wrap-even-when-other-axis-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/does-not-wrap-even-when-other-axis-supported.html
new file mode 100644
index 0000000000..19535e1df9
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/does-not-wrap-even-when-other-axis-supported.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Does not wrap when the arrow keypress is supported but the focusgroup only wraps in the other axis.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup="vertical wrap">
+ <span id=item1 tabindex=0>item1</span>
+ <div id=item2 tabindex=-1 focusgroup=extend>
+ <!--This focusgroup supports both axes, but only wraps in the vertical one.-->
+ <span id=item3 tabindex=-1>item3</span>
+ <span id=item4 tabindex=-1>item4</span>
+ </div>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowRight);
+ assert_equals(document.activeElement, item4);
+ }, "When the focus is set on the last item of a focusgroup that doesn't support wrapping in the axis of the arrow key pressed but supports wrapping in the orthogonal axis, the focus shouldn't move.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/moves-when-only-current-axis-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/moves-when-only-current-axis-supported.html
new file mode 100644
index 0000000000..9ae9892c1d
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/moves-when-only-current-axis-supported.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to next focusgroup item when only the axis of the arrow key pressed is supported.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup=horizontal>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(item1, kArrowRight);
+ assert_equals(document.activeElement, item2);
+ }, "When the focus is set on an item of a focusgroup that only supports the axis of the arrow key pressed the focus should move.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/skips-focusgroup-that-extends-in-orthogonal-axis.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/skips-focusgroup-that-extends-in-orthogonal-axis.html
new file mode 100644
index 0000000000..05f8268895
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/skips-focusgroup-that-extends-in-orthogonal-axis.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to next item, skipping the focusgroup that extends in the orthogonal axis.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup>
+ <div id=item1 tabindex=0 focusgroup="extend vertical">
+ <span id=item2 tabindex=-1>item2</span>
+ </div>
+ <span id=item3 tabindex=-1>item3</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item3 = document.getElementById("item3");
+
+ await focusAndKeyPress(item1, kArrowRight);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on an extending focusgroup element but that focusgroup doesn't support the axis of the arrow key pressed, skip that subtree altogether.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/wraps-and-skips-orthogonal-inner-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/wraps-and-skips-orthogonal-inner-focusgroup.html
new file mode 100644
index 0000000000..af79ca24c6
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/wraps-and-skips-orthogonal-inner-focusgroup.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus wraps and skips the orthogonal inner focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup=wrap>
+ <div focusgroup="extend vertical">
+ <span id=item1 tabindex=-1>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+ </div>
+ <span id=item3 tabindex=-1>item3</span>
+ <span id=item4 tabindex=0>item4</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item3 = document.getElementById("item3");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowRight);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on the last item of a focusgroup that supports wrapping in the axis of the arrow key pressed and the first item is in an inner focusgroup that doesn't support wrapping in the same axis, the focus moves to the next item out of that inner focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/wraps-in-appropriate-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/wraps-in-appropriate-focusgroup.html
new file mode 100644
index 0000000000..80290c9918
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/wraps-in-appropriate-focusgroup.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus wraps in the appropriate focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap> <!--Supports horizontal wrapping-->
+ <div focusgroup="extend vertical"> <!--Doesn't support horizontal wrapping-->
+ <span id=item1 tabindex=0>item1</span>
+ <div id=item2 tabindex=-1 focusgroup="extend wrap">
+ <!--Supports wrapping in both axis, but only extend the
+ wrapping behavior of its ancestors in the vertical axis. -->
+ <span id=item3 tabindex=-1>item3</span>
+ <span id=item4 tabindex=-1>item4</span>
+ </div>
+ </div>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item3 = document.getElementById("item3");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowRight);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on the last item of an inner focusgroup that supports wrapping while its parent focusgroup doesn't (in the axis of the arrow key pressed), the focus should move to the first item of the inner focusgroup even if there's another focusgroup supporting wrapping in the same axis as the arrow key pressed in the hierarchy.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/wraps-in-inner-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/wraps-in-inner-focusgroup.html
new file mode 100644
index 0000000000..ab33842340
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/horizontal/wraps-in-inner-focusgroup.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus wraps in the inner focusgroup only since the outer focusgroup only wraps in the other axis.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup="vertical wrap">
+ <span id=item1 tabindex=0>item1</span>
+ <div id=item2 tabindex=-1 focusgroup="extend wrap">
+ <!--This focusgroup supports wrapping in both axis, but only extend the wrapping
+ behavior of its parent in the vertical axis. -->
+ <span id=item3 tabindex=-1>item3</span>
+ <span id=item4 tabindex=-1>item4</span>
+ </div>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item3 = document.getElementById("item3");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowRight);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on the last item of an inner focusgroup that supports wrapping while its parent focusgroup doesn't (in the axis of the arrow key pressed), the focus should move to the first item of the inner focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-inside-extending-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-inside-extending-focusgroup.html
new file mode 100644
index 0000000000..bea7b959c5
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-inside-extending-focusgroup.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to next item inside an extending focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup>
+ <div id=item1 tabindex=0 focusgroup=extend>
+ <span id=item2>item2</span> <!--NOT FOCUSABLE-->
+ <span id=item3 tabindex=-1>item3</span>
+ </div>
+ <span id=item4 tabindex=-1>item4</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item3 = document.getElementById("item3");
+
+ await focusAndKeyPress(item1, kArrowDown);
+ assert_equals(document.activeElement, item3);
+
+ await focusAndKeyPress(item1, kArrowRight);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on a focusgroup item which happens to also be an extending focusgroup, an arrow key press should move the focus to the next item within the extending focusgroup and skip non-focusable items.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item-and-skips-non-focusable.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item-and-skips-non-focusable.html
new file mode 100644
index 0000000000..a5d6e306ed
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item-and-skips-non-focusable.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to next item and skips non-focusable elements.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2>item2</span> <!--NOT FOCUSABLE-->
+ <span id=item3 tabindex=-1>item3</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item3 = document.getElementById("item3");
+
+ await focusAndKeyPress(item1, kArrowDown);
+ assert_equals(document.activeElement, item3);
+
+ await focusAndKeyPress(item1, kArrowRight);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on a focusgroup item, an arrow key press should move the focus to the next item and skip non-focusable items.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item-outside-extending-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item-outside-extending-focusgroup.html
new file mode 100644
index 0000000000..f5a74ced5f
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item-outside-extending-focusgroup.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to next item outside the extending focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup>
+ <div id=item1 tabindex=0 focusgroup=extend>
+ <span id=item2>item2</span> <!--NOT FOCUSABLE-->
+ <span id=item3>item3</span> <!--NOT FOCUSABLE-->
+ </div>
+ <span id=item4 tabindex=-1>item4</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item1, kArrowDown);
+ assert_equals(document.activeElement, item4);
+
+ await focusAndKeyPress(item1, kArrowRight);
+ assert_equals(document.activeElement, item4);
+ }, "When the focus is set on a focusgroup item which happens to also be an extending focusgroup, an arrow key press should move the focus to the next item within the extending focusgroup and skip non-focusable items. If no valid candidate is found within that extending focusgroup, the next element (in pre-order traversal) should be considered. In this case, |item4| is the valid next candidate.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item-within-descendants.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item-within-descendants.html
new file mode 100644
index 0000000000..97355ec2da
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item-within-descendants.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to next item within its descendants.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup>
+ <div id=item1 tabindex=0>
+ <div>
+ <div focusgroup=extend>
+ <span id=item2 tabindex=-1>item2<span>
+ </div>
+ </div>
+ </div>
+ <span id=item4 tabindex=-1>item4</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(item1, kArrowDown);
+ assert_equals(document.activeElement, item2);
+
+ await focusAndKeyPress(item1, kArrowRight);
+ assert_equals(document.activeElement, item2);
+ }, "When the focus is set on a focusgroup item that is an ancestor to an extending focusgroup, the focus should move to the next element inside that extending focusgroup even if it's not a direct child.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item.html
new file mode 100644
index 0000000000..747805d7b5
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to next focusgroup item.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(item1, kArrowDown);
+ assert_equals(document.activeElement, item2);
+
+ await focusAndKeyPress(item1, kArrowRight);
+ assert_equals(document.activeElement, item2);
+ }, "When the focus is set on a focusgroup item, an arrow key press should move the focus to the next item.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/descends-in-vertical-inner-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/descends-in-vertical-inner-focusgroup.html
new file mode 100644
index 0000000000..4f6f8e9459
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/descends-in-vertical-inner-focusgroup.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus descends from horizontal focusgroup into vertical focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=fg1 focusgroup=horizontal>
+ <span id=item1 tabindex=0>item1</span>
+ <div id=fg2 tabindex=-1 focusgroup="extend vertical">
+ <span id=item2 tabindex=-1>item2</span>
+ </div>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var fg2 = document.getElementById("fg2");
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(fg2, kArrowDown);
+ assert_equals(document.activeElement, item2);
+ }, "When the focus is set on the root of an extending focusgroup that supports an orthogonal axis to the outer focusgroup, an arrow key press aligned with the inner focusgroup axis should move the focus within that inner focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/does-not-move-when-axis-not-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/does-not-move-when-axis-not-supported.html
new file mode 100644
index 0000000000..794f079418
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/does-not-move-when-axis-not-supported.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus does not move to next focusgroup item when the axis of the arrow key pressed isn't supported.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup=horizontal>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+
+ await focusAndKeyPress(item1, kArrowDown);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on an item of a focusgroup that only supports the orthogonal axis to the arrow key pressed, the arrow pressed shouldn't move the focus.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/does-not-wrap-even-when-other-axis-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/does-not-wrap-even-when-other-axis-supported.html
new file mode 100644
index 0000000000..f7b697e5c0
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/does-not-wrap-even-when-other-axis-supported.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Does not wrap when the arrow keypress is supported but the focusgroup only wraps in the other axis.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup="horizontal wrap">
+ <span id=item1 tabindex=0>item1</span>
+ <div id=item2 tabindex=-1 focusgroup=extend>
+ <!--This focusgroup supports both axes, but only wraps in the horizontal one.-->
+ <span id=item3 tabindex=-1>item3</span>
+ <span id=item4 tabindex=-1>item4</span>
+ </div>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowDown);
+ assert_equals(document.activeElement, item4);
+ }, "When the focus is set on the last item of a focusgroup that doesn't support wrapping in the axis of the arrow key pressed but supports wrapping in the orthogonal axis, the focus shouldn't move.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/moves-when-only-current-axis-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/moves-when-only-current-axis-supported.html
new file mode 100644
index 0000000000..b5b97cca67
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/moves-when-only-current-axis-supported.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to next focusgroup item when only the axis of the arrow key pressed is supported.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup=vertical>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(item1, kArrowDown);
+ assert_equals(document.activeElement, item2);
+ }, "When the focus is set on an item of a focusgroup that only supports the axis of the arrow key pressed the focus should move.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/skips-focusgroup-that-extends-in-orthogonal-axis.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/skips-focusgroup-that-extends-in-orthogonal-axis.html
new file mode 100644
index 0000000000..4fe753126b
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/skips-focusgroup-that-extends-in-orthogonal-axis.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus moves to next item, skipping the focusgroup that extends in the orthogonal axis.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup>
+ <div id=item1 tabindex=0 focusgroup="extend horizontal">
+ <span id=item2 tabindex=-1>item2</span>
+ </div>
+ <span id=item3 tabindex=-1>item3</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item3 = document.getElementById("item3");
+
+ await focusAndKeyPress(item1, kArrowDown);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on an extending focusgroup element but that focusgroup doesn't support the axis of the arrow key pressed, skip that subtree altogether.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/wraps-and-skips-orthogonal-inner-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/wraps-and-skips-orthogonal-inner-focusgroup.html
new file mode 100644
index 0000000000..64a4b76ebf
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/wraps-and-skips-orthogonal-inner-focusgroup.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus wraps and skips the orthogonal inner focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup=wrap>
+ <div focusgroup="extend horizontal">
+ <span id=item1 tabindex=-1>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+ </div>
+ <span id=item3 tabindex=-1>item3</span>
+ <span id=item4 tabindex=0>item4</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item3 = document.getElementById("item3");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowDown);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on the last item of a focusgroup that supports wrapping in the axis of the arrow key pressed and the first item is in an inner focusgroup that doesn't support wrapping in the same axis, the focus moves to the next item out of that inner focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/wraps-in-appropriate-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/wraps-in-appropriate-focusgroup.html
new file mode 100644
index 0000000000..fa9c72b0bd
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/wraps-in-appropriate-focusgroup.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus wraps in the appropriate focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=wrap> <!--Supports vertical wrapping-->
+ <div focusgroup="extend horizontal"> <!--Doesn't support vertical wrapping-->
+ <span id=item1 tabindex=0>item1</span>
+ <div id=item2 tabindex=-1 focusgroup="extend wrap">
+ <!--Supports wrapping in both axis, but only extend the
+ wrapping behavior of its ancestors in the horizontal axis. -->
+ <span id=item3 tabindex=-1>item3</span>
+ <span id=item4 tabindex=-1>item4</span>
+ </div>
+ </div>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item3 = document.getElementById("item3");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowDown);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on the last item of an inner focusgroup that supports wrapping while its parent focusgroup doesn't (in the axis of the arrow key pressed), the focus should move to the first item of the inner focusgroup even if there's another focusgroup supporting wrapping in the same axis as the arrow key pressed in the hierarchy.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/wraps-in-inner-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/wraps-in-inner-focusgroup.html
new file mode 100644
index 0000000000..8fd44ba0f1
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/wraps-in-inner-focusgroup.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus wraps in the inner focusgroup only since the outer focusgroup only wraps in the other axis.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup="horizontal wrap">
+ <span id=item1 tabindex=0>item1</span>
+ <div id=item2 tabindex=-1 focusgroup="extend wrap">
+ <!--This focusgroup supports wrapping in both axis, but only extend the wrapping
+ behavior of its parent in the horizontal axis. -->
+ <span id=item3 tabindex=-1>item3</span>
+ <span id=item4 tabindex=-1>item4</span>
+ </div>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item3 = document.getElementById("item3");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowDown);
+ assert_equals(document.activeElement, item3);
+ }, "When the focus is set on the last item of an inner focusgroup that supports wrapping while its parent focusgroup doesn't (in the axis of the arrow key pressed), the focus should move to the first item of the inner focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/wraps-and-goes-into-inner-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/wraps-and-goes-into-inner-focusgroup.html
new file mode 100644
index 0000000000..ea9b1cbec5
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/wraps-and-goes-into-inner-focusgroup.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Wraps and goes into inner focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup=wrap>
+ <div focusgroup=extend>
+ <span id=item1 tabindex=-1>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+ </div>
+ <span id=item3 tabindex=0>item3</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item3 = document.getElementById("item3");
+
+ await focusAndKeyPress(item3, kArrowDown);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item3, kArrowRight);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the last item of a focusgroup that supports wrapping in the axis of the arrow key pressed and the first item is in an inner focusgroup that supports it too, the focus moves to that item in the inner focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/wraps-successfully.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/wraps-successfully.html
new file mode 100644
index 0000000000..5ad1cd8fe9
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/wraps-successfully.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus wraps successfully from the last item to the first one.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup=wrap>
+ <span id=item1 tabindex=0>item1</span>
+ <span id=item2 tabindex=-1>item2</span>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item2 = document.getElementById("item2");
+
+ await focusAndKeyPress(item2, kArrowDown);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item2, kArrowRight);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the last item of a focusgroup that supports wrapping in the axis of the arrow key pressed, the focus should move back to the first item.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/wraps-to-parent-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/wraps-to-parent-focusgroup.html
new file mode 100644
index 0000000000..afb9744b71
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/wraps-to-parent-focusgroup.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Focus wraps successfully from the last item inside an extending focusgroup to the first item of the parent focusgroup.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div id=root focusgroup=wrap>
+ <span id=item1 tabindex=0>item1</span>
+ <div id=item2 tabindex=-1 focusgroup=extend>
+ <span id=item3 tabindex=-1>item3</span>
+ <span id=item4 tabindex=-1>item4</span>
+ </div>
+</div>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item4 = document.getElementById("item4");
+
+ await focusAndKeyPress(item4, kArrowDown);
+ assert_equals(document.activeElement, item1);
+
+ await focusAndKeyPress(item4, kArrowRight);
+ assert_equals(document.activeElement, item1);
+ }, "When the focus is set on the last item of an inner focusgroup that supports wrapping while its parent focusgroup also does, the focus should move to the first item of the parent focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/col-flow-only.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/col-flow-only.html
new file mode 100644
index 0000000000..a634412d53
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/col-flow-only.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Validate that col-flow allows only vertical flowing.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup="grid col-flow">
+ <tr>
+ <td id=r1c1 tabindex=0>r1c1</td>
+ <td id=r1c2 tabindex=-1>r1c2</td>
+ <td id=r1c3 tabindex=-1>r1c3</td>
+ </tr>
+ <tr>
+ <td id=r2c1 tabindex=-1>r2c1</td>
+ <td id=r2c2 tabindex=-1>r2c2</td>
+ <td id=r2c3 tabindex=-1>r2c3</td>
+ </tr>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var r1c3 = document.getElementById("r1c3");
+
+ await focusAndKeyPress(r1c3, kArrowRight);
+ assert_equals(document.activeElement, r1c3);
+ }, "A right arrow press should not flow the focus horziontally when not supported by the focusgroup.");
+
+ promise_test(async t => {
+ var r1c2 = document.getElementById("r1c2");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r2c1, kArrowDown);
+ assert_equals(document.activeElement, r1c2);
+ }, "When on the last row, a down arrow press should move the focus to first row and next column if the focusgroup flows horizontally.");
+
+ promise_test(async t => {
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r2c1, kArrowLeft);
+ assert_equals(document.activeElement, r2c1);
+ }, "A left arrow press should not flow the focus horziontally when not supported by the focusgroup.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r2c3 = document.getElementById("r2c3");
+
+ await focusAndKeyPress(r1c1, kArrowUp);
+ assert_equals(document.activeElement, r2c3);
+ }, "When on the first row, an up arrow press should move the focus to last row and previous column if the focusgroup flows horizontally.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/col-wrap-and-row-flow.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/col-wrap-and-row-flow.html
new file mode 100644
index 0000000000..b5f678a706
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/col-wrap-and-row-flow.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Validate that we can col-wrap AND row-flow.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup="grid col-wrap row-flow">
+ <tr>
+ <td id=r1c1 tabindex=0>r1c1</td>
+ <td id=r1c2 tabindex=-1>r1c2</td>
+ <td id=r1c3 tabindex=-1>r1c3</td>
+ </tr>
+ <tr>
+ <td id=r2c1 tabindex=-1>r2c1</td>
+ <td id=r2c2 tabindex=-1>r2c2</td>
+ <td id=r2c3 tabindex=-1>r2c3</td>
+ </tr>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var r1c3 = document.getElementById("r1c3");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r1c3, kArrowRight);
+ assert_equals(document.activeElement, r2c1);
+ }, "When on the last column, a right arrow press should move the focus to first column and next row if the focusgroup flows horizontally.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r2c1, kArrowDown);
+ assert_equals(document.activeElement, r1c1);
+ }, "When on the last row, a down arrow press should move the focus to first row if the focusgroup wraps vertically.");
+
+ promise_test(async t => {
+ var r1c3 = document.getElementById("r1c3");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r2c1, kArrowLeft);
+ assert_equals(document.activeElement, r1c3);
+ }, "When on the first column, a left arrow press should move the focus to last column and previous row if the focusgroup flows horizontally.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r1c1, kArrowUp);
+ assert_equals(document.activeElement, r2c1);
+ }, "When on the first row, an up arrow press should move the focus to last row if the focusgroup wraps vertically.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/col-wrap-only.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/col-wrap-only.html
new file mode 100644
index 0000000000..ff19b8778e
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/col-wrap-only.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Validate that col-wrap allows only vertical wrapping.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup="grid col-wrap">
+ <tr>
+ <td id=r1c1 tabindex=0>r1c1</td>
+ <td id=r1c2 tabindex=-1>r1c2</td>
+ <td id=r1c3 tabindex=-1>r1c3</td>
+ </tr>
+ <tr>
+ <td id=r2c1 tabindex=-1>r2c1</td>
+ <td id=r2c2 tabindex=-1>r2c2</td>
+ <td id=r2c3 tabindex=-1>r2c3</td>
+ </tr>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var r1c3 = document.getElementById("r1c3");
+
+ await focusAndKeyPress(r1c3, kArrowRight);
+ assert_equals(document.activeElement, r1c3);
+ }, "A right arrow press should not wrap the focus to the first column when only vertical wrap is supported by the focusgroup.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r2c1, kArrowDown);
+ assert_equals(document.activeElement, r1c1);
+ }, "When on the last row, a down arrow press should move the focus to first row if the focusgroup wraps vertically.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+
+ await focusAndKeyPress(r1c1, kArrowLeft);
+ assert_equals(document.activeElement, r1c1);
+ }, "A left arrow press should not wrap the focus to the last column when only vertical wrap is supported by the focusgroup.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r1c1, kArrowUp);
+ assert_equals(document.activeElement, r2c1);
+ }, "When on the first row, an up arrow press should move the focus to last row if the focusgroup wraps vertically.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/colspan.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/colspan.html
new file mode 100644
index 0000000000..c9daeffaeb
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/colspan.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Validate that we deal correctly with colspans.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup="grid">
+ <tr>
+ <td id=r1c1 tabindex=0>r1c1</td>
+ <td id=r1c2 tabindex=-1 colspan=2>r1c2</td>
+ <td id=r1c4 tabindex=-1>r1c4</td>
+ </tr>
+ <tr>
+ <td id=r2c1 tabindex=-1>r2c1</td>
+ <td id=r2c2 tabindex=-1>r2c2</td>
+ <td id=r2c3 tabindex=-1>r2c3</td>
+ <td id=r2c4 tabindex=-1>r2c4</td>
+ </tr>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c2 = document.getElementById("r1c2");
+ var r1c4 = document.getElementById("r1c4");
+
+ await focusAndKeyPress(r1c1, kArrowRight);
+ assert_equals(document.activeElement, r1c2);
+
+ await focusAndKeyPress(r1c2, kArrowRight);
+ assert_equals(document.activeElement, r1c4);
+ }, "A right arrow press should move the focus to the next column, dealing correctly with colspans.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c2 = document.getElementById("r1c2");
+ var r1c4 = document.getElementById("r1c4");
+ var r2c1 = document.getElementById("r2c1");
+ var r2c2 = document.getElementById("r2c2");
+ var r2c4 = document.getElementById("r2c4");
+
+ await focusAndKeyPress(r1c1, kArrowDown);
+ assert_equals(document.activeElement, r2c1);
+
+ await focusAndKeyPress(r1c2, kArrowDown);
+ assert_equals(document.activeElement, r2c2);
+
+ await focusAndKeyPress(r1c4, kArrowDown);
+ assert_equals(document.activeElement, r2c4);
+ }, "A down arrow press should move the focus to the right cell on the next row, dealing correctly with colspans.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c2 = document.getElementById("r1c2");
+ var r1c4 = document.getElementById("r1c4");
+
+ await focusAndKeyPress(r1c4, kArrowLeft);
+ assert_equals(document.activeElement, r1c2);
+
+ await focusAndKeyPress(r1c2, kArrowLeft);
+ assert_equals(document.activeElement, r1c1);
+ }, "A left arrow press should move to the previous column, dealing correctly with the colspans.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c2 = document.getElementById("r1c2");
+ var r1c4 = document.getElementById("r1c4");
+ var r2c1 = document.getElementById("r2c1");
+ var r2c2 = document.getElementById("r2c2");
+ var r2c3 = document.getElementById("r2c3");
+ var r2c4 = document.getElementById("r2c4");
+
+ await focusAndKeyPress(r2c1, kArrowUp);
+ assert_equals(document.activeElement, r1c1);
+
+ await focusAndKeyPress(r2c2, kArrowUp);
+ assert_equals(document.activeElement, r1c2);
+
+ await focusAndKeyPress(r2c3, kArrowUp);
+ assert_equals(document.activeElement, r1c2);
+
+ await focusAndKeyPress(r2c4, kArrowUp);
+ assert_equals(document.activeElement, r1c4);
+ }, "An up arrow press should move the focus to the right cell on the previous row, dealing correctly with colspans.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/css-table-not-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/css-table-not-focusgroup.html
new file mode 100644
index 0000000000..c0aea689ae
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/css-table-not-focusgroup.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Validate that Focusgroup doesn't work on CSS table when the focusgroup attribute is not present.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div style="display:table">
+ <div style="display:table-row">
+ <div id=r1c1 style="display:table-cell" tabindex=0>r1c1</div>
+ <div id=r1c2 style="display:table-cell" tabindex=-1>r1c2</div>
+ </div>
+ <div style="display:table-row">
+ <div id=r2c1 style="display:table-cell" tabindex=-1>r2c1</div>
+ <div id=r2c2 style="display:table-cell" tabindex=-1>r2c2</div>
+ </div>
+</div>
+
+<script>
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+
+ await focusAndKeyPress(r1c1, kArrowRight);
+ assert_equals(document.activeElement, r1c1);
+ }, "Validates that a CSS table that doesn't have the focusgroup=grid attribute set doesn't allow arrow-keys navigation");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/css-table.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/css-table.html
new file mode 100644
index 0000000000..45e1e2c472
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/css-table.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Validate that Focusgroup works with CSS tables too.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div style="display:table" focusgroup=grid>
+ <div style="display:table-row">
+ <div id=r1c1 style="display:table-cell" tabindex=0>r1c1</div>
+ <div id=r1c2 style="display:table-cell" tabindex=-1>r1c2</div>
+ </div>
+ <div style="display:table-row">
+ <div id=r2c1 style="display:table-cell" tabindex=-1>r2c1</div>
+ <div id=r2c2 style="display:table-cell" tabindex=-1>r2c2</div>
+ </div>
+</div>
+
+<script>
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c2 = document.getElementById("r1c2");
+ var r2c1 = document.getElementById("r2c1");
+ var r2c2 = document.getElementById("r2c2");
+
+ await focusAndKeyPress(r1c1, kArrowRight);
+ assert_equals(document.activeElement, r1c2);
+
+ await focusAndKeyPress(r1c2, kArrowDown);
+ assert_equals(document.activeElement, r2c2);
+
+ await focusAndKeyPress(r2c2, kArrowLeft);
+ assert_equals(document.activeElement, r2c1);
+
+ await focusAndKeyPress(r2c1, kArrowUp);
+ assert_equals(document.activeElement, r1c1);
+ }, "Tests that grid focusgroups also work on CSS tables (i.e.: 'display: table'). The implementation relies on the layout objects, so the other tests that covers HTML tables don't need to be duplicated to test the same cases with CSS tables.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/does-not-wrap-or-flow.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/does-not-wrap-or-flow.html
new file mode 100644
index 0000000000..050dec3622
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/does-not-wrap-or-flow.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Simple case that validated we don't wrap or flow when these values aren't provided.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup=grid>
+ <tr>
+ <td id=r1c1 tabindex=0>r1c1</td>
+ <td id=r1c2 tabindex=-1>r1c2</td>
+ <td id=r1c3 tabindex=-1>r1c3</td>
+ </tr>
+ <tr>
+ <td id=r2c1 tabindex=-1>r2c1</td>
+ <td id=r2c2 tabindex=-1>r2c2</td>
+ <td id=r2c3 tabindex=-1>r2c3</td>
+ </tr>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var r1c3 = document.getElementById("r1c3");
+
+ await focusAndKeyPress(r1c3, kArrowRight);
+ assert_equals(document.activeElement, r1c3);
+ }, "A right arrow press should not move the focus when it is at the last column and the focusgroup doesn't wrap or flow.");
+
+ promise_test(async t => {
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r2c1, kArrowDown);
+ assert_equals(document.activeElement, r2c1);
+ }, "A down arrow press should not move the focus when it is at the last row and the focusgroup doesn't wrap or flow.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+
+ await focusAndKeyPress(r1c1, kArrowLeft);
+ assert_equals(document.activeElement, r1c1);
+ }, "A left arrow press should not move the focus when it is at the first column and the focusgroup doesn't wrap or flow.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+
+ await focusAndKeyPress(r1c1, kArrowUp);
+ assert_equals(document.activeElement, r1c1);
+ }, "An up arrow press should not move the focus when it is at the first row and the focusgroup doesn't wrap or flow.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/empty-spaces.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/empty-spaces.html
new file mode 100644
index 0000000000..90a09e1a94
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/empty-spaces.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Validate that empty spaces are not troubling our expectations.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup="grid flow">
+ <tr>
+ <td id=r1c1 tabindex=-1 rowspan=2 colspan=2>r1c1</td>
+ <td id=r1c3 tabindex=-1>r1c3</td>
+ <td id=r1c4 tabindex=-1 rowspan=3>r1c4</td>
+ <td id=r1c5 tabindex=-1>r1c5</td>
+ <td id=r1c6 tabindex=-1>r1c6</td>
+ <td id=r1c7 tabindex=-1>r1c7</td>
+ </tr>
+ <tr>
+ <!-- r2c1 and r2c2 starts in the previous row and spans to here. -->
+ <td id=r2c3 tabindex=-1>r2c3</td>
+ <!-- Leave the rest of the row empty -->
+ </tr>
+ <tr>
+ <td id=r3c1 tabindex=-1>r3c1</td>
+ <td id=r3c2 tabindex=-1>r3c2</td>
+ <!-- There will be a cell at r3c4, but it starts in row 1. -->
+ </tr>
+ <tr>
+ <td id=r4c1 tabindex=-1 colspan=5>r4c1</td>
+ <td id=r4c6 tabindex=-1>r4c6</td>
+ <!-- No last cell - leave it empty for the test -->
+ </tr>
+</table>
+
+<script>
+ // The following tests are very corner-case.
+ //
+ // We are creating empty spaces that don't have cells through a weird table
+ // structure. The spaces at the following locations don't have cells (assuming
+ // that the first row/column starts at index 1): r2c5, r2c6, r2c7, r3c3,
+ // r3c5, r3c6, r3c7 and r4c7.
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c4 = document.getElementById("r1c4");
+ var r1c5 = document.getElementById("r1c5");
+ var r2c3 = document.getElementById("r2c3");
+ var r3c2 = document.getElementById("r3c2");
+ var r4c6 = document.getElementById("r4c6");
+
+ await focusAndKeyPress(r3c2, kArrowRight);
+ assert_equals(document.activeElement, r1c4);
+
+ await focusAndKeyPress(r1c4, kArrowRight);
+ assert_equals(document.activeElement, r1c5);
+
+ await focusAndKeyPress(r4c6, kArrowRight);
+ assert_equals(document.activeElement, r1c1);
+
+ await focusAndKeyPress(r2c3, kArrowRight);
+ assert_equals(document.activeElement, r1c4);
+ }, "A right arrow press should move the focus to the next column, dealing correctly with the empty spaces.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c4 = document.getElementById("r1c4");
+ var r1c5 = document.getElementById("r1c5");
+ var r1c6 = document.getElementById("r1c6");
+ var r1c7 = document.getElementById("r1c7");
+ var r2c3 = document.getElementById("r2c3");
+ var r4c1 = document.getElementById("r4c1");
+ var r4c6 = document.getElementById("r4c6");
+
+ await focusAndKeyPress(r2c3, kArrowDown);
+ assert_equals(document.activeElement, r4c1);
+
+ await focusAndKeyPress(r1c5, kArrowDown);
+ assert_equals(document.activeElement, r4c1);
+
+ await focusAndKeyPress(r1c6, kArrowDown);
+ assert_equals(document.activeElement, r4c6);
+
+ // Goes to r1c1 because it flows to the first cell of the first column when
+ // on the last cell of the last column.
+ await focusAndKeyPress(r1c7, kArrowDown);
+ assert_equals(document.activeElement, r1c1);
+
+ await focusAndKeyPress(r4c6, kArrowDown);
+ assert_equals(document.activeElement, r1c7);
+
+ await focusAndKeyPress(r1c4, kArrowDown);
+ assert_equals(document.activeElement, r4c1);
+ }, "A down arrow press should move the focus to the right cell on the next row, dealing correctly with empty spaces.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c3 = document.getElementById("r1c3");
+ var r1c4 = document.getElementById("r1c4");
+ var r3c1 = document.getElementById("r3c1");
+ var r4c1 = document.getElementById("r4c1");
+ var r4c6 = document.getElementById("r4c6");
+
+ await focusAndKeyPress(r1c1, kArrowLeft);
+ assert_equals(document.activeElement, r4c6);
+
+ await focusAndKeyPress(r3c1, kArrowLeft);
+ assert_equals(document.activeElement, r1c4);
+
+ await focusAndKeyPress(r1c4, kArrowLeft);
+ assert_equals(document.activeElement, r1c3);
+
+ await focusAndKeyPress(r4c1, kArrowLeft);
+ assert_equals(document.activeElement, r1c4);
+ }, "A left arrow press should move to the previous column, dealing correctly with the empty spaces.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c6 = document.getElementById("r1c6");
+ var r1c7 = document.getElementById("r1c7");
+ var r3c1 = document.getElementById("r3c1");
+ var r4c1 = document.getElementById("r4c1");
+ var r4c6 = document.getElementById("r4c6");
+
+ await focusAndKeyPress(r1c7, kArrowUp);
+ assert_equals(document.activeElement, r4c6);
+
+ await focusAndKeyPress(r4c6, kArrowUp);
+ assert_equals(document.activeElement, r1c6);
+
+ await focusAndKeyPress(r1c6, kArrowUp);
+ assert_equals(document.activeElement, r4c1);
+
+ await focusAndKeyPress(r4c1, kArrowUp);
+ assert_equals(document.activeElement, r3c1);
+
+ await focusAndKeyPress(r1c1, kArrowUp);
+ assert_equals(document.activeElement, r1c7);
+ }, "An up arrow press should move the focus to the right cell on the previous row, dealing correctly with empty spaces.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/flows-in-both-axes.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/flows-in-both-axes.html
new file mode 100644
index 0000000000..86fc25456b
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/flows-in-both-axes.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Validate that flow allows both horizontal and vertical flowing.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup="grid flow">
+ <tr>
+ <td id=r1c1 tabindex=0>r1c1</td>
+ <td id=r1c2 tabindex=-1>r1c2</td>
+ <td id=r1c3 tabindex=-1>r1c3</td>
+ </tr>
+ <tr>
+ <td id=r2c1 tabindex=-1>r2c1</td>
+ <td id=r2c2 tabindex=-1>r2c2</td>
+ <td id=r2c3 tabindex=-1>r2c3</td>
+ </tr>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var r1c3 = document.getElementById("r1c3");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r1c3, kArrowRight);
+ assert_equals(document.activeElement, r2c1);
+ }, "When on the last column, a right arrow press should move the focus to first column and next row if the focusgroup flows horizontally.");
+
+ promise_test(async t => {
+ var r1c2 = document.getElementById("r1c2");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r2c1, kArrowDown);
+ assert_equals(document.activeElement, r1c2);
+ }, "When on the last row, a down arrow press should move the focus to first row and next column if the focusgroup flows horizontally.");
+
+ promise_test(async t => {
+ var r1c3 = document.getElementById("r1c3");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r2c1, kArrowLeft);
+ assert_equals(document.activeElement, r1c3);
+ }, "When on the first column, a left arrow press should move the focus to last column and previous row if the focusgroup flows horizontally.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r2c3 = document.getElementById("r2c3");
+
+ await focusAndKeyPress(r1c1, kArrowUp);
+ assert_equals(document.activeElement, r2c3);
+ }, "When on the first row, an up arrow press should move the focus to last row and previous column if the focusgroup flows horizontally.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/moves-across-table-sections.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/moves-across-table-sections.html
new file mode 100644
index 0000000000..d7d1b55f45
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/moves-across-table-sections.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Table with one or less row per section (head, 2 bodies and foot).</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup="grid wrap">
+ <thead>
+ <tr>
+ <td id=r1c1 tabindex=0>r1c1</td>
+ </tr>
+ <tr>
+ <td id=r2c1 tabindex=-1>r2c1</td>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td id=r3c1 tabindex=-1>r3c1</td>
+ </tr>
+ <tr>
+ <td id=r4c1 tabindex=-1>r4c1</td>
+ </tr>
+ </tbody>
+ <tbody></tbody>
+ <tfoot>
+ <tr>
+ <td id=r5c1 tabindex=-1>r5c1</td>
+ </tr>
+ <tr>
+ <td id=r6c1 tabindex=-1>r6c1</td>
+ </tr>
+ </foot>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c2 = document.getElementById("r2c1");
+ var r3c2 = document.getElementById("r3c1");
+ var r4c2 = document.getElementById("r4c1");
+ var r5c2 = document.getElementById("r5c1");
+ var r6c2 = document.getElementById("r6c1");
+
+ await focusAndKeyPress(r1c1, kArrowDown);
+ assert_equals(document.activeElement, r2c1);
+
+ await focusAndKeyPress(r2c1, kArrowDown);
+ assert_equals(document.activeElement, r3c1);
+
+ await focusAndKeyPress(r3c1, kArrowDown);
+ assert_equals(document.activeElement, r4c1);
+
+ await focusAndKeyPress(r4c1, kArrowDown);
+ assert_equals(document.activeElement, r5c1);
+
+ await focusAndKeyPress(r5c1, kArrowDown);
+ assert_equals(document.activeElement, r6c1);
+
+ await focusAndKeyPress(r6c1, kArrowDown);
+ assert_equals(document.activeElement, r1c1);
+ }, "A down arrow press should move the focus to the next row even when that row is in another section.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c2 = document.getElementById("r2c1");
+ var r3c2 = document.getElementById("r3c1");
+ var r4c2 = document.getElementById("r4c1");
+ var r5c2 = document.getElementById("r5c1");
+ var r6c2 = document.getElementById("r6c1");
+
+ await focusAndKeyPress(r6c1, kArrowUp);
+ assert_equals(document.activeElement, r5c1);
+
+ await focusAndKeyPress(r5c1, kArrowUp);
+ assert_equals(document.activeElement, r4c1);
+
+ await focusAndKeyPress(r4c1, kArrowUp);
+ assert_equals(document.activeElement, r3c1);
+
+ await focusAndKeyPress(r3c1, kArrowUp);
+ assert_equals(document.activeElement, r2c1);
+
+ await focusAndKeyPress(r2c1, kArrowUp);
+ assert_equals(document.activeElement, r1c1);
+
+ await focusAndKeyPress(r1c1, kArrowUp);
+ assert_equals(document.activeElement, r6c1);
+ }, "An up arrow press should move the focus to the previous row even when that row is in another section.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/non-table.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/non-table.html
new file mode 100644
index 0000000000..c02de186e6
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/non-table.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Validate that Focusgroup doesn't work when not set on a table element</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<div focusgroup=grid>
+ <span id=nonitem1 tabindex=0>nonitem1</span>
+ <span id=nonitem2 tabindex=-1>nonitem2</span>
+</div>
+
+<script>
+ promise_test(async t => {
+ var nonitem1 = document.getElementById("nonitem1");
+
+ await focusAndKeyPress(nonitem1, kArrowRight);
+ assert_equals(document.activeElement, nonitem1);
+ }, "Validates that focusgroup=grid set on a non table layout doesn't become a grid focusgroup nor a linear one.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/relayout-before-navigation.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/relayout-before-navigation.html
new file mode 100644
index 0000000000..d1fd0ce6eb
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/relayout-before-navigation.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Relayout before navigating in a grid</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+<script>
+ function removeMiddleRow() {
+ document.getElementById("middle-row").remove();
+ }
+</script>
+<table focusgroup="grid">
+ <tr>
+ <td id="item1" tabindex="0" onkeydown="removeMiddleRow()">item1</td>
+ </tr>
+ <tr id="middle-row">
+ <td id="item2" tabindex="-1">item2</td>
+ </tr>
+ <tr>
+ <td id="item3" tabindex="-1">item3</td>
+ </tr>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var item1 = document.getElementById("item1");
+ var item3 = document.getElementById("item3");
+
+ await focusAndKeyPress(item1, kArrowDown);
+ assert_equals(document.activeElement, item3);
+ }, "Since |item1| removes the middle row on key press, the grid focusgroup should check for a relayout before navigating to the next row.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/row-flow-only.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/row-flow-only.html
new file mode 100644
index 0000000000..138b1b33d5
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/row-flow-only.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Validate that row-flow allows only horizontal flowing.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup="grid row-flow">
+ <tr>
+ <td id=r1c1 tabindex=0>r1c1</td>
+ <td id=r1c2 tabindex=-1>r1c2</td>
+ <td id=r1c3 tabindex=-1>r1c3</td>
+ </tr>
+ <tr>
+ <td id=r2c1 tabindex=-1>r2c1</td>
+ <td id=r2c2 tabindex=-1>r2c2</td>
+ <td id=r2c3 tabindex=-1>r2c3</td>
+ </tr>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var r1c3 = document.getElementById("r1c3");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r1c3, kArrowRight);
+ assert_equals(document.activeElement, r2c1);
+ }, "When on the last column, a right arrow press should move the focus to first column and next row if the focusgroup flows horizontally.");
+
+ promise_test(async t => {
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r2c1, kArrowDown);
+ assert_equals(document.activeElement, r2c1);
+ }, "A down arrow press should not flow the focus vertically when not supported by the focusgroup.");
+
+ promise_test(async t => {
+ var r1c3 = document.getElementById("r1c3");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r2c1, kArrowLeft);
+ assert_equals(document.activeElement, r1c3);
+ }, "When on the first column, a left arrow press should move the focus to last column and previous row if the focusgroup flows horizontally.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+
+ await focusAndKeyPress(r1c1, kArrowUp);
+ assert_equals(document.activeElement, r1c1);
+ }, "An up arrow press should not flow the focus vertically when not supported by the focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/row-wrap-and-col-flow.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/row-wrap-and-col-flow.html
new file mode 100644
index 0000000000..8ed69e2e3e
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/row-wrap-and-col-flow.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Validate that we can row-wrap AND col-flow.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup="grid row-wrap col-flow">
+ <tr>
+ <td id=r1c1 tabindex=0>r1c1</td>
+ <td id=r1c2 tabindex=-1>r1c2</td>
+ <td id=r1c3 tabindex=-1>r1c3</td>
+ </tr>
+ <tr>
+ <td id=r2c1 tabindex=-1>r2c1</td>
+ <td id=r2c2 tabindex=-1>r2c2</td>
+ <td id=r2c3 tabindex=-1>r2c3</td>
+ </tr>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c3 = document.getElementById("r1c3");
+
+ await focusAndKeyPress(r1c3, kArrowRight);
+ assert_equals(document.activeElement, r1c1);
+ }, "When on the last column, a right arrow press should move the focus to first column if the focusgroup wraps horizontally.");
+
+ promise_test(async t => {
+ var r1c2 = document.getElementById("r1c2");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r2c1, kArrowDown);
+ assert_equals(document.activeElement, r1c2);
+ }, "When on the last row, a down arrow press should move the focus to first row and next column if the focusgroup flows vertically.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c3 = document.getElementById("r1c3");
+
+ await focusAndKeyPress(r1c1, kArrowLeft);
+ assert_equals(document.activeElement, r1c3);
+ }, "When on the first column, a left arrow press should move the focus to last column if the focusgroup wraps horizontally.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r2c3 = document.getElementById("r2c3");
+
+ await focusAndKeyPress(r1c1, kArrowUp);
+ assert_equals(document.activeElement, r2c3);
+ }, "When on the first row, an up arrow press should move the focus to last row and previous column if the focusgroup flows horizontally.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/row-wrap-only.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/row-wrap-only.html
new file mode 100644
index 0000000000..0154ee2125
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/row-wrap-only.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Validate that row-wrap allows only horizontal wrapping.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup="grid row-wrap">
+ <tr>
+ <td id=r1c1 tabindex=0>r1c1</td>
+ <td id=r1c2 tabindex=-1>r1c2</td>
+ <td id=r1c3 tabindex=-1>r1c3</td>
+ </tr>
+ <tr>
+ <td id=r2c1 tabindex=-1>r2c1</td>
+ <td id=r2c2 tabindex=-1>r2c2</td>
+ <td id=r2c3 tabindex=-1>r2c3</td>
+ </tr>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c3 = document.getElementById("r1c3");
+
+ await focusAndKeyPress(r1c3, kArrowRight);
+ assert_equals(document.activeElement, r1c1);
+ }, "When on the last column, a right arrow press should move the focus to first column if the focusgroup wraps horizontally.");
+
+ promise_test(async t => {
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r2c1, kArrowDown);
+ assert_equals(document.activeElement, r2c1);
+ }, "A down arrow press should not wrap the focus to the first row when only horizontal wrap is supported by the focusgroup.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c3 = document.getElementById("r1c3");
+
+ await focusAndKeyPress(r1c1, kArrowLeft);
+ assert_equals(document.activeElement, r1c3);
+ }, "When on the first column, a left arrow press should move the focus to last column if the focusgroup wraps horizontally.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+
+ await focusAndKeyPress(r1c1, kArrowUp);
+ assert_equals(document.activeElement, r1c1);
+ }, "An up arrow press should not wrap the focus to the last row when only horizontal wrap is supported by the focusgroup.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/rowspan.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/rowspan.html
new file mode 100644
index 0000000000..81ab54ef8e
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/rowspan.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Validate that we deal correctly with rowspans.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup="grid">
+ <tr>
+ <td id=r1c1 tabindex=-1>r1c1</td>
+ <td id=r1c2 tabindex=-1>r1c2</td>
+ <td id=r1c3 tabindex=-1>r1c3</td>
+ </tr>
+ <tr>
+ <td id=r2c1 tabindex=0>r2c1</td>
+ <td id=r2c2 tabindex=-1 rowspan=3>r2c2</td>
+ <td id=r2c3 tabindex=-1>r3c3</td>
+ </tr>
+ <tr>
+ <td id=r3c1 tabindex=-1>r3c1</td>
+ <td id=r3c3 tabindex=-1>r3c3</td>
+ </tr>
+ <tr>
+ <td id=r4c1 tabindex=-1>r4c1</td>
+ <td id=r4c3 tabindex=-1>r4c3</td>
+ </tr>
+ <tr>
+ <td id=r5c1 tabindex=-1>r5c1</td>
+ <td id=r5c2 tabindex=-1>r5c2</td>
+ <td id=r5c3 tabindex=-1>r5c3</td>
+ </tr>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var r2c1 = document.getElementById("r2c1");
+ var r2c2 = document.getElementById("r2c2");
+ var r2c3 = document.getElementById("r2c3");
+ var r3c1 = document.getElementById("r3c1");
+ var r4c1 = document.getElementById("r4c1");
+ var r5c1 = document.getElementById("r5c1");
+ var r5c2 = document.getElementById("r5c2");
+
+ await focusAndKeyPress(r2c1, kArrowRight);
+ assert_equals(document.activeElement, r2c2);
+
+ await focusAndKeyPress(r2c2, kArrowRight);
+ assert_equals(document.activeElement, r2c3);
+
+ await focusAndKeyPress(r3c1, kArrowRight);
+ assert_equals(document.activeElement, r2c2);
+
+ await focusAndKeyPress(r4c1, kArrowRight);
+ assert_equals(document.activeElement, r2c2);
+
+ await focusAndKeyPress(r5c1, kArrowRight);
+ assert_equals(document.activeElement, r5c2);
+ }, "A right arrow press should move the focus to the next column, dealing correctly with rowspans.");
+
+ promise_test(async t => {
+ var r1c2 = document.getElementById("r1c2");
+ var r1c3 = document.getElementById("r1c3");
+ var r2c2 = document.getElementById("r2c2");
+ var r2c3 = document.getElementById("r2c3");
+ var r3c3 = document.getElementById("r3c3");
+ var r5c2 = document.getElementById("r5c2");
+ var r5c3 = document.getElementById("r5c3");
+
+ await focusAndKeyPress(r1c2, kArrowDown);
+ assert_equals(document.activeElement, r2c2);
+
+ await focusAndKeyPress(r1c3, kArrowDown);
+ assert_equals(document.activeElement, r2c3);
+
+ await focusAndKeyPress(r2c2, kArrowDown);
+ assert_equals(document.activeElement, r5c2);
+
+ await focusAndKeyPress(r2c3, kArrowDown);
+ assert_equals(document.activeElement, r3c3);
+
+ await focusAndKeyPress(r3c3, kArrowDown);
+ assert_equals(document.activeElement, r4c3);
+
+ await focusAndKeyPress(r4c3, kArrowDown);
+ assert_equals(document.activeElement, r5c3);
+ }, "A down arrow press should move the focus to the right cell on the next row, dealing correctly with rowspans.");
+
+ promise_test(async t => {
+ var r2c1 = document.getElementById("r2c1");
+ var r2c2 = document.getElementById("r2c2");
+ var r2c3 = document.getElementById("r2c3");
+ var r3c3 = document.getElementById("r3c3");
+ var r4c3 = document.getElementById("r4c3");
+ var r5c3 = document.getElementById("r5c3");
+ var r5c2 = document.getElementById("r5c2");
+
+ await focusAndKeyPress(r2c3, kArrowLeft);
+ assert_equals(document.activeElement, r2c2);
+
+ await focusAndKeyPress(r2c2, kArrowLeft);
+ assert_equals(document.activeElement, r2c1);
+
+ await focusAndKeyPress(r3c3, kArrowLeft);
+ assert_equals(document.activeElement, r2c2);
+
+ await focusAndKeyPress(r4c3, kArrowLeft);
+ assert_equals(document.activeElement, r2c2);
+
+ await focusAndKeyPress(r5c3, kArrowLeft);
+ assert_equals(document.activeElement, r5c2);
+ }, "A left arrow press should move to the previous column, dealing correctly with the rowspans.");
+
+ promise_test(async t => {
+ var r1c2 = document.getElementById("r1c2");
+ var r1c3 = document.getElementById("r1c3");
+ var r2c2 = document.getElementById("r2c2");
+ var r2c3 = document.getElementById("r2c3");
+ var r3c3 = document.getElementById("r3c3");
+ var r4c3 = document.getElementById("r4c3");
+ var r5c2 = document.getElementById("r5c2");
+ var r5c3 = document.getElementById("r5c3");
+
+ await focusAndKeyPress(r5c2, kArrowUp);
+ assert_equals(document.activeElement, r2c2);
+
+ await focusAndKeyPress(r5c3, kArrowUp);
+ assert_equals(document.activeElement, r4c3);
+
+ await focusAndKeyPress(r2c2, kArrowUp);
+ assert_equals(document.activeElement, r1c2);
+
+ await focusAndKeyPress(r4c3, kArrowUp);
+ assert_equals(document.activeElement, r3c3);
+
+ await focusAndKeyPress(r3c3, kArrowUp);
+ assert_equals(document.activeElement, r2c3);
+
+ await focusAndKeyPress(r2c3, kArrowUp);
+ assert_equals(document.activeElement, r1c3);
+ }, "An up arrow press should move the focus to the right cell on the previous row, dealing correctly with rowspans.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/simple-case-with-non-focusable-cell-in-the-center.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/simple-case-with-non-focusable-cell-in-the-center.html
new file mode 100644
index 0000000000..25d2900a9f
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/simple-case-with-non-focusable-cell-in-the-center.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Simple case with grid focusgroup, but with the cell R2C2 not focusable.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup=grid>
+ <tr>
+ <td id=r1c1 tabindex=0>r1c1</td>
+ <td id=r1c2 tabindex=-1>r1c2</td>
+ <td id=r1c3 tabindex=-1>r1c3</td>
+ </tr>
+ <tr>
+ <td id=r2c1 tabindex=-1>r2c1</td>
+ <td id=r2c2>r2c2</td>
+ <td id=r2c3 tabindex=-1>r2c3</td>
+ </tr>
+ <tr>
+ <td id=r3c1 tabindex=-1>r3c1</td>
+ <td id=r3c2 tabindex=-1>r3c2</td>
+ <td id=r3c3 tabindex=-1>r3c3</td>
+ </tr>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var r2c1 = document.getElementById("r2c1");
+ var r2c3 = document.getElementById("r2c3");
+
+ await focusAndKeyPress(r2c1, kArrowRight);
+ assert_equals(document.activeElement, r2c3);
+ }, "A right arrow press should move the focus to the next column, skipping the non-focusable cell.");
+
+ promise_test(async t => {
+ var r1c2 = document.getElementById("r1c2");
+ var r3c2 = document.getElementById("r3c2");
+
+ await focusAndKeyPress(r1c2, kArrowDown);
+ assert_equals(document.activeElement, r3c2);
+ }, "A down arrow press should move the focus to the next row, skipping the non-focusable cell.");
+
+ promise_test(async t => {
+ var r2c1 = document.getElementById("r2c1");
+ var r2c3 = document.getElementById("r2c3");
+
+ await focusAndKeyPress(r2c3, kArrowLeft);
+ assert_equals(document.activeElement, r2c1);
+ }, "A left arrow press should move to the previous column, skipping the non-focusable cell.");
+
+ promise_test(async t => {
+ var r1c2 = document.getElementById("r1c2");
+ var r3c2 = document.getElementById("r3c2");
+
+ await focusAndKeyPress(r3c2, kArrowUp);
+ assert_equals(document.activeElement, r1c2);
+ }, "An up arrow press should move the focus to the previous row, skipping the non-focusable cell.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/simple-case.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/simple-case.html
new file mode 100644
index 0000000000..738895ce0b
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/simple-case.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Simple case with grid focusgroup</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup=grid>
+ <tr>
+ <td id=r1c1 tabindex=0>r1c1</td>
+ <td id=r1c2 tabindex=-1>r1c2</td>
+ <td id=r1c3 tabindex=-1>r1c3</td>
+ </tr>
+ <tr>
+ <td id=r2c1 tabindex=-1>r2c1</td>
+ <td id=r2c2 tabindex=-1>r2c2</td>
+ <td id=r2c3 tabindex=-1>r2c3</td>
+ </tr>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c2 = document.getElementById("r1c2");
+
+ await focusAndKeyPress(r1c1, kArrowRight);
+ assert_equals(document.activeElement, r1c2);
+ }, "A right arrow press should move the focus to the next column.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r1c1, kArrowDown);
+ assert_equals(document.activeElement, r2c1);
+ }, "A down arrow press should move the focus to the next row.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c2 = document.getElementById("r1c2");
+
+ await focusAndKeyPress(r1c2, kArrowLeft);
+ assert_equals(document.activeElement, r1c1);
+ }, "A left arrow press should move to the previous column.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r2c1, kArrowUp);
+ assert_equals(document.activeElement, r1c1);
+ }, "An up arrow press should move the focus to the previous row.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/wraps-in-both-axes.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/wraps-in-both-axes.html
new file mode 100644
index 0000000000..809ee53645
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/wraps-in-both-axes.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Validate that wrap allows both horizontal and vertical wrapping.</title>
+<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
+<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/testdriver-actions.js"></script>
+<script src="../resources/focusgroup-utils.js"></script>
+
+<table focusgroup="grid wrap">
+ <tr>
+ <td id=r1c1 tabindex=0>r1c1</td>
+ <td id=r1c2 tabindex=-1>r1c2</td>
+ <td id=r1c3 tabindex=-1>r1c3</td>
+ </tr>
+ <tr>
+ <td id=r2c1 tabindex=-1>r2c1</td>
+ <td id=r2c2 tabindex=-1>r2c2</td>
+ <td id=r2c3 tabindex=-1>r2c3</td>
+ </tr>
+</table>
+
+<script>
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c3 = document.getElementById("r1c3");
+
+ await focusAndKeyPress(r1c3, kArrowRight);
+ assert_equals(document.activeElement, r1c1);
+ }, "When on the last column, a right arrow press should move the focus to first column if the focusgroup wraps horizontally.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r2c1, kArrowDown);
+ assert_equals(document.activeElement, r1c1);
+ }, "When on the last row, a down arrow press should move the focus to first row if the focusgroup wraps vertically.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r1c3 = document.getElementById("r1c3");
+
+ await focusAndKeyPress(r1c1, kArrowLeft);
+ assert_equals(document.activeElement, r1c3);
+ }, "When on the first column, a left arrow press should move the focus to last column if the focusgroup wraps horizontally.");
+
+ promise_test(async t => {
+ var r1c1 = document.getElementById("r1c1");
+ var r2c1 = document.getElementById("r2c1");
+
+ await focusAndKeyPress(r1c1, kArrowUp);
+ assert_equals(document.activeElement, r2c1);
+ }, "When on the first row, an up arrow press should move the focus to last row if the focusgroup wraps vertically.");
+
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/resources/focusgroup-utils.js b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/resources/focusgroup-utils.js
new file mode 100644
index 0000000000..9a1a14a301
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/resources/focusgroup-utils.js
@@ -0,0 +1,15 @@
+/*
+ Methods for testing the focusgroup feature.
+*/
+
+// https://w3c.github.io/webdriver/#keyboard-actions
+const kArrowLeft = '\uE012';
+const kArrowUp = '\uE013';
+const kArrowRight = '\uE014';
+const kArrowDown = '\uE015';
+
+// Set the focus on target and send the arrow key press event from it.
+function focusAndKeyPress(target, key) {
+ target.focus();
+ return test_driver.send_keys(target, key);
+}