Bug 210077 – [css-flexbox] Indefinite flex-basis percentage should cause height to be ignored

• Component: CSS
• Status: RESOLVED FIXED

[Carlos Alberto Lopez Perez]

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

[Sergio Villar Senin]

The flex-aspect-ratio test is fixed in https://bugs.webkit.org/show_bug.cgi?id=215570

[Sergio Villar Senin]

Created attachment 408696 [details]
Patch

[Sergio Villar Senin]

Created attachment 408701 [details]
Patch

[Darin Adler]

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".

[Sergio Villar Senin]

Committed r267086: <https://trac.webkit.org/changeset/267086>

[Radar WebKit Bug Importer]

<rdar://problem/68923070>