Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 20 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/interaction/focus/focusgroup/tentative/idl-reflection.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>focusgroup IDL attributes reflect focusgroup and focusgroupstart content attributes</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#the-focusgroup-attribute">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="fg-empty"></div>
<script>
test(() => {
const el = document.getElementById("fg-empty");
assert_true(el.focusGroup instanceof DOMTokenList,
"focusGroup should be a DOMTokenList instance");
}, "focusGroup IDL attribute is a DOMTokenList");
test(() => {
const el = document.getElementById("fg-empty");
assert_equals(el.focusGroup, el.focusGroup,
"focusGroup should return the same object each time");
}, "focusGroup satisfies [SameObject]");
test(() => {
const el = document.getElementById("fg-empty");
assert_equals(el.focusGroup.value, "");
}, "focusGroup.value on element without focusgroup content attribute is the empty string");
</script>
<div id="fg-set" focusgroup="toolbar"></div>
<script>
test(() => {
const el = document.getElementById("fg-set");
assert_equals(el.focusGroup.value, "toolbar");
}, "focusGroup.value reflects the focusgroup content attribute value");
test(() => {
const el = document.getElementById("fg-set");
assert_true(el.focusGroup.contains("toolbar"));
assert_false(el.focusGroup.contains("tablist"));
}, "focusGroup.contains() reflects individual tokens");
</script>
<script>
test(() => {
const el = document.createElement("div");
el.focusGroup = "tablist inline";
assert_equals(el.getAttribute("focusgroup"), "tablist inline");
}, "Setting focusGroup via PutForwards writes the focusgroup content attribute");
test(() => {
const el = document.createElement("div");
const tokenList = el.focusGroup;
el.focusGroup = "toolbar wrap";
assert_equals(el.focusGroup, tokenList,
"Assignment via PutForwards does not replace the DOMTokenList object");
assert_equals(el.focusGroup.value, "toolbar wrap");
}, "Setting focusGroup via PutForwards preserves the DOMTokenList object identity");
test(() => {
const el = document.createElement("div");
el.focusGroup.value = "toolbar wrap";
assert_equals(el.getAttribute("focusgroup"), "toolbar wrap");
}, "Setting focusGroup.value writes the focusgroup content attribute");
</script>
<script>
test(() => {
const el = document.createElement("div");
el.setAttribute("focusgroup", "toolbar");
el.focusGroup = "";
assert_equals(el.getAttribute("focusgroup"), "");
}, "Setting focusGroup to empty string clears the content attribute value");
</script>
<script>
test(() => {
const el = document.createElement("div");
el.setAttribute("focusgroup", "toolbar");
el.focusGroup.add("wrap");
assert_equals(el.getAttribute("focusgroup"), "toolbar wrap");
}, "focusGroup.add() appends a token and updates the content attribute");
test(() => {
const el = document.createElement("div");
el.setAttribute("focusgroup", "toolbar wrap");
el.focusGroup.remove("wrap");
assert_equals(el.getAttribute("focusgroup"), "toolbar");
}, "focusGroup.remove() removes a token and updates the content attribute");
test(() => {
const el = document.createElement("div");
el.setAttribute("focusgroup", "toolbar");
el.focusGroup.toggle("wrap");
assert_true(el.focusGroup.contains("wrap"));
el.focusGroup.toggle("wrap");
assert_false(el.focusGroup.contains("wrap"));
}, "focusGroup.toggle() adds or removes a token");
</script>
<script>
test(() => {
const el = document.createElement("div");
el.setAttribute("focusgroup", "toolbar");
assert_true(el.focusGroup.contains("toolbar"));
el.setAttribute("focusgroup", "tablist wrap");
assert_false(el.focusGroup.contains("toolbar"));
assert_true(el.focusGroup.contains("tablist"));
assert_true(el.focusGroup.contains("wrap"));
}, "setAttribute('focusgroup', ...) updates the existing DOMTokenList object");
</script>
<script>
test(() => {
const el = document.createElement("div");
const supported = [
"toolbar", "tablist", "radiogroup", "listbox",
"menu", "menubar", "wrap", "nowrap",
"inline", "block", "nomemory", "none"
];
for (const token of supported) {
assert_true(el.focusGroup.supports(token),
`focusGroup.supports("${token}") should return true`);
}
}, "focusGroup.supports() returns true for all standard tokens");
test(() => {
const el = document.createElement("div");
assert_false(el.focusGroup.supports("invalid"));
assert_false(el.focusGroup.supports("horizontal"));
assert_false(el.focusGroup.supports("vertical"));
}, "focusGroup.supports() returns false for unrecognized tokens");
</script>
<div id="fgs-absent"></div>
<script>
test(() => {
assert_false(document.getElementById("fgs-absent").focusGroupStart);
}, "focusGroupStart IDL attribute on an element without the focusgroupstart content attribute is false");
</script>
<div id="fgs-present" focusgroupstart></div>
<script>
test(() => {
assert_true(document.getElementById("fgs-present").focusGroupStart);
}, "focusGroupStart IDL attribute reflects presence of the focusgroupstart content attribute as true");
</script>
<script>
test(() => {
const el = document.createElement("div");
el.focusGroupStart = true;
assert_true(el.hasAttribute("focusgroupstart"));
}, "Setting focusGroupStart IDL attribute to true adds the focusgroupstart content attribute");
</script>
<script>
test(() => {
const el = document.createElement("div");
el.setAttribute("focusgroupstart", "");
el.focusGroupStart = false;
assert_false(el.hasAttribute("focusgroupstart"));
}, "Setting focusGroupStart IDL attribute to false removes the focusgroupstart content attribute");
</script>
<script>
test(() => {
assert_true(el.focusGroup instanceof DOMTokenList);
el.focusGroup.value = "toolbar";
assert_equals(el.getAttribute("focusgroup"), "toolbar");
el.focusGroupStart = true;
assert_true(el.hasAttribute("focusgroupstart"));
}, "focusGroup DOMTokenList and focusGroupStart are exposed on SVGElement via the HTMLOrSVGOrMathMLElement mixin");
test(() => {
assert_true(el.focusGroup instanceof DOMTokenList);
el.focusGroup.value = "tablist";
assert_equals(el.getAttribute("focusgroup"), "tablist");
el.focusGroupStart = true;
assert_true(el.hasAttribute("focusgroupstart"));
}, "focusGroup DOMTokenList and focusGroupStart are exposed on MathMLElement via the HTMLOrSVGOrMathMLElement mixin");
</script>