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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<!DOCTYPE html>
<meta charset=utf-8>
<title>Label event handling when a descendant noninteractive and unlabelable content is clicked</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<label id=label></label>
<template id=noninteractive-unlabelable-content>
<div></div>
<svg></svg>
<!-- These are "almost interactive": they could become interactive with the
addition/removal of a non-tabindex attribute. -->
<a></a>
<audio></audio>
<img>
<input type=hidden>
<video></video>
<!-- These are considered interactive content for the purpose of <label> in a
previous version of the HTML Standard, but no longer. -->
<a tabindex=""></a>
<audio tabindex=""></audio>
<div tabindex=""></div>
<img tabindex="">
<input type=hidden tabindex="">
<object></object>
<object tabindex=""></object>
<object usemap=""></object>
<video tabindex=""></video>
</template>
<script>
"use strict";
const template = document.getElementById("noninteractive-unlabelable-content");
{
const details = document.createElementNS("http://www.w3.org/2000/svg", "details");
template.content.appendChild(details);
}
const elements = Array.from(template.content.children);
const label = document.getElementById("label");
for (const srcElement of elements) {
test(t => {
t.add_cleanup(() => {
label.innerHTML = "";
});
const element = srcElement.cloneNode();
label.appendChild(element);
let clicked = 0;
element.addEventListener("click", () => {
clicked++;
});
element.dispatchEvent(new MouseEvent("click", { bubbles: true }));
assert_equals(clicked, 1, "clicking interactive content");
clicked = 0;
const span = document.createElement("span");
element.appendChild(span);
span.click();
assert_equals(clicked, 1, "clicking descendant of interactive content");
}, `noninteractive unlabelable content ${srcElement.outerHTML} as first child of <label>`);
test(t => {
t.add_cleanup(() => {
label.innerHTML = "";
});
const element = srcElement.cloneNode();
const div = document.createElement("div");
div.appendChild(element);
label.appendChild(div);
let clicked = 0;
element.addEventListener("click", () => {
clicked++;
});
element.dispatchEvent(new MouseEvent("click", { bubbles: true }));
assert_equals(clicked, 1, "clicking nested interactive content");
clicked = 0;
const span = document.createElement("span");
element.appendChild(span);
span.click();
assert_equals(clicked, 1, "clicking descendant of nested interactive content");
}, `noninteractive unlabelable content ${srcElement.outerHTML} deeply nested under <label>`);
test(t => {
t.add_cleanup(() => {
label.innerHTML = "";
});
const button = document.createElement("button");
label.appendChild(button);
const element = srcElement.cloneNode();
label.appendChild(element);
let buttonClicked = 0;
button.addEventListener("click", () => {
buttonClicked++;
});
let clicked = 0;
element.addEventListener("click", () => {
clicked++;
});
element.dispatchEvent(new MouseEvent("click", { bubbles: true }));
assert_equals(clicked, 1, "clicking noninteractive unlabelable content");
assert_equals(buttonClicked, 1, "clicking noninteractive unlabelable content should click button");
buttonClicked = 0;
clicked = 0;
const span = document.createElement("span");
element.appendChild(span);
span.click();
assert_equals(clicked, 1, "clicking descendant of nested noninteractive unlabelable content");
assert_equals(
buttonClicked, 1,
"clicking descendant of nested noninteractive unlabelable content should click button"
);
}, `noninteractive unlabelable content ${srcElement.outerHTML} as second child under <label>`);
}
</script>
</body>
|
