Re: [csswg-drafts] [css-grid] Replaced elements canvas, img, etc should behave as expected when styled with relative sizes in grid, transferred size should not affect them unless specifically asked to (#6278)

@tabatkins and I discussed this issue the last couple days, and here are our thoughts:
* We think the author's expectation seems reasonable from the code.
* We note this was interoperable behavior in FF and Chrome until Chrome's recent changes.
* We suspect Chrome's recent changes are spec-compliant, but we believe it might be worth making it work as it was before / in Firefox.

[Testcase](http://software.hixie.ch/utilities/js/live-dom-viewer/saved/9434):
```
<!DOCTYPE html>
<div style="display: grid; grid-template: 1fr / 1fr; width: 200px; height: 100px; border: thick solid;">
 <img src="http://placehold.it/100x100" style="width:100%; height: 100%; opacity: .9;">
</div>
```

(Put `min-height:0` on the `img` to see the "intended" behavior of the img filling the grid. Or swap width/height on the grid so it's "portrait" orientation to also see it work as expected.)


[Spec Interpretation Summary](https://www.w3.org/TR/2020/CRD-css-grid-1-20201218/#algo-overview):
* Percentages on the item's height *will* eventually resolve against the track sizes (due to the definiteness rules for Grid).
* But during initial row height resolution in the [algo (step 2)](https://drafts.csswg.org/css-grid/#algo-overview), only the column width is definite; the row height isn't definite *yet*.
* And so at this specific point in the algo, the percentage height is being treated as indefinite by the [automatic minimum size](https://drafts.csswg.org/css-grid/#min-size-auto). This means the “specified size suggestion” (from the `height:100%`) is ignored and instead the “transferred size suggestion” (from the `width:100%`) is honored, making that the element's contribution to the row size. When the grid area has a landscape orientation, this causes that automatic minimum size to control the row height, instead of the item responding to the row height.
* (If the grid area is instead portrait orientation, the same logic occurs, but the auto min height is small enough that it doesn't affect the row height. The `height:100%` applies as expected so the element exactly fills the row.)

Possible solution: Make indefinite percentages resolve against zero and thereby clamp the automatic minimum size (similar logic as compressible elements), or at least do so for compressible elements (like the replaced element here)?

Question: What is Firefox doing here that is getting the expected behavior?


-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6278#issuecomment-863439988 using your GitHub account


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

Received on Thursday, 17 June 2021 17:50:54 UTC