From 26096d87e1f600b5b90d38fcd58fbde7fbb8c6ee Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Tue, 19 Dec 2023 12:25:22 -0800
Subject: [PATCH] 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.
https://github.com/whatwg/html/issues/9799

Bug: 1511354
Change-Id: If2ee766c57faf655ab31c6714be7fd682efcc177
---
 .../select-parsing.tentative.html             | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 html/semantics/forms/the-select-element/select-parsing.tentative.html
diff --git a/html/semantics/forms/the-select-element/select-parsing.tentative.html b/html/semantics/forms/the-select-element/select-parsing.tentative.html
new file mode 100644
index 000000000000000..45a957a8168dcfe
--- /dev/null
+++ b/html/semantics/forms/the-select-element/select-parsing.tentative.html
@@ -0,0 +1,85 @@
+<!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>
+
+<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>
+  
+  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>
