0

HTML Focusgroup attribute value rename

In a recent update to the spec (see OpenUI bug
https://github.com/openui/open-ui/issues/859 and spec update at
https://open-ui.org/components/focusgroup.explainer/
the focusgroup direction have changed from physical descriptions
"horizontal" and "vertical" to logical CSS terms that imply the
direction limitations adapt to content direction: "inline" and "block".

This change (my first), is a simple rename of terms "horizontal" and
"vertical" to "inline" and "block" respectively. Other than the
attribute value parsing changes and related enums and function names,
this change does not actually [yet] consider the inline and block
direction when handling directional arrow keys from user input. That
will be saved for a future change.

Specific changes in this CL:


- `FocusgroupFlags::kHorizontal` --> `::kInline`
- `FocusgroupFlags::kVertical` --> `::kBlock`
- `FocusgroupFlags::kWrapHorizontally` --> `::kWrapInline`
- `FocusgroupFlags::kWrapVertically` --> `::kWrapBlock`
- `FocusgroupFlags::kWrapVertically` --> `::kWrapBlock`


- `FocusgroupDirection::kForwardHorizontal` --> `::kForwardInline`
- `FocusgroupDirection::kForwardVertical` --> `::kForwardBlock`
- `FocusgroupDirection::kBackwardHorizontal` --> `::kBackwardInline`
- `FocusgroupDirection::kBackwardVertical` --> `::kBackwardBlock`


- `FocusgroupControllerUtils::IsDirectionHorizontal()` ->
    `IsDirectionInline()`
- `FocusgroupControllerUtils::IsDirectionVertical()` ->
    `IsDirectionBlock()`

Web tests impacted by this change are updated (and the
corresponding spec link is also updated).

Bug: 40210717
Change-Id: Ic3c9a5dc56c0d48f8c1aa5c5cec3dc70bb1f5687
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5554766
Commit-Queue: Benjamin Beaudry <benjamin.beaudry@microsoft.com>
Reviewed-by: Benjamin Beaudry <benjamin.beaudry@microsoft.com>
Reviewed-by: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1305376}
This commit is contained in:
Travis Leithead
2024-05-23 22:51:26 +00:00
committed by Chromium LUCI CQ
parent 8969da7cca
commit e055465adb
40 changed files with 430 additions and 479 deletions
AUTHORS
third_party/blink
renderer
web_tests

@ -1418,6 +1418,7 @@ Tony Shen <legendmastertony@gmail.com>
Torsten Kurbad <google@tk-webart.de> Torsten Kurbad <google@tk-webart.de>
Toshihito Kikuchi <leamovret@gmail.com> Toshihito Kikuchi <leamovret@gmail.com>
Toshiaki Tanaka <zokutyou2@gmail.com> Toshiaki Tanaka <zokutyou2@gmail.com>
Travis Leithead <travis.leithead@gmail.com>
Trent Willis <trentmwillis@gmail.com> Trent Willis <trentmwillis@gmail.com>
Trevor Perrin <unsafe@trevp.net> Trevor Perrin <unsafe@trevp.net>
Tripta Gupta <triptagupta19@gmail.com> Tripta Gupta <triptagupta19@gmail.com>

@ -617,75 +617,75 @@ TEST_F(ElementTest, ParseFocusgroupAttrDefaultValuesWhenEmptyValue) {
FocusgroupFlags fg_flags = fg->GetFocusgroupFlags(); FocusgroupFlags fg_flags = fg->GetFocusgroupFlags();
ASSERT_NE(fg_flags, FocusgroupFlags::kNone); ASSERT_NE(fg_flags, FocusgroupFlags::kNone);
ASSERT_TRUE(fg_flags & FocusgroupFlags::kHorizontal); ASSERT_TRUE(fg_flags & FocusgroupFlags::kInline);
ASSERT_TRUE(fg_flags & FocusgroupFlags::kVertical); ASSERT_TRUE(fg_flags & FocusgroupFlags::kBlock);
ASSERT_FALSE(fg_flags & FocusgroupFlags::kExtend); ASSERT_FALSE(fg_flags & FocusgroupFlags::kExtend);
ASSERT_FALSE(fg_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg_flags & FocusgroupFlags::kWrapBlock);
} }
TEST_F(ElementTest, ParseFocusgroupAttrSupportedAxesAreValid) { TEST_F(ElementTest, ParseFocusgroupAttrSupportedAxesAreValid) {
Document& document = GetDocument(); Document& document = GetDocument();
SetBodyContent(R"HTML( SetBodyContent(R"HTML(
<div id=fg1 focusgroup=horizontal></div> <div id=fg1 focusgroup=inline></div>
<div id=fg2 focusgroup=vertical></div> <div id=fg2 focusgroup=block></div>
<div id=fg3 focusgroup> <div id=fg3 focusgroup>
<div id=fg3_a focusgroup="extend horizontal"></div> <div id=fg3_a focusgroup="extend inline"></div>
<div id=fg3_b focusgroup="extend vertical"> <div id=fg3_b focusgroup="extend block">
<div id=fg3_b_1 focusgroup=extend></div> <div id=fg3_b_1 focusgroup=extend></div>
</div> </div>
</div> </div>
)HTML"); )HTML");
// 1. Only horizontal should be supported. // 1. Only inline should be supported.
auto* fg1 = document.getElementById(AtomicString("fg1")); auto* fg1 = document.getElementById(AtomicString("fg1"));
ASSERT_TRUE(fg1); ASSERT_TRUE(fg1);
FocusgroupFlags fg1_flags = fg1->GetFocusgroupFlags(); FocusgroupFlags fg1_flags = fg1->GetFocusgroupFlags();
ASSERT_TRUE(fg1_flags & FocusgroupFlags::kHorizontal); ASSERT_TRUE(fg1_flags & FocusgroupFlags::kInline);
ASSERT_FALSE(fg1_flags & FocusgroupFlags::kVertical); ASSERT_FALSE(fg1_flags & FocusgroupFlags::kBlock);
// 2. Only vertical should be supported. // 2. Only block should be supported.
auto* fg2 = document.getElementById(AtomicString("fg2")); auto* fg2 = document.getElementById(AtomicString("fg2"));
ASSERT_TRUE(fg2); ASSERT_TRUE(fg2);
FocusgroupFlags fg2_flags = fg2->GetFocusgroupFlags(); FocusgroupFlags fg2_flags = fg2->GetFocusgroupFlags();
ASSERT_FALSE(fg2_flags & FocusgroupFlags::kHorizontal); ASSERT_FALSE(fg2_flags & FocusgroupFlags::kInline);
ASSERT_TRUE(fg2_flags & FocusgroupFlags::kVertical); ASSERT_TRUE(fg2_flags & FocusgroupFlags::kBlock);
// 3. No axis specified so both should be supported // 3. No axis specified so both should be supported
auto* fg3 = document.getElementById(AtomicString("fg3")); auto* fg3 = document.getElementById(AtomicString("fg3"));
ASSERT_TRUE(fg3); ASSERT_TRUE(fg3);
FocusgroupFlags fg3_flags = fg3->GetFocusgroupFlags(); FocusgroupFlags fg3_flags = fg3->GetFocusgroupFlags();
ASSERT_TRUE(fg3_flags & FocusgroupFlags::kHorizontal); ASSERT_TRUE(fg3_flags & FocusgroupFlags::kInline);
ASSERT_TRUE(fg3_flags & FocusgroupFlags::kVertical); ASSERT_TRUE(fg3_flags & FocusgroupFlags::kBlock);
// 4. Only support horizontal because it's specified, regardless of the // 4. Only support inline because it's specified, regardless of the
// extend. // extend.
auto* fg3_a = document.getElementById(AtomicString("fg3_a")); auto* fg3_a = document.getElementById(AtomicString("fg3_a"));
ASSERT_TRUE(fg3_a); ASSERT_TRUE(fg3_a);
FocusgroupFlags fg3_a_flags = fg3_a->GetFocusgroupFlags(); FocusgroupFlags fg3_a_flags = fg3_a->GetFocusgroupFlags();
ASSERT_TRUE(fg3_a_flags & FocusgroupFlags::kHorizontal); ASSERT_TRUE(fg3_a_flags & FocusgroupFlags::kInline);
ASSERT_FALSE(fg3_a_flags & FocusgroupFlags::kVertical); ASSERT_FALSE(fg3_a_flags & FocusgroupFlags::kBlock);
// 5. Only support vertical because it's specified, regardless of the extend. // 5. Only support block because it's specified, regardless of the extend.
auto* fg3_b = document.getElementById(AtomicString("fg3_b")); auto* fg3_b = document.getElementById(AtomicString("fg3_b"));
ASSERT_TRUE(fg3_b); ASSERT_TRUE(fg3_b);
FocusgroupFlags fg3_b_flags = fg3_b->GetFocusgroupFlags(); FocusgroupFlags fg3_b_flags = fg3_b->GetFocusgroupFlags();
ASSERT_FALSE(fg3_b_flags & FocusgroupFlags::kHorizontal); ASSERT_FALSE(fg3_b_flags & FocusgroupFlags::kInline);
ASSERT_TRUE(fg3_b_flags & FocusgroupFlags::kVertical); ASSERT_TRUE(fg3_b_flags & FocusgroupFlags::kBlock);
// 6. Extends a focusgroup that only supports vertical axis, but should // 6. Extends a focusgroup that only supports block axis, but should
// support both axes regardless. // support both axes regardless.
auto* fg3_b_1 = document.getElementById(AtomicString("fg3_b_1")); auto* fg3_b_1 = document.getElementById(AtomicString("fg3_b_1"));
ASSERT_TRUE(fg3_b_1); ASSERT_TRUE(fg3_b_1);
FocusgroupFlags fg3_b_1_flags = fg3_b_1->GetFocusgroupFlags(); FocusgroupFlags fg3_b_1_flags = fg3_b_1->GetFocusgroupFlags();
ASSERT_TRUE(fg3_b_1_flags & FocusgroupFlags::kHorizontal); ASSERT_TRUE(fg3_b_1_flags & FocusgroupFlags::kInline);
ASSERT_TRUE(fg3_b_1_flags & FocusgroupFlags::kVertical); ASSERT_TRUE(fg3_b_1_flags & FocusgroupFlags::kBlock);
} }
TEST_F(ElementTest, ParseFocusgroupAttrExtendCorrectly) { TEST_F(ElementTest, ParseFocusgroupAttrExtendCorrectly) {
@ -770,9 +770,9 @@ TEST_F(ElementTest, ParseFocusgroupAttrWrapCorrectly) {
SetBodyContent(R"HTML( SetBodyContent(R"HTML(
<div id=fg1 focusgroup=wrap> <div id=fg1 focusgroup=wrap>
<div id=fg2 focusgroup=extend> <div id=fg2 focusgroup=extend>
<div id=fg3 focusgroup="extend horizontal"></div> <div id=fg3 focusgroup="extend inline"></div>
<div id=fg4 focusgroup="extend vertical"> <div id=fg4 focusgroup="extend block">
<div id=fg5 focusgroup="extend horizontal"></div> <div id=fg5 focusgroup="extend inline"></div>
</div> </div>
</div> </div>
</div> </div>
@ -785,8 +785,8 @@ TEST_F(ElementTest, ParseFocusgroupAttrWrapCorrectly) {
FocusgroupFlags fg1_flags = fg1->GetFocusgroupFlags(); FocusgroupFlags fg1_flags = fg1->GetFocusgroupFlags();
ASSERT_NE(fg1_flags, FocusgroupFlags::kNone); ASSERT_NE(fg1_flags, FocusgroupFlags::kNone);
ASSERT_TRUE(fg1_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_TRUE(fg1_flags & FocusgroupFlags::kWrapInline);
ASSERT_TRUE(fg1_flags & FocusgroupFlags::kWrapVertically); ASSERT_TRUE(fg1_flags & FocusgroupFlags::kWrapBlock);
// 2. When a focusgroup extends another one, it should inherit its wrap // 2. When a focusgroup extends another one, it should inherit its wrap
// properties in all supported axes. // properties in all supported axes.
@ -795,28 +795,28 @@ TEST_F(ElementTest, ParseFocusgroupAttrWrapCorrectly) {
FocusgroupFlags fg2_flags = fg2->GetFocusgroupFlags(); FocusgroupFlags fg2_flags = fg2->GetFocusgroupFlags();
ASSERT_NE(fg2_flags, FocusgroupFlags::kNone); ASSERT_NE(fg2_flags, FocusgroupFlags::kNone);
ASSERT_TRUE(fg2_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_TRUE(fg2_flags & FocusgroupFlags::kWrapInline);
ASSERT_TRUE(fg2_flags & FocusgroupFlags::kWrapVertically); ASSERT_TRUE(fg2_flags & FocusgroupFlags::kWrapBlock);
// 3. The ancestor focusgroup's wrap properties should only be inherited in // 3. The ancestor focusgroup's wrap properties should only be inherited in
// the horizontal axis. // the inline axis.
auto* fg3 = document.getElementById(AtomicString("fg3")); auto* fg3 = document.getElementById(AtomicString("fg3"));
ASSERT_TRUE(fg3); ASSERT_TRUE(fg3);
FocusgroupFlags fg3_flags = fg3->GetFocusgroupFlags(); FocusgroupFlags fg3_flags = fg3->GetFocusgroupFlags();
ASSERT_NE(fg3_flags, FocusgroupFlags::kNone); ASSERT_NE(fg3_flags, FocusgroupFlags::kNone);
ASSERT_TRUE(fg3_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_TRUE(fg3_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg3_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg3_flags & FocusgroupFlags::kWrapBlock);
// 4. The ancestor focusgroup's wrap properties should only be inherited in // 4. The ancestor focusgroup's wrap properties should only be inherited in
// the vertical axis. // the block axis.
auto* fg4 = document.getElementById(AtomicString("fg4")); auto* fg4 = document.getElementById(AtomicString("fg4"));
ASSERT_TRUE(fg4); ASSERT_TRUE(fg4);
FocusgroupFlags fg4_flags = fg4->GetFocusgroupFlags(); FocusgroupFlags fg4_flags = fg4->GetFocusgroupFlags();
ASSERT_NE(fg4_flags, FocusgroupFlags::kNone); ASSERT_NE(fg4_flags, FocusgroupFlags::kNone);
ASSERT_FALSE(fg4_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg4_flags & FocusgroupFlags::kWrapInline);
ASSERT_TRUE(fg4_flags & FocusgroupFlags::kWrapVertically); ASSERT_TRUE(fg4_flags & FocusgroupFlags::kWrapBlock);
// 5. The ancestor focusgroup's wrap properties shouldn't be inherited since // 5. The ancestor focusgroup's wrap properties shouldn't be inherited since
// the two focusgroups have no axis in common. // the two focusgroups have no axis in common.
@ -825,26 +825,26 @@ TEST_F(ElementTest, ParseFocusgroupAttrWrapCorrectly) {
FocusgroupFlags fg5_flags = fg5->GetFocusgroupFlags(); FocusgroupFlags fg5_flags = fg5->GetFocusgroupFlags();
ASSERT_NE(fg5_flags, FocusgroupFlags::kNone); ASSERT_NE(fg5_flags, FocusgroupFlags::kNone);
ASSERT_FALSE(fg5_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg5_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg5_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg5_flags & FocusgroupFlags::kWrapBlock);
} }
TEST_F(ElementTest, ParseFocusgroupAttrDoesntWrapInExtendingFocusgroupOnly) { TEST_F(ElementTest, ParseFocusgroupAttrDoesntWrapInExtendingFocusgroupOnly) {
Document& document = GetDocument(); Document& document = GetDocument();
SetBodyContent(R"HTML( SetBodyContent(R"HTML(
<div id=fg1 focusgroup> <div id=fg1 focusgroup>
<div id=fg2 focusgroup="extend horizontal wrap"></div> <div id=fg2 focusgroup="extend inline wrap"></div>
<div id=fg3 focusgroup="extend vertical wrap"></div> <div id=fg3 focusgroup="extend block wrap"></div>
<div id=fg4 focusgroup="extend wrap"></div> <div id=fg4 focusgroup="extend wrap"></div>
</div> </div>
<div id=fg5 focusgroup=horizontal> <div id=fg5 focusgroup=inline>
<div id=fg6 focusgroup="extend horizontal wrap"></div> <div id=fg6 focusgroup="extend inline wrap"></div>
<div id=fg7 focusgroup="extend vertical wrap"></div> <div id=fg7 focusgroup="extend block wrap"></div>
<div id=fg8 focusgroup="extend wrap"></div> <div id=fg8 focusgroup="extend wrap"></div>
</div> </div>
<div id=fg9 focusgroup=vertical> <div id=fg9 focusgroup=block>
<div id=fg10 focusgroup="extend horizontal wrap"></div> <div id=fg10 focusgroup="extend inline wrap"></div>
<div id=fg11 focusgroup="extend vertical wrap"></div> <div id=fg11 focusgroup="extend block wrap"></div>
<div id=fg12 focusgroup="extend wrap"></div> <div id=fg12 focusgroup="extend wrap"></div>
</div> </div>
)HTML"); )HTML");
@ -876,63 +876,63 @@ TEST_F(ElementTest, ParseFocusgroupAttrDoesntWrapInExtendingFocusgroupOnly) {
FocusgroupFlags fg1_flags = fg1->GetFocusgroupFlags(); FocusgroupFlags fg1_flags = fg1->GetFocusgroupFlags();
ASSERT_NE(fg1_flags, FocusgroupFlags::kNone); ASSERT_NE(fg1_flags, FocusgroupFlags::kNone);
ASSERT_FALSE(fg1_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg1_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg1_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg1_flags & FocusgroupFlags::kWrapBlock);
FocusgroupFlags fg2_flags = fg2->GetFocusgroupFlags(); FocusgroupFlags fg2_flags = fg2->GetFocusgroupFlags();
ASSERT_NE(fg2_flags, FocusgroupFlags::kNone); ASSERT_NE(fg2_flags, FocusgroupFlags::kNone);
ASSERT_FALSE(fg2_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg2_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg2_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg2_flags & FocusgroupFlags::kWrapBlock);
FocusgroupFlags fg3_flags = fg3->GetFocusgroupFlags(); FocusgroupFlags fg3_flags = fg3->GetFocusgroupFlags();
ASSERT_NE(fg3_flags, FocusgroupFlags::kNone); ASSERT_NE(fg3_flags, FocusgroupFlags::kNone);
ASSERT_FALSE(fg3_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg3_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg3_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg3_flags & FocusgroupFlags::kWrapBlock);
FocusgroupFlags fg4_flags = fg4->GetFocusgroupFlags(); FocusgroupFlags fg4_flags = fg4->GetFocusgroupFlags();
ASSERT_NE(fg4_flags, FocusgroupFlags::kNone); ASSERT_NE(fg4_flags, FocusgroupFlags::kNone);
ASSERT_FALSE(fg4_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg4_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg4_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg4_flags & FocusgroupFlags::kWrapBlock);
FocusgroupFlags fg5_flags = fg5->GetFocusgroupFlags(); FocusgroupFlags fg5_flags = fg5->GetFocusgroupFlags();
ASSERT_NE(fg5_flags, FocusgroupFlags::kNone); ASSERT_NE(fg5_flags, FocusgroupFlags::kNone);
ASSERT_FALSE(fg5_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg5_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg5_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg5_flags & FocusgroupFlags::kWrapBlock);
FocusgroupFlags fg6_flags = fg6->GetFocusgroupFlags(); FocusgroupFlags fg6_flags = fg6->GetFocusgroupFlags();
ASSERT_NE(fg6_flags, FocusgroupFlags::kNone); ASSERT_NE(fg6_flags, FocusgroupFlags::kNone);
ASSERT_FALSE(fg6_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg6_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg6_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg6_flags & FocusgroupFlags::kWrapBlock);
FocusgroupFlags fg7_flags = fg7->GetFocusgroupFlags(); FocusgroupFlags fg7_flags = fg7->GetFocusgroupFlags();
ASSERT_NE(fg7_flags, FocusgroupFlags::kNone); ASSERT_NE(fg7_flags, FocusgroupFlags::kNone);
ASSERT_FALSE(fg7_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg7_flags & FocusgroupFlags::kWrapInline);
ASSERT_TRUE(fg7_flags & FocusgroupFlags::kWrapVertically); ASSERT_TRUE(fg7_flags & FocusgroupFlags::kWrapBlock);
FocusgroupFlags fg8_flags = fg8->GetFocusgroupFlags(); FocusgroupFlags fg8_flags = fg8->GetFocusgroupFlags();
ASSERT_NE(fg8_flags, FocusgroupFlags::kNone); ASSERT_NE(fg8_flags, FocusgroupFlags::kNone);
ASSERT_FALSE(fg8_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg8_flags & FocusgroupFlags::kWrapInline);
ASSERT_TRUE(fg8_flags & FocusgroupFlags::kWrapVertically); ASSERT_TRUE(fg8_flags & FocusgroupFlags::kWrapBlock);
FocusgroupFlags fg9_flags = fg9->GetFocusgroupFlags(); FocusgroupFlags fg9_flags = fg9->GetFocusgroupFlags();
ASSERT_NE(fg9_flags, FocusgroupFlags::kNone); ASSERT_NE(fg9_flags, FocusgroupFlags::kNone);
ASSERT_FALSE(fg9_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg9_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg9_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg9_flags & FocusgroupFlags::kWrapBlock);
FocusgroupFlags fg10_flags = fg10->GetFocusgroupFlags(); FocusgroupFlags fg10_flags = fg10->GetFocusgroupFlags();
ASSERT_NE(fg10_flags, FocusgroupFlags::kNone); ASSERT_NE(fg10_flags, FocusgroupFlags::kNone);
ASSERT_TRUE(fg10_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_TRUE(fg10_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg10_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg10_flags & FocusgroupFlags::kWrapBlock);
FocusgroupFlags fg11_flags = fg11->GetFocusgroupFlags(); FocusgroupFlags fg11_flags = fg11->GetFocusgroupFlags();
ASSERT_NE(fg11_flags, FocusgroupFlags::kNone); ASSERT_NE(fg11_flags, FocusgroupFlags::kNone);
ASSERT_FALSE(fg11_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg11_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg11_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg11_flags & FocusgroupFlags::kWrapBlock);
FocusgroupFlags fg12_flags = fg12->GetFocusgroupFlags(); FocusgroupFlags fg12_flags = fg12->GetFocusgroupFlags();
ASSERT_NE(fg12_flags, FocusgroupFlags::kNone); ASSERT_NE(fg12_flags, FocusgroupFlags::kNone);
ASSERT_TRUE(fg12_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_TRUE(fg12_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg12_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg12_flags & FocusgroupFlags::kWrapBlock);
} }
TEST_F(ElementTest, ParseFocusgroupAttrGrid) { TEST_F(ElementTest, ParseFocusgroupAttrGrid) {
@ -1011,35 +1011,26 @@ TEST_F(ElementTest, ParseFocusgroupAttrGrid) {
ASSERT_EQ(e1_flags, FocusgroupFlags::kGrid); ASSERT_EQ(e1_flags, FocusgroupFlags::kGrid);
ASSERT_EQ(e2_flags, FocusgroupFlags::kGrid); ASSERT_EQ(e2_flags, FocusgroupFlags::kGrid);
ASSERT_EQ(e3_flags, ASSERT_EQ(e3_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kWrapInline |
(FocusgroupFlags::kGrid | FocusgroupFlags::kWrapHorizontally | FocusgroupFlags::kWrapBlock));
FocusgroupFlags::kWrapVertically)); ASSERT_EQ(e4_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kWrapInline));
ASSERT_EQ(e4_flags, ASSERT_EQ(e5_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kWrapBlock));
(FocusgroupFlags::kGrid | FocusgroupFlags::kWrapHorizontally)); ASSERT_EQ(e6_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kWrapInline |
ASSERT_EQ(e5_flags, FocusgroupFlags::kWrapBlock));
(FocusgroupFlags::kGrid | FocusgroupFlags::kWrapVertically));
ASSERT_EQ(e6_flags,
(FocusgroupFlags::kGrid | FocusgroupFlags::kWrapHorizontally |
FocusgroupFlags::kWrapVertically));
ASSERT_EQ(e7_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kRowFlow | ASSERT_EQ(e7_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kRowFlow |
FocusgroupFlags::kColFlow)); FocusgroupFlags::kColFlow));
ASSERT_EQ(e8_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kRowFlow)); ASSERT_EQ(e8_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kRowFlow));
ASSERT_EQ(e9_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kColFlow)); ASSERT_EQ(e9_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kColFlow));
ASSERT_EQ(e10_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kRowFlow | ASSERT_EQ(e10_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kRowFlow |
FocusgroupFlags::kColFlow)); FocusgroupFlags::kColFlow));
ASSERT_EQ(e11_flags, ASSERT_EQ(e11_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kWrapInline));
(FocusgroupFlags::kGrid | FocusgroupFlags::kWrapHorizontally)); ASSERT_EQ(e12_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kWrapInline |
ASSERT_EQ(e12_flags, FocusgroupFlags::kColFlow));
(FocusgroupFlags::kGrid | FocusgroupFlags::kWrapHorizontally | ASSERT_EQ(e13_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kWrapBlock));
FocusgroupFlags::kColFlow)); ASSERT_EQ(e14_flags, (FocusgroupFlags::kGrid | FocusgroupFlags::kWrapBlock |
ASSERT_EQ(e13_flags, FocusgroupFlags::kRowFlow));
(FocusgroupFlags::kGrid | FocusgroupFlags::kWrapVertically));
ASSERT_EQ(e14_flags,
(FocusgroupFlags::kGrid | FocusgroupFlags::kWrapVertically |
FocusgroupFlags::kRowFlow));
ASSERT_EQ(e15_flags, FocusgroupFlags::kNone); ASSERT_EQ(e15_flags, FocusgroupFlags::kNone);
ASSERT_EQ(e16_flags, ASSERT_EQ(e16_flags, (FocusgroupFlags::kInline | FocusgroupFlags::kBlock));
(FocusgroupFlags::kHorizontal | FocusgroupFlags::kVertical));
} }
TEST_F(ElementTest, ParseFocusgroupAttrValueRecomputedAfterDOMStructureChange) { TEST_F(ElementTest, ParseFocusgroupAttrValueRecomputedAfterDOMStructureChange) {
@ -1063,8 +1054,8 @@ TEST_F(ElementTest, ParseFocusgroupAttrValueRecomputedAfterDOMStructureChange) {
FocusgroupFlags fg2_flags = fg2->GetFocusgroupFlags(); FocusgroupFlags fg2_flags = fg2->GetFocusgroupFlags();
ASSERT_NE(fg2_flags, FocusgroupFlags::kNone); ASSERT_NE(fg2_flags, FocusgroupFlags::kNone);
ASSERT_TRUE(fg2_flags & FocusgroupFlags::kExtend); ASSERT_TRUE(fg2_flags & FocusgroupFlags::kExtend);
ASSERT_TRUE(fg2_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_TRUE(fg2_flags & FocusgroupFlags::kWrapInline);
ASSERT_TRUE(fg2_flags & FocusgroupFlags::kWrapVertically); ASSERT_TRUE(fg2_flags & FocusgroupFlags::kWrapBlock);
auto* fg3 = document.getElementById(AtomicString("fg3")); auto* fg3 = document.getElementById(AtomicString("fg3"));
ASSERT_TRUE(fg3); ASSERT_TRUE(fg3);
@ -1072,8 +1063,8 @@ TEST_F(ElementTest, ParseFocusgroupAttrValueRecomputedAfterDOMStructureChange) {
FocusgroupFlags fg3_flags = fg3->GetFocusgroupFlags(); FocusgroupFlags fg3_flags = fg3->GetFocusgroupFlags();
ASSERT_NE(fg3_flags, FocusgroupFlags::kNone); ASSERT_NE(fg3_flags, FocusgroupFlags::kNone);
ASSERT_TRUE(fg3_flags & FocusgroupFlags::kExtend); ASSERT_TRUE(fg3_flags & FocusgroupFlags::kExtend);
ASSERT_TRUE(fg3_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_TRUE(fg3_flags & FocusgroupFlags::kWrapInline);
ASSERT_TRUE(fg3_flags & FocusgroupFlags::kWrapVertically); ASSERT_TRUE(fg3_flags & FocusgroupFlags::kWrapBlock);
// 2. Move |fg2| from |fg1| to |not-fg|. // 2. Move |fg2| from |fg1| to |not-fg|.
auto* not_fg = document.getElementById(AtomicString("not-fg")); auto* not_fg = document.getElementById(AtomicString("not-fg"));
@ -1086,14 +1077,14 @@ TEST_F(ElementTest, ParseFocusgroupAttrValueRecomputedAfterDOMStructureChange) {
fg2_flags = fg2->GetFocusgroupFlags(); fg2_flags = fg2->GetFocusgroupFlags();
ASSERT_NE(fg2_flags, FocusgroupFlags::kNone); ASSERT_NE(fg2_flags, FocusgroupFlags::kNone);
ASSERT_FALSE(fg2_flags & FocusgroupFlags::kExtend); ASSERT_FALSE(fg2_flags & FocusgroupFlags::kExtend);
ASSERT_FALSE(fg2_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg2_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg2_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg2_flags & FocusgroupFlags::kWrapBlock);
fg3_flags = fg3->GetFocusgroupFlags(); fg3_flags = fg3->GetFocusgroupFlags();
ASSERT_NE(fg3_flags, FocusgroupFlags::kNone); ASSERT_NE(fg3_flags, FocusgroupFlags::kNone);
ASSERT_TRUE(fg3_flags & FocusgroupFlags::kExtend); ASSERT_TRUE(fg3_flags & FocusgroupFlags::kExtend);
ASSERT_FALSE(fg3_flags & FocusgroupFlags::kWrapHorizontally); ASSERT_FALSE(fg3_flags & FocusgroupFlags::kWrapInline);
ASSERT_FALSE(fg3_flags & FocusgroupFlags::kWrapVertically); ASSERT_FALSE(fg3_flags & FocusgroupFlags::kWrapBlock);
} }
TEST_F(ElementTest, ParseFocusgroupAttrValueClearedAfterNodeRemoved) { TEST_F(ElementTest, ParseFocusgroupAttrValueClearedAfterNodeRemoved) {

@ -42,8 +42,8 @@ FocusgroupFlags ParseFocusgroup(const Element* element,
// 1. Parse the input. // 1. Parse the input.
bool has_extend = false; bool has_extend = false;
bool has_horizontal = false; bool has_inline = false;
bool has_vertical = false; bool has_block = false;
bool has_grid = false; bool has_grid = false;
bool has_wrap = false; bool has_wrap = false;
bool has_row_wrap = false; bool has_row_wrap = false;
@ -58,10 +58,10 @@ FocusgroupFlags ParseFocusgroup(const Element* element,
AtomicString lowercase_token = tokens[i].LowerASCII(); AtomicString lowercase_token = tokens[i].LowerASCII();
if (lowercase_token == "extend") { if (lowercase_token == "extend") {
has_extend = true; has_extend = true;
} else if (lowercase_token == "horizontal") { } else if (lowercase_token == "inline") {
has_horizontal = true; has_inline = true;
} else if (lowercase_token == "vertical") { } else if (lowercase_token == "block") {
has_vertical = true; has_block = true;
} else if (lowercase_token == "grid") { } else if (lowercase_token == "grid") {
has_grid = true; has_grid = true;
} else if (lowercase_token == "wrap") { } else if (lowercase_token == "wrap") {
@ -148,8 +148,7 @@ FocusgroupFlags ParseFocusgroup(const Element* element,
// Set the wrap/flow flags, if specified. // Set the wrap/flow flags, if specified.
if (has_wrap) { if (has_wrap) {
flags |= flags |= FocusgroupFlags::kWrapInline | FocusgroupFlags::kWrapBlock;
FocusgroupFlags::kWrapHorizontally | FocusgroupFlags::kWrapVertically;
if (has_row_wrap) { if (has_row_wrap) {
element->GetDocument().AddConsoleMessage( element->GetDocument().AddConsoleMessage(
MakeGarbageCollected<ConsoleMessage>( MakeGarbageCollected<ConsoleMessage>(
@ -170,9 +169,9 @@ FocusgroupFlags ParseFocusgroup(const Element* element,
} }
} else { } else {
if (has_row_wrap) if (has_row_wrap)
flags |= FocusgroupFlags::kWrapHorizontally; flags |= FocusgroupFlags::kWrapInline;
if (has_col_wrap) if (has_col_wrap)
flags |= FocusgroupFlags::kWrapVertically; flags |= FocusgroupFlags::kWrapBlock;
if (has_row_wrap && has_col_wrap) { if (has_row_wrap && has_col_wrap) {
element->GetDocument().AddConsoleMessage( element->GetDocument().AddConsoleMessage(
@ -186,8 +185,8 @@ FocusgroupFlags ParseFocusgroup(const Element* element,
} }
if (has_flow) { if (has_flow) {
if (flags & FocusgroupFlags::kWrapHorizontally || if (flags & FocusgroupFlags::kWrapInline ||
flags & FocusgroupFlags::kWrapVertically) { flags & FocusgroupFlags::kWrapBlock) {
element->GetDocument().AddConsoleMessage(MakeGarbageCollected< element->GetDocument().AddConsoleMessage(MakeGarbageCollected<
ConsoleMessage>( ConsoleMessage>(
mojom::blink::ConsoleMessageSource::kOther, mojom::blink::ConsoleMessageSource::kOther,
@ -218,7 +217,7 @@ FocusgroupFlags ParseFocusgroup(const Element* element,
} }
} else { } else {
if (has_row_flow) { if (has_row_flow) {
if (flags & FocusgroupFlags::kWrapHorizontally) { if (flags & FocusgroupFlags::kWrapInline) {
element->GetDocument().AddConsoleMessage( element->GetDocument().AddConsoleMessage(
MakeGarbageCollected<ConsoleMessage>( MakeGarbageCollected<ConsoleMessage>(
mojom::blink::ConsoleMessageSource::kOther, mojom::blink::ConsoleMessageSource::kOther,
@ -231,7 +230,7 @@ FocusgroupFlags ParseFocusgroup(const Element* element,
} }
} }
if (has_col_flow) { if (has_col_flow) {
if (flags & FocusgroupFlags::kWrapVertically) { if (flags & FocusgroupFlags::kWrapBlock) {
element->GetDocument().AddConsoleMessage( element->GetDocument().AddConsoleMessage(
MakeGarbageCollected<ConsoleMessage>( MakeGarbageCollected<ConsoleMessage>(
mojom::blink::ConsoleMessageSource::kOther, mojom::blink::ConsoleMessageSource::kOther,
@ -256,22 +255,22 @@ FocusgroupFlags ParseFocusgroup(const Element* element,
} }
// These values are reserved for linear focusgroups. // These values are reserved for linear focusgroups.
if (has_horizontal) { if (has_inline) {
element->GetDocument().AddConsoleMessage( element->GetDocument().AddConsoleMessage(
MakeGarbageCollected<ConsoleMessage>( MakeGarbageCollected<ConsoleMessage>(
mojom::blink::ConsoleMessageSource::kOther, mojom::blink::ConsoleMessageSource::kOther,
mojom::blink::ConsoleMessageLevel::kError, mojom::blink::ConsoleMessageLevel::kError,
WebString::FromUTF8( WebString::FromUTF8(
"Focusgroup attribute value 'horizontal' present, " "Focusgroup attribute value 'inline' present, "
"but no has no effect on grid focusgroups."))); "but no has no effect on grid focusgroups.")));
} }
if (has_vertical) { if (has_block) {
element->GetDocument().AddConsoleMessage( element->GetDocument().AddConsoleMessage(
MakeGarbageCollected<ConsoleMessage>( MakeGarbageCollected<ConsoleMessage>(
mojom::blink::ConsoleMessageSource::kOther, mojom::blink::ConsoleMessageSource::kOther,
mojom::blink::ConsoleMessageLevel::kError, mojom::blink::ConsoleMessageLevel::kError,
WebString::FromUTF8( WebString::FromUTF8(
"Focusgroup attribute value 'vertical' present, " "Focusgroup attribute value 'block' present, "
"but no has no effect on grid focusgroups."))); "but no has no effect on grid focusgroups.")));
} }
@ -328,23 +327,26 @@ FocusgroupFlags ParseFocusgroup(const Element* element,
} }
// 4. Set the axis supported on that focusgroup. // 4. Set the axis supported on that focusgroup.
if (has_horizontal) if (has_inline) {
flags |= FocusgroupFlags::kHorizontal; flags |= FocusgroupFlags::kInline;
if (has_vertical) }
flags |= FocusgroupFlags::kVertical; if (has_block) {
flags |= FocusgroupFlags::kBlock;
}
// When no axis is specified, it means that the focusgroup should handle // When no axis is specified, it means that the focusgroup should handle
// both. // both.
if (!has_horizontal && !has_vertical) if (!has_inline && !has_block) {
flags |= FocusgroupFlags::kHorizontal | FocusgroupFlags::kVertical; flags |= FocusgroupFlags::kInline | FocusgroupFlags::kBlock;
}
if (has_horizontal && has_vertical) { if (has_inline && has_block) {
element->GetDocument().AddConsoleMessage( element->GetDocument().AddConsoleMessage(
MakeGarbageCollected<ConsoleMessage>( MakeGarbageCollected<ConsoleMessage>(
mojom::blink::ConsoleMessageSource::kOther, mojom::blink::ConsoleMessageSource::kOther,
mojom::blink::ConsoleMessageLevel::kWarning, mojom::blink::ConsoleMessageLevel::kWarning,
WebString::FromUTF8( WebString::FromUTF8(
"'horizontal' and 'vertical' focusgroup attribute values used " "'inline' and 'block' focusgroup attribute values used "
"together are redundant (this is the default behavior) and can " "together are redundant (this is the default behavior) and can "
"be omitted."))); "be omitted.")));
} }
@ -353,18 +355,18 @@ FocusgroupFlags ParseFocusgroup(const Element* element,
// performed once the supported axes are final. // performed once the supported axes are final.
if (has_wrap) { if (has_wrap) {
if (flags & FocusgroupFlags::kExtend) { if (flags & FocusgroupFlags::kExtend) {
bool extends_horizontally = flags & FocusgroupFlags::kHorizontal && bool extends_inline = flags & FocusgroupFlags::kInline &&
ancestor_flags & FocusgroupFlags::kHorizontal; ancestor_flags & FocusgroupFlags::kInline;
if (!extends_horizontally && flags & FocusgroupFlags::kHorizontal) { if (!extends_inline && flags & FocusgroupFlags::kInline) {
flags |= FocusgroupFlags::kWrapHorizontally; flags |= FocusgroupFlags::kWrapInline;
} }
bool extends_vertically = flags & FocusgroupFlags::kVertical && bool extends_block = flags & FocusgroupFlags::kBlock &&
ancestor_flags & FocusgroupFlags::kVertical; ancestor_flags & FocusgroupFlags::kBlock;
if (!extends_vertically && flags & FocusgroupFlags::kVertical) { if (!extends_block && flags & FocusgroupFlags::kBlock) {
flags |= FocusgroupFlags::kWrapVertically; flags |= FocusgroupFlags::kWrapBlock;
} }
if (extends_horizontally && extends_vertically) { if (extends_inline && extends_block) {
element->GetDocument().AddConsoleMessage(MakeGarbageCollected< element->GetDocument().AddConsoleMessage(MakeGarbageCollected<
ConsoleMessage>( ConsoleMessage>(
mojom::blink::ConsoleMessageSource::kOther, mojom::blink::ConsoleMessageSource::kOther,
@ -375,10 +377,12 @@ FocusgroupFlags ParseFocusgroup(const Element* element,
"one in both axes."))); "one in both axes.")));
} }
} else { } else {
if (flags & FocusgroupFlags::kHorizontal) if (flags & FocusgroupFlags::kInline) {
flags |= FocusgroupFlags::kWrapHorizontally; flags |= FocusgroupFlags::kWrapInline;
if (flags & FocusgroupFlags::kVertical) }
flags |= FocusgroupFlags::kWrapVertically; if (flags & FocusgroupFlags::kBlock) {
flags |= FocusgroupFlags::kWrapBlock;
}
} }
} }
@ -386,10 +390,10 @@ FocusgroupFlags ParseFocusgroup(const Element* element,
// for the descendant's supported axes. // for the descendant's supported axes.
if (flags & FocusgroupFlags::kExtend) { if (flags & FocusgroupFlags::kExtend) {
DCHECK(ancestor_flags != FocusgroupFlags::kNone); DCHECK(ancestor_flags != FocusgroupFlags::kNone);
if ((flags & FocusgroupFlags::kWrapHorizontally) == if ((flags & FocusgroupFlags::kWrapInline) ==
(ancestor_flags & FocusgroupFlags::kWrapHorizontally) && (ancestor_flags & FocusgroupFlags::kWrapInline) &&
(flags & FocusgroupFlags::kWrapVertically) == (flags & FocusgroupFlags::kWrapBlock) ==
(ancestor_flags & FocusgroupFlags::kWrapVertically)) { (ancestor_flags & FocusgroupFlags::kWrapBlock)) {
element->GetDocument().AddConsoleMessage(MakeGarbageCollected< element->GetDocument().AddConsoleMessage(MakeGarbageCollected<
ConsoleMessage>( ConsoleMessage>(
mojom::blink::ConsoleMessageSource::kOther, mojom::blink::ConsoleMessageSource::kOther,
@ -398,10 +402,12 @@ FocusgroupFlags ParseFocusgroup(const Element* element,
"Focusgroup attribute value 'wrap' present but ignored. 'wrap' " "Focusgroup attribute value 'wrap' present but ignored. 'wrap' "
"is inherited from the extended parent focusgroup."))); "is inherited from the extended parent focusgroup.")));
} }
if (flags & FocusgroupFlags::kHorizontal) if (flags & FocusgroupFlags::kInline) {
flags |= (ancestor_flags & FocusgroupFlags::kWrapHorizontally); flags |= (ancestor_flags & FocusgroupFlags::kWrapInline);
if (flags & FocusgroupFlags::kVertical) }
flags |= (ancestor_flags & FocusgroupFlags::kWrapVertically); if (flags & FocusgroupFlags::kBlock) {
flags |= (ancestor_flags & FocusgroupFlags::kWrapBlock);
}
} }
return flags; return flags;

@ -17,11 +17,11 @@ namespace focusgroup {
enum FocusgroupFlags : uint8_t { enum FocusgroupFlags : uint8_t {
kNone = 0, kNone = 0,
kExtend = 1 << 0, kExtend = 1 << 0,
kHorizontal = 1 << 1, kInline = 1 << 1,
kVertical = 1 << 2, kBlock = 1 << 2,
kGrid = 1 << 3, kGrid = 1 << 3,
kWrapHorizontally = 1 << 4, kWrapInline = 1 << 4,
kWrapVertically = 1 << 5, kWrapBlock = 1 << 5,
kRowFlow = 1 << 6, kRowFlow = 1 << 6,
kColFlow = 1 << 7, kColFlow = 1 << 7,
}; };

@ -452,16 +452,16 @@ bool FocusgroupController::AdvanceInGrid(Element* initial_element,
// 1. Move to the next cell in the appropriate |direction|. // 1. Move to the next cell in the appropriate |direction|.
Element* previous = current; Element* previous = current;
switch (direction) { switch (direction) {
case FocusgroupDirection::kBackwardHorizontal: case FocusgroupDirection::kBackwardInline:
current = helper->PreviousCellInRow(current); current = helper->PreviousCellInRow(current);
break; break;
case FocusgroupDirection::kForwardHorizontal: case FocusgroupDirection::kForwardInline:
current = helper->NextCellInRow(current); current = helper->NextCellInRow(current);
break; break;
case FocusgroupDirection::kBackwardVertical: case FocusgroupDirection::kBackwardBlock:
current = helper->PreviousCellInColumn(current); current = helper->PreviousCellInColumn(current);
break; break;
case FocusgroupDirection::kForwardVertical: case FocusgroupDirection::kForwardBlock:
current = helper->NextCellInColumn(current); current = helper->NextCellInColumn(current);
break; break;
default: default:
@ -506,9 +506,9 @@ Element* FocusgroupController::WrapOrFlowInGrid(
FocusgroupFlags flags = helper->Root()->GetFocusgroupFlags(); FocusgroupFlags flags = helper->Root()->GetFocusgroupFlags();
switch (direction) { switch (direction) {
case FocusgroupDirection::kBackwardHorizontal: case FocusgroupDirection::kBackwardInline:
// This is only possible when on the first cell within a row. // This is only possible when on the first cell within a row.
if (flags & FocusgroupFlags::kWrapHorizontally) { if (flags & FocusgroupFlags::kWrapInline) {
// Wrapping backward in a row means that we should move the focus to the // Wrapping backward in a row means that we should move the focus to the
// last cell in the same row. // last cell in the same row.
Element* row = helper->RowForCell(element); Element* row = helper->RowForCell(element);
@ -527,9 +527,9 @@ Element* FocusgroupController::WrapOrFlowInGrid(
} }
break; break;
case FocusgroupDirection::kForwardHorizontal: case FocusgroupDirection::kForwardInline:
// This is only possible when on the last cell within a row. // This is only possible when on the last cell within a row.
if (flags & FocusgroupFlags::kWrapHorizontally) { if (flags & FocusgroupFlags::kWrapInline) {
// Wrapping forward in a row means that we should move the focus to the // Wrapping forward in a row means that we should move the focus to the
// first cell of the same row. // first cell of the same row.
Element* row = helper->RowForCell(element); Element* row = helper->RowForCell(element);
@ -548,9 +548,9 @@ Element* FocusgroupController::WrapOrFlowInGrid(
} }
break; break;
case FocusgroupDirection::kBackwardVertical: case FocusgroupDirection::kBackwardBlock:
// This is only possible when on the first cell within a column. // This is only possible when on the first cell within a column.
if (flags & FocusgroupFlags::kWrapVertically) { if (flags & FocusgroupFlags::kWrapBlock) {
// Wrapping backward in a column means that we should move the focus to // Wrapping backward in a column means that we should move the focus to
// the last cell in the same column. // the last cell in the same column.
unsigned cell_index = helper->ColumnIndexForCell(element); unsigned cell_index = helper->ColumnIndexForCell(element);
@ -567,9 +567,9 @@ Element* FocusgroupController::WrapOrFlowInGrid(
} }
break; break;
case FocusgroupDirection::kForwardVertical: case FocusgroupDirection::kForwardBlock:
// This is only possible when on the last cell within a column. // This is only possible when on the last cell within a column.
if (flags & FocusgroupFlags::kWrapVertically) { if (flags & FocusgroupFlags::kWrapBlock) {
// Wrapping forward in a column means that we should move the focus to // Wrapping forward in a column means that we should move the focus to
// first cell in the same column. // first cell in the same column.
unsigned cell_index = helper->ColumnIndexForCell(element); unsigned cell_index = helper->ColumnIndexForCell(element);

@ -53,25 +53,25 @@ class FocusgroupControllerTest : public PageTestBase {
}; };
TEST_F(FocusgroupControllerTest, FocusgroupDirectionForEventValid) { TEST_F(FocusgroupControllerTest, FocusgroupDirectionForEventValid) {
// Arrow right should be forward and horizontal. // Arrow right should be forward and inline.
auto* event = KeyDownEvent(ui::DomKey::ARROW_RIGHT); auto* event = KeyDownEvent(ui::DomKey::ARROW_RIGHT);
EXPECT_EQ(utils::FocusgroupDirectionForEvent(event), EXPECT_EQ(utils::FocusgroupDirectionForEvent(event),
FocusgroupDirection::kForwardHorizontal); FocusgroupDirection::kForwardInline);
// Arrow down should be forward and vertical. // Arrow down should be forward and block.
event = KeyDownEvent(ui::DomKey::ARROW_DOWN); event = KeyDownEvent(ui::DomKey::ARROW_DOWN);
EXPECT_EQ(utils::FocusgroupDirectionForEvent(event), EXPECT_EQ(utils::FocusgroupDirectionForEvent(event),
FocusgroupDirection::kForwardVertical); FocusgroupDirection::kForwardBlock);
// Arrow left should be backward and horizontal. // Arrow left should be backward and inline.
event = KeyDownEvent(ui::DomKey::ARROW_LEFT); event = KeyDownEvent(ui::DomKey::ARROW_LEFT);
EXPECT_EQ(utils::FocusgroupDirectionForEvent(event), EXPECT_EQ(utils::FocusgroupDirectionForEvent(event),
FocusgroupDirection::kBackwardHorizontal); FocusgroupDirection::kBackwardInline);
// Arrow up should be backward and vertical. // Arrow up should be backward and block.
event = KeyDownEvent(ui::DomKey::ARROW_UP); event = KeyDownEvent(ui::DomKey::ARROW_UP);
EXPECT_EQ(utils::FocusgroupDirectionForEvent(event), EXPECT_EQ(utils::FocusgroupDirectionForEvent(event),
FocusgroupDirection::kBackwardVertical); FocusgroupDirection::kBackwardBlock);
// When the shift key is pressed, even when combined with a valid arrow key, // When the shift key is pressed, even when combined with a valid arrow key,
// it should return kNone. // it should return kNone.
@ -100,139 +100,124 @@ TEST_F(FocusgroupControllerTest, FocusgroupDirectionForEventValid) {
TEST_F(FocusgroupControllerTest, IsDirectionBackward) { TEST_F(FocusgroupControllerTest, IsDirectionBackward) {
ASSERT_FALSE(utils::IsDirectionBackward(FocusgroupDirection::kNone)); ASSERT_FALSE(utils::IsDirectionBackward(FocusgroupDirection::kNone));
ASSERT_TRUE( ASSERT_TRUE(utils::IsDirectionBackward(FocusgroupDirection::kBackwardInline));
utils::IsDirectionBackward(FocusgroupDirection::kBackwardHorizontal)); ASSERT_TRUE(utils::IsDirectionBackward(FocusgroupDirection::kBackwardBlock));
ASSERT_TRUE( ASSERT_FALSE(utils::IsDirectionBackward(FocusgroupDirection::kForwardInline));
utils::IsDirectionBackward(FocusgroupDirection::kBackwardVertical)); ASSERT_FALSE(utils::IsDirectionBackward(FocusgroupDirection::kForwardBlock));
ASSERT_FALSE(
utils::IsDirectionBackward(FocusgroupDirection::kForwardHorizontal));
ASSERT_FALSE(
utils::IsDirectionBackward(FocusgroupDirection::kForwardVertical));
} }
TEST_F(FocusgroupControllerTest, IsDirectionForward) { TEST_F(FocusgroupControllerTest, IsDirectionForward) {
ASSERT_FALSE(utils::IsDirectionForward(FocusgroupDirection::kNone)); ASSERT_FALSE(utils::IsDirectionForward(FocusgroupDirection::kNone));
ASSERT_FALSE( ASSERT_FALSE(utils::IsDirectionForward(FocusgroupDirection::kBackwardInline));
utils::IsDirectionForward(FocusgroupDirection::kBackwardHorizontal)); ASSERT_FALSE(utils::IsDirectionForward(FocusgroupDirection::kBackwardBlock));
ASSERT_FALSE( ASSERT_TRUE(utils::IsDirectionForward(FocusgroupDirection::kForwardInline));
utils::IsDirectionForward(FocusgroupDirection::kBackwardVertical)); ASSERT_TRUE(utils::IsDirectionForward(FocusgroupDirection::kForwardBlock));
ASSERT_TRUE(
utils::IsDirectionForward(FocusgroupDirection::kForwardHorizontal));
ASSERT_TRUE(utils::IsDirectionForward(FocusgroupDirection::kForwardVertical));
} }
TEST_F(FocusgroupControllerTest, IsDirectionHorizontal) { TEST_F(FocusgroupControllerTest, IsDirectionInline) {
ASSERT_FALSE(utils::IsDirectionHorizontal(FocusgroupDirection::kNone)); ASSERT_FALSE(utils::IsDirectionInline(FocusgroupDirection::kNone));
ASSERT_TRUE( ASSERT_TRUE(utils::IsDirectionInline(FocusgroupDirection::kBackwardInline));
utils::IsDirectionHorizontal(FocusgroupDirection::kBackwardHorizontal)); ASSERT_FALSE(utils::IsDirectionInline(FocusgroupDirection::kBackwardBlock));
ASSERT_FALSE( ASSERT_TRUE(utils::IsDirectionInline(FocusgroupDirection::kForwardInline));
utils::IsDirectionHorizontal(FocusgroupDirection::kBackwardVertical)); ASSERT_FALSE(utils::IsDirectionInline(FocusgroupDirection::kForwardBlock));
ASSERT_TRUE(
utils::IsDirectionHorizontal(FocusgroupDirection::kForwardHorizontal));
ASSERT_FALSE(
utils::IsDirectionHorizontal(FocusgroupDirection::kForwardVertical));
} }
TEST_F(FocusgroupControllerTest, IsDirectionVertical) { TEST_F(FocusgroupControllerTest, IsDirectionBlock) {
ASSERT_FALSE(utils::IsDirectionVertical(FocusgroupDirection::kNone)); ASSERT_FALSE(utils::IsDirectionBlock(FocusgroupDirection::kNone));
ASSERT_FALSE( ASSERT_FALSE(utils::IsDirectionBlock(FocusgroupDirection::kBackwardInline));
utils::IsDirectionVertical(FocusgroupDirection::kBackwardHorizontal)); ASSERT_TRUE(utils::IsDirectionBlock(FocusgroupDirection::kBackwardBlock));
ASSERT_TRUE( ASSERT_FALSE(utils::IsDirectionBlock(FocusgroupDirection::kForwardInline));
utils::IsDirectionVertical(FocusgroupDirection::kBackwardVertical)); ASSERT_TRUE(utils::IsDirectionBlock(FocusgroupDirection::kForwardBlock));
ASSERT_FALSE(
utils::IsDirectionVertical(FocusgroupDirection::kForwardHorizontal));
ASSERT_TRUE(
utils::IsDirectionVertical(FocusgroupDirection::kForwardVertical));
} }
TEST_F(FocusgroupControllerTest, IsAxisSupported) { TEST_F(FocusgroupControllerTest, IsAxisSupported) {
FocusgroupFlags flags_horizontal_only = FocusgroupFlags::kHorizontal; FocusgroupFlags flags_inline_only = FocusgroupFlags::kInline;
ASSERT_FALSE(utils::IsAxisSupported(flags_horizontal_only,
FocusgroupDirection::kNone));
ASSERT_TRUE(utils::IsAxisSupported(flags_horizontal_only,
FocusgroupDirection::kBackwardHorizontal));
ASSERT_FALSE(utils::IsAxisSupported(flags_horizontal_only,
FocusgroupDirection::kBackwardVertical));
ASSERT_TRUE(utils::IsAxisSupported(flags_horizontal_only,
FocusgroupDirection::kForwardHorizontal));
ASSERT_FALSE(utils::IsAxisSupported(flags_horizontal_only,
FocusgroupDirection::kForwardVertical));
FocusgroupFlags flags_vertical_only = FocusgroupFlags::kVertical;
ASSERT_FALSE( ASSERT_FALSE(
utils::IsAxisSupported(flags_vertical_only, FocusgroupDirection::kNone)); utils::IsAxisSupported(flags_inline_only, FocusgroupDirection::kNone));
ASSERT_FALSE(utils::IsAxisSupported( ASSERT_TRUE(utils::IsAxisSupported(flags_inline_only,
flags_vertical_only, FocusgroupDirection::kBackwardHorizontal)); FocusgroupDirection::kBackwardInline));
ASSERT_TRUE(utils::IsAxisSupported(flags_vertical_only, ASSERT_FALSE(utils::IsAxisSupported(flags_inline_only,
FocusgroupDirection::kBackwardVertical)); FocusgroupDirection::kBackwardBlock));
ASSERT_FALSE(utils::IsAxisSupported(flags_vertical_only, ASSERT_TRUE(utils::IsAxisSupported(flags_inline_only,
FocusgroupDirection::kForwardHorizontal)); FocusgroupDirection::kForwardInline));
ASSERT_TRUE(utils::IsAxisSupported(flags_vertical_only, ASSERT_FALSE(utils::IsAxisSupported(flags_inline_only,
FocusgroupDirection::kForwardVertical)); FocusgroupDirection::kForwardBlock));
FocusgroupFlags flags_block_only = FocusgroupFlags::kBlock;
ASSERT_FALSE(
utils::IsAxisSupported(flags_block_only, FocusgroupDirection::kNone));
ASSERT_FALSE(utils::IsAxisSupported(flags_block_only,
FocusgroupDirection::kBackwardInline));
ASSERT_TRUE(utils::IsAxisSupported(flags_block_only,
FocusgroupDirection::kBackwardBlock));
ASSERT_FALSE(utils::IsAxisSupported(flags_block_only,
FocusgroupDirection::kForwardInline));
ASSERT_TRUE(utils::IsAxisSupported(flags_block_only,
FocusgroupDirection::kForwardBlock));
FocusgroupFlags flags_both_directions = FocusgroupFlags flags_both_directions =
FocusgroupFlags::kHorizontal | FocusgroupFlags::kVertical; FocusgroupFlags::kInline | FocusgroupFlags::kBlock;
ASSERT_FALSE(utils::IsAxisSupported(flags_both_directions, ASSERT_FALSE(utils::IsAxisSupported(flags_both_directions,
FocusgroupDirection::kNone)); FocusgroupDirection::kNone));
ASSERT_TRUE(utils::IsAxisSupported(flags_both_directions, ASSERT_TRUE(utils::IsAxisSupported(flags_both_directions,
FocusgroupDirection::kBackwardHorizontal)); FocusgroupDirection::kBackwardInline));
ASSERT_TRUE(utils::IsAxisSupported(flags_both_directions, ASSERT_TRUE(utils::IsAxisSupported(flags_both_directions,
FocusgroupDirection::kBackwardVertical)); FocusgroupDirection::kBackwardBlock));
ASSERT_TRUE(utils::IsAxisSupported(flags_both_directions, ASSERT_TRUE(utils::IsAxisSupported(flags_both_directions,
FocusgroupDirection::kForwardHorizontal)); FocusgroupDirection::kForwardInline));
ASSERT_TRUE(utils::IsAxisSupported(flags_both_directions, ASSERT_TRUE(utils::IsAxisSupported(flags_both_directions,
FocusgroupDirection::kForwardVertical)); FocusgroupDirection::kForwardBlock));
} }
TEST_F(FocusgroupControllerTest, WrapsInDirection) { TEST_F(FocusgroupControllerTest, WrapsInDirection) {
FocusgroupFlags flags_no_wrap = FocusgroupFlags::kNone; FocusgroupFlags flags_no_wrap = FocusgroupFlags::kNone;
ASSERT_FALSE( ASSERT_FALSE(
utils::WrapsInDirection(flags_no_wrap, FocusgroupDirection::kNone)); utils::WrapsInDirection(flags_no_wrap, FocusgroupDirection::kNone));
ASSERT_FALSE(utils::WrapsInDirection(
flags_no_wrap, FocusgroupDirection::kBackwardHorizontal));
ASSERT_FALSE(utils::WrapsInDirection(flags_no_wrap, ASSERT_FALSE(utils::WrapsInDirection(flags_no_wrap,
FocusgroupDirection::kBackwardVertical)); FocusgroupDirection::kBackwardInline));
ASSERT_FALSE(utils::WrapsInDirection(
flags_no_wrap, FocusgroupDirection::kForwardHorizontal));
ASSERT_FALSE(utils::WrapsInDirection(flags_no_wrap, ASSERT_FALSE(utils::WrapsInDirection(flags_no_wrap,
FocusgroupDirection::kForwardVertical)); FocusgroupDirection::kBackwardBlock));
ASSERT_FALSE(utils::WrapsInDirection(flags_no_wrap,
FocusgroupDirection::kForwardInline));
ASSERT_FALSE(utils::WrapsInDirection(flags_no_wrap,
FocusgroupDirection::kForwardBlock));
FocusgroupFlags flags_wrap_horizontal = FocusgroupFlags::kWrapHorizontally; FocusgroupFlags flags_wrap_inline = FocusgroupFlags::kWrapInline;
ASSERT_FALSE(utils::WrapsInDirection(flags_wrap_horizontal,
FocusgroupDirection::kNone));
ASSERT_TRUE(utils::WrapsInDirection(
flags_wrap_horizontal, FocusgroupDirection::kBackwardHorizontal));
ASSERT_FALSE(utils::WrapsInDirection(flags_wrap_horizontal,
FocusgroupDirection::kBackwardVertical));
ASSERT_TRUE(utils::WrapsInDirection(flags_wrap_horizontal,
FocusgroupDirection::kForwardHorizontal));
ASSERT_FALSE(utils::WrapsInDirection(flags_wrap_horizontal,
FocusgroupDirection::kForwardVertical));
FocusgroupFlags flags_wrap_vertical = FocusgroupFlags::kWrapVertically;
ASSERT_FALSE( ASSERT_FALSE(
utils::WrapsInDirection(flags_wrap_vertical, FocusgroupDirection::kNone)); utils::WrapsInDirection(flags_wrap_inline, FocusgroupDirection::kNone));
ASSERT_FALSE(utils::WrapsInDirection( ASSERT_TRUE(utils::WrapsInDirection(flags_wrap_inline,
flags_wrap_vertical, FocusgroupDirection::kBackwardHorizontal)); FocusgroupDirection::kBackwardInline));
ASSERT_TRUE(utils::WrapsInDirection(flags_wrap_vertical, ASSERT_FALSE(utils::WrapsInDirection(flags_wrap_inline,
FocusgroupDirection::kBackwardVertical)); FocusgroupDirection::kBackwardBlock));
ASSERT_FALSE(utils::WrapsInDirection( ASSERT_TRUE(utils::WrapsInDirection(flags_wrap_inline,
flags_wrap_vertical, FocusgroupDirection::kForwardHorizontal)); FocusgroupDirection::kForwardInline));
ASSERT_TRUE(utils::WrapsInDirection(flags_wrap_vertical, ASSERT_FALSE(utils::WrapsInDirection(flags_wrap_inline,
FocusgroupDirection::kForwardVertical)); FocusgroupDirection::kForwardBlock));
FocusgroupFlags flags_wrap_block = FocusgroupFlags::kWrapBlock;
ASSERT_FALSE(
utils::WrapsInDirection(flags_wrap_block, FocusgroupDirection::kNone));
ASSERT_FALSE(utils::WrapsInDirection(flags_wrap_block,
FocusgroupDirection::kBackwardInline));
ASSERT_TRUE(utils::WrapsInDirection(flags_wrap_block,
FocusgroupDirection::kBackwardBlock));
ASSERT_FALSE(utils::WrapsInDirection(flags_wrap_block,
FocusgroupDirection::kForwardInline));
ASSERT_TRUE(utils::WrapsInDirection(flags_wrap_block,
FocusgroupDirection::kForwardBlock));
FocusgroupFlags flags_wrap_both = FocusgroupFlags flags_wrap_both =
FocusgroupFlags::kWrapHorizontally | FocusgroupFlags::kWrapVertically; FocusgroupFlags::kWrapInline | FocusgroupFlags::kWrapBlock;
ASSERT_FALSE( ASSERT_FALSE(
utils::WrapsInDirection(flags_wrap_both, FocusgroupDirection::kNone)); utils::WrapsInDirection(flags_wrap_both, FocusgroupDirection::kNone));
ASSERT_TRUE(utils::WrapsInDirection(
flags_wrap_both, FocusgroupDirection::kBackwardHorizontal));
ASSERT_TRUE(utils::WrapsInDirection(flags_wrap_both, ASSERT_TRUE(utils::WrapsInDirection(flags_wrap_both,
FocusgroupDirection::kBackwardVertical)); FocusgroupDirection::kBackwardInline));
ASSERT_TRUE(utils::WrapsInDirection(flags_wrap_both, ASSERT_TRUE(utils::WrapsInDirection(flags_wrap_both,
FocusgroupDirection::kForwardHorizontal)); FocusgroupDirection::kBackwardBlock));
ASSERT_TRUE(utils::WrapsInDirection(flags_wrap_both, ASSERT_TRUE(utils::WrapsInDirection(flags_wrap_both,
FocusgroupDirection::kForwardVertical)); FocusgroupDirection::kForwardInline));
ASSERT_TRUE(utils::WrapsInDirection(flags_wrap_both,
FocusgroupDirection::kForwardBlock));
} }
TEST_F(FocusgroupControllerTest, FocusgroupExtendsInAxis) { TEST_F(FocusgroupControllerTest, FocusgroupExtendsInAxis) {
@ -241,149 +226,120 @@ TEST_F(FocusgroupControllerTest, FocusgroupExtendsInAxis) {
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup, ASSERT_FALSE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kNone)); FocusgroupDirection::kNone));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardHorizontal));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardVertical));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kForwardHorizontal));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis( ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardVertical)); extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardInline));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardBlock));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardInline));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardBlock));
focusgroup |= FocusgroupFlags::kHorizontal | FocusgroupFlags::kVertical; focusgroup |= FocusgroupFlags::kInline | FocusgroupFlags::kBlock;
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup, ASSERT_FALSE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kNone)); FocusgroupDirection::kNone));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardHorizontal));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardVertical));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kForwardHorizontal));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis( ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardVertical)); extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardInline));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardBlock));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardInline));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardBlock));
extending_focusgroup |= extending_focusgroup |= FocusgroupFlags::kInline | FocusgroupFlags::kBlock;
FocusgroupFlags::kHorizontal | FocusgroupFlags::kVertical;
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup, ASSERT_FALSE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kNone)); FocusgroupDirection::kNone));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardHorizontal));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardVertical));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kForwardHorizontal));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis( ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardVertical)); extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardInline));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardBlock));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardInline));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardBlock));
extending_focusgroup = FocusgroupFlags::kExtend; extending_focusgroup = FocusgroupFlags::kExtend;
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup, ASSERT_TRUE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kNone)); FocusgroupDirection::kNone));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardHorizontal));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardVertical));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kForwardHorizontal));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis( ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardVertical)); extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardInline));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardBlock));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardInline));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardBlock));
extending_focusgroup |= FocusgroupFlags::kHorizontal; extending_focusgroup |= FocusgroupFlags::kInline;
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup, ASSERT_TRUE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kNone)); FocusgroupDirection::kNone));
ASSERT_TRUE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardHorizontal));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardVertical));
ASSERT_TRUE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kForwardHorizontal));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardVertical));
extending_focusgroup |= FocusgroupFlags::kVertical;
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kNone));
ASSERT_TRUE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardHorizontal));
ASSERT_TRUE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardVertical));
ASSERT_TRUE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kForwardHorizontal));
ASSERT_TRUE(utils::FocusgroupExtendsInAxis( ASSERT_TRUE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardVertical)); extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardInline));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardBlock));
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardInline));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardBlock));
extending_focusgroup |= FocusgroupFlags::kBlock;
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kNone));
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardInline));
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardBlock));
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardInline));
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardBlock));
focusgroup = FocusgroupFlags::kNone; focusgroup = FocusgroupFlags::kNone;
extending_focusgroup = FocusgroupFlags::kExtend | extending_focusgroup = FocusgroupFlags::kExtend | FocusgroupFlags::kInline |
FocusgroupFlags::kHorizontal | FocusgroupFlags::kBlock;
FocusgroupFlags::kVertical;
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup, ASSERT_FALSE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kNone)); FocusgroupDirection::kNone));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardHorizontal));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardVertical));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kForwardHorizontal));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis( ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardVertical)); extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardInline));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardBlock));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardInline));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardBlock));
focusgroup |= FocusgroupFlags::kVertical; focusgroup |= FocusgroupFlags::kBlock;
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup, ASSERT_TRUE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kNone)); FocusgroupDirection::kNone));
ASSERT_FALSE( ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup, extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardInline));
FocusgroupDirection::kBackwardHorizontal));
ASSERT_TRUE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardVertical));
ASSERT_FALSE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kForwardHorizontal));
ASSERT_TRUE(utils::FocusgroupExtendsInAxis( ASSERT_TRUE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardVertical)); extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardBlock));
ASSERT_FALSE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardInline));
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardBlock));
focusgroup |= FocusgroupFlags::kHorizontal; focusgroup |= FocusgroupFlags::kInline;
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup, ASSERT_TRUE(utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kNone)); FocusgroupDirection::kNone));
ASSERT_TRUE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardHorizontal));
ASSERT_TRUE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kBackwardVertical));
ASSERT_TRUE(
utils::FocusgroupExtendsInAxis(extending_focusgroup, focusgroup,
FocusgroupDirection::kForwardHorizontal));
ASSERT_TRUE(utils::FocusgroupExtendsInAxis( ASSERT_TRUE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardVertical)); extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardInline));
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kBackwardBlock));
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardInline));
ASSERT_TRUE(utils::FocusgroupExtendsInAxis(
extending_focusgroup, focusgroup, FocusgroupDirection::kForwardBlock));
} }
TEST_F(FocusgroupControllerTest, FindNearestFocusgroupAncestor) { TEST_F(FocusgroupControllerTest, FindNearestFocusgroupAncestor) {

@ -23,56 +23,53 @@ FocusgroupDirection FocusgroupControllerUtils::FocusgroupDirectionForEvent(
// TODO(bebeaudr): Support RTL. Will it be as simple as inverting the // TODO(bebeaudr): Support RTL. Will it be as simple as inverting the
// direction associated with the left and right arrows when in a RTL element? // direction associated with the left and right arrows when in a RTL element?
if (event->key() == "ArrowDown") if (event->key() == "ArrowDown")
return FocusgroupDirection::kForwardVertical; return FocusgroupDirection::kForwardBlock;
else if (event->key() == "ArrowRight") else if (event->key() == "ArrowRight")
return FocusgroupDirection::kForwardHorizontal; return FocusgroupDirection::kForwardInline;
else if (event->key() == "ArrowUp") else if (event->key() == "ArrowUp")
return FocusgroupDirection::kBackwardVertical; return FocusgroupDirection::kBackwardBlock;
else if (event->key() == "ArrowLeft") else if (event->key() == "ArrowLeft")
return FocusgroupDirection::kBackwardHorizontal; return FocusgroupDirection::kBackwardInline;
return FocusgroupDirection::kNone; return FocusgroupDirection::kNone;
} }
bool FocusgroupControllerUtils::IsDirectionForward( bool FocusgroupControllerUtils::IsDirectionForward(
FocusgroupDirection direction) { FocusgroupDirection direction) {
return direction == FocusgroupDirection::kForwardHorizontal || return direction == FocusgroupDirection::kForwardInline ||
direction == FocusgroupDirection::kForwardVertical; direction == FocusgroupDirection::kForwardBlock;
} }
bool FocusgroupControllerUtils::IsDirectionBackward( bool FocusgroupControllerUtils::IsDirectionBackward(
FocusgroupDirection direction) { FocusgroupDirection direction) {
return direction == FocusgroupDirection::kBackwardHorizontal || return direction == FocusgroupDirection::kBackwardInline ||
direction == FocusgroupDirection::kBackwardVertical; direction == FocusgroupDirection::kBackwardBlock;
} }
bool FocusgroupControllerUtils::IsDirectionHorizontal( bool FocusgroupControllerUtils::IsDirectionInline(
FocusgroupDirection direction) { FocusgroupDirection direction) {
return direction == FocusgroupDirection::kBackwardHorizontal || return direction == FocusgroupDirection::kBackwardInline ||
direction == FocusgroupDirection::kForwardHorizontal; direction == FocusgroupDirection::kForwardInline;
} }
bool FocusgroupControllerUtils::IsDirectionVertical( bool FocusgroupControllerUtils::IsDirectionBlock(
FocusgroupDirection direction) { FocusgroupDirection direction) {
return direction == FocusgroupDirection::kBackwardVertical || return direction == FocusgroupDirection::kBackwardBlock ||
direction == FocusgroupDirection::kForwardVertical; direction == FocusgroupDirection::kForwardBlock;
} }
bool FocusgroupControllerUtils::IsAxisSupported(FocusgroupFlags flags, bool FocusgroupControllerUtils::IsAxisSupported(FocusgroupFlags flags,
FocusgroupDirection direction) { FocusgroupDirection direction) {
return ((flags & FocusgroupFlags::kHorizontal) && return ((flags & FocusgroupFlags::kInline) && IsDirectionInline(direction)) ||
IsDirectionHorizontal(direction)) || ((flags & FocusgroupFlags::kBlock) && IsDirectionBlock(direction));
((flags & FocusgroupFlags::kVertical) &&
IsDirectionVertical(direction));
} }
bool FocusgroupControllerUtils::WrapsInDirection( bool FocusgroupControllerUtils::WrapsInDirection(
FocusgroupFlags flags, FocusgroupFlags flags,
FocusgroupDirection direction) { FocusgroupDirection direction) {
return ((flags & FocusgroupFlags::kWrapHorizontally) && return ((flags & FocusgroupFlags::kWrapInline) &&
IsDirectionHorizontal(direction)) || IsDirectionInline(direction)) ||
((flags & FocusgroupFlags::kWrapVertically) && ((flags & FocusgroupFlags::kWrapBlock) && IsDirectionBlock(direction));
IsDirectionVertical(direction));
} }
bool FocusgroupControllerUtils::FocusgroupExtendsInAxis( bool FocusgroupControllerUtils::FocusgroupExtendsInAxis(

@ -17,10 +17,10 @@ class KeyboardEvent;
enum class FocusgroupDirection { enum class FocusgroupDirection {
kNone, kNone,
kBackwardHorizontal, kBackwardInline,
kBackwardVertical, kBackwardBlock,
kForwardHorizontal, kForwardInline,
kForwardVertical, kForwardBlock,
}; };
enum class FocusgroupType { enum class FocusgroupType {
@ -35,8 +35,8 @@ class CORE_EXPORT FocusgroupControllerUtils {
static FocusgroupDirection FocusgroupDirectionForEvent(KeyboardEvent* event); static FocusgroupDirection FocusgroupDirectionForEvent(KeyboardEvent* event);
static bool IsDirectionBackward(FocusgroupDirection direction); static bool IsDirectionBackward(FocusgroupDirection direction);
static bool IsDirectionForward(FocusgroupDirection direction); static bool IsDirectionForward(FocusgroupDirection direction);
static bool IsDirectionHorizontal(FocusgroupDirection direction); static bool IsDirectionInline(FocusgroupDirection direction);
static bool IsDirectionVertical(FocusgroupDirection direction); static bool IsDirectionBlock(FocusgroupDirection direction);
static bool IsAxisSupported(FocusgroupFlags flags, static bool IsAxisSupported(FocusgroupFlags flags,
FocusgroupDirection direction); FocusgroupDirection direction);
static bool WrapsInDirection(FocusgroupFlags flags, static bool WrapsInDirection(FocusgroupFlags flags,

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus ascends to parent focusgroup successfully.</title> <title>HTML Test: focusgroup - Focus ascends to parent focusgroup successfully.</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"> <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,11 +10,11 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div focusgroup=horizontal> <div focusgroup=inline>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<div id=item2 tabindex=-1> <div id=item2 tabindex=-1>
<div> <div>
<div focusgroup="extend vertical"> <div focusgroup="extend block">
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>
<span id=item4 tabindex=-1>item4</span> <span id=item4 tabindex=-1>item4</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,9 +10,9 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<ul focusgroup=horizontal> <ul focusgroup=inline>
<li id=item1 tabindex="-1"> <li id=item1 tabindex="-1">
<ul focusgroup=vertical> <ul focusgroup=block>
<li id=item2 tabindex="-1">item2</li> <li id=item2 tabindex="-1">item2</li>
</ul> </ul>
</li> </li>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,7 +10,7 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup=vertical> <div id=root focusgroup=block>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus does not wrap in the arrow key pressed orthogonal axis.</title> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,7 +10,7 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div focusgroup="vertical wrap"> <div focusgroup="block wrap">
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,7 +10,7 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup=horizontal> <div id=root focusgroup=inline>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -13,7 +13,7 @@
<div focusgroup=wrap> <div focusgroup=wrap>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<div> <div>
<div focusgroup="extend vertical"> <div focusgroup="extend block">
<div id=item2 tabindex=-1> <div id=item2 tabindex=-1>
<div focusgroup=extend> <div focusgroup=extend>
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus moves to previous item, skipping the focusgroup that extends in the orthogonal axis.</title> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -13,7 +13,7 @@
<div focusgroup=wrap> <div focusgroup=wrap>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<div> <div>
<div focusgroup="extending vertical"> <div focusgroup="extend block">
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus wraps in the arrow key pressed axis.</title> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,7 +10,7 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div focusgroup="horizontal wrap"> <div focusgroup="inline wrap">
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus ascends to parent focusgroup successfully.</title> <title>HTML Test: focusgroup - Focus ascends to parent focusgroup successfully.</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"> <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,11 +10,11 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div focusgroup=vertical> <div focusgroup=block>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<div id=item2 tabindex=-1> <div id=item2 tabindex=-1>
<div> <div>
<div focusgroup="extend horizontal"> <div focusgroup="extend inline">
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>
<span id=item4 tabindex=-1>item4</span> <span id=item4 tabindex=-1>item4</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,9 +10,9 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<ul focusgroup=vertical> <ul focusgroup=block>
<li id=item1 tabindex="-1"> <li id=item1 tabindex="-1">
<ul focusgroup=horizontal> <ul focusgroup=inline>
<li id=item2 tabindex="-1">item2</li> <li id=item2 tabindex="-1">item2</li>
</ul> </ul>
</li> </li>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,7 +10,7 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup=horizontal> <div id=root focusgroup=inline>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus does not wrap in the arrow key pressed orthogonal axis.</title> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,7 +10,7 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div focusgroup="horizontal wrap"> <div focusgroup="inline wrap">
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,7 +10,7 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup=vertical> <div id=root focusgroup=block>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -13,7 +13,7 @@
<div focusgroup=wrap> <div focusgroup=wrap>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<div> <div>
<div focusgroup="extend horizontal"> <div focusgroup="extend inline">
<div id=item2 tabindex=-1> <div id=item2 tabindex=-1>
<div focusgroup=extend> <div focusgroup=extend>
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus moves to previous item, skipping the focusgroup that extends in the orthogonal axis.</title> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -13,7 +13,7 @@
<div focusgroup=wrap> <div focusgroup=wrap>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<div> <div>
<div focusgroup="extending horizontal"> <div focusgroup="extend inline">
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus wraps in the arrow key pressed axis.</title> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,7 +10,7 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div focusgroup="vertical wrap"> <div focusgroup="block wrap">
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus descends from vertical focusgroup into horizontal focusgroup.</title> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,9 +10,9 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=fg1 focusgroup=vertical> <div id=fg1 focusgroup=block>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<div id=fg2 tabindex=-1 focusgroup="extend horizontal"> <div id=fg2 tabindex=-1 focusgroup="extend inline">
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
</div> </div>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,7 +10,7 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup=vertical> <div id=root focusgroup=block>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,7 +10,7 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup="vertical wrap"> <div id=root focusgroup="block wrap">
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<div id=item2 tabindex=-1 focusgroup=extend> <div id=item2 tabindex=-1 focusgroup=extend>
<!--This focusgroup supports both axes, but only wraps in the vertical one.--> <!--This focusgroup supports both axes, but only wraps in the vertical one.-->

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,7 +10,7 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup=horizontal> <div id=root focusgroup=inline>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus moves to next item, skipping the focusgroup that extends in the orthogonal axis.</title> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -11,7 +11,7 @@
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup> <div id=root focusgroup>
<div id=item1 tabindex=0 focusgroup="extend vertical"> <div id=item1 tabindex=0 focusgroup="extend block">
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
</div> </div>
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus wraps and skips the orthogonal inner focusgroup.</title> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -11,7 +11,7 @@
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup=wrap> <div id=root focusgroup=wrap>
<div focusgroup="extend vertical"> <div focusgroup="extend block">
<span id=item1 tabindex=-1>item1</span> <span id=item1 tabindex=-1>item1</span>
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus wraps in the appropriate focusgroup.</title> <title>HTML Test: focusgroup - Focus wraps in the appropriate focusgroup.</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"> <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,12 +10,12 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div focusgroup=wrap> <!--Supports horizontal wrapping--> <div focusgroup=wrap> <!--Supports inline wrapping-->
<div focusgroup="extend vertical"> <!--Doesn't support horizontal wrapping--> <div focusgroup="extend block"> <!--Doesn't support inline wrapping-->
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<div id=item2 tabindex=-1 focusgroup="extend wrap"> <div id=item2 tabindex=-1 focusgroup="extend wrap">
<!--Supports wrapping in both axis, but only extend the <!--Supports wrapping in both axis, but only extend the
wrapping behavior of its ancestors in the vertical axis. --> wrapping behavior of its ancestors in the block axis. -->
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>
<span id=item4 tabindex=-1>item4</span> <span id=item4 tabindex=-1>item4</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,11 +10,11 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup="vertical wrap"> <div id=root focusgroup="block wrap">
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<div id=item2 tabindex=-1 focusgroup="extend wrap"> <div id=item2 tabindex=-1 focusgroup="extend wrap">
<!--This focusgroup supports wrapping in both axis, but only extend the wrapping <!--This focusgroup supports wrapping in both axis, but only extend the wrapping
behavior of its parent in the vertical axis. --> behavior of its parent in the block axis. -->
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>
<span id=item4 tabindex=-1>item4</span> <span id=item4 tabindex=-1>item4</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus descends from horizontal focusgroup into vertical focusgroup.</title> <title>HTML Test: focusgroup - Focus descends from horizontal focusgroup into vertical focusgroup.</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"> <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,9 +10,9 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=fg1 focusgroup=horizontal> <div id=fg1 focusgroup=inline>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<div id=fg2 tabindex=-1 focusgroup="extend vertical"> <div id=fg2 tabindex=-1 focusgroup="extend block">
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
</div> </div>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,7 +10,7 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup=horizontal> <div id=root focusgroup=inline>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,10 +10,10 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup="horizontal wrap"> <div id=root focusgroup="inline wrap">
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<div id=item2 tabindex=-1 focusgroup=extend> <div id=item2 tabindex=-1 focusgroup=extend>
<!--This focusgroup supports both axes, but only wraps in the horizontal one.--> <!--This focusgroup supports both axes, but only wraps in the inline one.-->
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>
<span id=item4 tabindex=-1>item4</span> <span id=item4 tabindex=-1>item4</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,7 +10,7 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup=vertical> <div id=root focusgroup=block>
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus moves to next item, skipping the focusgroup that extends in the orthogonal axis.</title> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -11,7 +11,7 @@
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup> <div id=root focusgroup>
<div id=item1 tabindex=0 focusgroup="extend horizontal"> <div id=item1 tabindex=0 focusgroup="extend inline">
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
</div> </div>
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus wraps and skips the orthogonal inner focusgroup.</title> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -11,7 +11,7 @@
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup=wrap> <div id=root focusgroup=wrap>
<div focusgroup="extend horizontal"> <div focusgroup="extend inline">
<span id=item1 tabindex=-1>item1</span> <span id=item1 tabindex=-1>item1</span>
<span id=item2 tabindex=-1>item2</span> <span id=item2 tabindex=-1>item2</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>HTML Test: focusgroup - Focus wraps in the appropriate focusgroup.</title> <title>HTML Test: focusgroup - Focus wraps in the appropriate focusgroup.</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"> <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,12 +10,12 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div focusgroup=wrap> <!--Supports vertical wrapping--> <div focusgroup=wrap> <!--Supports block wrapping-->
<div focusgroup="extend horizontal"> <!--Doesn't support vertical wrapping--> <div focusgroup="extend inline"> <!--Doesn't support block wrapping-->
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<div id=item2 tabindex=-1 focusgroup="extend wrap"> <div id=item2 tabindex=-1 focusgroup="extend wrap">
<!--Supports wrapping in both axis, but only extend the <!--Supports wrapping in both axis, but only extend the
wrapping behavior of its ancestors in the horizontal axis. --> wrapping behavior of its ancestors in the inline axis. -->
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>
<span id=item4 tabindex=-1>item4</span> <span id=item4 tabindex=-1>item4</span>
</div> </div>

@ -2,7 +2,7 @@
<meta charset="utf-8"> <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> <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="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> <link rel="help" href="https://open-ui.org/components/focusgroup.explainer/">
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script> <script src="/resources/testdriver.js"></script>
@ -10,11 +10,11 @@
<script src="/resources/testdriver-actions.js"></script> <script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script> <script src="../../resources/focusgroup-utils.js"></script>
<div id=root focusgroup="horizontal wrap"> <div id=root focusgroup="inline wrap">
<span id=item1 tabindex=0>item1</span> <span id=item1 tabindex=0>item1</span>
<div id=item2 tabindex=-1 focusgroup="extend wrap"> <div id=item2 tabindex=-1 focusgroup="extend wrap">
<!--This focusgroup supports wrapping in both axis, but only extend the wrapping <!--This focusgroup supports wrapping in both axis, but only extend the wrapping
behavior of its parent in the horizontal axis. --> behavior of its parent in the inline axis. -->
<span id=item3 tabindex=-1>item3</span> <span id=item3 tabindex=-1>item3</span>
<span id=item4 tabindex=-1>item4</span> <span id=item4 tabindex=-1>item4</span>
</div> </div>