From 26624a57f397ebf31dba3c445e6f5c7be727af81 Mon Sep 17 00:00:00 2001
From: Anne van Kesteren <annevk@annevk.nl>
Date: Wed, 5 Apr 2023 14:29:12 +0200
Subject: [PATCH] Allow <hr> to be used inside <select> as a separator

This is a long-standing WebKit feature that regressed as part of the standardized HTML parser effort. This suggests bringing it back with optional semantics, but a mandatory HTML parser change.

The HTML parser change is not expected to be significant for existing content or XSS. When the feature is correctly used it will also not hurt HTML parsers that have not yet incorporated the change. I.e., it should be fully backwards compatible.

Fixes #3410.
---
 source | 58 +++++++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 49 insertions(+), 9 deletions(-)

diff --git a/source b/source
index 9e11deef691..4a7e37a6922 100644
--- a/source
+++ b/source
@@ -19333,6 +19333,7 @@ and is further discussed below.&lt;/div></code></pre>
    <dd><span>Flow content</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>flow content</span> is expected.</dd>
+   <dd>As a child of a <code>select</code> element, when preceded and followed by an <code>option</code> element.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
    <dd><span data-x="concept-content-nothing">Nothing</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
@@ -19354,8 +19355,8 @@ interface <dfn interface>HTMLHRElement</dfn> : <span>HTMLElement</span> {
   </dl>
 
   <p>The <code>hr</code> element <span>represents</span> a <span>paragraph</span>-level thematic
-  break, e.g. a scene change in a story, or a transition to another topic within a section of a
-  reference book.</p>
+  break, e.g., a scene change in a story, a transition to another topic within a section of a
+  reference book, or a separator between a set of options of a <code>select</code> element.</p>
 
   <div class="example">
 
@@ -52219,7 +52220,8 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd>Zero or more <code>option</code>, <code>optgroup</code>, and <span data-x="script-supporting elements">script-supporting</span> elements.</dd>
+   <dd>Either: Zero or more <code>option</code>, <code>optgroup</code>, and <span data-x="script-supporting elements">script-supporting</span> elements.</dd>
+   <dd>Or: Zero or more <option>option</code> elements, optionally separated from each other by a <code>hr</code> element, and optionally intermixed with <span data-x="script-supporting elements">script-supporting</span> elements.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dd><code data-x="attr-fe-autocomplete">autocomplete</code></dd>
@@ -52773,6 +52775,19 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <div class="example">
+   <p>Occasionally it can be useful to have a separator:
+
+   <pre><code class="html">&lt;label>
+ Select the song to play next:
+ &lt;select required name="next">
+  &lt;option value="sr">Random
+  &lt;hr>
+  &lt;option value="s1">It Sucks to Be Me (Reprise)
+  &lt;option value="s2">There is Life Outside Your Apartment
+  &hellip;</code></pre>
+  </div>
+
 
 
   <h4>The <dfn element><code>datalist</code></dfn> element</h4>
@@ -112706,9 +112721,9 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
 
   <!-- </option> -->
   <p>An <code>option</code> element's <span data-x="syntax-end-tag">end tag</span> may be omitted if
-  the <code>option</code> element is immediately followed by another <code>option</code> element, or
-  if it is immediately followed by an <code>optgroup</code> element, or if there is no more content
-  in the parent element.</p>
+  the <code>option</code> element is immediately followed by another <code>option</code> element, if
+  it is immediately followed by an <code>optgroup</code> element, if it is immediately followed by
+  an <code>hr</code> element, or if there is no more content in the parent element.</p>
 
   <!-- <colgroup> -->
   <p>A <code>colgroup</code> element's <span data-x="syntax-start-tag">start tag</span> may be
@@ -120898,6 +120913,27 @@ document.body.appendChild(text);
     <p><span>Insert an HTML element</span> for the token.</p>
    </dd>
 
+   <dt>A start tag whose tag name is "hr"</dt>
+   <dd>
+    <!-- fake </option> (maybe) -->
+    <p>If the <span>current node</span> is an <code>option</code> element, pop that node from the
+    <span>stack of open elements</span>.</p>
+    <!-- end of fake </option> -->
+
+    <p>If the <span>current node</span> is an <code>optgroup</code> element, <span>parse
+    error</span>; ignore the token.</p>
+
+    <p>Otherwise, run these steps:</p>
+
+    <ol>
+     <li><p><span>Insert an HTML element</span> for the token. Immediately pop the <span>current
+     node</span> off the <span>stack of open elements</span>.</p></li>
+
+     <li><p><span data-x="acknowledge self-closing flag">Acknowledge the token's <i
+     data-x="self-closing flag">self-closing flag</i></span>, if it is set.</p></li>
+    </ol>
+   </dd>
+
    <dt>An end tag whose tag name is "optgroup"</dt>
    <dd>
     <!-- fake </option> (maybe) -->
@@ -125793,6 +125829,9 @@ progress { appearance: auto; }</code></pre>
   data-x="concept-option-label">label</span>, indented under its <code>optgroup</code> element if it
   has one.</p>
 
+  <p>Each sequence of one or more child <code>hr</code> element siblings may be rendered as a single
+  separator.</p>
+
   <p>The <dfn>width of the <code>select</code>'s labels</dfn> is the wider of the width necessary to
   render the widest <code>optgroup</code>, and the width necessary to render the widest
   <code>option</code> element in the element's <span data-x="concept-select-option-list">list of
@@ -133994,16 +134033,16 @@ INSERT INTERFACES HERE
   Dean Edridge,
   Dean Edwards,
   Dean Jackson,
-  Debanjana Sarkar <!-- debanjana-a11y on GitHub -->,
+  Debanjana Sarkar, <!-- debanjana-a11y on GitHub -->
   Debi Orton,
-  Delan Azabani<!-- delan on GitHub -->,
+  Delan Azabani, <!-- delan on GitHub -->
   Derek Featherstone,
   Derek Guenther,
   Devarshi Pant,
   Devdatta,
   Devin Rousso,
   Diego Ferreiro Val,
-  Diego Gonz&aacute;lez Z&uacute;&ntilde;iga <!-- diekus on GitHub -->,
+  Diego Gonz&aacute;lez Z&uacute;&ntilde;iga, <!-- diekus on GitHub -->
   Diego Ponce de León,
   Dimitri Glazkov,
   Dimitry Golubovsky,
@@ -134047,6 +134086,7 @@ INSERT INTERFACES HERE
   Eric Portis,
   Eric Rescorla,
   Eric Semling,
+  Eric Shepherd, <!-- a2sheppy on GitHub -->
   Eric Willigers,
   Erik Arvidsson,
   Erik Charlebois,