1661847 - Incorrect calculation of the cross size for column-oriented flex container if its flex items have intrinsic aspect-ratio

Status: RESOLVED INVALID

(Core :: Layout: Flexbox, defect, P3)

Description

[Boris Chiou [:boris]]

We use the imposed main size (i.e. the used main size) to calculate the new cross size for flex items with intrinsic aspect-ratio. However, it seems this only works on the row-oriented flex container because we still use the original computed inline size as the final cross size for the container even if the cross sizes of some flex items are updated (code).

Let's see a example:

<div style="display: inline-flex; flex-direction: column; height: 100px;">
  <img src="20x50-green.png" style="height: 50px; flex: 1; min-height: 0;">
</div>

Note: the intrinsic ratio of this image is 2/5.

The expected result should be a 40x100 green rectangle (because we grow the main size (to 100px), so does its cross size).
However, the actual result is a 20x100 green rectangle because we are still using the legacy cross size (which is calculated by 50px * 2/5 = 20px, instead of 100px * 2/5 = 40px).

Comment 1

[Boris Chiou [:boris]]

There are two wpts for aspect-ratio property:

https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-013.tentative.html
https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-014.tentative.html

Comment 2

[Boris Chiou [:boris]]

It seems we pass the wpt now: https://searchfox.org/mozilla-central/rev/0ffae75b690219858e5a45a39f8759a8aee7b9a2/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-024.html.

Comment 3

[Boris Chiou [:boris]]

The original tests may be incorrect and Google updated them in Bug 1667155 and Bug 1668346. So close this.