[csswg-drafts] [css-sizing-3] Make compressible replaced elements compress in the elements' inline axis, but not in the block axis (#12133)

aethanyc has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-sizing-3] Make compressible replaced elements compress in the elements' inline axis, but not in the block axis ==
The spec requires that compressible elements have their min-content contribution compressible when their `width`/`height` or `max-width`/`max-height` is expressed with a cyclic percentage size [1]. However, in reality, both Chrome and Safari apply this rule only when computing the min-content contribution *in the element's inline axis*.

In the following testcase, the orthogonal `<canvas>` still contributes 100px (its natural size in the block axis) to the container's min-content inline-size.

```
<div style="inline-size: min-content; border: 3px solid blue">
  <canvas width="100" height="100"
          style="writing-mode:vertical-rl; background: green; block-size: 100%"></canvas>
</div>
```

See a full example in action here: https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=13727

Currently, Firefox compresses the replaced element's min-content contribution in *both axis* when that axis has a percentage size or max-size, but I'm planning to align Firefox's behavior with Chrome and Safari in [Bug 1308929](https://bugzilla.mozilla.org/show_bug.cgi?id=1308929).

It would be good for the spec to match existing implementations.

[1] https://drafts.csswg.org/css-sizing-3/#min-content-zero

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12133 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 28 April 2025 21:51:32 UTC