w3c / w3c/csswg-drafts

[css-contain] Does inline-size containment remove the natural aspect ratio?

Open
#7,583 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-contain-2
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

From https://drafts.csswg.org/css-contain-2/#containment-size, with full size containment,

Replaced elements must be treated as having an natural width and height of 0 and no natural aspect ratio.

From https://drafts.csswg.org/css-contain-3/#containment-inline-size,

Giving an element inline-size containment applies size containment to the inline-axis sizing of its principal box. This means the inline-axis intrinsic sizes of the principal box are determined as if the element had no content. However, content continues to impact the box’s block-axis intrinsic sizes as usual, and the box is allowed to fragment normally in the block axis.

I guess this means that only the natural inline-size is treated as 0, the natural block-size is preserved.

But what about the aspect ratio? Blink keeps it, Firefox removes it like in full size containment.

<img src="image" style="contain: inline-size; border: solid; height: 100px">

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Read the CSS Containment Level 2 and Level 3 sections linked in the issue, along with the referenced sizing and aspect-ratio definitions. Compare the inline-size containment wording with the reported Blink and Firefox behavior. Done means resolving whether the natural aspect ratio is preserved or removed and updating the specification text or issue resolution accordingly.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
documentation, frontend
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.