proxy-click-to-associated-element.html (1841B)
1 <!DOCTYPE HTML> 2 <title>label element click proxying via "for" attribute or nested labelable element</title> 3 <link rel="author" title="yaycmyk" href="mailto:evan@yaycmyk.com"> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#the-label-element:the-label-element-10"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <div id="log"></div> 8 <form id="test"> 9 <input id="foo" type="checkbox" /> 10 <label id="foo-label" for="foo">foo</label> 11 12 <label id="bar-label"> 13 <input id="bar" type="checkbox" /> bar 14 <input id="baz" type="checkbox" /> baz 15 </label> 16 17 <input id="baz" type="checkbox" /> 18 <label id="baz-label" for="baz">baz</label> 19 </form> 20 <script> 21 "use strict"; 22 23 async_test(t => { 24 const label = document.getElementById("foo-label"); 25 const input = document.getElementById("foo"); 26 27 input.addEventListener("click", t.step_func_done()); 28 29 label.click(); 30 31 }, "label with for attribute should proxy click events to the associated element"); 32 33 async_test(t => { 34 const label = document.getElementById("bar-label"); 35 const input = document.getElementById("bar"); 36 37 input.addEventListener("click", t.step_func_done()); 38 39 label.click(); 40 41 }, "label without for attribute should proxy click events to the first labelable child"); 42 43 async_test(t => { 44 45 const label = document.getElementById("baz-label"); 46 const input = document.getElementById("baz"); 47 48 input.addEventListener("click", t.unreached_func("Input should not receive click")); 49 label.addEventListener("click", t.step_func(ev => { 50 ev.preventDefault(); 51 t.step_timeout(() => t.done(), 500); 52 })); 53 54 label.click(); 55 56 }, "clicking a label that prevents the event's default should not proxy click events"); 57 58 </script>