1936113 - Implement CSS :open pseudo-class

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Joey Arhar]

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Steps to reproduce:

Use :open in CSS

Actual results:

Selector is not matched

Expected results:

The :open CSS pseudo-class is being added to the HTML spec and will be shipped in chrome soon:

• https://drafts.csswg.org/selectors-4/#open-state
• https://github.com/whatwg/html/pull/10126
• https://chromestatus.com/feature/5085419215781888

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1936113 - Remove mention of obsolete param from the pseudo_class_macro comment. r=#style

Trivial doc cleanup that I noticed when going to edit this file.

Comment 3

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1936113 - Parse :open pseudo-class in the style system. r=#style

This enables us to parse the pseudo, but it's not yet connected to anything.

Comment 4

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1936113 - Hook up :open to details, select, dialog, and input elements. r=#dom-core

Most of these elements are simple to support.

One slightly tricky item was <input type=date>, as testing indicates that the
front-end code usually (consistently?) hides the picker using setPickerState(),
which does not end up calling closeDateTimePicker() as might be expected.
So to properly track the open/closed state, I had to add a SetDateTimePickerState
webidl method, rather than just patching into the existing Open/Close calls.

Comment 5

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1936113 - Update metadata for WPT tests that now pass. r=#style,#dom-core

Comment 6

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1936113 - Add a couple of reftests for the :open pseudo-class. r=#style

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4ee0855e448f
Remove mention of obsolete param from the pseudo_class_macro comment. r=dshin
https://hg.mozilla.org/integration/autoland/rev/716bdadbea2a
Parse :open pseudo-class in the style system. r=dshin
https://hg.mozilla.org/integration/autoland/rev/9cfc0a675a42
Hook up :open to details, select, dialog, and input elements. r=webidl,emilio
https://hg.mozilla.org/integration/autoland/rev/a88e93dff614
Add a couple of reftests for the :open pseudo-class. r=dshin
https://hg.mozilla.org/integration/autoland/rev/2b07b9e7bf57
Update metadata for WPT tests that now pass. r=dshin

Comment 8

[Atila Butkovits]

Backed out for causing failures at select-inside-top-layer.tentative.html.

Backout link: https://hg.mozilla.org/integration/autoland/rev/a7690617e71a8713537695a0ea5d07ba443da7cb

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=2b07b9e7bf57cf8358e546b7fe4141babe72f541

Failure log: https://treeherder.mozilla.org/logviewer?job_id=490559485&repo=autoland&lineNumber=2810

Comment 9

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/50135 for changes under testing/web-platform/tests

Comment 10

[Jonathan Kew [:jfkthame]]

(In reply to Atila Butkovits from comment #8)

Backed out for causing failures at select-inside-top-layer.tentative.html.

Backout link: https://hg.mozilla.org/integration/autoland/rev/a7690617e71a8713537695a0ea5d07ba443da7cb

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=2b07b9e7bf57cf8358e546b7fe4141babe72f541

Failure log: https://treeherder.mozilla.org/logviewer?job_id=490559485&repo=autoland&lineNumber=2810

Ah, I see.... tests involving <select> fail on android, because the widget is completely different there, and the openInParentProcess thing doesn't apply to it. I'll mark these as (still) failing for now, and file a followup bug.

Comment 11

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/afae9b8eaceb
Remove mention of obsolete param from the pseudo_class_macro comment. r=dshin
https://hg.mozilla.org/integration/autoland/rev/27e814df42ec
Parse :open pseudo-class in the style system. r=dshin
https://hg.mozilla.org/integration/autoland/rev/3bfcd49c0bc8
Hook up :open to details, select, dialog, and input elements. r=webidl,emilio
https://hg.mozilla.org/integration/autoland/rev/6d39e75391fa
Add a couple of reftests for the :open pseudo-class. r=dshin
https://hg.mozilla.org/integration/autoland/rev/bd6fe64b89d7
Update metadata for WPT tests that now pass. r=dshin

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0ab040b01e33
Further update WPT metadata

Comment 14

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/afae9b8eaceb
https://hg.mozilla.org/mozilla-central/rev/27e814df42ec
https://hg.mozilla.org/mozilla-central/rev/3bfcd49c0bc8
https://hg.mozilla.org/mozilla-central/rev/6d39e75391fa
https://hg.mozilla.org/mozilla-central/rev/bd6fe64b89d7
https://hg.mozilla.org/mozilla-central/rev/0ab040b01e33

Comment 15

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 16

[Donal Meehan [:dmeehan]]

:jfkthame could you consider nominating this for a release note? (Process info)

Comment 17

[Jonathan Kew [:jfkthame]]

Release Note Request (optional, but appreciated)

[Why is this notable]: This pseudo-class allows authors to easily target openable elements such as <details> according to whether they are in their opened or closed state, e.g. to change the style of the Summary when a <details> element is expanded.

[Suggested wording]: Firefox now supports the CSS :open pseudo-class for styling elements can be toggled “open” to display more content

Comment 18

[Donal Meehan [:dmeehan]]

Thanks, added to the Fx136 nightly release notes, please allow 30 minutes for the site to update.
Keeping the relnote-firefox flag as ? to keep it on the radar for inclusion in the final Fx136 release notes.