| <!DOCTYPE html> |
| <title>labels attribute of ElementInternals, and label association</title> |
| <body> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <div id="container"></div> |
| <script> |
| class MyControl extends HTMLElement { |
| static get formAssociated() { return true; } |
| |
| constructor() { |
| super(); |
| this.internals_ = this.attachInternals(); |
| } |
| get i() { return this.internals_; } |
| } |
| customElements.define('my-control', MyControl); |
| const container = document.querySelector('#container'); |
| |
| test(() => { |
| container.innerHTML = '<label><span><my-control></my-control></span></label>'; |
| let label = container.querySelector('label'); |
| let control = container.querySelector('my-control'); |
| assert_equals(label.control, control); |
| assert_true(control.i.labels instanceof NodeList); |
| assert_array_equals(control.i.labels, [label]); |
| |
| container.innerHTML = '<label for="mc"></label><form><my-control id="mc"></my-control></form>'; |
| label = container.querySelector('label'); |
| control = container.querySelector('my-control'); |
| assert_equals(label.control, control); |
| assert_equals(label.form, control.i.form); |
| assert_array_equals(control.i.labels, [label]); |
| |
| container.innerHTML = '<label for="mc"></label><label for="mc"><my-control id="mc">'; |
| const labels = container.querySelectorAll('label'); |
| control = container.querySelector('my-control'); |
| assert_array_equals(control.i.labels, labels); |
| }, 'LABEL association'); |
| |
| test(() => { |
| container.innerHTML = '<label for="mc"></label><form><my-control id="mc"></my-control></form>'; |
| const control = container.querySelector('my-control'); |
| let clickCount = 0; |
| control.addEventListener('click', e => { ++clickCount; }); |
| container.querySelector('label').click(); |
| assert_equals(clickCount, 1); |
| }, 'LABEL click'); |
| </script> |
| </body> |
