diff options
Diffstat (limited to 'testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation')
32 files changed, 1047 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 |