Skip to content

Commit de3b6fd

Browse files
josepharharchromium-wpt-export-bot
josepharhar
authored and
chromium-wpt-export-bot
committed
Allow <button> and <datalist> in <select>
As per the spec discussion, we are going to allow <button>s in <select> to replace the opener button and <datalist>s in <select> to replace the listbox instead of creating a <selectlist> element. whatwg/html#9799 Bug: 1511354 Change-Id: If2ee766c57faf655ab31c6714be7fd682efcc177 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5118452 Reviewed-by: David Baron <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1248491}
1 parent d0011b1 commit de3b6fd

File tree

1 file changed

+115
-0
lines changed

1 file changed

+115
-0
lines changed

‎html/semantics/forms/the-select-element/select-parsing.tentative.html

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!DOCTYPE html>
2+
<link rel=author href="mailto:[email protected]">
3+
<link rel=help href="https://github.com/whatwg/html/issues/9799">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
7+
<body>
8+
9+
<select id=s1>
10+
<div>div 1</div>
11+
<button>button</button>
12+
<div>div 2</div>
13+
<datalist>
14+
<option>option</option>
15+
</datalist>
16+
<div>div 3</div>
17+
</select>
18+
19+
<select id=s2>
20+
<div>div 1</div>
21+
<button>
22+
<span>level 1</span>
23+
<button>
24+
<span>level 2</span>
25+
</button>
26+
</button>
27+
<div>div 2</div>
28+
</select>
29+
30+
<select id=s3>
31+
<button>button
32+
</select>
33+
34+
<select id=s4>
35+
<datalist>datalist
36+
</select>
37+
38+
<select id=s5>
39+
<button>
40+
<select></select>
41+
</button>
42+
</select>
43+
44+
<select id=s6>
45+
<button>
46+
<div>
47+
<select>
48+
</select>
49+
50+
<div id=afterlast>
51+
keep this div after the last test case
52+
</div>
53+
54+
<script>
55+
test(() => {
56+
// The document.body check here and in the other tests is to make sure that a
57+
// previous test case didn't leave the HTML parser open on another element.
58+
assert_equals(document.getElementById('s1').parentNode, document.body);
59+
assert_equals(document.getElementById('s1').innerHTML, `
60+
div 1
61+
<button>button</button>
62+
div 2
63+
<datalist>
64+
<option>option</option>
65+
</datalist>
66+
div 3
67+
`);
68+
}, '<button>s and <datalist>s should be allowed in <select>.');
69+
70+
test(() => {
71+
assert_equals(document.getElementById('s2').parentNode, document.body);
72+
assert_equals(document.getElementById('s2').innerHTML, `
73+
div 1
74+
<button>
75+
<span>level 1</span>
76+
</button><button>
77+
<span>level 2</span>
78+
</button>
79+
\n div 2
80+
`);
81+
}, 'Nested <button>s in <select> should be flattened out.');
82+
83+
test(() => {
84+
assert_equals(document.getElementById('s3').parentNode, document.body);
85+
assert_equals(document.getElementById('s3').innerHTML, `
86+
<button>button
87+
</button>`);
88+
}, '</select> should close <button>.');
89+
90+
test(() => {
91+
assert_equals(document.getElementById('s4').parentNode, document.body);
92+
assert_equals(document.getElementById('s4').innerHTML, `
93+
<datalist>datalist
94+
</datalist>`);
95+
}, '</select> should close <datalist>.');
96+
97+
test(() => {
98+
assert_equals(document.getElementById('s5').parentNode, document.body);
99+
assert_equals(document.getElementById('s5').innerHTML, `
100+
<button>
101+
</button>`);
102+
}, '<select> in <button> in <select> should remove inner <select>.');
103+
104+
test(() => {
105+
assert_equals(document.getElementById('s6').parentNode, document.body);
106+
assert_equals(document.getElementById('s6').innerHTML, `
107+
<button>
108+
<div>
109+
</div></button>`);
110+
}, '<select> in <select><button><div> should remove inner <select>.');
111+
112+
test(() => {
113+
assert_equals(document.getElementById('afterlast').parentNode, document.body);
114+
}, 'The last test should not leave any tags open after parsing.');
115+
</script>

0 commit comments

Comments
 (0)