Bug 209983 - [css-flexbox] WebKit doesn't preserve aspect ratio when computing cross size of flexed images in auto-height flex container
Summary: [css-flexbox] WebKit doesn't preserve aspect ratio when computing cross size ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 13
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-04-03 13:40 PDT by Daniel Holbert
Modified: 2020-05-13 18:08 PDT (History)
10 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Daniel Holbert 2020-04-03 13:40:34 PDT
STR:
(1) Load https://bug1362789.bmoattachments.org/attachment.cgi?id=8866580

EXPECTED RESULT:
Image should be a large square. (700px wide and tall)

ACTUAL RESULT:
Image is stretched to be rectangular, destroying aspect ratio -- image is 700px wide but only 300px tall.


Chrome has the same problem, which is filed as https://bugs.chromium.org/p/chromium/issues/detail?id=721123 .

EdgeHTML and Firefox give EXPECTED RESULTS.

The flexbox spec section 9.4 "Cross Size Determination" says the following about how to determine cross sizes (the height in this testcase):
  # Determine the hypothetical cross size of each item
  # by performing layout with the used main size
  # and the available space
https://drafts.csswg.org/css-flexbox-1/#cross-sizing

Here, the "used main size" is the stretched size (700px), and "performing layout" (for an image with auto height) should involve stretching its height accordingly.

The resulting hypothetical main size is used to determine the size of the flex line, which in turn is used as the cross size for all of the line's cross-axis-stretched items (including the image). So, the image should end up 700px tall here.

Note: This is kinda similar to bug 199583 and bug 169974, but it's not a dupe of either one, I think, because:
- bug 199583 is about min-size resolution & images that are forced to shrink below their normal content size [and Chrome gets that one right whereas it gets this bug here wrong]
- bug 169974 is about the opposite sort of influence, where a specified cross size is intended to influence the resolved main size.
Comment 1 Radar WebKit Bug Importer 2020-04-03 21:08:48 PDT
<rdar://problem/61288094>
Comment 2 Carlos Alberto Lopez Perez 2020-05-13 18:08:51 PDT
On bug 191460 I'm trying to import the WPT css-flexbox tests into WebKit and also de-deplicate the old versions of the flexbox tests we have, in favor of the new versions from WPT.

The WebKit layout test css3/flexbox/flexitem-stretch-image.html is moved to WPT as imported/w3c/web-platform-tests/css/css-flexbox/flexitem-stretch-image.html but this new version of the test causes failures due to this bug.

Check https://github.com/web-platform-tests/wpt/commit/557efa4d00 (its the diff between what we had as layout test vs the new version of the WPT test)