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