commit 4c1e0a759db57d841255e6a20a51224685f1de33 parent 0d609490c1a324acbd1c7ec3025f88dc51a03ac1 Author: Jacques Newman <janewman@microsoft.com> Date: Thu, 9 Oct 2025 20:32:40 +0000 Bug 1992138 [wpt PR 55163] - [focusgroup] Add and require the behavior token., a=testonly Automatic update from web-platform-tests [focusgroup] Add and require the behavior token. This change implements the scoped focusgroup behavior-first requirement: With this change, a focusgroup must now start with either a behavior token or "none" (opt-out). This change only adds the parsing functionality, these behaviors are not yet used in any capacity, aria role mapping will be added in subsequent changes. Bug: 40210717 Change-Id: I9e90b778dbe5f86b6ab51e07f00a5fe7101d99d8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6968260 Commit-Queue: Jacques Newman <janewman@microsoft.com> Reviewed-by: Mason Freed <masonf@chromium.org> Auto-Submit: Jacques Newman <janewman@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1523085} -- wpt-commits: cd4c4c1405765beb732cb7ef096de7c03c1e215c wpt-pr: 55163 Diffstat:
38 files changed, 255 insertions(+), 41 deletions(-)
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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div id=root tabindex=-1 focusgroup> +<div id=root tabindex=-1 focusgroup="toolbar"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup> +<div focusgroup="toolbar"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> <div> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup=wrap> +<div focusgroup="toolbar wrap"> <span id=item1 tabindex=0>item1</span> </div> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup> +<div focusgroup="toolbar"> <span id=item1 tabindex=0>item1</span> </div> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup> +<div focusgroup="toolbar"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup> +<div focusgroup="toolbar"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> 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 @@ -10,9 +10,9 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../../resources/focusgroup-utils.js"></script> -<ul focusgroup=inline> +<ul focusgroup="toolbar inline"> <li id=item1 tabindex="-1"> - <ul focusgroup=block> + <ul focusgroup="toolbar block"> <li id=item2 tabindex="-1">item2</li> </ul> </li> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../../resources/focusgroup-utils.js"></script> -<div id=root focusgroup=block> +<div id=root focusgroup="toolbar block"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../../resources/focusgroup-utils.js"></script> -<div focusgroup="block wrap"> +<div focusgroup="toolbar block wrap"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> <span id=item3 tabindex=-1>item3</span> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../../resources/focusgroup-utils.js"></script> -<div id=root focusgroup=inline> +<div id=root focusgroup="toolbar inline"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../../resources/focusgroup-utils.js"></script> -<div focusgroup="inline wrap"> +<div focusgroup="toolbar inline wrap"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> <span id=item3 tabindex=-1>item3</span> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup> +<div focusgroup="toolbar"> <span id=item1 tabindex=0>item1</span> <span id=item2>item2</span> <!--NOT FOCUSABLE--> <span id=item3 tabindex=-1>item3</span> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup> +<div focusgroup="toolbar"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup=wrap> +<div focusgroup="toolbar wrap"> <span id=item1 tabindex=0>item1</span> <div> <span id=item2 tabindex=-1>item2</span> 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 @@ -10,12 +10,12 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup=wrap> +<div focusgroup="toolbar wrap"> <span id=item1 tabindex=0>item1</span> <div> - <div focusgroup> + <div focusgroup="toolbar"> <div id=item2 tabindex=-1> - <div focusgroup=extend> + <div focusgroup="toolbar"> <span id=item3 tabindex=-1>item3</span> <span id=item4 tabindex=-1>item4</span> </div> 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 @@ -10,10 +10,10 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup=wrap> +<div focusgroup="toolbar wrap"> <span id=item1 tabindex=0>item1</span> <div> - <div focusgroup> + <div focusgroup="toolbar"> <span id=item2 tabindex=-1>item2</span> <span id=item3 tabindex=-1>item3</span> </div> 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 @@ -10,9 +10,9 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../../resources/focusgroup-utils.js"></script> -<ul focusgroup=block> +<ul focusgroup="toolbar block"> <li id=item1 tabindex="-1"> - <ul focusgroup=inline> + <ul focusgroup="toolbar inline"> <li id=item2 tabindex="-1">item2</li> </ul> </li> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../../resources/focusgroup-utils.js"></script> -<div id=root focusgroup=inline> +<div id=root focusgroup="toolbar inline"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../../resources/focusgroup-utils.js"></script> -<div focusgroup="inline wrap"> +<div focusgroup="toolbar inline wrap"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> <span id=item3 tabindex=-1>item3</span> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../../resources/focusgroup-utils.js"></script> -<div id=root focusgroup=block> +<div id=root focusgroup="toolbar block"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../../resources/focusgroup-utils.js"></script> -<div focusgroup="block wrap"> +<div focusgroup="toolbar block wrap"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> <span id=item3 tabindex=-1>item3</span> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup=wrap> +<div focusgroup="toolbar wrap"> <div> <span id=nonitem1>nonitem1</span> <span id=nonitem2>nonitem2</span> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup=wrap> +<div focusgroup="toolbar wrap"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> <span id=item3 tabindex=-1>item3</span> diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/behavior-first-requirement.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/behavior-first-requirement.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>HTML Test: focusgroup - Behavior-first requirement validation</title> +<link rel="author" title="Microsoft" href="http://www.microsoft.com/"> +<link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/"> +<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> + +<!-- Valid behavior-first examples --> +<div id=valid1 focusgroup="toolbar"> + <span id=item1 tabindex=0>item1</span> + <span id=item2 tabindex=-1>item2</span> +</div> + +<div id=valid2 focusgroup="tablist inline"> + <span id=item3 tabindex=0>item3</span> + <span id=item4 tabindex=-1>item4</span> +</div> + +<div id=valid3 focusgroup="radiogroup wrap"> + <span id=item5 tabindex=0>item5</span> + <span id=item6 tabindex=-1>item6</span> +</div> + +<!-- Invalid behavior-first examples (should be ignored) --> +<div id=invalid1 focusgroup=""> + <span id=item7 tabindex=0>item7</span> + <span id=item8 tabindex=-1>item8</span> +</div> + +<div id=invalid2 focusgroup="inline"> + <span id=item9 tabindex=0>item9</span> + <span id=item10 tabindex=-1>item10</span> +</div> + +<div id=invalid3 focusgroup="wrap"> + <span id=item11 tabindex=0>item11</span> + <span id=item12 tabindex=-1>item12</span> +</div> + +<script> + promise_test(async t => { + // Valid behavior-first syntax should enable focusgroup navigation + var item1 = document.getElementById("item1"); + var item2 = document.getElementById("item2"); + + await focusAndKeyPress(item1, kArrowRight); + assert_equals(document.activeElement, item2, "Valid 'toolbar' behavior should enable navigation"); + }, "Valid behavior-first token 'toolbar' enables focusgroup navigation"); + + promise_test(async t => { + var item3 = document.getElementById("item3"); + var item4 = document.getElementById("item4"); + + await focusAndKeyPress(item3, kArrowRight); + assert_equals(document.activeElement, item4, "Valid 'tablist inline' behavior should enable navigation"); + }, "Valid behavior-first token 'tablist' with modifier enables focusgroup navigation"); + + promise_test(async t => { + var item5 = document.getElementById("item5"); + var item6 = document.getElementById("item6"); + + await focusAndKeyPress(item5, kArrowRight); + assert_equals(document.activeElement, item6, "Valid 'radiogroup wrap' behavior should enable navigation"); + }, "Valid behavior-first token 'radiogroup' with modifier enables focusgroup navigation"); + + promise_test(async t => { + // Invalid behavior-first syntax should NOT enable focusgroup navigation + var item7 = document.getElementById("item7"); + var item8 = document.getElementById("item8"); + + await focusAndKeyPress(item7, kArrowRight); + assert_equals(document.activeElement, item7, "Empty focusgroup attribute should not enable navigation"); + }, "Empty focusgroup attribute is rejected and does not enable navigation"); + + promise_test(async t => { + var item9 = document.getElementById("item9"); + var item10 = document.getElementById("item10"); + + await focusAndKeyPress(item9, kArrowRight); + assert_equals(document.activeElement, item9, "Invalid first token 'inline' should not enable navigation"); + }, "Invalid first token 'inline' is rejected and does not enable navigation"); + + promise_test(async t => { + var item11 = document.getElementById("item11"); + var item12 = document.getElementById("item12"); + + await focusAndKeyPress(item11, kArrowRight); + assert_equals(document.activeElement, item11, "Invalid first token 'wrap' should not enable navigation"); + }, "Invalid first token 'wrap' is rejected and does not enable navigation"); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/behavior-tokens-comprehensive.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/behavior-tokens-comprehensive.html @@ -0,0 +1,117 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>HTML Test: focusgroup - All behavior tokens parsing and basic navigation</title> +<link rel="author" title="Microsoft" href="http://www.microsoft.com/"> +<link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/"> +<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> + +<!-- Test all behavior tokens for basic navigation --> +<div id=toolbar focusgroup="toolbar"> + <span id=toolbar1 tabindex=0>toolbar1</span> + <span id=toolbar2 tabindex=-1>toolbar2</span> +</div> + +<div id=tablist focusgroup="tablist"> + <span id=tablist1 tabindex=0>tablist1</span> + <span id=tablist2 tabindex=-1>tablist2</span> +</div> + +<div id=radiogroup focusgroup="radiogroup"> + <span id=radiogroup1 tabindex=0>radiogroup1</span> + <span id=radiogroup2 tabindex=-1>radiogroup2</span> +</div> + +<div id=listbox focusgroup="listbox"> + <span id=listbox1 tabindex=0>listbox1</span> + <span id=listbox2 tabindex=-1>listbox2</span> +</div> + +<div id=menu focusgroup="menu"> + <span id=menu1 tabindex=0>menu1</span> + <span id=menu2 tabindex=-1>menu2</span> +</div> + +<div id=menubar focusgroup="menubar"> + <span id=menubar1 tabindex=0>menubar1</span> + <span id=menubar2 tabindex=-1>menubar2</span> +</div> + +<table id=grid focusgroup="grid"> + <tr> + <td id=grid1 tabindex=0>grid1</td> + <td id=grid2 tabindex=-1>grid2</td> + </tr> +</table> + +<div id=none_test focusgroup="none"> + <span id=none1 tabindex=0>none1</span> + <span id=none2 tabindex=-1>none2</span> +</div> + +<script> + const behaviorTokens = [ + 'toolbar', 'tablist', 'radiogroup', 'listbox', 'menu', 'menubar', 'grid', 'none' + ]; + + for (const behavior of behaviorTokens) { + if (behavior === 'none') { + // 'none' behavior should disable navigation + promise_test(async t => { + var item1 = document.getElementById(`${behavior}1`); + var item2 = document.getElementById(`${behavior}2`); + + await focusAndKeyPress(item1, kArrowRight); + assert_equals(document.activeElement, item1, `'${behavior}' behavior should disable navigation`); + }, `Behavior token '${behavior}' disables focusgroup navigation`); + } else { + // All other behaviors should enable navigation (linear or grid) + promise_test(async t => { + var item1 = document.getElementById(`${behavior}1`); + var item2 = document.getElementById(`${behavior}2`); + + await focusAndKeyPress(item1, kArrowRight); + assert_equals(document.activeElement, item2, `'${behavior}' behavior should enable navigation`); + }, `Behavior token '${behavior}' enables focusgroup navigation`); + } + } + + // Test behavior tokens with modifiers + promise_test(async t => { + // Create elements dynamically to test combinations + const testDiv = document.createElement('div'); + testDiv.setAttribute('focusgroup', 'toolbar inline wrap'); + testDiv.innerHTML = '<span id=combo1 tabindex=0>combo1</span><span id=combo2 tabindex=-1>combo2</span>'; + document.body.appendChild(testDiv); + + var combo1 = document.getElementById('combo1'); + var combo2 = document.getElementById('combo2'); + + await focusAndKeyPress(combo1, kArrowRight); + assert_equals(document.activeElement, combo2, "Behavior token with modifiers should work"); + + // Clean up + document.body.removeChild(testDiv); + }, "Behavior token 'toolbar' with modifiers 'inline wrap' works correctly"); + + promise_test(async t => { + // Test grid with modifiers + const testTable = document.createElement('table'); + testTable.setAttribute('focusgroup', 'grid row-wrap col-flow'); + testTable.innerHTML = '<tr><td id=gridcombo1 tabindex=0>gridcombo1</td><td id=gridcombo2 tabindex=-1>gridcombo2</td></tr>'; + document.body.appendChild(testTable); + + var gridcombo1 = document.getElementById('gridcombo1'); + var gridcombo2 = document.getElementById('gridcombo2'); + + await focusAndKeyPress(gridcombo1, kArrowRight); + assert_equals(document.activeElement, gridcombo2, "Grid behavior token with modifiers should work"); + + // Clean up + document.body.removeChild(testTable); + }, "Behavior token 'grid' with modifiers 'row-wrap col-flow' works correctly"); +</script> +\ No newline at end of file diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-on-focusgroup-root.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-on-focusgroup-root.html @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div id=root tabindex=-1 focusgroup> +<div id=root tabindex=-1 focusgroup="toolbar"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-on-non-item.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-on-non-item.html @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div tabindex=-1 focusgroup> +<div tabindex=-1 focusgroup="toolbar"> <div> <span id=nonitem1 tabindex=0>nonitem1</span> </div> diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-only-one-item-and-wraps.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-only-one-item-and-wraps.html @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup=wrap> +<div focusgroup="toolbar wrap"> <span id=item1 tabindex=0>item1</span> </div> diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-only-one-item.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-only-one-item.html @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup> +<div focusgroup="toolbar"> <span id=item1 tabindex=0>item1</span> </div> diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-outside-focusgroup.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-move-when-outside-focusgroup.html @@ -11,7 +11,7 @@ <script src="../resources/focusgroup-utils.js"></script> <span id=out tabindex=-1>out</span> -<div focusgroup> +<div focusgroup="toolbar"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-wrap-when-not-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/does-not-wrap-when-not-supported.html @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div id=root focusgroup> +<div id=root focusgroup="toolbar"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../../resources/focusgroup-utils.js"></script> -<div id=root focusgroup=block> +<div id=root focusgroup="toolbar block"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> 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 @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../../resources/focusgroup-utils.js"></script> -<div id=root focusgroup=inline> +<div id=root focusgroup="toolbar inline"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item-and-skips-non-focusable.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item-and-skips-non-focusable.html @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup> +<div focusgroup="toolbar"> <span id=item1 tabindex=0>item1</span> <span id=item2>item2</span> <!--NOT FOCUSABLE--> <span id=item3 tabindex=-1>item3</span> diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/moves-to-next-item.html @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div focusgroup> +<div focusgroup="toolbar"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/does-not-move-when-axis-not-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/does-not-move-when-axis-not-supported.html @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../../resources/focusgroup-utils.js"></script> -<div id=root focusgroup=inline> +<div id=root focusgroup="toolbar inline"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/moves-when-only-current-axis-supported.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/vertical/moves-when-only-current-axis-supported.html @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../../resources/focusgroup-utils.js"></script> -<div id=root focusgroup=block> +<div id=root focusgroup="toolbar block"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div> diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/wraps-successfully.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/forward-navigation/wraps-successfully.html @@ -10,7 +10,7 @@ <script src="/resources/testdriver-actions.js"></script> <script src="../resources/focusgroup-utils.js"></script> -<div id=root focusgroup=wrap> +<div id=root focusgroup="toolbar wrap"> <span id=item1 tabindex=0>item1</span> <span id=item2 tabindex=-1>item2</span> </div>