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
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>Label event handling when a descendant interactive content is clicked</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<label id=label></label>
<template id=interactive-content>
<a href="about:blank" onclick="event.preventDefault()"></a>
<audio controls></audio>
<button></button>
<details></details>
<embed>
<iframe></iframe>
<img usemap="">
<input>
<label>label</label>
<select></select>
<textarea></textarea>
<video controls></video>
</template>
<script>
"use strict";
const interactiveContent = document.getElementById("interactive-content");
const interactiveElements = Array.from(interactiveContent.content.children);
const label = document.getElementById("label");
for (const srcInteractiveElement of interactiveElements) {
test(t => {
t.add_cleanup(() => {
label.innerHTML = "";
});
const interactiveElement = srcInteractiveElement.cloneNode();
label.appendChild(interactiveElement);
let clicked = 0;
interactiveElement.addEventListener("click", () => {
clicked++;
});
interactiveElement.click();
assert_equals(clicked, 1, "clicking interactive content");
clicked = 0;
const span = document.createElement("span");
interactiveElement.appendChild(span);
span.click();
assert_equals(clicked, 1, "clicking descendant of interactive content");
}, `interactive content ${srcInteractiveElement.outerHTML} as first child of <label>`);
test(t => {
t.add_cleanup(() => {
label.innerHTML = "";
});
const interactiveElement = srcInteractiveElement.cloneNode();
const div = document.createElement("div");
div.appendChild(interactiveElement);
label.appendChild(div);
let clicked = 0;
interactiveElement.addEventListener("click", () => {
clicked++;
});
interactiveElement.click();
assert_equals(clicked, 1, "clicking nested interactive content");
clicked = 0;
const span = document.createElement("span");
interactiveElement.appendChild(span);
span.click();
assert_equals(clicked, 1, "clicking descendant of nested interactive content");
}, `interactive content ${srcInteractiveElement.outerHTML} deeply nested under <label>`);
test(t => {
t.add_cleanup(() => {
label.innerHTML = "";
});
const button = document.createElement("button");
label.appendChild(button);
const interactiveElement = srcInteractiveElement.cloneNode();
label.appendChild(interactiveElement);
let buttonClicked = 0;
button.addEventListener("click", () => {
buttonClicked++;
});
let clicked = 0;
interactiveElement.addEventListener("click", () => {
clicked++;
});
interactiveElement.click();
assert_equals(clicked, 1, "clicking nested interactive content");
assert_equals(buttonClicked, 0, "clicking nested interactive content should not click button");
clicked = 0;
const span = document.createElement("span");
interactiveElement.appendChild(span);
span.click();
assert_equals(clicked, 1, "clicking descendant of nested interactive content");
assert_equals(buttonClicked, 0, "clicking descendant of nested interactive content should not click button");
}, `interactive content ${srcInteractiveElement.outerHTML} as second child under <label>`);
}
</script>
</body>
|
