2016474 - [css-conditional-5] "query-less" container query support

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Anthony Frehner]

Steps to reproduce:

The spec supports the idea of "query-less" / "no query" container queries. To clarify:

https://drafts.csswg.org/css-conditional-5/#container-rule

outlines it as

<container-condition> = [ <container-name>? <container-query>? ]!
<container-name> = <custom-ident>
<container-query> = not <query-in-parens>
          | <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]

where <container-query> is now optional. This enables queries like

@container --name {}

to work, and the goal is to simply apply the styles if it is inside a container with that name --name.

WPTs exist here https://github.com/web-platform-tests/wpt/blob/master/css/css-conditional/container-queries/query-container-name.html

I'd like to implement this in Firefox so that it's all wrapped up https://wpt.fyi/results/css/css-conditional/container-queries/query-container-name.html?label=experimental&label=master&aligned

Actual results:

"query-less" container queries don't work

Expected results:

they should work.

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

[Anthony Frehner]

Attachment: Bug 2016474 - Support name-only container queries, and update WPT results. r?#layout-reviewers

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/501819cc6fbb
https://hg.mozilla.org/integration/autoland/rev/c8d7baa7ad1f
Support name-only container queries, and update WPT results. r=layout-reviewers,firefox-style-system-reviewers,emilio

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/c815c3a1f449
https://hg.mozilla.org/integration/autoland/rev/e538258ca7de
Revert "Bug 2016474 - Support name-only container queries, and update WPT results. r=layout-reviewers,firefox-style-system-reviewers,emilio" for causing wpt failures @ at-container-serialization.html

Comment 5

[amarc]

Backed out for causing wpt failures

• Backout link
• Push with failures
• Failure Log

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Ah, you need to annotate the extra passes. Please do that and we can get that re-landed. Thanks!

Comment 7

[Anthony Frehner]

Updated! Thanks.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/e708df318201
https://hg.mozilla.org/integration/autoland/rev/44daa4dd59a9
Support name-only container queries, and update WPT results. r=layout-reviewers,firefox-style-system-reviewers,emilio

Comment 9

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/44daa4dd59a9

Comment 10

[Hamish Willee]

FF149 MDN work for this can be tracked in https://github.com/mdn/content/issues/43212

Does this reflect a recent spec change?

I'm trying this on browserstack and the https://wpt.live/css/css-conditional/container-queries/query-container-name.html test fails on the most recent versions of all browsers they have. Looking at https://wpt.fyi/results/css/css-conditional/container-queries/query-container-name.html?label=master&label=experimental&aligned the versions are more recent, so it could be simply I don't have the right versions to test. Note, it does work locally on nightly.

The reason I ask is that I presume I will need to update the compatibility data, and it is useful to know when each browser updated.

Comment 11

[Anthony Frehner]

Does this reflect a recent spec change?

Not very recent https://github.com/w3c/csswg-drafts/issues/9192#issuecomment-1789850349 , but recently implemented in browsers.

Webkit: in STP release 235 https://webkit.org/blog/17739/release-notes-for-safari-technology-preview-235/

I don't have insight into Firefox's nor Chrome's release timelines, but as you noted it's been implemented in both, so just waiting on releases.

Comment 12

[Anthony Frehner]

Sorry, spec changed here specifically https://github.com/w3c/csswg-drafts/pull/11172