Skip to content

Commit c37c7f1

Browse files
janewmanchromium-wpt-export-bot
janewman
authored and
chromium-wpt-export-bot
committed
[focusgroup] Change focusGroup IDL from DOMString to DOMTokenList
Change the focusGroup DOM property from a reflected DOMString to a DOMTokenList, matching the latest iteration of the HTML spec PR and OpenUI explainer. Bug: 4021071 Change-Id: Idce8741cf8ecd0d241cf58d7419af323b173c29c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7871961 Commit-Queue: Jacques Newman <janewman@microsoft.com> Reviewed-by: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1637254}
1 parent 6497ad3 commit c37c7f1

1 file changed

Lines changed: 109 additions & 13 deletions

File tree

‎html/interaction/focus/focusgroup/tentative/idl-reflection.html‎

Lines changed: 109 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,65 @@
33
<title>focusgroup IDL attributes reflect focusgroup and focusgroupstart content attributes</title>
44
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
55
<link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/">
6-
<link rel="help" href="https://html.spec.whatwg.org/multipage/dom.html#htmlorsvgelement">
6+
<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#the-focusgroup-attribute">
77
<script src="/resources/testharness.js"></script>
88
<script src="/resources/testharnessreport.js"></script>
99

1010
<div id="fg-empty"></div>
1111
<script>
1212
test(() => {
13-
assert_equals(document.getElementById("fg-empty").focusGroup, "");
14-
}, "focusGroup IDL attribute on an element without the focusgroup content attribute is the empty string");
13+
const el = document.getElementById("fg-empty");
14+
assert_true(el.focusGroup instanceof DOMTokenList,
15+
"focusGroup should be a DOMTokenList instance");
16+
}, "focusGroup IDL attribute is a DOMTokenList");
17+
18+
test(() => {
19+
const el = document.getElementById("fg-empty");
20+
assert_equals(el.focusGroup, el.focusGroup,
21+
"focusGroup should return the same object each time");
22+
}, "focusGroup satisfies [SameObject]");
23+
24+
test(() => {
25+
const el = document.getElementById("fg-empty");
26+
assert_equals(el.focusGroup.value, "");
27+
}, "focusGroup.value on element without focusgroup content attribute is the empty string");
1528
</script>
1629

1730
<div id="fg-set" focusgroup="toolbar"></div>
1831
<script>
1932
test(() => {
20-
assert_equals(document.getElementById("fg-set").focusGroup, "toolbar");
21-
}, "focusGroup IDL attribute reflects the focusgroup content attribute value");
33+
const el = document.getElementById("fg-set");
34+
assert_equals(el.focusGroup.value, "toolbar");
35+
}, "focusGroup.value reflects the focusgroup content attribute value");
36+
37+
test(() => {
38+
const el = document.getElementById("fg-set");
39+
assert_true(el.focusGroup.contains("toolbar"));
40+
assert_false(el.focusGroup.contains("tablist"));
41+
}, "focusGroup.contains() reflects individual tokens");
2242
</script>
2343

2444
<script>
2545
test(() => {
2646
const el = document.createElement("div");
2747
el.focusGroup = "tablist inline";
2848
assert_equals(el.getAttribute("focusgroup"), "tablist inline");
29-
}, "Setting focusGroup IDL attribute writes the focusgroup content attribute");
49+
}, "Setting focusGroup via PutForwards writes the focusgroup content attribute");
50+
51+
test(() => {
52+
const el = document.createElement("div");
53+
const tokenList = el.focusGroup;
54+
el.focusGroup = "toolbar wrap";
55+
assert_equals(el.focusGroup, tokenList,
56+
"Assignment via PutForwards does not replace the DOMTokenList object");
57+
assert_equals(el.focusGroup.value, "toolbar wrap");
58+
}, "Setting focusGroup via PutForwards preserves the DOMTokenList object identity");
59+
60+
test(() => {
61+
const el = document.createElement("div");
62+
el.focusGroup.value = "toolbar wrap";
63+
assert_equals(el.getAttribute("focusgroup"), "toolbar wrap");
64+
}, "Setting focusGroup.value writes the focusgroup content attribute");
3065
</script>
3166

3267
<script>
@@ -35,7 +70,66 @@
3570
el.setAttribute("focusgroup", "toolbar");
3671
el.focusGroup = "";
3772
assert_equals(el.getAttribute("focusgroup"), "");
38-
}, "Setting focusGroup IDL attribute to the empty string clears the content attribute value");
73+
}, "Setting focusGroup to empty string clears the content attribute value");
74+
</script>
75+
76+
<script>
77+
test(() => {
78+
const el = document.createElement("div");
79+
el.setAttribute("focusgroup", "toolbar");
80+
el.focusGroup.add("wrap");
81+
assert_equals(el.getAttribute("focusgroup"), "toolbar wrap");
82+
}, "focusGroup.add() appends a token and updates the content attribute");
83+
84+
test(() => {
85+
const el = document.createElement("div");
86+
el.setAttribute("focusgroup", "toolbar wrap");
87+
el.focusGroup.remove("wrap");
88+
assert_equals(el.getAttribute("focusgroup"), "toolbar");
89+
}, "focusGroup.remove() removes a token and updates the content attribute");
90+
91+
test(() => {
92+
const el = document.createElement("div");
93+
el.setAttribute("focusgroup", "toolbar");
94+
el.focusGroup.toggle("wrap");
95+
assert_true(el.focusGroup.contains("wrap"));
96+
el.focusGroup.toggle("wrap");
97+
assert_false(el.focusGroup.contains("wrap"));
98+
}, "focusGroup.toggle() adds or removes a token");
99+
</script>
100+
101+
<script>
102+
test(() => {
103+
const el = document.createElement("div");
104+
el.setAttribute("focusgroup", "toolbar");
105+
assert_true(el.focusGroup.contains("toolbar"));
106+
el.setAttribute("focusgroup", "tablist wrap");
107+
assert_false(el.focusGroup.contains("toolbar"));
108+
assert_true(el.focusGroup.contains("tablist"));
109+
assert_true(el.focusGroup.contains("wrap"));
110+
}, "setAttribute('focusgroup', ...) updates the existing DOMTokenList object");
111+
</script>
112+
113+
<script>
114+
test(() => {
115+
const el = document.createElement("div");
116+
const supported = [
117+
"toolbar", "tablist", "radiogroup", "listbox",
118+
"menu", "menubar", "wrap", "nowrap",
119+
"inline", "block", "nomemory", "none"
120+
];
121+
for (const token of supported) {
122+
assert_true(el.focusGroup.supports(token),
123+
`focusGroup.supports("${token}") should return true`);
124+
}
125+
}, "focusGroup.supports() returns true for all standard tokens");
126+
127+
test(() => {
128+
const el = document.createElement("div");
129+
assert_false(el.focusGroup.supports("invalid"));
130+
assert_false(el.focusGroup.supports("horizontal"));
131+
assert_false(el.focusGroup.supports("vertical"));
132+
}, "focusGroup.supports() returns false for unrecognized tokens");
39133
</script>
40134

41135
<div id="fgs-absent"></div>
@@ -72,17 +166,19 @@
72166
<script>
73167
test(() => {
74168
const el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
75-
el.setAttribute("focusgroup", "toolbar");
76-
assert_equals(el.focusGroup, "toolbar");
169+
assert_true(el.focusGroup instanceof DOMTokenList);
170+
el.focusGroup.value = "toolbar";
171+
assert_equals(el.getAttribute("focusgroup"), "toolbar");
77172
el.focusGroupStart = true;
78173
assert_true(el.hasAttribute("focusgroupstart"));
79-
}, "focusGroup and focusGroupStart are exposed on SVGElement via the HTMLOrSVGOrMathMLElement mixin");
174+
}, "focusGroup DOMTokenList and focusGroupStart are exposed on SVGElement via the HTMLOrSVGOrMathMLElement mixin");
80175

81176
test(() => {
82177
const el = document.createElementNS("http://www.w3.org/1998/Math/MathML", "math");
83-
el.setAttribute("focusgroup", "tablist");
84-
assert_equals(el.focusGroup, "tablist");
178+
assert_true(el.focusGroup instanceof DOMTokenList);
179+
el.focusGroup.value = "tablist";
180+
assert_equals(el.getAttribute("focusgroup"), "tablist");
85181
el.focusGroupStart = true;
86182
assert_true(el.hasAttribute("focusgroupstart"));
87-
}, "focusGroup and focusGroupStart are exposed on MathMLElement via the HTMLOrSVGOrMathMLElement mixin");
183+
}, "focusGroup DOMTokenList and focusGroupStart are exposed on MathMLElement via the HTMLOrSVGOrMathMLElement mixin");
88184
</script>

0 commit comments

Comments
 (0)