CSS grid elements with justify-content: space-around have extra whitespace, sometimes a lot

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Javier Fernandez]

Steps to reproduce the problem:
1. Create a grid element where the total width of the columns is less than the width of the element itself.
2. Add justify-content: space-around to the grid element.
3. Add a child element with a large amount of text, and assign a very narrow overall width on the grid element, as if it were a mobile layout. This makes the bug more pronounced and easier to see.

What is the expected behavior?
The child element should only be as tall as the text inside it, as seen in Firefox.

What went wrong?
A gap appears at the bottom the child element, after the text.

[Javier Fernandez]

Created attachment 353971 [details]
Patch

[Dean Jackson]

Comment on attachment 353971 [details]
Patch

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

> Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp:565
> +        // FIXME (jfernandez) Content Alignment should account for this heuristic

Nit. Punctuation.

> Source/WebCore/rendering/RenderGrid.cpp:1605
> +    auto& offset =
> +        isRowAxis ? m_offsetBetweenColumns : m_offsetBetweenRows;

Nit: Should be one line.

> Source/WebCore/rendering/RenderGrid.cpp:1624
> +        positionOffset = LayoutUnit();

I don't think this line is necessary.

> Source/WebCore/rendering/RenderGrid.cpp:1645
> +            positionOffset = LayoutUnit();

Nor this one.

> Source/WebCore/rendering/RenderGrid.h:42
> +    bool isValid() { return positionOffset >= 0 && distributionOffset >= 0; }

const

[Javier Fernandez]

Created attachment 353989 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 353989 [details]
Patch

Clearing flags on attachment: 353989

Committed r237884: <https://trac.webkit.org/changeset/237884>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Radar WebKit Bug Importer]

<rdar://problem/45854716>