1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<!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);
container.innerHTML = '<my-control></my-control>';
control = container.querySelector('my-control');
assert_array_equals(control.i.labels, []);
container.innerHTML = '<label><x-foo></x-foo></label>';
label = container.querySelector('label');
assert_equals(label.control, null);
}, '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');
test(() => {
class NotFormAssociatedElement extends HTMLElement {}
customElements.define('not-form-associated-element', NotFormAssociatedElement);
const element = new NotFormAssociatedElement();
const i = element.attachInternals();
assert_throws_dom('NotSupportedError', () => i.labels);
}, "ElementInternals.labels should throw NotSupportedError if the target element is not a form-associated custom element");
</script>
</body>
|
