proxy-click-to-associated-element.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-label-element/proxy-click-to-associated-element.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<title>label element click proxying 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="foo" type="checkbox" />

    <label id="foo-label" for="foo">foo</label>

    <label id="bar-label">

        <input id="bar" type="checkbox" /> bar

        <input id="baz" type="checkbox" /> baz

    </label>

    <input id="baz" type="checkbox" />

    <label id="baz-label" for="baz">baz</label>

</form>

<script>

  "use strict";

  async_test(t => {

    const label = document.getElementById("foo-label");

    const input = document.getElementById("foo");

    input.addEventListener("click", t.step_func_done());

    label.click();

  }, "label with for attribute should proxy click events to the associated element");

  async_test(t => {

    const label = document.getElementById("bar-label");

    const input = document.getElementById("bar");

    input.addEventListener("click", t.step_func_done());

    label.click();

  }, "label without for attribute should proxy click events to the first labelable child");

  async_test(t => {

    const label = document.getElementById("baz-label");

    const input = document.getElementById("baz");

    input.addEventListener("click", t.unreached_func("Input should not receive click"));

    label.addEventListener("click", t.step_func(ev => {

      ev.preventDefault();

      t.step_timeout(() => t.done(), 500);

    }));

    label.click();

  }, "clicking a label that prevents the event's default should not proxy click events");

</script>