Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/interaction/focus/sequential-focus-navigation-and-the-tabindex-attribute/tabindex-getter.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Test: tabIndex getter return value</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#scrollable {
width: 100px;
height: 100px;
overflow: scroll;
}
#scrollable-inner {
width: 1024px;
height: 2048px;
}
</style>
<body>
<input>
<input type="hidden">
<button>button</button>
<button disabled>button</button>
<button hidden>button</button>
<a>a</a>
<a href="#">a</a>
<svg><a>svg a</a></svg>
<svg><a>svg a</a></svg>
<link id="nohref">
<textarea></textarea>
<select><optgroup><option>option</option></optgroup></select>
<select multiple></select>
<iframe width="10" height="10"></iframe>
<embed width="10" height="10"></embed>
<object width="10" height="10"></object>
<span></span>
<div></div>
<details><summary>summary</summary><summary id="secondsummary">second summary</summary>details</details>
<div id="hostDelegatesFocus"></div>
<div id="hostNonDelegatesFocus"></div>
<div contenteditable="true"></div>
<div id="scrollable"><div id="scrollable-inner"></div></div>
<fieldset></fieldset>
<output></output>
<slot></slot>
<script>
document.getElementById("hostDelegatesFocus").attachShadow({ mode: "open", delegatesFocus: true });
document.getElementById("hostNonDelegatesFocus").attachShadow({ mode: "open", delegatesFocus: false });
const defaultList = [
["input", 0],
["input[type='hidden']", 0],
["button", 0],
["button[disabled]", 0],
["button[hidden]", 0],
["a", 0],
["a[href]", 0],
["svg a", 0],
["textarea", 0],
["select", 0],
["select[multiple]", 0],
["option", -1],
["optgroup", -1],
["iframe", 0],
["embed", -1],
["object", 0],
["span", -1],
["div", -1],
["link#nohref", -1],
["link[href]", -1],
["details", -1],
["summary", 0],
["summary#secondsummary", -1],
["#hostDelegatesFocus", -1],
["#hostNonDelegatesFocus", -1],
["div[contenteditable]", -1],
["#scrollable", -1],
["fieldset", -1],
["output", -1],
["slot", -1],
];
const tabIndexValue = [-1, 0, 1];
for (const entry of defaultList) {
const element = document.querySelector(entry[0]);
test(() => {
assert_equals(element.tabIndex, entry[1]);
}, entry[0] + ".tabIndex should return " + entry[1] + " by default");
for (const setValue of tabIndexValue ) {
test(() => {
element.setAttribute("tabindex", setValue);
assert_equals(element.tabIndex, setValue);
}, entry[0] + ".tabIndex should return " + setValue + " when set to " + setValue);
}
}
</script>
</body>