Define base appearance for list box select elements

Fixes #11477.

Author: josepharhar

source

@@ -56221,8 +56221,8 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   options</span> (either through a click, or through unfocusing the element after changing its
   value, or through a <span data-x="option-command">menu command</span>, or through any other
   mechanism) by running the <span data-x="concept-select-pick">pick an option</span> algorithm given
-  the <code>select</code> element, the <code>option</code> element, and if <code>select</code> and
-  its <span>select popover</span> are both being rendered with <span>base appearance</span>, a
+  the <code>select</code> element, the <code>option</code> element, and if the
+  <span><code>select</code>'s <code>option</code>s are being rendered with base appearance</span>, a
   corresponding <code data-x="event-keydown">keydown</code> or <code
   data-x="event-mouseup">mouseup</code> event, otherwise null.</p>
   </div>
@@ -56302,10 +56302,10 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   </div>
 
   <div algorithm>
-  <p>If the <code>select</code> is being rendered as a <span>drop-down box</span> with <span>base
-  appearance</span>, then the user agent should allow the user to <dfn>focus another option</dfn>
-  given the new <code>option</code> element to focus <var>option</var> and a <code
-  data-x="event-keydown">keydown</code> event <var>event</var>:</p>
+  <p>If the <code>select</code> is being rendered with <span>base appearance</span>, then the user
+  agent should allow the user to <dfn>focus another option</dfn> given the new <code>option</code>
+  element to focus <var>option</var> and a <code data-x="event-keydown">keydown</code> event
+  <var>event</var>:</p>
 
   <ol>
    <li><p>If <var>event</var>'s <span>canceled flag</span> is set, then return.</p></li>
@@ -148185,6 +148185,11 @@ progress { appearance: auto; }</code></pre>
   appearance</span> in addition to <span>native appearance</span> and <span>primitive
   appearance</span>.</p>
 
+  <p><code>select</code> elements which render as a <span>drop-down box</span> without the <code
+  data-x="attr-select-multiple">multiple</code> attribute or as a <span>list box</span> support a
+  <span>base appearance</span> in addition to <span>native appearance</span> and <span>primitive
+  appearance</span>.</p>
+
   <p>The <code>select</code> element's <span>select popover</span> supports a <span>base
   appearance</span> and a <span>native appearance</span>. The <span>select popover</span> can only
   be rendered with <span>base appearance</span> if its associated <code>select</code> is being
@@ -148227,32 +148232,59 @@ progress { appearance: auto; }</code></pre>
   appearance</span> separately from the <code>select</code> element. Otherwise, a native picker is
   used.</p>
 
+  <p>When a <code>select</code> is being rendered as a <span>list box</span> with <span>base
+  appearance</span>, it is expected to render with a <span>shadow tree</span> that contains a
+  <dfn>select list box slot</dfn>, which is a <code>slot</code> element. The <span>select list box
+  slot</span> is appended to the <code>select</code>'s <span>shadow root</span> as the first child.
+  The <span>select list box slot</span> is expected to take all children of the <code>select</code>
+  element.</p>
+
   <p>The <span>select popover</span>'s <span>implicit anchor element</span> is its associated
   <code>select</code> element.</p>
 
   <p>When a <code>select</code> element is being rendered with <span>native appearance</span> or
-  <span>primitive appearance</span>, the <span>'::picker'</span> pseudo-element and the
+  <span>primitive appearance</span>, or the <code>select</code> element is being rendered as a
+  <span>list box</span>, the <span>'::picker'</span> pseudo-element and the
   <span>'::picker-icon'</span> pseudo-element do not apply.</p>
 
   <p>The <span>'::picker'</span> pseudo-element is not rendered when it has <span>native
   appearance</span> or <span>primitive appearance</span>.</p>
 
   <p>The <span>'::checkmark'</span> pseudo-element only applies to <code>option</code> elements
-  which are inside a <code>select</code> element with <span>base appearance</span> whose
-  <span>'::picker'</span> pseudo-element has <span>base appearance</span>.</p>
+  which are <span data-x="option-base-appearance">being rendered with base appearance</span>.</p>
 
   <p>An <code>optgroup</code> element is <span>expected</span> to be rendered by displaying the
   element's <code data-x="attr-optgroup-label">label</code> attribute.</p>
 
-  <p>An <code>option</code> element is <span>expected</span> to be rendered by displaying the
-  result of <span>collect option text</span> given the <code>option</code> and true, indented under
-  its <code>optgroup</code> element if it has one. If the <code>option</code> is in a
-  <code>select</code> which is being rendered as a <span>drop-down box</span> with <span>base
-  appearance</span>, and the <code>select</code>'s <span>select popover</span> is being rendered
-  with <span>base appearance</span>, and the <code>option</code>'s <code
-  data-x="attr-option-label">label</code> attribute is not set, then the <code>option</code> is
-  <span>expected</span> to render all of its children rather than by displaying its <span
-  data-x="concept-option-label">label</span>.</p>
+  <div algorithm>
+  <p>To determine if a <dfn><code>select</code>'s <code>option</code>s are being rendered with base
+  appearance</dfn>, given a <code>select</code> element <var>select</var>:</p>
+
+  <ol>
+   <li><p>If <var>select</var> is being rendered as a <span>list box</span> with <span>base
+   appearance</span>, then return true.</p></li>
+
+   <li><p>If <var>select</var> is being rendered as a <span>drop-down box</span> with <span>base
+   appearance</span>, and its <span>select popover</span> is being rendered with <span>base
+   appearance</span>, and <var>select</var> does not have the <code
+   data-x="attr-select-multiple">multiple</code> attribute set, then return true.</p></li>
+
+   <li><p>Return false.</p></li>
+  </ol>
+  </div>
+
+  <p>An <code>option</code> element is <dfn data-x="option-base-appearance">rendered with base
+  appearance</dfn> if it has a <span data-x="option element nearest ancestor select">nearest
+  ancestor <code>select</code></span> and the <span><code>select</code>'s <code>option</code>s are
+  being rendered with base appearance</span>.</p>
+
+  <p>An <code>option</code> element is <span>expected</span> to be rendered by displaying the result
+  of <span>collect option text</span> given the <code>option</code> and true, indented under its
+  <code>optgroup</code> element if it has one.  If the <code>option</code> <span
+  data-x="option-base-appearance">is being rendered with base appearance</span> and the
+  <code>option</code>'s <code data-x="attr-option-label">label</code> attribute is not set, then the
+  <code>option</code> is <span>expected</span> to render all of its children rather than by
+  displaying its <span data-x="concept-option-label">label</span>.</p>
 
   <p>Each sequence of one or more child <code>hr</code> element siblings may be rendered as a single
   separator.</p>
@@ -148283,34 +148315,94 @@ progress { appearance: auto; }</code></pre>
   </div>
 
   <p>The following styles are <span>expected</span> to apply to <code>select</code> elements when
-  they are being rendered as a <span>drop-down box</span> with <span>native appearance</span> or
-  <span>primitive appearance</span>:</p>
+  they are being rendered with <span>native appearance</span> or <span>primitive
+  appearance</span>:</p>
 
   <pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
 
 select {
-  display: inline-block;
   letter-spacing: initial;
   word-spacing: initial;
   line-height: initial;
 }</code></pre>
 
   <p>The following styles are <span>expected</span> to apply to <code>select</code> elements when
-  they are being rendered as a <span>drop-down box</span> with <span>base appearance</span>:</p>
+  they are being rendered as a <span>drop-down box</span> with <span>native appearance</span> or
+  <span>primitive appearance</span>:</p>
+
+  <pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
+
+select {
+  display: inline-block;
+}</code></pre>
+
+  <p>The following styles are <span>expected</span> to apply to <code>select</code> elements when
+  they are being rendered with <span>base appearance</span>:</p>
 
   <pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
 
 select {
   background-color: transparent;
   border: 1px solid currentColor;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+select option:enabled:hover {
+  background-color: color-mix(in lab, currentColor 10%, transparent);
+}
+select option:enabled:active {
+  background-color: color-mix(in lab, currentColor 20%, transparent);
+}
+select option:disabled {
+  color: color-mix(in lab, currentColor 50%, transparent);
+}
+
+select option {
+  min-inline-size: 24px;
+  min-block-size: max(24px, 1lh);
+  padding-inline: 0.5em;
+  padding-block-end: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  white-space: nowrap;
+}
+
+select option::checkmark {
+  content: '\2713' / '';
+}
+select option:not(:checked)::checkmark {
+  visibility: hidden;
+}
+
+select optgroup {
+  font-weight: bolder;
+}
+
+select optgroup option {
+  font-weight: normal;
+}
+
+select optgroup legend {
+  padding-inline: 0.5em;
+  min-block-size: 1lh;
+}</code></pre>
+
+  <p>The following styles are <span>expected</span> to apply to <code>select</code> elements when
+  they are being rendered as a <span>drop-down box</span> with <span>base appearance</span>:</p>
+
+  <pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
+
+select {
+  border-radius: 0.5em;
   padding-block: 0.25em;
   padding-inline: 0.5em;
   min-block-size: calc-size(auto, max(size, 24px, 1lh));
   min-inline-size: calc-size(auto, max(size, 24px));
   display: inline-flex;
   gap: 0.5em;
   border-radius: 0.5em;
-  user-select: none;
   field-sizing: content !important;
 }
 
@@ -148319,16 +148411,13 @@ select > button:first-child {
   display: contents;
 }
 
-select:enabled:hover,
-select option:enabled:hover {
+select:enabled:hover {
   background-color: color-mix(in lab, currentColor 10%, transparent);
 }
-select:enabled:active,
-select option:enabled:active {
+select::enabled:active {
   background-color: color-mix(in lab, currentColor 20%, transparent);
 }
-select:disabled,
-select option:disabled {
+select:disabled {
   color: color-mix(in lab, currentColor 50%, transparent);
 }
 
@@ -148351,41 +148440,21 @@ select option:disabled {
     block-start span-inline-start;
 }
 
-select option {
-  min-inline-size: 24px;
-  min-block-size: max(24px, 1lh);
-  padding-inline: 0.5em;
-  padding-block-end: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  white-space: nowrap;
-}
-
-select option::checkmark {
-  content: '\2713' / '';
-}
-select option:not(:checked)::checkmark {
-  visibility: hidden;
-}
-
 select::picker-icon {
   content: counter(fake-counter-name, disclosure-open);
   display: block;
   margin-inline-start: auto;
-}
+}</code></pre>
 
-select optgroup {
-  font-weight: bolder;
-}
+  <p>The following styles are <span>expected</span> to apply to <code>select</code> elements when
+  they are being rendered as a <span>list box</span> with <span>base appearance</span>:</p>
 
-select optgroup option {
-  font-weight: normal;
-}
+  <pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
 
-select optgroup legend {
-  padding-inline: 0.5em;
-  min-block-size: 1lh;
+select {
+  overflow: auto;
+  display: inline-block;
+  block-size: calc(max(24px, 1lh) * attr(size type(&lt;integer>), 4));
 }</code></pre>
 
   <div w-nodev>