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
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>Label event handling when a descendant labelable but not interactive element is clicked</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<label id=label></label>
<template id=labelable-not-interactive-content>
<meter></meter>
<output></output>
<progress></progress>
</template>
<script>
"use strict";
const template = document.getElementById("labelable-not-interactive-content");
const labelableNotInteractiveElements = Array.from(template.content.children);
const label = document.getElementById("label");
// This part may be subject to platform-dependent operations in the spec, so we
// only check for obvious errors. (Clicking once should register at least one
// click, but less than 30 clicks.) See
// https://github.com/whatwg/html/issues/5415 for possibly tightening this up.
function checkClickCount(clicked, description) {
assert_greater_than(clicked, 0, description);
assert_less_than(clicked, 30, description);
}
for (const srcElement of labelableNotInteractiveElements) {
test(t => {
t.add_cleanup(() => {
label.innerHTML = "";
});
const element = srcElement.cloneNode();
label.appendChild(element);
let clicked = 0;
element.addEventListener("click", () => {
clicked++;
});
element.click();
checkClickCount(clicked, "clicking labelable content");
clicked = 0;
const span = document.createElement("span");
element.appendChild(span);
span.click();
checkClickCount(clicked, "clicking descendant of labelable content");
}, `labelable element ${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.click();
checkClickCount(clicked, "clicking nested labelable content");
clicked = 0;
const span = document.createElement("span");
element.appendChild(span);
span.click();
checkClickCount(clicked, "clicking descendant of nested labelable content");
}, `labelable element ${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.click();
assert_equals(clicked, 1, "clicking nested labelable content");
assert_equals(buttonClicked, 1, "clicking nested labelable 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 labelable content");
assert_equals(buttonClicked, 1, "clicking descendant of nested labelable content should not click button");
}, `labelable element ${srcElement.outerHTML} as second child under <label>`);
}
</script>
</body>
|
