Skip to content

Commit

Permalink
Allow <hr> to be used inside <select> as a separator
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@annevk
annevk authored May 2, 2023
1 parent b6d8428 commit b9c5dee
Showing 1 changed file with 52 additions and 13 deletions.
65 changes: 52 additions & 13 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand Down Expand Up @@ -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) -->
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -134240,6 +134278,7 @@ INSERT INTERFACES HERE
Eric Portis,
Eric Rescorla,
Eric Semling,
Eric Shepherd, <!-- a2sheppy on GitHub -->
Eric Willigers,
Erik Arvidsson,
Erik Charlebois,
Expand Down

1 comment on commit b9c5dee

@mtrootyy
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#9247

Please sign in to comment.