mirror of
https://github.com/servo/servo.git
synced 2025-08-05 21:50:18 +01:00
50 lines
1.8 KiB
HTML
50 lines
1.8 KiB
HTML
<!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>
|