From 7e54533bd7746e946b5dcf49966c12e026da47d6 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Mon, 8 Jan 2024 11:30:12 -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             | 97 +++++++++++++++++++
 1 file changed, 97 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 00000000000000..afa9e6b99063a4
--- /dev/null
+++ 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>
