proxy-modifier-click-to-associated-element.tentative.html (2910B)
1 <!DOCTYPE HTML> 2 <title>clicks on label element with modifier keys should be proxied to its associated control</title> 3 <link rel="author" title="Mu-An Chiou" href="mailto:hi@muan.co"> 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 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <div id="log"></div> 11 <div style="user-select: none;"> 12 <label id="click-label" for="click">foo</label><input id="click" type="checkbox" /> 13 <label id="shift-label" for="shift">foo</label><input id="shift" type="checkbox" /> 14 <label id="alt-label" for="alt">foo</label><input id="alt" type="checkbox" /> 15 <label id="meta-label" for="meta">foo</label><input id="meta" type="checkbox" /> 16 </div> 17 <script> 18 "use strict"; 19 20 function clickWithModifier(label, key) { 21 return (new test_driver.Actions() 22 .keyDown(key) 23 .pointerMove(0, 0, { origin: label }) 24 .pointerDown() 25 .pointerUp() 26 .addTick() 27 .keyUp(key)) 28 .send() 29 } 30 31 promise_test(async () => { 32 const label = document.getElementById("click-label"); 33 const input = document.getElementById("click"); 34 35 let receivedClick = false; 36 input.addEventListener("click", () => receivedClick = true); 37 await test_driver.click(label); 38 assert_true(receivedClick); 39 }, "label with for attribute should proxy click events to the associated element on click"); 40 41 promise_test(async () => { 42 const label = document.getElementById("shift-label"); 43 const input = document.getElementById("shift"); 44 45 let receivedClick = false; 46 input.addEventListener("click", () => receivedClick = true); 47 await clickWithModifier(label, "\uE008"); // ShiftLeft 48 assert_true(receivedClick); 49 }, "label with for attribute should proxy click events to the associated element on shift click"); 50 51 promise_test(async () => { 52 const label = document.getElementById("alt-label"); 53 const input = document.getElementById("alt"); 54 55 let receivedClick = false; 56 input.addEventListener("click", () => receivedClick = true); 57 await clickWithModifier(label, "\uE00A"); // AltLeft 58 assert_true(receivedClick); 59 }, "label with for attribute should proxy click events to the associated element on alt click"); 60 61 promise_test(async () => { 62 const label = document.getElementById("meta-label"); 63 const input = document.getElementById("meta"); 64 65 let receivedClick = false; 66 input.addEventListener("click", () => receivedClick = true); 67 await clickWithModifier(label, "\uE03D"); // OSLeft 68 assert_true(receivedClick); 69 }, "label with for attribute should proxy click events to the associated element on meta click"); 70 71 </script>