From 8e171386857e6998920e19952259c6d9c7a720b5 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Wed, 17 Jul 2024 18:16:05 -0700
Subject: [PATCH] Define base appearance for <select>

---
 source | 192 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 191 insertions(+), 1 deletion(-)

diff --git a/source b/source
index de407dd6dc0..22bb7f8063e 100644
--- a/source
+++ b/source
@@ -1794,6 +1794,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <span>stack of open elements</span> of an <span>HTML parser</span>, then
    <span>process internal resource links</span> given <var>insertedNode</var>'s
    <span>node document</span>.</p></li>
+
+   <li><p>Run <span>maybe clone option into select button</span> given
+   <var>insertedNode</var>.</p></li>
   </ol>
 
   <p>The <span data-x="concept-node-remove-ext">removing steps</span> for the HTML Standard, given
@@ -1838,6 +1841,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <li><p>If <var>removedNode</var>'s <code data-x="attr-popover">popover</code> attribute is not in
    the <span data-x="attr-popover-none-state">no popover state</span>, then run the <span>hide
    popover algorithm</span> given <var>removedNode</var>, false, false, and false.</p></li>
+
+   <li><p>Run <span>maybe clone option into select button</span> given
+   <var>oldParent</var>.</p></li>
   </ol>
 
   <p>A <dfn id="insert-an-element-into-a-document" data-x="node is inserted into a document"
@@ -3208,6 +3214,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-child" data-x="concept-tree-child">child</dfn> concept</li>
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-root">root</dfn> and <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-root">shadow-including root</dfn> concepts</li>
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor">inclusive ancestor</dfn>,
+             <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-ancestor">ancestor</dfn>,
              <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-descendant">descendant</dfn>,
              <dfn data-x="concept-shadow-including-ancestor" data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-ancestor">shadow-including ancestor</dfn>,
              <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-descendant">shadow-including descendant</dfn>,
@@ -3953,6 +3960,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#widget">widget</dfn></li>
       <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#native-appearance">native appearance</dfn></li>
       <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#primitive-appearance">primitive appearance</dfn></li>
+      <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#base-appearance">base appearance</dfn></li>
       <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#element-with-default-preferred-size">element with default preferred size</dfn></li>
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-ui/#non-devolvable">non-devolvable widget</dfn> and
               <dfn data-x-href="https://drafts.csswg.org/css-ui/#devolvable">devolvable widget</dfn> classification, and the related
@@ -4153,6 +4161,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://drafts.csswg.org/css-contain/#content-visibility">'content-visibility'</dfn> property</li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-contain/#propdef-content-visibility" data-x="content-visibility-auto">'auto'</dfn> value for <span>'content-visibility'</span></li>
     </ul>
+
+    <p>The following terms are defined in <cite>CSS Anchor Positioning</cite>: <ref>CSSANCHOR</ref></p>
+
+    <ul class="brief">
+     <li><dfn data-x-href="https://drafts.csswg.org/css-anchor-position-1/#implicit-anchor-element">implicit anchor element</dfn></li>
+    </ul>
    </dd>
 
 
@@ -53096,6 +53110,10 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
    <li><p>If <var>element</var>'s <span>node document</span> is not <span>fully active</span>, then
    return.</p></li>
 
+   <li><p>If <var>element</var>'s <span>parent</span> is a <code>select</code> element, then
+   <span>show the picker, if applicable</span> given <var>element</var>'s <span>parent</span> and
+   return.</p></li>
+
    <li>
     <p>If <var>element</var> has a <span>form owner</span> then switch on <var>element</var>'s <code
     data-x="attr-button-type">type</code> attribute's state, then:</p>
@@ -54156,6 +54174,89 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <p>To get the <dfn>option element ancestor select</dfn> given an <code>option</code>
+  <var>option</var>:</p>
+
+  <ol>
+   <li>
+    <p>For each <var>ancestor</var> of <var>option</var>'s <span
+    data-x="ancestor">ancestors</span>:</p>
+
+    <ol>
+     <li><p>If <var>ancestor</var> is a <code>select</code>, then return
+     <var>ancestor</var>.</p></li>
+    </ol>
+   </li>
+
+   <li><p>Return null.</p></li>
+  </ol>
+
+  <p>To <dfn>maybe clone option into select button</dfn>, given an <code>Element</code>
+  <var>element</var>:</p>
+
+  <ol>
+   <li>
+    <p>For each <var>ancestor</var> of <var>element</var>'s <span
+    data-x="ancestor">ancestors</span>:</p>
+
+    <ol>
+     <li>
+      <p>If all of the following conditions are true:</p>
+
+      <ul>
+       <li><p><var>ancestor</var> is an <code>option</code> element;</p></li>
+
+       <li><p><var>ancestor</var> has a non-null <span>option element ancestor
+       select</span>;</p></li>
+
+       <li><p><var>ancestor</var>'s <span>option element ancestor select</span> is rendered as a
+       <span>drop-down box</span>;</p></li>
+
+       <li><p><var>ancestor</var>'s <span data-x="concept-option-selectedness">selectedness</span>
+       is true,</p></li>
+      </ul>
+
+      <p>then set <var>ancestor</var>'s <span>option element ancestor select</span>'s <span>select
+      fallback button text</span> to the value of <var>ancestor</var>'s <span
+      data-x="dom-option-label">label</span>.</p>
+     </li>
+    </ol>
+   </li>
+  </ol>
+
+  <p>Whenever an <code>option</code> <var>option</var>'s <span
+  data-x="concept-option-selectedness">selectedness</span> is set to true, run <span>maybe clone
+  option into select button</span> given <var>option</var>.</p>
+
+  <p>The <span>activation behavior</span> of an <code>option</code> <var>option</var> is to run the
+  following steps:</p>
+
+  <ol>
+   <li><p>Let <var>select</var> be the <span>option element ancestor select</span> given
+   <var>option</var>.</p></li>
+
+   <li><p>If <var>select</var> is null, then return.</p></li>
+
+   <li><p>Set <var>option</var>'s <span data-x="concept-option-selectedness">selectedness</span> to
+   true.</p></li>
+
+   <li><p>Set <var>option</var>'s <span data-x="concept-option-dirtiness">dirtiness</span> to
+   true.</p></li>
+
+   <li><p><span>Send <code>select</code> update notifications</span> given
+   <var>select</var>.</p></li>
+
+   <li>
+    <p>If <var>select</var> is being rendered as a <span>drop-down box</span> with <span>base
+    appearance</span>:</p>
+
+    <ol>
+     <li><p>Run the <span>hide popover algorithm</span> given the first item in <var>select</var>'s
+     <span>select popover slot</span>'s <span>assigned nodes</span>.</p></li>
+    </ol>
+   </li>
+  </ol>
+
   <dl class="domintro">
    <dt><code data-x=""><var>option</var>.<span subdfn data-x="dom-option-selected">selected</span></code></dt>
 
@@ -135678,12 +135779,98 @@ progress { appearance: auto; }</code></pre>
   with the element's <code>optgroup</code> element <span data-x="concept-tree-child">children</span>
   providing headers for groups of options where applicable.</p>
 
+  <!-- TODO should parts of this be in form-elements instead of rendering? -->
+
+  <p><code>select</code> elements which render as a <span>drop-down box</span> support a <span>base
+  appearance</span> in addition to <span>native appearance</span> and <span>primitive
+  appearance</span>.</p>
+
+  <p>When a <code>select</code> is being rendered as a <span>drop-down box</span> with a <span>base
+  appearance</span>, it is expected to render as if it has the following <span>shadow
+  root</span>:</p>
+
+  <pre><code class="html" data-x="">&lt;slot id="select-button-slot">
+  &lt;div id="select-fallback-button-text">&lt;/div>
+&lt;/slot>
+&lt;div id="select-popover" popover="auto">
+  &lt;slot id="select-popover-slot">&lt;/slot>
+&lt;/div></code></pre>
+
+  <p class="note">Since <span>base appearance</span> is determined by computing style, it isn't
+  possible to swap this DOM structure when switching appearance. Implementations can always include
+  the DOM structure for <span>base appearance</span> when the <code>select</code> is rendered as a
+  <span>drop-down box</span> and then choose to include or exclude it from the layout tree in order
+  to control whether it gets rendered or not.</p>
+
+  <p><code>select</code> elements rendered as a <span>drop-down box</span> with <span>base
+  appearance</span> each contain the following elements as shown with ID attributes in the above
+  HTML:</p>
+
+  <!-- TODO is it OK for me to use <ul>, <li>, and <p> like this even though it isn't an
+  algorithm? -->
+  <ul>
+   <li><p>A <dfn>select button slot</dfn>, which is a <code>slot</code>.</p></li>
+
+   <li><p><dfn>Select fallback button text</dfn>, which is a <code>div</code>.</p></li>
+
+   <li><p>A <dfn>select popover</dfn>, which is a <code>div</code>.</p></li>
+
+   <li><p>A <dfn>select popover slot</dfn>, which is a <code>slot</code>.</p></li>
+  </ul>
+
+  <p>The <span>implicit anchor element</span> of the <span>select popover</span> element is the
+  <code>select</code> element shadow host of the shadow host in which <span>select popover</span>
+  resides.</p>
+
+  <p>The <span>shadow root</span> used for <code>select</code>'s <span>drop-down box</span>
+  <span>base appearance</span> must have its <span>slot assignment</span> set to "<code
+  data-x="">manual</code>". The <span>shadow root</span> must also have <span>delegates focus</span>
+  set to true if <span>select button slot</span> has an assigned node.</p>
+
+  <p class="note">Without <span>delegates focus</span> set to true, the <code>select</code> itself
+  would receive focus instead of the <code>button</code> which is slotted into the <span>select
+  button slot</span>.</p>
+
+  <p><code>select</code> elements rendered as a <span>drop-down box</span> with <span>base
+  appearance</span> must render as if they are using <span>manual slot assignment</span> with the
+  following <dfn>base select slotting algorithm</dfn> to <span data-x="assign a slot">assign</span>
+  their child nodes to slots. To perform the <span>base select slotting algorithm</span>, given a
+  <code>select</code> element <var>select</var>:</p>
+
+  <ol>
+   <li><p>Let <var>firstButton</var> be null.</p></li>
+
+   <li><p>Let <var>otherChildren</var> be « ».</p></li>
+
+   <li>
+    <p><span data-x="list iterate">For each</span> <code>Node</code> <var>child</var> in
+    <var>select</var>'s <span data-x="concept-tree-child">children</span>:</p>
+
+    <ol>
+     <li><p>If <var>child</var> is a <code>button</code> and <var>firstButton</var> is null, then set
+     <var>firstButton</var> to <var>child</var>.</p></li>
+
+     <li><p>Otherwise, <span data-x="list append">append</span> <var>child</var> to
+     <var>otherChildren</var>.</p></li>
+    </ol>
+   </li>
+
+   <li><p>Set <var>select</var>'s <span>select button slot</span>'s <span>manually assigned
+   nodes</span> to <var>firstButton</var>.</p></li>
+
+   <li><p>Set <var>select</var>'s <span>select popover slot</span>'s <span>manually assigned
+   nodes</span> to <var>otherChildren</var>.</p></li>
+  </ol>
+
   <p>An <code>optgroup</code> element is expected 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 expected to be rendered by displaying the element's <span
   data-x="concept-option-label">label</span>, indented under its <code>optgroup</code> element if it
-  has one.</p>
+  has one. If the <code>option</code> is being rendered in a <code>select</code> which is being
+  rendered as a <span>drop-down box</span> with <span>base appearance</span>, then the
+  <code>option</code> is expected 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>
@@ -143126,6 +143313,9 @@ INSERT INTERFACES HERE
    <dt id="refsCSSALIGN">[CSSALIGN]</dt>
    <dd><cite><a href="https://w3c.github.io/csswg-drafts/css-align/">CSS Box Alignment</a></cite>, E. Etemad, T. Atkins. W3C.</dd>
 
+   <dt id="refsCSSANCHOR">[CSSANCHOR]</dt>
+   <dd><cite><a href="https://drafts.csswg.org/css-anchor-position-1/">CSS Anchor Positioning</a></cite>, T. Atkins, E. Etemad, I. Kilpatrick. W3C.</dd>
+
    <dt id="refsCSSANIMATIONS">[CSSANIMATIONS]</dt>
    <dd><cite><a href="https://w3c.github.io/csswg-drafts/css-animations/">CSS Animations</a></cite>, D. Jackson, D. Hyatt, C. Marrin, S. Galineau, L. Baron. W3C.</dd>