Bug 169974 - The sizing of images in flex should take the dimension change caused by definite cross-size and aspect-ratio
Summary: The sizing of images in flex should take the dimension change caused by defin...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks: 219343
  Show dependency treegraph
 
Reported: 2017-03-22 15:06 PDT by Francois Remy
Modified: 2022-12-22 19:08 PST (History)
6 users (show)

See Also:


Attachments
rendering in safari, firefox, chrome (138.70 KB, image/png)
2022-12-22 18:59 PST, Karl Dubost
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Francois Remy 2017-03-22 15:06:47 PDT
Steps to reproduce:

1. Define a width/height on a flex
2. Insert an image in it
3. Observe how its aspect-ratio affects its final size

https://jsfiddle.net/zcqst2pr/
https://jsfiddle.net/zcqst2pr/1/

Did this work before? N/A 
Does this work in other browsers? Yes


Actual results:

Images do not flex as they do in Edge, which has been deemed per-spec in this case (see below). 


Expected results:

Aspect-ratio should be preserved, except if the image is to be sized bigger than its normal size ("grow" test case). If it is, the flexing that takes place as a second step will shrink the image to fit the container. 

The reason flexing is different is that flex-shrink is 1 by default and flex-grow is 0 by default. Flexing doesn't have to take the image aspect-ratio into consideration, but should also refuse to shrink further than the image intrinsic size.

Please discuss this issue at https://github.com/w3c/csswg-drafts/issues/1112 if you disagree with the test results
Comment 1 Radar WebKit Bug Importer 2022-05-24 14:55:13 PDT
<rdar://problem/93860279>
Comment 2 Karl Dubost 2022-12-22 18:59:30 PST
Created attachment 464169 [details]
rendering in safari, firefox, chrome

That seems to be working now.
https://codepen.io/webcompat/full/rNrVzMP
Comment 3 Karl Dubost 2022-12-22 19:00:45 PST
The discussion moved from https://github.com/w3c/csswg-drafts/issues/1112
to https://github.com/w3c/csswg-drafts/issues/1322
And the three browsers seem to render the same thing.

I wonder if this should be closed?
Comment 4 Karl Dubost 2022-12-22 19:08:20 PST
Let's close this.