- From: Oriol Brufau <obrufau@igalia.com>
- Date: Thu, 8 Oct 2020 19:25:09 +0200
- To: Florian Rivoal <florian@rivoal.net>
- Cc: Elika Etemad <fantasai@inkedblade.net>, Tab Atkins <tabatkins@google.com>, www-archive@w3.org
- Message-ID: <49094ab0-6104-e1c3-3ff7-735b1f11875a@igalia.com>
> My naive understanding of what happens is:
> 1) As a block level child of the body, the grid container box's width is stretch-fit sized, so 1000px.
> 2) Within the grid container, the grid itself is stretch as well, so it's width is 1000px too.
> 3) The second column of the grid is 50px, and the first one is auto, which resolves to 1000px-50px = 950px;
The grid width is just the sum of track sizes, so technically 3) happens
before 2).
But yes, the numbers are correct.
> 4) the image's is in the first column, so due to justify-self:stretch, its width is 950px
> 5) due the image's aspect ratio, it's height is also 950px
I'm not sure about this. In Chromium and Firefox, it's 200px.
As https://drafts.csswg.org/css-grid/#grid-item-sizing warns, using
`justify-self: stretch`
> may distort the aspect ratio of the item, if it has one.
I think the aspect ratio is usually applied to the computed size (which
in CSS2 includes min and max properties), not to the final used size
after stretching.
For example, the minimum contribution used to size auto tracks basically
relies on https://drafts.csswg.org/css-grid/#min-size-auto,
> If the item has an intrinsic aspect ratio and its *computed*
preferred size property in the opposite axis is definite, then the
transferred size suggestion is that size (clamped by the opposite-axis
min and max size properties if they are definite), converted through the
aspect ratio
In this case the grid container doesn't have a definite height so we are
sizing under a max sizing constraint, then the row should be sized with
the max-content contribution (I don't think implementations support
this, but if you specify `grid-template-rows: max-content 10px` they
will still produce a 200px row).
Then, do the min/max-content contributions apply the ratio to the
computed size in the other axis, or to the used size after stretching? I
don't know enough about css-sizing, and
https://drafts.csswg.org/css-sizing-3/#max-content-contribution is not
detailed enough.
But implementations don't seem to take stretching into account, and not
sure if changing would be web compatible at this point.
6) the first row's hight is driven by the image we just talked about, so 950px
Implementations say 200px.
> 7) the second row is 10px hight
> 8) the grid is therefore 960px high
Implementations say 210px.
> 9) the grid container box's height is therefore 960px as well
Implementations say 210px again.
> That's not the actual question, just the set up, but if I got it wrong already, the rest falls apart, so let me know if I'm off.
Seems the rest may have fallen apart.
> Assuming that was right, what happens if we add this:
>
> div { aspect-ratio: 1/1; }
I'm afraid I don't know the details of `aspect-ratio` yet.
Received on Thursday, 8 October 2020 17:29:07 UTC