<!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>