1<!DOCTYPE html>
2<meta charset="utf-8">
3<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org">
4<title>input and change events for detached checkbox and radio elements</title>
5<script src="/resources/testharness.js"></script>
6<script src="/resources/testharnessreport.js"></script>
7
8<body>
9<script>
10
11test(() => {
12  const input = document.createElement('input');
13  input.type = 'checkbox';
14
15  let inputEventFired = false;
16  input.addEventListener('input', () => inputEventFired = true);
17  let changeEventFired = false;
18  input.addEventListener('change', () => changeEventFired = true);
19  input.click();
20  assert_false(inputEventFired);
21  assert_false(changeEventFired);
22}, 'detached checkbox should not emit input or change events on click().');
23
24test(() => {
25  const input = document.createElement('input');
26  input.type = 'radio';
27
28  let inputEventFired = false;
29  input.addEventListener('input', () => inputEventFired = true);
30  let changeEventFired = false;
31  input.addEventListener('change', () => changeEventFired = true);
32  input.click();
33  assert_false(inputEventFired);
34  assert_false(changeEventFired);
35}, 'detached radio should not emit input or change events on click().');
36
37test(() => {
38  const input = document.createElement('input');
39  input.type = 'checkbox';
40
41  let inputEventFired = false;
42  input.addEventListener('input', () => inputEventFired = true);
43  let changeEventFired = false;
44  input.addEventListener('change', () => changeEventFired = true);
45  input.dispatchEvent(new MouseEvent('click'));
46  assert_false(inputEventFired);
47  assert_false(changeEventFired);
48}, `detached checkbox should not emit input or change events on dispatchEvent(new MouseEvent('click')).`);
49
50test(() => {
51  const input = document.createElement('input');
52  input.type = 'radio';
53
54  let inputEventFired = false;
55  input.addEventListener('input', () => inputEventFired = true);
56  let changeEventFired = false;
57  input.addEventListener('change', () => changeEventFired = true);
58  input.dispatchEvent(new MouseEvent('click'));
59  assert_false(inputEventFired);
60  assert_false(changeEventFired);
61}, `detached radio should not emit input or change events on dispatchEvent(new MouseEvent('click')).`);
62
63
64test(() => {
65  const input = document.createElement('input');
66  input.type = 'checkbox';
67  document.body.appendChild(input);
68
69  let inputEventFired = false;
70  input.addEventListener('input', () => inputEventFired = true);
71  let changeEventFired = false;
72  input.addEventListener('change', () => changeEventFired = true);
73  input.click();
74  assert_true(inputEventFired);
75  assert_true(changeEventFired);
76}, 'attached checkbox should emit input and change events on click().');
77
78test(() => {
79  const input = document.createElement('input');
80  input.type = 'radio';
81  document.body.appendChild(input);
82
83  let inputEventFired = false;
84  input.addEventListener('input', () => inputEventFired = true);
85  let changeEventFired = false;
86  input.addEventListener('change', () => changeEventFired = true);
87  input.click();
88  assert_true(inputEventFired);
89  assert_true(changeEventFired);
90}, 'attached radio should emit input and change events on click().');
91
92test(() => {
93  const input = document.createElement('input');
94  input.type = 'checkbox';
95  document.body.appendChild(input);
96
97  let inputEventFired = false;
98  input.addEventListener('input', () => inputEventFired = true);
99  let changeEventFired = false;
100  input.addEventListener('change', () => changeEventFired = true);
101  input.dispatchEvent(new MouseEvent('click'));
102  assert_true(inputEventFired);
103  assert_true(changeEventFired);
104}, `attached checkbox should emit input and change events on dispatchEvent(new MouseEvent('click')).`);
105
106test(() => {
107  const input = document.createElement('input');
108  input.type = 'radio';
109  document.body.appendChild(input);
110
111  let inputEventFired = false;
112  input.addEventListener('input', () => inputEventFired = true);
113  let changeEventFired = false;
114  input.addEventListener('change', () => changeEventFired = true);
115  input.dispatchEvent(new MouseEvent('click'));
116  assert_true(inputEventFired);
117  assert_true(changeEventFired);
118}, `attached radio should emit input and change events on dispatchEvent(new MouseEvent('click')).`);
119
120
121test(() => {
122  const input = document.createElement('input');
123  input.type = 'checkbox';
124  const shadowHost = document.createElement('div');
125  document.body.appendChild(shadowHost);
126  const shadowRoot = shadowHost.attachShadow({mode: 'open'});
127  shadowRoot.appendChild(input);
128
129  let inputEventFired = false;
130  input.addEventListener('input', () => inputEventFired = true);
131  let changeEventFired = false;
132  input.addEventListener('change', () => changeEventFired = true);
133  input.click();
134  assert_true(inputEventFired);
135  assert_true(changeEventFired);
136}, 'attached to shadow dom checkbox should emit input and change events on click().');
137
138test(() => {
139  const input = document.createElement('input');
140  input.type = 'radio';
141  const shadowHost = document.createElement('div');
142  document.body.appendChild(shadowHost);
143  const shadowRoot = shadowHost.attachShadow({mode: 'open'});
144  shadowRoot.appendChild(input);
145
146  let inputEventFired = false;
147  input.addEventListener('input', () => inputEventFired = true);
148  let changeEventFired = false;
149  input.addEventListener('change', () => changeEventFired = true);
150  input.click();
151  assert_true(inputEventFired);
152  assert_true(changeEventFired);
153}, 'attached to shadow dom radio should emit input and change events on click().');
154
155test(() => {
156  const input = document.createElement('input');
157  input.type = 'checkbox';
158  const shadowHost = document.createElement('div');
159  document.body.appendChild(shadowHost);
160  const shadowRoot = shadowHost.attachShadow({mode: 'open'});
161  shadowRoot.appendChild(input);
162
163  let inputEventFired = false;
164  input.addEventListener('input', () => inputEventFired = true);
165  let changeEventFired = false;
166  input.addEventListener('change', () => changeEventFired = true);
167  input.dispatchEvent(new MouseEvent('click'));
168  assert_true(inputEventFired);
169  assert_true(changeEventFired);
170}, `attached to shadow dom checkbox should emit input and change events on dispatchEvent(new MouseEvent('click')).`);
171
172test(() => {
173  const input = document.createElement('input');
174  input.type = 'radio';
175  const shadowHost = document.createElement('div');
176  document.body.appendChild(shadowHost);
177  const shadowRoot = shadowHost.attachShadow({mode: 'open'});
178  shadowRoot.appendChild(input);
179
180  let inputEventFired = false;
181  input.addEventListener('input', () => inputEventFired = true);
182  let changeEventFired = false;
183  input.addEventListener('change', () => changeEventFired = true);
184  input.dispatchEvent(new MouseEvent('click'));
185  assert_true(inputEventFired);
186  assert_true(changeEventFired);
187}, `attached to shadow dom radio should emit input and change events on dispatchEvent(new MouseEvent('click')).`);
188
189</script>
190</body>
191