<!DOCTYPE HTML>
<title>label element focus forwarding via "for" attribute or nested labelable element</title>
<link rel="author" title="yaycmyk" href="mailto:evan@yaycmyk.com">
<link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#the-label-element:the-label-element-10">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<form id="test">
  <input id="input-a" type="checkbox">
  <label id="label-a" for="input-a">a</label>

  <label id="label-b">
    <input id="input-b" type="checkbox" /> b
  </label>

  <label id="label-c" tabindex="0">
    <input id="input-c" type="checkbox" /> c
  </label>

  <label id="label-d" tabindex="-1">
    <input id="input-d" type="checkbox" /> d
  </label>

  <label id="label-e" tabindex="">
    <input id="input-e" type="checkbox" /> e
  </label>

  <input id="input-f" type="checkbox">
  <label id="label-f" for="input-f" tabindex="0" style="display:none">f</label>
</form>
<script>
  "use strict";

  async_test(t => {
    const label = document.getElementById("label-a");
    const input = document.getElementById("input-a");

    input.addEventListener("focus", t.step_func_done());
    label.addEventListener("focus", t.unreached_func("Label should not receive focus"));

    label.focus();

  }, "focusing a label with for attribute should forward focus to the associated element");

  async_test(t => {
    const label = document.getElementById("label-b");
    const input = document.getElementById("input-b");

    input.addEventListener("focus", t.step_func_done());
    label.addEventListener("focus", t.unreached_func("Label should not receive focus"));

    label.focus();

  }, "focusing a label without for attribute should fowrad focus to the first labelable child");

  async_test(t => {
    const label = document.getElementById("label-c");
    const input = document.getElementById("input-c");

    input.addEventListener("focus", t.unreached_func("Input should not receive focus"));
    label.addEventListener("focus", t.step_func_done());

    label.focus();

  }, "focusing a label with tabindex should not forward focus to the labelable element");

  async_test(t => {
    const label = document.getElementById("label-d");
    const input = document.getElementById("input-d");

    input.addEventListener("focus", t.unreached_func("Input should not receive focus"));
    label.addEventListener("focus", t.step_func_done());

    label.focus();

  }, "focusing a label with negative tabindex should not forward focus to the labelable element");

  async_test(t => {
    const label = document.getElementById("label-e");
    const input = document.getElementById("input-e");

    label.addEventListener("focus", t.unreached_func("Label should not receive focus"));
    input.addEventListener("focus", t.step_func_done());

    label.focus();

  }, "focusing a label with empty tabindex should forward focus to the labelable element");

  async_test(t => {
    const label = document.getElementById("label-f");
    const input = document.getElementById("input-f");

    label.addEventListener("focus", t.unreached_func("Label should not receive focus"));
    input.addEventListener("focus", t.step_func_done());

    label.focus();

  }, "focusing a hidden label with tabindex should forward focus to the labelable element");
</script>
