Implement container relative length units

👁 Image	Sebastian Zartner [:sebo] Reporter
	Description • 4 years ago

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

Sebastian

👁 Image	Hiroyuki Ikezoe (:hiro)
	Updated • 4 years ago

👁 Image	Ruth John
	Updated • 4 years ago

👁 Image	Daniel Holbert [:dholbert] (PTO until Jun 29)
	Comment 2 • 3 years ago

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

👁 Image	David Shin[:dshin] Assignee
	Updated • 3 years ago

👁 Image	David Shin[:dshin] Assignee
	Updated • 3 years ago

👁 Image	David Shin[:dshin] Assignee
	Updated • 3 years ago

👁 Image	David Shin[:dshin] Assignee
	Comment 3 • 3 years ago

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

👁 Image	David Shin[:dshin] Assignee
	Comment 4 • 3 years ago

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

Depends on D158054

👁 Image	David Shin[:dshin] Assignee
	Comment 5 • 3 years ago

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

Depends on D158055

👁 Image	David Shin[:dshin] Assignee
	Comment 6 • 3 years ago

Depends on D158056

👁 Image	David Shin[:dshin] Assignee
	Comment 7 • 3 years ago

Depends on D158057

👁 Image	Phabricator Automation
	Updated • 3 years ago

👁 Image	Pulsebot
	Comment 8 • 3 years ago

Pushed by dshin@mozilla.com: 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

👁 Image	Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)
	Comment 9 • 3 years ago

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

👁 Image	Iulian Moraru
	Comment 10 • 3 years ago
bugherder

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

👁 Image	Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)
	Comment 11 • 3 years ago

Upstream PR merged by moz-wptsync-bot

👁 Image	Hamish Willee
	Comment 12 • 3 years ago

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?

👁 Image	Sebastian Zartner [:sebo] Reporter
	Comment 13 • 3 years ago

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

👁 Image	Hamish Willee
	Comment 14 • 3 years ago

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.

👁 Image	Brian Thomas Smith [:bsmth]
	Updated • 3 years ago

👁 Image	zsun
	Updated • 3 years ago

👁 Image	David Shin[:dshin] Assignee
	Updated • 2 years ago