Skip to content

Commit c0c25cb

Browse files
lukewarlowlukewarlow
authored
Add tests for button type reflection and behaviour with command/commandfor and popovertarget (#50583)
1 parent 7d68e04 commit c0c25cb

File tree

6 files changed

+718
-45
lines changed

6 files changed

+718
-45
lines changed

‎html/semantics/popovers/button-type-popovertarget.html‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
<!DOCTYPE html>
2+
<link rel=author href="mailto:[email protected]">
3+
<link rel=author href="mailto:[email protected]">
4+
<link rel=help href="https://issues.chromium.org/issues/329118508">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
8+
<div id=mypopover popover=auto>popover</div>
9+
10+
<iframe name=foo></iframe>
11+
<form id="form" target=foo action="about:blank">
12+
<button id=reset-in-form type=reset popovertarget=mypopover>reset</button>
13+
<button id=submit-in-form type=submit popovertarget=mypopover>submit</button>
14+
<button id=button-in-form type=button popovertarget=mypopover>type=button</button>
15+
<button id=invalid-in-form type=invalid popovertarget=mypopover>invalid</button>
16+
<button id=missing-in-form popovertarget=mypopover>missing</button>
17+
</form>
18+
19+
<button id=reset-attr-form type=reset popovertarget=mypopover form=form>reset</button>
20+
<button id=submit-attr-form type=submit popovertarget=mypopover form=form>submit</button>
21+
<button id=button-attr-form type=button popovertarget=mypopover form=form>type=button</button>
22+
<button id=invalid-attr-form type=invalid popovertarget=mypopover form=form>invalid</button>
23+
<button id=missing-attr-form popovertarget=mypopover form=form>missing</button>
24+
25+
<button id=reset-outside-form type=reset popovertarget=mypopover>reset</button>
26+
<button id=submit-outside-form type=submit popovertarget=mypopover>submit</button>
27+
<button id=button-outside-form type=button popovertarget=mypopover>type=button</button>
28+
<button id=invalid-outside-form type=invalid popovertarget=mypopover>invalid</button>
29+
<button id=missing-outside-form popovertarget=mypopover>missing</button>
30+
31+
<script>
32+
test((t) => {
33+
let formReset = false;
34+
function onReset(e) {
35+
e.preventDefault();
36+
formReset = true;
37+
}
38+
form.addEventListener('reset', onReset);
39+
t.add_cleanup(() => {
40+
mypopover.hidePopover();
41+
form.removeEventListener('reset', onReset);
42+
});
43+
document.getElementById('reset-in-form').click();
44+
assert_true(formReset, 'type=reset should trigger form reset event');
45+
assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
46+
}, 'Button type=reset in form should trigger form reset and toggle popover');
47+
48+
test((t) => {
49+
let formSubmit = false;
50+
function onSubmit(e) {
51+
e.preventDefault();
52+
formSubmit = true;
53+
}
54+
form.addEventListener('submit', onSubmit);
55+
t.add_cleanup(() => {
56+
mypopover.hidePopover();
57+
form.removeEventListener('submit', onSubmit);
58+
});
59+
document.getElementById('submit-in-form').click();
60+
assert_true(formSubmit, 'type=submit should trigger form submit event');
61+
assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
62+
}, 'Button type=submit in form should trigger form submit and not toggle popover');
63+
64+
test((t) => {
65+
t.add_cleanup(() => {
66+
mypopover.hidePopover();
67+
});
68+
document.getElementById('button-in-form').click();
69+
assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
70+
}, 'Button type=button in form should toggle popover');
71+
72+
test((t) => {
73+
let formSubmit = false;
74+
function onSubmit(e) {
75+
e.preventDefault();
76+
formSubmit = true;
77+
}
78+
form.addEventListener('submit', onSubmit);
79+
t.add_cleanup(() => {
80+
mypopover.hidePopover();
81+
form.removeEventListener('submit', onSubmit);
82+
});
83+
document.getElementById('invalid-in-form').click();
84+
assert_true(formSubmit, 'type=invalid should trigger form submit event');
85+
assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
86+
}, 'Button type=invalid in form should trigger form submit and not toggle popover');
87+
88+
test((t) => {
89+
let formSubmit = false;
90+
function onSubmit(e) {
91+
e.preventDefault();
92+
formSubmit = true;
93+
}
94+
form.addEventListener('submit', onSubmit);
95+
t.add_cleanup(() => {
96+
mypopover.hidePopover();
97+
form.removeEventListener('submit', onSubmit);
98+
});
99+
document.getElementById('missing-in-form').click();
100+
assert_true(formSubmit, 'missing type should trigger form submit event');
101+
assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
102+
}, 'Button missing type in form should trigger form submit and not toggle popover');
103+
104+
test((t) => {
105+
let formReset = false;
106+
function onReset(e) {
107+
e.preventDefault();
108+
formReset = true;
109+
}
110+
form.addEventListener('reset', onReset);
111+
t.add_cleanup(() => {
112+
mypopover.hidePopover();
113+
form.removeEventListener('reset', onReset);
114+
});
115+
document.getElementById('reset-attr-form').click();
116+
assert_true(formReset, 'type=reset should trigger form reset event');
117+
assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
118+
}, 'Button type=reset with form attr should trigger form reset and toggle popover');
119+
120+
test((t) => {
121+
let formSubmit = false;
122+
function onSubmit(e) {
123+
e.preventDefault();
124+
formSubmit = true;
125+
}
126+
form.addEventListener('submit', onSubmit);
127+
t.add_cleanup(() => {
128+
mypopover.hidePopover();
129+
form.removeEventListener('submit', onSubmit);
130+
});
131+
document.getElementById('submit-attr-form').click();
132+
assert_true(formSubmit, 'type=submit should trigger form submit event');
133+
assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
134+
}, 'Button type=submit with form attr should trigger form submit and not toggle popover');
135+
136+
test((t) => {
137+
t.add_cleanup(() => {
138+
mypopover.hidePopover();
139+
});
140+
document.getElementById('button-attr-form').click();
141+
assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
142+
}, 'Button type=button with form attr should toggle popover');
143+
144+
test((t) => {
145+
let formSubmit = false;
146+
function onSubmit(e) {
147+
e.preventDefault();
148+
formSubmit = true;
149+
}
150+
form.addEventListener('submit', onSubmit);
151+
t.add_cleanup(() => {
152+
mypopover.hidePopover();
153+
form.removeEventListener('submit', onSubmit);
154+
});
155+
document.getElementById('invalid-attr-form').click();
156+
assert_true(formSubmit, 'type=invalid should trigger form submit event');
157+
assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
158+
}, 'Button type=invalid with form attr should trigger form submit and not toggle popover');
159+
160+
test((t) => {
161+
let formSubmit = false;
162+
function onSubmit(e) {
163+
e.preventDefault();
164+
formSubmit = true;
165+
}
166+
form.addEventListener('submit', onSubmit);
167+
t.add_cleanup(() => {
168+
mypopover.hidePopover();
169+
form.removeEventListener('submit', onSubmit);
170+
});
171+
document.getElementById('missing-attr-form').click();
172+
assert_true(formSubmit, 'missing type should trigger form submit event');
173+
assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
174+
}, 'Button missing type with form attr should trigger form submit and not toggle popover');
175+
176+
test((t) => {
177+
t.add_cleanup(() => {
178+
mypopover.hidePopover();
179+
});
180+
document.getElementById('reset-outside-form').click();
181+
assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
182+
}, 'Button type=reset outside form should toggle popover');
183+
184+
test((t) => {
185+
t.add_cleanup(() => {
186+
mypopover.hidePopover();
187+
});
188+
document.getElementById('submit-outside-form').click();
189+
assert_true(mypopover.matches(':popover-open'), 'type=submit should toggle the popover');
190+
}, 'Button type=submit outside form should toggle popover');
191+
192+
test((t) => {
193+
t.add_cleanup(() => {
194+
mypopover.hidePopover();
195+
});
196+
document.getElementById('button-outside-form').click();
197+
assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
198+
}, 'Button type=button outside form should toggle popover');
199+
200+
test((t) => {
201+
t.add_cleanup(() => {
202+
mypopover.hidePopover();
203+
});
204+
document.getElementById('invalid-outside-form').click();
205+
assert_true(mypopover.matches(':popover-open'), 'type=invalid should toggle the popover');
206+
}, 'Button type=invalid outside form should toggle popover');
207+
208+
test((t) => {
209+
t.add_cleanup(() => {
210+
mypopover.hidePopover();
211+
});
212+
document.getElementById('missing-outside-form').click();
213+
assert_true(mypopover.matches(':popover-open'), 'missing type should toggle the popover');
214+
}, 'Button missing type outside form should toggle popover');
215+
</script>

‎html/semantics/popovers/button-type-reset-popovertarget.html‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

0 commit comments

Comments
 (0)