1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Test: tabIndex getter return value</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#dom-tabindex">
<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>
|
