| <!DOCTYPE html> |
| <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_; } |
| |
| set value(v) {} |
| } |
| 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_equals(control.i.labels[0], 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_equals(control.i.labels[0], 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_equals(control.i.labels[0], labels[0]); |
| assert_equals(control.i.labels[1], labels[1]); |
| }, '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> |
