Allow <input> in <select> before <option>s

josepharhar · chromium-wpt-export-bot · commit d24e64dafd23 · 2026-05-04T18:12:56.000-07:00
This patch allows behind a flag and UseCounts when an <input> is parsed inside a <select> before any <option> elements were parsed inside the <select>. Before this patch, <input> would close their ancestor <select> before being inserted. Bug: 396300371 Change-Id: Ia2e3aeb4894e798a950d1b3732208134908f8fdc Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7804988 Reviewed-by: Joey Arhar <jarhar@chromium.org> Reviewed-by: Mason Freed <masonf@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1625031}
diff --git a/html/semantics/forms/the-select-element/customizable-select/select-input-parsing.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-input-parsing.tentative.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/issues/12050">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<select class=test
+    data-description='Input tags should parse inside select if there are no options first.'
+        data-expect='<button>button</button><input>'>
+    <button>button</button>
+    <input>
+</select>
+
+<select class=test
+    data-description='Input tags should parse inside select if nested in another tag'
+    data-expect='<div><input></div>'>
+  <div>
+    <input>
+  </div>
+</select>
+
+<select class=test
+        data-description='Input tags should close select when directly inside an <option>'
+        data-expect='<option></option>'>
+  <option>
+    <input>
+  </option>
+</select>
+
+<select class=test
+        data-description='Input tags should close select when placed after an <option>'
+        data-expect='<option></option>'>
+  <option></option>
+  <input>
+</select>
+
+<script>
+function removeWhitespace(t) {
+  return t.replace(/\s/g,'');
+}
+document.querySelectorAll('select.test').forEach(s => {
+  assert_true(!!s.dataset.description.length);
+  test(() => {
+    // The document.body check here and in the other tests is to make sure that a
+    // previous test case didn't leave the HTML parser open on another element.
+    assert_equals(s.parentNode, document.body);
+    assert_equals(removeWhitespace(s.innerHTML),removeWhitespace(s.dataset.expect));
+  },s.dataset.description)
+});
+</script>
diff --git a/html/semantics/forms/the-select-element/customizable-select/select-parsing.html b/html/semantics/forms/the-select-element/customizable-select/select-parsing.html
@@ -84,34 +84,12 @@
   </div>
 </select>
 
-<select class=test
-    data-description='Input tags should not parse inside select instead of closing the select'
-    data-expect=''>
-    <input>
-</select>
-
 <select class=test
     data-description='textarea tags should parse inside select instead of closing the select'
     data-expect='<textarea></textarea>'>
     <textarea></textarea>
 </select>
 
-<select class=test
-    data-description='Input tags should parse inside select if nested in another tag'
-    data-expect='<div><input></div>'>
-  <div>
-    <input>
-  </div>
-</select>
-
-<select class=test
-        data-description='Input tags should close select when directly inside an <option>'
-        data-expect='<option></option>'>
-  <option>
-    <input>
-  </option>
-</select>
-
 <select class=test
     data-description='hr should generate implied end tags inside select'
     data-expect='<option>A</option><hr><option>B</option>'>
