[csswg-drafts] [css-sizing-3] Unclear how min-content / max-content contribution is computed for elements w/ intrinsic aspect ratio & percent size in opposite dimension

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

== [css-sizing-3] Unclear how min-content / max-content contribution is computed for elements w/ intrinsic aspect ratio & percent size in opposite dimension ==
The current css-sizing-3 text disagrees with reality (interoperable browser behavior) about the `min-content` contribution of an element with an intrinsic aspect ratio and a percent size in the opposite dimension from the one we're determining contributions to.

The spec section in question: https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution

Consider this testcase:
https://jsfiddle.net/5hx9kw4t/
````html
<style>
.container {
  height: 50px;
  width: -moz-min-content;
  width: -webkit-min-content;
  width: min-content;
  border: 2px solid black;
}
canvas {
  background: pink;
  height: 100%;
}
/style>
<div class="container">
  <!-- This is just emulating a 400x400 image: -->
  <canvas width="400" height="400"></canvas>
</div>
````
Browsers all[1] agree on the sizing for .container here -- it's 50px wide (because we resolve the height:100% to 50px, and then we multiply that through the 1:1 aspect ratio to produce 50px width).    But I don't think the current spec-text matches that reality.

The key question is, what's the `<canvas>`'s min-content contribution to its container?
 - Browsers say it's 50px, as noted above.
 - But the spec says it's "the size of the content box of a hypothetical auto-sized float that contains only that box, if that hypothetical float’s containing block is zero-sized."  (And then there's some extra text about special cases where percentages resolve to 0, but it doesn't apply in this case since the percent is in the opposite axis of the one we're measuring.)

In this case, the spec's hypothetical float would look like this: https://jsfiddle.net/p0k263yv/
As you can see, its size is 400px.  So, css-sizing-3 thinks that the canvas should contribute a min-content width of 400px to its parent in the original testcase here, and that disagrees with reality.

So I think this spec text needs some tweaking to match reality.  (Or am I misinterpreting it?)

[1]  (Edge doesn't support any spelling of the 'min-content' keyword, so Edge renders the testcase differently from Chrome/Firefox - but you can verify that they agree if you make the container a float or inline-block instead.)

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

Received on Thursday, 21 December 2017 22:26:37 UTC