LibWeb: Relax HTML parser to allow more tags inside <select>

F3n67u · F3n67u · commit a16d46664b77 · 2025-11-21T08:29:56.000-08:00
This implements parsing part of customizable <select> spec update. See whatwg/html#10548.
diff --git a/Libraries/LibWeb/HTML/Parser/HTMLParser.cpp b/Libraries/LibWeb/HTML/Parser/HTMLParser.cpp
diff --git a/Libraries/LibWeb/HTML/Parser/HTMLParser.h b/Libraries/LibWeb/HTML/Parser/HTMLParser.h
@@ -27,29 +27,27 @@ class SpeculativeHTMLParser;
 
 namespace Web::HTML {
 
-#define ENUMERATE_INSERTION_MODES               \
-    __ENUMERATE_INSERTION_MODE(Initial)         \
-    __ENUMERATE_INSERTION_MODE(BeforeHTML)      \
-    __ENUMERATE_INSERTION_MODE(BeforeHead)      \
-    __ENUMERATE_INSERTION_MODE(InHead)          \
-    __ENUMERATE_INSERTION_MODE(InHeadNoscript)  \
-    __ENUMERATE_INSERTION_MODE(AfterHead)       \
-    __ENUMERATE_INSERTION_MODE(InBody)          \
-    __ENUMERATE_INSERTION_MODE(Text)            \
-    __ENUMERATE_INSERTION_MODE(InTable)         \
-    __ENUMERATE_INSERTION_MODE(InTableText)     \
-    __ENUMERATE_INSERTION_MODE(InCaption)       \
-    __ENUMERATE_INSERTION_MODE(InColumnGroup)   \
-    __ENUMERATE_INSERTION_MODE(InTableBody)     \
-    __ENUMERATE_INSERTION_MODE(InRow)           \
-    __ENUMERATE_INSERTION_MODE(InCell)          \
-    __ENUMERATE_INSERTION_MODE(InSelect)        \
-    __ENUMERATE_INSERTION_MODE(InSelectInTable) \
-    __ENUMERATE_INSERTION_MODE(InTemplate)      \
-    __ENUMERATE_INSERTION_MODE(AfterBody)       \
-    __ENUMERATE_INSERTION_MODE(InFrameset)      \
-    __ENUMERATE_INSERTION_MODE(AfterFrameset)   \
-    __ENUMERATE_INSERTION_MODE(AfterAfterBody)  \
+#define ENUMERATE_INSERTION_MODES              \
+    __ENUMERATE_INSERTION_MODE(Initial)        \
+    __ENUMERATE_INSERTION_MODE(BeforeHTML)     \
+    __ENUMERATE_INSERTION_MODE(BeforeHead)     \
+    __ENUMERATE_INSERTION_MODE(InHead)         \
+    __ENUMERATE_INSERTION_MODE(InHeadNoscript) \
+    __ENUMERATE_INSERTION_MODE(AfterHead)      \
+    __ENUMERATE_INSERTION_MODE(InBody)         \
+    __ENUMERATE_INSERTION_MODE(Text)           \
+    __ENUMERATE_INSERTION_MODE(InTable)        \
+    __ENUMERATE_INSERTION_MODE(InTableText)    \
+    __ENUMERATE_INSERTION_MODE(InCaption)      \
+    __ENUMERATE_INSERTION_MODE(InColumnGroup)  \
+    __ENUMERATE_INSERTION_MODE(InTableBody)    \
+    __ENUMERATE_INSERTION_MODE(InRow)          \
+    __ENUMERATE_INSERTION_MODE(InCell)         \
+    __ENUMERATE_INSERTION_MODE(InTemplate)     \
+    __ENUMERATE_INSERTION_MODE(AfterBody)      \
+    __ENUMERATE_INSERTION_MODE(InFrameset)     \
+    __ENUMERATE_INSERTION_MODE(AfterFrameset)  \
+    __ENUMERATE_INSERTION_MODE(AfterAfterBody) \
     __ENUMERATE_INSERTION_MODE(AfterAfterFrameset)
 
 class WEB_API HTMLParser final : public JS::Cell {
@@ -129,8 +127,6 @@ class WEB_API HTMLParser final : public JS::Cell {
     void handle_in_row(HTMLToken&);
     void handle_in_cell(HTMLToken&);
     void handle_in_table_text(HTMLToken&);
-    void handle_in_select_in_table(HTMLToken&);
-    void handle_in_select(HTMLToken&);
     void handle_in_caption(HTMLToken&);
     void handle_in_column_group(HTMLToken&);
     void handle_in_template(HTMLToken&);
diff --git a/Libraries/LibWeb/HTML/Parser/StackOfOpenElements.cpp b/Libraries/LibWeb/HTML/Parser/StackOfOpenElements.cpp
@@ -13,7 +13,18 @@
 
 namespace Web::HTML {
 
-static Vector<FlyString> s_base_list { "applet"_fly_string, "caption"_fly_string, "html"_fly_string, "table"_fly_string, "td"_fly_string, "th"_fly_string, "marquee"_fly_string, "object"_fly_string, "template"_fly_string };
+static Vector<FlyString> s_base_list {
+    "applet"_fly_string,
+    "caption"_fly_string,
+    "html"_fly_string,
+    "table"_fly_string,
+    "td"_fly_string,
+    "th"_fly_string,
+    "marquee"_fly_string,
+    "object"_fly_string,
+    "select"_fly_string,
+    "template"_fly_string
+};
 
 StackOfOpenElements::~StackOfOpenElements() = default;
 
@@ -22,6 +33,7 @@ void StackOfOpenElements::visit_edges(JS::Cell::Visitor& visitor)
     visitor.visit(m_elements);
 }
 
+// https://html.spec.whatwg.org/multipage/parsing.html#has-an-element-in-the-specific-scope
 bool StackOfOpenElements::has_in_scope_impl(FlyString const& tag_name, Vector<FlyString> const& list, CheckMathAndSVG check_math_and_svg) const
 {
     for (auto const& element : m_elements.in_reverse()) {
@@ -37,11 +49,13 @@ bool StackOfOpenElements::has_in_scope_impl(FlyString const& tag_name, Vector<Fl
     VERIFY_NOT_REACHED();
 }
 
+// https://html.spec.whatwg.org/multipage/parsing.html#has-an-element-in-scope
 bool StackOfOpenElements::has_in_scope(FlyString const& tag_name) const
 {
     return has_in_scope_impl(tag_name, s_base_list, CheckMathAndSVG::Yes);
 }
 
+// https://html.spec.whatwg.org/multipage/parsing.html#has-an-element-in-the-specific-scope
 bool StackOfOpenElements::has_in_scope_impl(DOM::Element const& target_node, Vector<FlyString> const& list) const
 {
     for (auto& element : m_elements.in_reverse()) {
@@ -57,23 +71,27 @@ bool StackOfOpenElements::has_in_scope_impl(DOM::Element const& target_node, Vec
     VERIFY_NOT_REACHED();
 }
 
+// https://html.spec.whatwg.org/multipage/parsing.html#has-an-element-in-scope
 bool StackOfOpenElements::has_in_scope(DOM::Element const& target_node) const
 {
     return has_in_scope_impl(target_node, s_base_list);
 }
 
+// https://html.spec.whatwg.org/multipage/parsing.html#has-an-element-in-button-scope
 bool StackOfOpenElements::has_in_button_scope(FlyString const& tag_name) const
 {
     auto list = s_base_list;
     list.append("button"_fly_string);
     return has_in_scope_impl(tag_name, list, CheckMathAndSVG::Yes);
 }
 
+// https://html.spec.whatwg.org/multipage/parsing.html#has-an-element-in-table-scope
 bool StackOfOpenElements::has_in_table_scope(FlyString const& tag_name) const
 {
     return has_in_scope_impl(tag_name, { "html"_fly_string, "table"_fly_string, "template"_fly_string }, CheckMathAndSVG::No);
 }
 
+// https://html.spec.whatwg.org/multipage/parsing.html#has-an-element-in-list-item-scope
 bool StackOfOpenElements::has_in_list_item_scope(FlyString const& tag_name) const
 {
     auto list = s_base_list;
@@ -82,31 +100,6 @@ bool StackOfOpenElements::has_in_list_item_scope(FlyString const& tag_name) cons
     return has_in_scope_impl(tag_name, list, CheckMathAndSVG::Yes);
 }
 
-// https://html.spec.whatwg.org/multipage/parsing.html#has-an-element-in-select-scope
-// The stack of open elements is said to have a particular element in select scope
-// when it has that element in the specific scope consisting of all element types except the following:
-// - optgroup in the HTML namespace
-// - option in the HTML namespace
-// NOTE: In this case it's "all element types _except_"
-bool StackOfOpenElements::has_in_select_scope(FlyString const& tag_name) const
-{
-    // https://html.spec.whatwg.org/multipage/parsing.html#has-an-element-in-the-specific-scope
-    // 1. Initialize node to be the current node (the bottommost node of the stack).
-    for (auto& node : m_elements.in_reverse()) {
-        // 2. If node is target node, terminate in a match state.
-        if (node->local_name() == tag_name)
-            return true;
-        // 3. Otherwise, if node is one of the element types in list, terminate in a failure state.
-        // NOTE: Here "list" refers to all elements except option and optgroup
-        if (node->local_name() != HTML::TagNames::option && node->local_name() != HTML::TagNames::optgroup)
-            return false;
-        // 4. Otherwise, set node to the previous entry in the stack of open elements and return to step 2.
-    }
-    // NOTE: This will never fail, since the loop will always terminate in the previous step if the top of the stack
-    //       — an html element — is reached.
-    VERIFY_NOT_REACHED();
-}
-
 bool StackOfOpenElements::contains(DOM::Element const& element) const
 {
     for (auto& element_on_stack : m_elements) {
diff --git a/Libraries/LibWeb/HTML/Parser/StackOfOpenElements.h b/Libraries/LibWeb/HTML/Parser/StackOfOpenElements.h
@@ -39,7 +39,6 @@ class StackOfOpenElements {
     bool has_in_button_scope(FlyString const& tag_name) const;
     bool has_in_table_scope(FlyString const& tag_name) const;
     bool has_in_list_item_scope(FlyString const& tag_name) const;
-    bool has_in_select_scope(FlyString const& tag_name) const;
 
     bool has_in_scope(DOM::Element const&) const;
 
@@ -49,7 +48,7 @@ class StackOfOpenElements {
     auto const& elements() const { return m_elements; }
     auto& elements() { return m_elements; }
 
-    void pop_until_an_element_with_tag_name_has_been_popped(FlyString const& local_name);
+    void pop_until_an_element_with_tag_name_has_been_popped(FlyString const& tag_name);
 
     GC::Ptr<DOM::Element> topmost_special_node_below(DOM::Element const&);
 
diff --git a/Tests/LibWeb/Text/expected/wpt-import/html/semantics/forms/the-select-element/customizable-select/select-parsing.txt b/Tests/LibWeb/Text/expected/wpt-import/html/semantics/forms/the-select-element/customizable-select/select-parsing.txt
@@ -0,0 +1,23 @@
+Harness status: OK
+
+Found 17 tests
+
+16 Pass
+1 Fail
+Pass	<div>s, <button>s, and <datalist>s should be allowed in <select>
+Pass	</select> should close <button>
+Pass	</select> should close <datalist>
+Pass	<select> in <button> in <select> should remove inner <select>
+Pass	<select> in <select><button><div> should remove inner <select>
+Pass	JS added nested <select> should be ignored
+Pass	JS added nested <select>s should be ignored
+Pass	Divs and imgs should be allowed as direct children of select and within options without a datalist
+Pass	Input tags should not parse inside select instead of closing the select
+Pass	textarea tags should parse inside select instead of closing the select
+Fail	Input tags should parse inside select if nested in another tag
+Pass	Input tags should close select when directly inside an <option>
+Pass	The last test should not leave any tags open after parsing
+Pass	Nested selects should be retained 1
+Pass	Nested selects should be retained 2
+Pass	JS added nested select should be ignored
+Pass	JS added nested selects should be ignored
diff --git a/Tests/LibWeb/Text/input/wpt-import/html/semantics/forms/the-select-element/customizable-select/select-parsing.html b/Tests/LibWeb/Text/input/wpt-import/html/semantics/forms/the-select-element/customizable-select/select-parsing.html
@@ -0,0 +1,174 @@
+<!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>
+
+<body>
+
+<select class=test
+    data-description='<div>s, <button>s, and <datalist>s should be allowed in <select>'
+    data-expect='
+      <div>div 1</div>
+      <button>button</button>
+      <div>div 2</div>
+      <datalist>
+        <option>option</option>
+      </datalist>
+      <div>div 3</div>
+      '>
+  <div>div 1</div>
+  <button>button</button>
+  <div>div 2</div>
+  <datalist>
+    <option>option</option>
+  </datalist>
+  <div>div 3</div>
+</select>
+
+<select class=test
+    data-description='</select> should close <button>'
+    data-expect='<button>button</button>'>
+  <button>button
+</select>
+
+<select class=test
+    data-description='</select> should close <datalist>'
+    data-expect='<datalist>datalist</datalist>'>
+  <datalist>datalist
+</select>
+
+<select id=nested1 class=test
+    data-description='<select> in <button> in <select> should remove inner <select>'
+    data-expect='<button></button>'>
+  <button>
+    <select id=expectafter1></select>
+    <div id=expectafter1b></div>
+  </button>
+</select>
+
+<select id=nested2 class=test
+    data-description='<select> in <select><button><div> should remove inner <select>'
+    data-expect='<button><div></div></button>'>
+  <button>
+    <div>
+      <select id=expectafter2>
+</select>
+
+<select
+  id=nested3
+  class=test
+  data-description='JS added nested <select> should be ignored'
+  data-expect='<option>The Initial Option</option>'
+>
+  <option>The Initial Option</option>
+</select>
+
+<select
+  id=nested4
+  class=test
+  data-description='JS added nested <select>s should be ignored'
+  data-expect='<option>The Initial Option</option>'
+>
+  <option>The Initial Option</option>
+</select>
+
+<select class=test
+    data-description='Divs and imgs should be allowed as direct children of select and within options without a datalist'
+    data-expect='
+    <div>
+      <option><img>option</option>
+    </div>'>
+  <div>
+    <option><img>option</option>
+  </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>
+
+<div id=afterlast>
+  keep this div after the last test case
+</div>
+
+<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)
+});
+
+test(() => {
+  assert_equals(document.getElementById('afterlast').parentNode, document.body);
+}, 'The last test should not leave any tags open after parsing');
+
+test(() => {
+  const outerSelect = document.getElementById('nested1');
+  const innerSelect = document.getElementById('expectafter1');
+  const nextDiv = document.getElementById('expectafter1b');
+  assert_true(!!outerSelect);
+  assert_equals(innerSelect, null,'Nested select should be removed');
+  assert_equals(outerSelect.nextElementSibling, nextDiv,'Subsequent content is there too');
+}, 'Nested selects should be retained 1');
+
+test(() => {
+  const outerSelect = document.getElementById('nested2');
+  const innerSelect = document.getElementById('expectafter2');
+  assert_true(!!outerSelect);
+  assert_equals(innerSelect, null,'Nested select should be pushed out as the next sibling');
+}, 'Nested selects should be retained 2');
+
+test(() => {
+  assert_true(!!nested3);
+  nested3.innerHTML = '<select id="ignored"><option>The New Option</option></select>';
+
+  const ignored = document.getElementById('ignored');
+  assert_equals(ignored, null);
+
+  assert_equals(nested3.innerHTML, '<option>The New Option</option>');
+}, 'JS added nested select should be ignored');
+
+test(() => {
+  assert_true(!!nested4);
+  nested4.innerHTML = '<select id="ignore1"><select id="ignore2"><option>The New Option</option></select></select>';
+
+  const ignored1 = document.getElementById('ignored1');
+  assert_equals(ignored1, null);
+  const ignored2 = document.getElementById('ignored2');
+  assert_equals(ignored2, null);
+
+  assert_equals(nested4.innerHTML, '<option>The New Option</option>');
+}, 'JS added nested selects should be ignored');
+</script>
