<!DOCTYPE HTML>
<title>label element click proxying via "for" attribute or nested labelable element</title>
<link rel="author" title="yaycmyk" href="mailto:[email protected]">
<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>
Codebase Browser
chromium