Skip to content

Commit

Permalink
Allow <button> and <datalist> in <select>
Browse files Browse the repository at this point in the history
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
  • Loading branch information
josepharhar authored and chromium-wpt-export-bot committed Dec 19, 2023
1 parent 7bc216e commit c46030c
Showing 1 changed file with 84 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<link rel=author href="mailto:[email protected]">
<link rel=help href="https://github.com/whatwg/html/issues/9799">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<select id=s1>
<div>div 1</div>
<button>button</button>
<div>div 2</div>
<datalist>
<option>option</option>
</datalist>
<div>div 3</div>
</select>

<select id=s2>
<div>div 1</div>
<button>
<span>level 1</span>
<button>
<span>level 2</span>
</button>
</button>
<div>div 2</div>
</select>

<select id=s3>
<button>button
</select>

<select id=s4>
<datalist>datalist
</select>

<select id=s5>
<button>
<select></select>
</button>
</select>

<script>
test(() => {
assert_equals(document.getElementById('s1').innerHTML, `
div 1
<button>button</button>
div 2
<datalist>
<option>option</option>
</datalist>
div 3
`);
}, '<button>s and <datalist>s should be allowed in <select>.');

test(() => {
assert_equals(document.getElementById('s2').innerHTML, `
div 1
<button>
<span>level 1</span>
</button><button>
<span>level 2</span>
</button>
\n div 2
`);
}, 'Nested <button>s in <select> should be flattened out.');

test(() => {
assert_equals(document.getElementById('s3').innerHTML, `
<button>button
</button>`);
}, '</select> should close <button>.');

test(() => {
assert_equals(document.getElementById('s4').innerHTML, `
<datalist>datalist
</datalist>`);
}, '</select> should close <datalist>.');

test(() => {
assert_equals(document.getElementById('s5').innerHTML, `
<button>
</button>`);
}, '<select> in <button> in <select> should remove inner <select>.');
</script>

0 comments on commit c46030c

Please sign in to comment.