Bug 210077

Summary: [css-flexbox] Indefinite flex-basis percentage should cause height to be ignored
Product: WebKit Reporter: Carlos Alberto Lopez Perez <clopez>
Component: CSSAssignee: Sergio Villar Senin <svillar>
Status: RESOLVED FIXED    
Severity: Normal CC: bburg, changseok, darin, esprehn+autocc, ews-watchlist, glenn, hi, kondapallykalyan, pdr, rwlbuis, sam, svillar, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.chromium.org/p/chromium/issues/detail?id=531656
Attachments:
Description Flags
Patch
none
Patch darin: review+

Description Carlos Alberto Lopez Perez 2020-04-06 15:02:31 PDT 
What steps will reproduce the problem?
  Load http://jsfiddle.net/q52pk5m4/1/

What is the expected output?
 The black-bordered box (the flex item) should shrinkwrap the text.
 No red should be visible.

What do you see instead?
 The black-bordered box is 400px tall. It is much taller than its text.


The flex item does have "height: 400px", but that should have no effect on its actual height, since it's a flex item and its flex-basis property is set. (The default 'flex-basis' property defers to the 'height', but here we've set flex-basis to 0%.)

Since we don't have anything to resolve our 0% against, the 0% is treated like auto-sizing, and so we should shrinkwrap the text.
But WebKit is incorrectly treating flex-basis:0% like flex-basis:auto and interpreting that 'auto' as meaning it should fall back to the 'height' property, which it should not

This very same issue has been reported and fixed for Chrome on https://crbug.com/531656

And there are two WPT tests for this:

  https://wpt.live/css/css-flexbox/flex-basis-010.html
  https://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-010.html
Comment 1 Sergio Villar Senin 2020-08-17 08:20:21 PDT 
The flex-aspect-ratio test is fixed in https://bugs.webkit.org/show_bug.cgi?id=215570
Comment 2 Sergio Villar Senin 2020-09-14 02:55:32 PDT 
Created attachment 408696 [details]
Patch
Comment 3 Sergio Villar Senin 2020-09-14 04:32:28 PDT 
Created attachment 408701 [details]
Patch
Comment 4 Darin Adler 2020-09-14 11:09:06 PDT 
Comment on attachment 408701 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=408701&action=review

> Source/WebCore/rendering/RenderFlexibleBox.cpp:851
> +        const auto& flexBasis = flexBasisForChild(child);

I don’t think const auto& is a good type to use here. Just "auto" would be fine or "Length".
Comment 5 Sergio Villar Senin 2020-09-15 07:55:46 PDT 
Committed r267086: <https://trac.webkit.org/changeset/267086>
Comment 6 Radar WebKit Bug Importer 2020-09-15 07:56:15 PDT 
<rdar://problem/68923070>