[css-grid] Height percentages are not properly resolved for item's children

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Manuel Rego Casasnovas]

This is very easy to reproduce, in a grid with just one cell (200px x 100px).
The item will be stretching by default, so it takes the whole size of the cell.
However if you've a child of the item with width and height 100%.
The child doesn't take the whole height, only the whole width.

See the attached example or check it live at:
http://jsbin.com/cinili/1/edit?html,css,output

This has been already fixed on Blink:
https://codereview.chromium.org/2039223002

[Manuel Rego Casasnovas]

Created attachment 282339 [details]
Patch

[Sergio Villar Senin]

Comment on attachment 282339 [details]
Patch

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

> Source/WebCore/rendering/RenderBox.cpp:2993
> +        availableHeight = cb->overrideLogicalContentHeight();

Hmm it looks to me that this is only valid for direct children of a grid item, what happens if we have a child of a child of a grid item?

[Manuel Rego Casasnovas]

Comment on attachment 282339 [details]
Patch

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

>> Source/WebCore/rendering/RenderBox.cpp:2993
>> +        availableHeight = cb->overrideLogicalContentHeight();
> 
> Hmm it looks to me that this is only valid for direct children of a grid item, what happens if we have a child of a child of a grid item?

Mmmm, I'm not sure if I follow you. It'd work like in any regular element.
The child of a child of a grid item, has to resolve its percentage against the height of the child of the grid item.
So we don't need anything special here.

Example:
  <div style="display: grid; grid: 100px / 100px;>
    <div id="item">
      <div id="subitem">
        <div id="subsubitem"></div>
      </div>
    </div>
  </div>

A percentage height in the "subitem" needs to be resolved against the "item" height.
If the "item" is stretched (that's when we have hasOverrideLogicalContentHeight()),
then we should use that height to resolve the "subitem" percentage.
Imagine that the "subitem" has a 30% in the previous example,
it should resolve against the 100px height of the stretched "item".

A percentage height in the "subsubitem" has to be resolved against the "subitem" height.
If the "subitem" height is "auto", it cannot be resolved, that's all.

[WebKit Commit Bot]

Comment on attachment 282339 [details]
Patch

Clearing flags on attachment: 282339

Committed r202856: <http://trac.webkit.org/changeset/202856>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.