1744231 - Implement container relative length units

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Sebastian Zartner [:sebo]]

CSS Containment Module Level 3 defines different container relative length units. Those units are cqw, cqh, cqi, cqb, cqmin, cqmax.

Sebastian

Comment 2

[Daniel Holbert [:dholbert]]

For reference, here's a link to the relevant spec-section, in a mirror of drafts.csswg.org, since drafts.csswg.org is partly-down:
https://andreubotella.com/csswg-auto-build/css-contain-3/#container-lengths

Comment 3

[David Shin[:dshin]]

Attachment: Bug 1744231: Part 1 - Implement parsing of container relative lengths. r=#layout-reviewers

• For now, implementation always returns the fallback value, i.e. small viewport lengths.
• Enabled via existing pref layout.css.container-queries.enabled.

Comment 4

[David Shin[:dshin]]

Attachment: Bug 1744231: Part 2 - Centralize construction of `computed::Context`. r=#layout-reviewers

For controlled construction and access of upcoming, lazily-evaluated container query size.

Depends on D158054

Comment 5

[David Shin[:dshin]]

Attachment: Bug 1744231: Part 3 - Flag computed styles of elements with `container-type: *size` set & propagate them to their descendants. r=#layout-reviewers

Low-hanging fruit optimization that enables short-circuit exit of container query lookups.

Depends on D158055

Comment 6

[David Shin[:dshin]]

Attachment: Bug 1744231: Part 4 - Enable lookup and computation of container size queries. r=#layout-reviewers

Depends on D158056

Comment 7

[David Shin[:dshin]]

Attachment: Bug 1744231: Part 5 - Rematch all descendants when `container-type` changes. r=#layout-reviewers

Depends on D158057

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/840bdd4142f4
Part 1 - Implement parsing of container relative lengths. r=emilio
https://hg.mozilla.org/integration/autoland/rev/0792a4e5363e
Part 2 - Centralize construction of `computed::Context`. r=emilio
https://hg.mozilla.org/integration/autoland/rev/361c82fbc7a8
Part 3 - Flag computed styles of elements with `container-type: *size` set & propagate them to their descendants. r=emilio
https://hg.mozilla.org/integration/autoland/rev/7e4e5ed528ef
Part 4 - Enable lookup and computation of container size queries. r=emilio
https://hg.mozilla.org/integration/autoland/rev/c2f047ea3f07
Part 5 - Rematch all descendants when `container-type` changes. r=emilio

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/36502 for changes under testing/web-platform/tests

Comment 10

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/840bdd4142f4
https://hg.mozilla.org/mozilla-central/rev/0792a4e5363e
https://hg.mozilla.org/mozilla-central/rev/361c82fbc7a8
https://hg.mozilla.org/mozilla-central/rev/7e4e5ed528ef
https://hg.mozilla.org/mozilla-central/rev/c2f047ea3f07

Comment 11

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

Upstream PR merged by moz-wptsync-bot

Comment 12

[Hamish Willee]

FF108 MDN docs work for this can be tracked in https://github.com/mdn/content/issues/22119

Can you confirm that this is shipped in FF108? If not, what is the preference used to enable this?

Comment 13

[Sebastian Zartner [:sebo]]

Those units are part of the efforts around implementing container queries. So they are currently still behind the layout.css.container-queries.enabled flag.
Emilio has now added the dev-doc-needed flag to the meta-bug.

I guess, they should be mentioned together with container queries in general at https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_features, though.

Sebastian

Comment 14

[Hamish Willee]

Thanks Sebastian. I just found a more general issue on MDN too: Improve existing and add new documentation for container queries #20987. I'm pretty sure these will all be dealt with together as you suggest.