<!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>

