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 #11804.

Author: josepharhar

source

@@ -146480,10 +146480,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;
@@ -148014,14 +148017,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
@@ -148141,15 +148143,25 @@ 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;
+  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>
 
   <pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
 
 select {
-  text-transform: initial;
-  text-align: initial;
-  text-indent: initial;
   background-color: transparent;
   border: 1px solid currentColor;
   padding-block: 0.25em;
@@ -148160,7 +148172,6 @@ select {
   gap: 0.5em;
   border-radius: 0.5em;
   user-select: none;
-  box-sizing: border-box;
   field-sizing: content !important;
 }