Bug 221450

Summary: Image element as flex item with 100% width is not compressible
Product: WebKit Reporter: Ting-Yu Lin <aethanyc>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, bfulgham, karlcow, sabouhallawa, simon.fraser, smoley, svillar, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=221110
Attachments:
Description Flags
rendering in safari, firefox, chrome none

Ting-Yu Lin
Reported 2021-02-04 21:18:32 PST
Steps to reproduce: Load the testcase https://bugzilla.mozilla.org/attachment.cgi?id=9201228 Expected result: The <image> should have the same width as <input>. Actual result: The <image> has its nature width. Firefox Nightly gives the expect results. Please see the analysis of the testcase in https://bugzilla.mozilla.org/show_bug.cgi?id=1690635#c7
Attachments
rendering in safari, firefox, chrome (2.38 MB, image/png)
2024-07-07 21:41 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2021-02-09 16:55:37 PST
<rdar://problem/74166500>
Said Abou-Hallawa
Comment 2 2021-02-09 17:04:38 PST
This could be related to bug 221110.
Ahmad Saleem
Comment 3 2024-07-07 20:02:11 PDT
Updated image with placeholder of similar size in JSFiddle - https://jsfiddle.net/qtzmng5h/ Safari 17.6 Beta & Chrome Canary 128 are matching while Firefox Nightly 129 is different.
Karl Dubost
Comment 4 2024-07-07 21:41:50 PDT
Created attachment 471832 [details] rendering in safari, firefox, chrome Safari Technology Preview 198 20619.1.20.7 Firefox Nightly 129.0a1 12924.7.4 Google Chrome Canary 128.0.6582.0 6582.0 Now we need to determine which rendering engines are right WebKit/Blink or Gecko
Karl Dubost
Comment 5 2024-07-07 21:47:33 PDT
This is the comment on the bugzilla bug > This is expected result of Mozilla 1585485 [3], which implements [1]. The percentage width: 100% on the image flex item (which is compressible [2]) makes the min-width:auto resolved against 0. The item also has flex-grow:0 preventing it from being stretched, so the final resolved width is the flex-basis:20%, which is 80px. > > I add another testcase that has <input> added as an flex item. Both <input> and the image should have the same width. > > [1] https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution > [2] https://drafts.csswg.org/css-sizing-3/#min-content-zero > [3] https://bugzilla.mozilla.org/show_bug.cgi?id=1585485
Note You need to log in before you can comment on or make changes to this bug.