[csswg-drafts] [css-grid][css-flexbox][quirks] Avoid percentage height quirk in new layout models (#5545)

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

== [css-grid][css-flexbox][quirks] Avoid percentage height quirk in new layout models ==
Quirks mode has this [percentage quirk](https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk) which skips ancestors with `height: auto` when resolving `height: <percentage>`. Basically, it's resolved against the nearest ancestor in the containing block chain that doesn't have `height: auto`.

There are some exceptions: grid and flex *containers* are not skipped.

But we still have an interoperability problem: Firefox doesn't skip grid and flex *items*, while Chromium does. [Testcase](https://software.hixie.ch/utilities/js/live-dom-viewer/?%3Cdiv%20style%3D%22display%3A%20flex%3B%20height%3A%20100px%3B%20width%3A%20max-content%3B%20border%3A%205px%20solid%20blue%22%3E%0A%20%20%3Cdiv%20style%3D%22width%3A%20100px%3B%20align-self%3A%20center%3B%20border%3A%203px%20solid%20lime%22%3E%0A%20%20%20%20%3Cdiv%20style%3D%22height%3A%20100%25%3B%20background%3A%20red%22%3E%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20style%3D%22display%3A%20grid%3B%20grid-template-rows%3A%20100px%3B%20width%3A%20max-content%3B%20border%3A%205px%20solid%20blue%22%3E%0A%20%20%3Cdiv%20style%3D%22width%3A%20100px%3B%20align-self%3A%20center%3B%20border%3A%203px%20solid%20lime%22%3E%0A%20%20%20%20%3Cdiv%20style%3D%22height%3A%20100%25%3B%20background%3A%20red%22%3E%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E)

```html
<div style="display: flex; height: 100px; width: max-content; border: 5px solid blue">
  <div style="width: 100px; align-self: center; border: 3px solid lime">
    <div style="height: 100%; background: red"></div>
  </div>
</div>
<div style="display: grid; grid-template-rows: 100px; width: max-content; border: 5px solid blue">
  <div style="width: 100px; align-self: center; border: 3px solid lime">
    <div style="height: 100%; background: red"></div>
  </div>
</div>
```

![screenshot](https://user-images.githubusercontent.com/7477678/94060291-01099f00-fde4-11ea-9c7a-a2e80117890c.png)

I think Firefox is right and the quirk should be avoided for elements that participate in new layout models (like grid-level and flex-level boxes).

It's not just that quirks shouldn't infect new features. There is also the thing that stretched grid/flex items are considered to have a definite height, even if they have `height: auto`. So skipping them in that case doesn't even make sense. And skipping them depending on whether the height will end up being definite or not would just make it harder for implementations.

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


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

Received on Wednesday, 23 September 2020 19:38:11 UTC