label-delegatesFocus.html (2289B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1300587"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 9 <form> 10 <label for=custom>label</label> 11 <my-custom-element id=custom></my-custom-element> 12 </form> 13 14 <form> 15 <label for=custom2><span>label</span></label> 16 <my-custom-element id=custom2></my-custom-element> 17 </form> 18 19 <script> 20 class MyCustomElement extends HTMLElement { 21 static formAssociated = true; 22 constructor() { 23 super(); 24 const root = this.attachShadow({ 25 delegatesFocus: true, 26 mode: 'open' 27 }); 28 root.appendChild(document.createElement('input')); 29 } 30 }; 31 customElements.define('my-custom-element', MyCustomElement); 32 33 window.onload = () => { 34 promise_test(async () => { 35 const label = document.querySelector('label'); 36 const customElement = document.getElementById('custom'); 37 const input = customElement.shadowRoot.querySelector('input'); 38 let focused = false; 39 input.addEventListener("focus", evt => { focused = true; }, {once: true}); 40 await test_driver.click(label); 41 assert_true(focused, "should have received focus"); 42 assert_equals(document.activeElement, customElement); 43 assert_equals(customElement.shadowRoot.activeElement, input); 44 }, `Clicking on a label for a form associated custom element with delegatesFocus should focus the custom element's focus delegate.`); 45 promise_test(async () => { 46 const span = document.querySelector('span'); 47 const customElement = document.getElementById('custom2'); 48 const input = customElement.shadowRoot.querySelector('input'); 49 let focused = false; 50 input.addEventListener("focus", evt => { focused = true; }, {once: true}); 51 await test_driver.click(span); 52 assert_true(focused, "should have received focus"); 53 assert_equals(document.activeElement, customElement); 54 assert_equals(customElement.shadowRoot.activeElement, input); 55 }, `Clicking on a span in a label for a form associated custom element with delegatesFocus should focus the custom element's focus delegate.`); 56 }; 57 </script>