Bug 210077 - [css-flexbox] Indefinite flex-basis percentage should cause height to be ignored
Summary: [css-flexbox] Indefinite flex-basis percentage should cause height to be ignored
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Sergio Villar Senin
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-04-06 15:02 PDT by Carlos Alberto Lopez Perez
Modified: 2020-09-15 07:56 PDT (History)
13 users (show)

See Also:


Attachments
Patch (4.87 KB, patch)
2020-09-14 02:55 PDT, Sergio Villar Senin
no flags Details | Formatted Diff | Diff
Patch (3.86 KB, patch)
2020-09-14 04:32 PDT, Sergio Villar Senin
darin: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
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>