(1) Load https://bug1362789.bmoattachments.org/attachment.cgi?id=8866580
Image should be a large square. (700px wide and tall)
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
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.
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)