disabled-delegatesFocus.html (1676B)
1 <!DOCTYPE html> 2 <meta charset="utf8"> 3 <title>delegatesFocus on disabled form-associated custom elements</title> 4 <link rel="author" href="mailto:avandolder@mozilla.com"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script> 8 class CustomControl extends HTMLElement { 9 static get formAssociated() {return true;} 10 11 constructor() { 12 super(); 13 this.internals = this.attachInternals(); 14 15 this.attachShadow({mode: "open", delegatesFocus: true}); 16 this.shadowRoot.append( 17 document.querySelector("template").content.cloneNode(true) 18 ); 19 20 this.eventFired = false; 21 this.addEventListener("focus", () => this.eventFired = true); 22 } 23 } 24 25 customElements.define("custom-control", CustomControl) 26 </script> 27 28 <template> 29 <div tabindex=0 id="target"> 30 <slot></slot> 31 </div> 32 </template> 33 34 <form> 35 <custom-control disabled>Text</custom-control> 36 </form> 37 38 <script> 39 let focusinPropagated = false; 40 let focusoutPropagated = false; 41 42 const form = document.querySelector("form"); 43 form.addEventListener("focusin", () => focusinPropagated = true); 44 form.addEventListener("focusout", () => focusoutPropagated = true); 45 46 test(() => { 47 const element = document.querySelector("custom-control"); 48 element.focus(); 49 50 assert_true(element.eventFired, "Focus event fired on custom control"); 51 assert_true(focusinPropagated, "FocusIn event propagated through control"); 52 53 element.blur(); 54 assert_true(focusoutPropagated, "FocusOut event propagated through control"); 55 }, "Focus events fire on disabled form-associated custom elements with delegatesFocus"); 56 </script>