Closed Bug 1771896 Opened 2 years ago Closed 2 years ago

Add simple parsing support for :has()

Categories

(Core :: CSS Parsing and Computation, task)

task

Tracking

()

RESOLVED FIXED
103 Branch
Tracking Status
firefox103 --- fixed

People

(Reporter: emilio, Assigned: tlouw, Mentored)

References

Details

(Keywords: dev-doc-complete)

Attachments

(1 file)

It should take a forgiving selector-list as described in the spec:

https://drafts.csswg.org/selectors-4/#has-pseudo

Parsing it behind a flag and maybe implement selector-matching on it should be relatively straight forward.

To implement simple matching, we probably need to add an fn first_element_child(&self) -> Option<Self> to the selectors tree module. But that can be a follow-up if needed.

Adding the :has pseudo class and traversing children to find matches is simple enough.

There is an issue with parsing the selector passed into the selector list though. The spec says you can pass combinator selectors like this:

p:has(> a)

...which is not parsed correctly by the current implementation, because combinator selectors expect a preceding type selector, e.g.:

p > a

...so the > a is not parsed as a selector correctly and is skipped.

I will push the changes for the initial implementation and then add another bug to deal with the parsing (which does not look like a simple task).

Assignee: nobody → tlouw
Status: NEW → ASSIGNED

Parsing is behind a config value layout.css.has-selectors.enabled. This
change does not support p:has(> a) combinators, but will handle them
gracefully, just not matching on them.

Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/5a23a3397e1a
Add simple parsing and matching support for :has r=emilio
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → 103 Branch

Doc updates for this can be tracked here: https://github.com/mdn/content/issues/19572

You need to log in before you can comment on or make changes to this bug.