ElementInternals-labels.html (2571B)
1 <!DOCTYPE html> 2 <title>labels attribute of ElementInternals, and label association</title> 3 <body> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <div id="container"></div> 7 <script> 8 class MyControl extends HTMLElement { 9 static get formAssociated() { return true; } 10 11 constructor() { 12 super(); 13 this.internals_ = this.attachInternals(); 14 } 15 get i() { return this.internals_; } 16 } 17 customElements.define('my-control', MyControl); 18 const container = document.querySelector('#container'); 19 20 test(() => { 21 container.innerHTML = '<label><span><my-control></my-control></span></label>'; 22 let label = container.querySelector('label'); 23 let control = container.querySelector('my-control'); 24 assert_equals(label.control, control); 25 assert_true(control.i.labels instanceof NodeList); 26 assert_array_equals(control.i.labels, [label]); 27 28 container.innerHTML = '<label for="mc"></label><form><my-control id="mc"></my-control></form>'; 29 label = container.querySelector('label'); 30 control = container.querySelector('my-control'); 31 assert_equals(label.control, control); 32 assert_equals(label.form, control.i.form); 33 assert_array_equals(control.i.labels, [label]); 34 35 container.innerHTML = '<label for="mc"></label><label for="mc"><my-control id="mc">'; 36 const labels = container.querySelectorAll('label'); 37 control = container.querySelector('my-control'); 38 assert_array_equals(control.i.labels, labels); 39 40 container.innerHTML = '<my-control></my-control>'; 41 control = container.querySelector('my-control'); 42 assert_array_equals(control.i.labels, []); 43 44 container.innerHTML = '<label><x-foo></x-foo></label>'; 45 label = container.querySelector('label'); 46 assert_equals(label.control, null); 47 }, 'LABEL association'); 48 49 test(() => { 50 container.innerHTML = '<label for="mc"></label><form><my-control id="mc"></my-control></form>'; 51 const control = container.querySelector('my-control'); 52 let clickCount = 0; 53 control.addEventListener('click', e => { ++clickCount; }); 54 container.querySelector('label').click(); 55 assert_equals(clickCount, 1); 56 }, 'LABEL click'); 57 58 test(() => { 59 class NotFormAssociatedElement extends HTMLElement {} 60 customElements.define('not-form-associated-element', NotFormAssociatedElement); 61 const element = new NotFormAssociatedElement(); 62 const i = element.attachInternals(); 63 assert_throws_dom('NotSupportedError', () => i.labels); 64 }, "ElementInternals.labels should throw NotSupportedError if the target element is not a form-associated custom element"); 65 66 </script> 67 </body>