From 2f6fa9cc494d86f45886d5936fbf2aac8a59d9c0 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Fri, 17 Oct 2025 07:40:41 -0700
Subject: [PATCH 1/3] Fix base appearance select styles

This PR fixes some duplication and conflicts between UA styles for
select elements:
- display:inline-block was declared unconditionally for select elements
  but display:inline-flex is used for base appearance, so I created a
  separate section for native/primitive appearance and put
  display:inline-block in there to disambiguate the base appearance
  value.
- The form-controls section has a block of CSS which sets some text
  properties to initial and sets box-sizing:border-box for select
  elements, so I removed the duplicate values for those from the base
  appearance select section.
- Inherit letter-spacing for base appearance, which was resolved in
  CSSWG and implemented in chromium but not added to this spec.

Fixes https://github.com/whatwg/html/issues/11804
---
 source | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/source b/source
index e6c462593cb..45f9a02efe6 100644
--- a/source
+++ b/source
@@ -147700,14 +147700,13 @@ progress { appearance: auto; }</code></pre>
 
   <p>A <code>select</code> element whose <code data-x="attr-select-multiple">multiple</code>
   attribute is absent, and whose <span data-x="concept-select-size">display size</span> is 1, is
-  <span>expected</span> to render as an <span>'inline-block'</span> one-line <span>drop-down
-  box</span>. The <span>inline size</span> of its <span>intrinsic size</span> is the
-  <span>width of the <code>select</code>'s labels</span>. If the <span>'field-sizing'</span>
-  property on the element has a <span>computed value</span> of
-  <span data-x="field-sizing-content">'content'</span>, the <span>inline size</span> of the
-  <span>intrinsic size</span> depends on the shown text. The shown text is typically the label of
-  an <code>option</code> of which <span data-x="concept-option-selectedness">selectedness</span> is
-  set to true.</p>
+  <span>expected</span> to render as a <span>drop-down box</span>. The <span>inline size</span> of
+  its <span>intrinsic size</span> is the <span>width of the <code>select</code>'s labels</span>. If
+  the <span>'field-sizing'</span> property on the element has a <span>computed value</span> of <span
+  data-x="field-sizing-content">'content'</span>, the <span>inline size</span> of the
+  <span>intrinsic size</span> depends on the shown text. The shown text is typically the label of an
+  <code>option</code> of which <span data-x="concept-option-selectedness">selectedness</span> is set
+  to true.</p>
 
   <div algorithm>
   <p>When the element renders as a <span>drop-down box</span>, it is a <span>devolvable
@@ -147827,15 +147826,23 @@ 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>
+
+  <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 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 {
-  text-transform: initial;
-  text-align: initial;
-  text-indent: initial;
+  letter-spacing: inherit;
   background-color: transparent;
   border: 1px solid currentColor;
   padding-block: 0.25em;
@@ -147846,7 +147853,6 @@ select {
   gap: 0.5em;
   border-radius: 0.5em;
   user-select: none;
-  box-sizing: border-box;
   field-sizing: content !important;
 }
 

From 1462392a89918b794cff7aa80ae085a9775db8cc Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Tue, 21 Oct 2025 12:07:31 -0700
Subject: [PATCH 2/3] separate initial and inherit values

---
 source | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/source b/source
index 45f9a02efe6..4e0f7b5de8b 100644
--- a/source
+++ b/source
@@ -146166,10 +146166,13 @@ table {
 
   <pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
 
-input, select, button, textarea {
+input, button, textarea {
   letter-spacing: initial;
   word-spacing: initial;
   line-height: initial;
+}
+
+input, select, button, textarea {
   text-transform: initial;
   text-indent: initial;
   text-shadow: initial;
@@ -147834,6 +147837,8 @@ progress { appearance: auto; }</code></pre>
 
 select {
   display: inline-block;
+  letter-spacing: initial;
+  word-spacing: initial;
 }</code></pre>
 
   <p>The following styles are <span>expected</span> to apply to <code>select</code> elements when
@@ -147843,6 +147848,8 @@ select {
 
 select {
   letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
   background-color: transparent;
   border: 1px solid currentColor;
   padding-block: 0.25em;

From 087e110bef1f99ad896bd3373d8e402874aaec6b Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Tue, 28 Oct 2025 16:24:25 -0700
Subject: [PATCH 3/3] set initial and remove inherit

---
 source | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/source b/source
index 4e0f7b5de8b..909e1ea7655 100644
--- a/source
+++ b/source
@@ -147839,6 +147839,7 @@ 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
@@ -147847,9 +147848,6 @@ select {
   <pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
 
 select {
-  letter-spacing: inherit;
-  word-spacing: inherit;
-  line-height: inherit;
   background-color: transparent;
   border: 1px solid currentColor;
   padding-block: 0.25em;