Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Define base appearance for <select> #10629

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Define base appearance for <select> #10629

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8e17138
Define base appearance for <select>
josepharhar Jul 18, 2024
f8cd659
rewrote a lot
josepharhar Nov 11, 2024
9c41826
Merge branch 'main' into selectrendering
josepharhar Nov 11, 2024
85b785f
prevent select button from being default submit button
josepharhar Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 115 additions & 2 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3230,6 +3230,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>,
Expand Down Expand Up @@ -3985,6 +3986,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
Expand Down Expand Up @@ -4185,6 +4187,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>


Expand Down Expand Up @@ -53662,6 +53670,9 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
<ol>
<li>Set the <code>select</code> element's <span>user validity</span> to true.</li>

<li><p>Run <span>clone selected option into select button</span> given the <code>select</code>
element.</p></li>

<li><p><span data-x="concept-event-fire">Fire an event</span> named <code
data-x="event-input">input</code> at the <code>select</code> element, with the <code
data-x="dom-Event-bubbles">bubbles</code> and <code data-x="dom-Event-composed">composed</code>
Expand Down Expand Up @@ -54363,6 +54374,64 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {

</div>

<p>To get the <dfn>option element ancestor select</dfn> given an <code>option</code>
Copy link
Member

Choose a reason for hiding this comment

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

option element but select without qualifier seems a bit odd. Also option needs code here I think.

And then after the algorithm you just say option without the element qualifier. I think that needs the qualifier too.

<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>clone selected option into select button</dfn>, given a <code>select</code> element
Copy link
Member

Choose a reason for hiding this comment

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

This has a similar problem.

<var>select</var>:</p>

<ol>
<li><p>Let <var>option</var> be the first element of <var>select</var>'s <span
data-x="concept-select-option-list">option list</span> whose <span
data-x="concept-option-selectedness">selectedness</span> is set to true, if such an element
exists, otherwise null.</p></li>
Copy link
Member

Choose a reason for hiding this comment

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

; otherwise null

(see Infra)


<li><p>Let <var>text</var> be an empty string.</p></li>
Copy link
Member

Choose a reason for hiding this comment

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

the empty string


<li><p>If <var>option</var> is not null, then set <var>text</var> to <var>option</var>'s <span
data-x="dom-option-label">label</span>.</p></li>

<li><p>Set <var>select</var>'s <span>select fallback button text</span> to
<var>text</var>.</p></li>
</ol>

<p>The <span>activation behavior</span> of an <code>option</code> <var>option</var> is to run the
Copy link
Member

Choose a reason for hiding this comment

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

option element

Copy link

@smaug---- smaug---- Nov 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

In the current Canary, option element selection seems to happen on pointerdown (or is it mousedown, anyhow -down), not when activating
(which is why it took a bit time to figure out why an anchor element inside an option doesn't get activated when clicked).

But click event is still dispatched. It is just dispatched to the common ancestor of the option and whatever happens to be under the pointer when the popup has been closed and pointerup dispatched.

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>, then run the <span>hide popover algorithm</span> given <var>select</var>'s
<span>select popover</span>.</p></li>
</ol>

<dl class="domintro">
<dt><code data-x=""><var>option</var>.<span subdfn data-x="dom-option-selected">selected</span></code></dt>

Expand Down Expand Up @@ -59632,7 +59701,8 @@ fur

<p>A <code>form</code> element's <dfn>default button</dfn> is the first <span
data-x="concept-submit-button">submit button</span> in <span>tree order</span> whose <span>form
owner</span> is that <code>form</code> element.</p>
owner</span> is that <code>form</code> element and who is not slotted into a <code>select</code>
element's <span>select button slot</span>.</p>

<p>If the user agent supports letting the user submit a form implicitly (for example, on some
platforms hitting the "enter" key while a text control is <span>focused</span> implicitly submits
Expand Down Expand Up @@ -136468,12 +136538,52 @@ 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>

<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 a <span>shadow tree</span> with the
following elements:</p>

<ol>
<li><p>A <dfn>select button slot</dfn>, which is a <code>slot</code> element. It is appended to
the <code>select</code>'s <span>shadow root</span> as the first child. It is expected to take the
first child element of the <code>select</code> if the first child element is a
<code>button</code>, otherwise the <span>select fallback button text</span>.</p></li>
Copy link

Choose a reason for hiding this comment

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

When testing Canary the select element seems to eat the click event and a button nor selectedcontent inside it get the click. Is that defined somewhere? Hmm, looks like they don't get any pointer/mouse events. Perhaps there is pointer-events: none somewhere, I'm just missing to find that in the PRs?

Copy link

Choose a reason for hiding this comment

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

Ah, the selectedcontent/button case is coming from interactivity: inert;
w3c/csswg-drafts#10857
w3c/csswg-drafts#11178


<li><p>A <dfn>select fallback button text</dfn>, which is a <code>div</code> element. It is
appended to the <span>select button slot</span>.</p></li>

<li><p>A <dfn>select popover</dfn>, which is a <code>div</code> element. It is appended to the
<code>select</code>'s <span>shadow root</span> as the second child, after the <span>select button
slot</span>.</p></li>

<li><p>A <dfn>select popover slot</dfn>, which is a <code>slot</code> element. It is appended to
the <span>select popover</span>. It is expected to take all child nodes of the
<code>select</code> except for the first child <code>button</code>, which is taken by the
<code>select button slot</code>.</p></li>
</ol>

<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>The <span>select popover</span>'s <span>implicit anchor element</span> is its associated
<code>select</code> element.</p>

<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 in a <code>select</code> which is being rendered as a
<span>drop-down box</span> 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
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>
Expand Down Expand Up @@ -143926,6 +144036,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>

Expand Down