Containment

[una]

Description
Container queries enable the querying of a parent element for responsive design information instead of relying on the global viewport (as with media queries). These rely on the containment spec, and enables component-level logic for styling based on inline and block size.

Kapture.2021-11-01.at.14.59.02.mp4

More on MDN

Specification
CSS-Contain-3

Tests
TBD

Rationale
This is consistently one of the top rated feature requests by developers and unlocks more customizable component-level responsive design. [Post] [Developer Response to WIP]

[foolip]

There are a lot of tests in https://wpt.fyi/results/css/css-contain, but they seem to be about the contain property rather than the @container rule.

It loos like we have a bunch of tests in Chromium that haven't been upstreamed to WPT yet:
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/web_tests/wpt_internal/css/css-conditional/container-queries/

Are those tests sufficient?

[lilles]

We plan to move the tests in wpt_internal over to wpt/css/css-contain/ over the next couple of weeks, but not necessarily file by file. We probably want to restructure based on common testing patterns and organize per spec section to make it easier to check coverage.

[lilles]

We would like to land this first as the basic syntax changed from our current impl: https://chromium-review.googlesource.com/c/chromium/src/+/3301380

[foolip]

I've added the requires:spec-maturity label because https://www.w3.org/TR/css-contain-3/ is 404, which I presume means that this hasn't been published as FPWD yet.

[foolip]

@una says that w3c/csswg-drafts#6426 is probably the last issue remaining and that publishing might be a few weeks out.

[gsnedders]

@una says that w3c/csswg-drafts#6426 is probably the last issue remaining and that publishing might be a few weeks out.

As noted, it appears is somewhat surprising there's still no FPWD. It's surprising that we've not reached a point where the spec can be published at all, as after all it's a first draft, and not a last draft.

The CSS WG resolved in June:

The editors of Contain 3 will add a bit more detail to the 1D containment section and then request FPWD; hopefully next week.

See also question on IRC today.

[foolip]

The CSS WG has just resolved to publish a FPWD for Contain 3: w3c/csswg-drafts#6426 (comment)

[andruud]

Note: We recently WPT-ified and upstreamed our tests for container queries + inline-size containment:

/css/css-contain/container-queries/*
/css/css-contain/contain-inline-size-*

[foolip]

Per #39 (comment) we're not going to include Container Queries in Interop 2022, but there's still an open question about the contain property, which is Containment Level 1+2. @annevk @jgraham will you comment on this issue with your findings, or how would you like to handle this?

[annevk]

A question that came up when discussing this is whether it's just the contain property or also other things specified in CSS Containment 1/2? With that answered we can probably give a more detailed answer next week.

[foolip]

@annevk sorry I didn't see the notification for this. It's just the contain property, not content-visibility. In terms of tests, roughly https://wpt.fyi/results/css/css-contain excluding https://wpt.fyi/results/css/css-contain/container-queries and https://wpt.fyi/results/css/css-contain/content-visibility.

If there are types of containment that not everyone wants to include in Interop 2022, we could discuss a subset.

[annevk]

Thanks that helps! We'd be Neutral if contain:style is also excluded, and Oppose otherwise.

[foolip]

Thanks @annevk. In chat we also realized that contain:strict should be excluded, leaving is with layout, size, and paint containment.

@andruud helped me identify the set of tests for that, which I've labeled as interop-2022-contain. It should show up soon as little label icons next to the test names here:
https://wpt.fyi/results/css/css-contain?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned

More useful info from Anders:

Note that tests where all browsers already pass are not mentioned here at all.

Note also that I can't investigate each test deeply to see what the true failure reason is for a given browser. (Random example: maybe contain-size-grid-005.html fails because of grid interop issues, and not contain interop issues).

The following are not included since they use one of the following:

• contain:inline-size, which exists only for container query purposes.
• contain:style, which Mozilla presumably won't prioritize.
• contain:strict/content, which both imply contain:style.

contain:inline-size

contain-inline-size-bfc-floats-001.html
contain-inline-size-bfc-floats-002.html
contain-inline-size-fieldset.html
contain-inline-size-flex.html
contain-inline-size-flexitem.html
contain-inline-size-grid.html
contain-inline-size-legend.html
contain-inline-size-multicol.html
contain-inline-size-regular-container.html
contain-inline-size-vertical-rl-.html

contain:style

contain-body-bg-004.html
contain-body-dir-004.html
contain-body-overflow-004.html
contain-body-t-o-004.html
contain-body-w-m-004.html
contain-html-bg-004.html
contain-html-dir-004.html
contain-html-overflow-004.html
contain-html-t-o-004.html
contain-html-w-m-004.html
contain-style-counters-001.html
contain-style-counters-002.html
contain-style-counters-003.html
contain-style-counters-004.html
counter-scoping-001.html
counter-scoping-002.html
counter-scoping-003.html
quote-scoping-001.html
quote-scoping-002.html
quote-scoping-003.html
quote-scoping-004.html

contain:strict

contain-animation-001.html
contain-strict-001.html
contain-strict-002.html
contain-strict-003.html
contain-strict-011.html

contain:content

contain-content-001.html
contain-content-002.html
contain-content-003.html
contain-content-004.html
contain-content-011.html

[foolip]

Note that tests where all browsers already pass are not mentioned here at all.

@andruud kindly took another pass over those.

Interop 2022
------------
contain-chrome-thcrash-001.html
contain-layout-001.html
contain-layout-019.html
contain-layout-breaks-001.html
contain-layout-ignored-cases-ib-split-001.html
contain-layout-ignored-cases-no-principal-box-001.html
contain-layout-ignored-cases-no-principal-box-002.html
contain-layout-ignored-cases-no-principal-box-003.html
contain-layout-independent-formatting-context-002.html
contain-layout-independent-formatting-context-003.html
contain-paint-002.html
contain-paint-007.html
contain-paint-011.html
contain-paint-012.html
contain-paint-015.html
contain-paint-016.html
contain-paint-017.html
contain-paint-018.html
contain-paint-024.html
contain-paint-baseline-001.html
contain-paint-change-opacity.html
contain-paint-clip-003.html
contain-paint-clip-004.html
contain-paint-clip-005.html
contain-paint-ignored-cases-ib-split-001.html
contain-paint-ignored-cases-internal-table-001a.html
contain-paint-ignored-cases-internal-table-001b.html
contain-paint-ignored-cases-no-principal-box-001.html
contain-paint-ignored-cases-ruby-containing-block-001.html
contain-paint-ignored-cases-ruby-stacking-and-clipping-001.html
contain-paint-independent-formatting-context-002.html
contain-paint-independent-formatting-context-003.html
contain-size-001.html
contain-size-002.html
contain-size-003.html
contain-size-004.html
contain-size-005.html
contain-size-006.html
contain-size-007.html
contain-size-008.html
contain-size-009.html
contain-size-010.html
contain-size-012.html
contain-size-012b.html
contain-size-051.html
contain-size-052.html
contain-size-baseline-001.html
contain-size-grid-003.html
contain-size-grid-004.html
contain-size-multicol-004.html
contain-size-replaced-007.html
contain-size-scrollbars-004.html
contain-subgrid-001.html

contain:inline-size
-------------------
contain-inline-size-table.html

contain:style
-------------
contain-style-baseline-001.html
contain-style-breaks-001.html
contain-style-breaks-002.html
contain-style-breaks-003.html
contain-style-breaks-004.html
contain-style-breaks-005.html

contain:strict
--------------
contain-flexbox-outline.html

contain:content
---------------
(Nothing for this category).

I'll label those additional tests too.

[annevk]

Thanks @foolip and thanks @andruud for spotting that!

[gsnedders]

In chat we also realized that contain:strict should be excluded, leaving is with layout, size, and paint containment.

@annevk said '(strict tests where the style aspect doesn't matter are still fair game.)' on Matrix

[foolip]

We'll include the size, layout and paint containment subset of this proposal.

[gsnedders]

i.e., none | content | [ size || layout || paint ] is the subset of the values for contain being accepted

[foolip]

A proposed list of tests has been labeled with interop-2022-contain. It would be great if someone from each browser engine team can look over this list and comment if there are any issues.