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
web-platform-tests · Jan 8, 2024 · 7e54533 · 7e54533
1 parent 32017da
commit 7e54533
Showing 1 changed file with 97 additions and 0 deletions.
diff --git a/html/semantics/forms/the-select-element/select-parsing.tentative.html b/html/semantics/forms/the-select-element/select-parsing.tentative.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<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>
+
+<select id=s6>
+  <button>
+    <div>
+      <select>
+</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>.');
+
+test(() => {
+  assert_equals(document.getElementById('s6').innerHTML, `
+  <button>
+    <div>
+      </div></button>`);
+}, '<select> in <select><button><div> should remove inner <select>.');
+</script>