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.

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

[selectors] Should :checked and :indeterminate be exclusive? #9706

Open
josepharhar opened this issue Dec 13, 2023 · 4 comments
Open

[selectors] Should :checked and :indeterminate be exclusive? #9706

josepharhar opened this issue Dec 13, 2023 · 4 comments
Labels
selectors-4 Current Work

Comments

@josepharhar
Copy link
Contributor

The :checked and :indeterminate pseudo-classes can apply to <input type=checkbox>:
https://drafts.csswg.org/selectors/#checked
https://drafts.csswg.org/selectors/#indeterminate

These are also defined in the HTML spec here:
https://html.spec.whatwg.org/#selector-checked
https://html.spec.whatwg.org/#selector-indeterminate

WebKit recently implemented support for matching both of these selectors at the same time since the "checked" and "indeterminate" states exist independently and don't force each other on or off when modifying via javascript: WebKit/WebKit#21157

I was going to implement the same behavior in chromium to pass the WPT, but it was pointed out that the idea of matching both at the same time was never discussed here. Can we formally decide to allow this and perhaps add a note to the spec saying that both can match at the same time?

@dbaron @annevk

@josepharhar
Copy link
Contributor Author

It's also worth mentioning that there is a comment in chromium here about this behavior:

Even though WinIE allows checked and indeterminate to
co-exist, the CSS selector spec says that you can't be
both checked and indeterminate. We will behave like WinIE
behind the scenes and just obey the CSS spec here in the
test for matching the pseudo.

@josepharhar
Copy link
Contributor Author

The WPT is here.
Here is a quick example of the proposed behavior:

const input = document.createElement('input');
input.type = 'checkbox';
input.checked = true;
input.indeterminate = true;
input.matches(':checked:indeterminate'); // should return true

@annevk
Copy link
Member

annevk commented Dec 13, 2023

That comment was also in the WebKit source code FWIW, but as per HTML it's bogus.

@dbaron
Copy link
Member

dbaron commented Dec 13, 2023

I'm curious if the fact that the CSS selector spec used to say this but now doesn't was an intentional or unintentional change to the selector spec.

From a usage perspective this change seems weird -- I think conceptually :indeterminate was intended to act like a third state that is distinct from :checked and unchecked. Even though it wasn't defined that way in the DOM, that doesn't mean it's desirable to expose the DOM weirdness about it in more places.

Also cc @tantek who I think was (at least partly) responsible for creating indeterminate.

@fantasai fantasai added the selectors-4 Current Work label Jan 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
selectors-4 Current Work
Projects
None yet
Development

No branches or pull requests

4 participants