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.

Tests: html5lib/html5lib-tests#167.

Fixes #3410.

Author: annevk

source

@@ -19364,6 +19364,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.</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>
@@ -19385,8 +19386,9 @@ 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, or a transition to another topic within a section of a
+  reference book; alternatively, it represents a separator between a set of options of a
+  <code>select</code> element.</p>
 
   <div class="example">
 
@@ -52319,7 +52321,7 @@ 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>Zero or more <code>option</code>, <code>optgroup</code>, <code>hr</code>, and <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>
@@ -52873,6 +52875,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>
@@ -112874,10 +112889,11 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
   below can handle the non-<select> case if we ever allow it) -->
   <p>An <code>optgroup</code> element's <span data-x="syntax-end-tag">end tag</span> may be omitted
   if the <code>optgroup</code> element <!--has an ancestor <code>select</code> element and--> is
-  immediately followed by another <code>optgroup</code> element, or if <!--all of the elements that
-  are ancestors of the <code>optgroup</code> element, up to and including the first ancestor element
-  that is not an <code>optgroup</code> element, have no more content--> there is no more content in
-  the parent element.</p>
+  immediately followed by another <code>optgroup</code> element, if it is immediately followed by an
+  <code>hr</code> element, or if <!--all of the elements that are ancestors of the
+  <code>optgroup</code> element, up to and including the first ancestor element that is not an
+  <code>optgroup</code> element, have no more content--> there is no more content in the parent
+  element.</p>
   <!-- so e.g. the max number of </optgroup>s are omitted here:
    <select><optgroup></select>
    <p id=x><optgroup></optgroup>x</p>
@@ -112888,9 +112904,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
@@ -121080,6 +121096,25 @@ 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> -->
+
+    <!-- fake </optgroup> (maybe) -->
+    <p>If the <span>current node</span> is an <code>optgroup</code> element, pop that node from the
+    <span>stack of open elements</span>.</p>
+    <!-- end of fake </optgroup> -->
+
+    <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>
+
+    <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>
+   </dd>
+
    <dt>An end tag whose tag name is "optgroup"</dt>
    <dd>
     <!-- fake </option> (maybe) -->
@@ -125976,6 +126011,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
@@ -134187,16 +134225,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,
@@ -134240,6 +134278,7 @@ INSERT INTERFACES HERE
   Eric Portis,
   Eric Rescorla,
   Eric Semling,
+  Eric Shepherd, <!-- a2sheppy on GitHub -->
   Eric Willigers,
   Erik Arvidsson,
   Erik Charlebois,