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

Add the :open and :closed pseudo-selectors #10126

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

Add the :open and :closed pseudo-selectors #10126

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
842c489
Add the :open and :closed pseudo-selectors
josepharhar Feb 7, 2024
8b1e0da
use drop-down box
josepharhar Feb 9, 2024
77fe1ec
rewrite matching algorithm
josepharhar Feb 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
50 changes: 50 additions & 0 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74232,6 +74232,56 @@ Demos:
<dd><p>The <code data-x="selector-volume-locked">:volume-locked</code> <span>pseudo-class</span>
must match all <span data-x="media element">media elements</span> when the user agent's
<span>volume locked</span> is true.</p></dd>

<dt><dfn selector><code data-x="selector-open">:open</code></dfn></dt>
<dd>
<p>The <code data-x="selector-open">:open</code> <span>pseudo-class</span> must match any
element that <span>matches the open selector</span>.<p>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<p>To determine if an <code>Element</code> <var>element</var> <dfn>matches the open
selector</dfn>:</p>

<ol>
<li>
<p>If <var>element</var> is a <code>details</code> or <code>dialog</code> element:</p>

<ol>
Copy link
Member

Choose a reason for hiding this comment

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

This might be irelevant for the HTML spec but Firefox for Android renders a multiple or size select as a list box but also opens a modal when clicked, should that match :open?

Also Chromium for Android renders selects as a conventional drop down style but opens a modal not a drop down, should that match :open?

Just trying to clarify because the "drop-down box" terminology is ambiguous as first glance.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah if it opens as a modal when clicked then I don't see why it shouldn't match :open

<li><p>Return true if <var>element</var> has the <code data-x="attr-dialog-open">open</code>
Copy link
Member

Choose a reason for hiding this comment

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

You cannot point to a specific open attribute if it's about two distinct ones. Using data-x="" should suffice.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I separated them and referred to specific open attributes. Look good?

attribute, otherwise false.</p></li>
</ol>
</li>

<li><p>If <var>element</var> is a <code>select</code> element and <var>element</var> is being
rendered as a button with a popup and the popup is open, then return true.</p></li>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I know this is very vague, but the select element as specced never mentions that it can be an in-page listbox or a button with a popup. I figure that it makes sense to match neither :open or :closed when it is being rendered as an in-page listbox with no popup, but in any case we need some way of saying that the popup is open.

Copy link
Member

Choose a reason for hiding this comment

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

Doesn't the rendering section have something to reuse for this? If we're going to depend on rendering I feel like we'd want to at least link to a shared concept.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh yeah it is defined in rendering! https://html.spec.whatwg.org/multipage/rendering.html#list-box

However, I don't think the definition reflects browsers because it says that having the multiple attribute means that it renders a list box, but in iOS safari and android chrome having the multiple attribute renders as a drop-down box.

Maybe I could fix that separately?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

For now I've referenced the "drop-down box" definition from rendering


<li><p>Return false.</p></li>
</ol>
</dd>

<dt><dfn selector><code data-x="selector-closed">:closed</code></dfn></dt>
<dd>
<p>The <code data-x="selector-closed">:closed</code> <span>pseudo-class</span> must match any
element that <span>matches the closed selector</span>.<p>
Copy link
Member

Choose a reason for hiding this comment

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

Can be inlined.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I combined the paragraphs, does it look good?


<p>To determine if an <code>Element</code> <var>element</var> <dfn>matches the closed
selector</dfn>:</p>

<ol>
<li>
<p>If <var>element</var> is a <code>details</code> or <code>dialog</code> element:</p>

<ol>
<li><p>Return false if <var>element</var> has the <code data-x="attr-dialog-open">open</code>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
attribute, otherwise true.</p></li>
</ol>
</li>

<li><p>If <var>element</var> is a <code>select</code> element and <var>element</var> is being
rendered as a button with a popup and the popup is closed, then return true.</p></li>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<li><p>Return false.</p></li>
</ol>
</dd>
</dl>

<p class="note">This specification does not define when an element matches the <code undefined
Expand Down