Re: [css-sizing] definite sizes and shrink-wrapping

Hi,

On 17/05/16 20:57, fantasai wrote:
> The CSSWG discussed this last week and decided to update the definition
> of definite/indefinite so that intrinsic sizes are considered definite:
>   https://www.w3.org/2016/05/09-css-irc#T21-51-29
> 
> I'm not 100% sure what exactly this means, but we tried to make edits
> to CSS Sizing to match the resolution:
>   https://hg.csswg.org/drafts/rev/b7b26d2bc943
> and added a clarification to Sizing L4
>   https://hg.csswg.org/drafts/rev/1c734ff12cc4

I've been trying to understand the CSS WG resolution and how it affects
CSS Grid Layout.
It seems a good way to try to follow what browsers do to resolve
percentages on regular blocks.
I'll try to use different examples to explain my thoughts on this topic.

First, the very simple case that originated the discussion:
  <div style="display: grid; font: 25px/1 Ahem; float: left;
grid-template-columns: 50%;">
    <div>XX X</div>
  </div>

If I'm understanding the new resolution properly, the sizes should be:
* Grid container's width: 100px
* Column: 50px

This is because first we compute the intrinsic sizes of the grid
container, during that process we use "auto" for the percentage columns,
so we've 100px as max-content size and 50px as min-content size. In this
case we use the max-content size to determine the width of the grid
container, so it's 100px.
Then during the actual layout, we use that size to resolve the 50%
percentage, so we've a 50px column.

This shows that the inline size is never indefinite during layout phase,
it's only indefinite while we're computing the intrinsic sizes, but once
we've calculated it, all the inline sizes would be definite.

Testing different examples using min|max-content will show that this is
true:
  <div style="display: grid; font: 25px/1 Ahem; width: max-content;
grid-template-columns: 50%;">
    <div>XX X</div>
  </div>

Sizes:
* Grid container's width: 100px
* Column: 50px

The intrinsic sizes of the grid container are the same (max-content:
100px & min-content: 50px). In this case we'll use 100px as we're under
a max-content constraint. And then we use it to resolve the percentage.

The min-content case:
  <div style="display: grid; font: 25px/1 Ahem; width: min-content;
grid-template-columns: 50%;">
    <div>XX X</div>
  </div>

Sizes:
* Grid container's width: 50px
* Column: 25px

Here, we'd use the min-content size of the grid container, which is
50px. Again the percentage is resolved against that size calculated before.

So, I cannot find any situation where the inline size of the grid
container is indefinite during layout. It'd be indefinite while we're
computing the intrinsic sizes but not later on when we're calculating
the final size of the tracks.
Maybe it might be worth to clarify the following sentence on the spec
[1], to explain that for the inline size this only happens during
intrinsic sizes computation:
"If the inline or block size of the grid container is indefinite,
 <percentage> values relative to that size are treated as auto."

Thanks,
  Rego

[1]
https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-percentage

Received on Wednesday, 1 June 2016 12:02:03 UTC