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

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.

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

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