diff options
Diffstat (limited to 'testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/backward-navigation/horizontal')
8 files changed, 250 insertions, 0 deletions
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 |