Closed Bug 2016929 Opened 2 months ago Closed 1 month ago

[meta] Support multiple comma-separated queries in @container rules

Categories

(Core :: CSS Parsing and Computation, enhancement)

enhancement

Tracking

()

RESOLVED FIXED

People

(Reporter: jfkthame, Unassigned)

References

(Blocks 2 open bugs)

Details

(Keywords: meta)

E.g. @container style(--foo: bar), --container style(--foo: bar) { ... }, as seen in multiple-style-containers-comma-separated-queries.html in the interop-2026 list of tests.

I think this basically requires enhancing ContainerCondition to hold a list of container names and rules, or alternatively leave ContainerCondition as-is and extend ContainerRule to allow a list of ContainerConditions. (And either way, update the associated parsing and matching code to handle the list.)

Doing just a bit of investigation, I see two obvious things that need to be done.

It seems the easiest to change ContainerRule::condition to be something like a Box<[]> or smallvec to hold the set of conditions:
https://searchfox.org/firefox-main/rev/1f43fe5ffadde0b6898daf607cabb3335dd75d6f/servo/components/style/stylesheets/container_rule.rs#39

Parsing needs implementation, though this looks pretty easy to implement just by making the change to ContainerRule and then working bottom-up to the parser code from there.

Possibly add support to query number of conditions and get by index in glue, or this should assemble the entire CSS text? The spec seems a little odd in how this should work...
https://searchfox.org/firefox-main/rev/1f43fe5ffadde0b6898daf607cabb3335dd75d6f/servo/ports/geckolib/glue.rs#3486

It seems like maybe the spec either hasn't caught up to this feature yet for the DOM API given how containerQuery is specified? Or should it actually return the comma-separated list? The spec indicates it returns a single container query, but the rules can have multiple queries. It seems strange to me but I might be missing something in the spec that does clarify to me.
https://drafts.csswg.org/css-conditional-5/#the-csscontainerrule-interface

This also seems a little incompatible with the wording of the conditionText in CSSConditionRule, since that implies a single condition?
https://www.w3.org/TR/css-conditional-3/#cssconditionrule

Given that the spec specifically says the conditionText of a ContainerRule should be the concatenation of containerName and containerQuery, it seems like an oversight that getting multiple queries sounds impossible.

Yes, there's a spec issue to be sorted out for the CSSOM APIs here; see https://github.com/w3c/csswg-drafts/issues/10845. We should try to nudge that forwards -- once we have implementation work going on to support multiple conditions, that should provide some incentive to get it resolved.

Given the currently-open spec issue regarding the CSSContainerRule interface, let's make this a metabug for the overall feature, and split out implementation bugs for parsing and matching (which I think are ready to be implemented, and will make the current WPT test pass) and for the update to interfaces, which depends on getting the spec issue resolved.

Summary: Support multiple comma-separated queries in @container rules → [meta] Support multiple comma-separated queries in @container rules
Depends on: 2019254
Depends on: 2019258
No longer blocks: 2023125

Closing, as this is now implemented, and the relevant WPTs are passing.

Status: NEW → RESOLVED
Closed: 1 month ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.