1494445 - [css-grid] column content rendered outside when using fit-content and vertical writing-mode

Status: RESOLVED DUPLICATE of bug 1332555

(Core :: Layout: Grid, defect)

Description

[jkhsjdhjs]

Attachment: contains an example html document and two screenshots

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:64.0) Gecko/20100101 Firefox/64.0
Build ID: 20180925220052

Steps to reproduce:

Create a grid layout with one column containing a div element in a fieldset element.
Apply grid-template-columns: fit-content(<any percentage>) to the grid layout.
Apply writing-mode: tb-rl to the div element in the fieldset element.

Or just open the example I attached to this bug report.


Actual results:

The inner div element is rendered outside of the fieldset element (in the padding/border area). The fieldset element has zero width, just padding (see before.png).

If you disable the grid-template-columns property using the css debugger and then enable it again, the text will get rendered correctly (see after.png).
When doing the same with display: grid the text will get rendered incorrectly again.


Expected results:

The vertical text should be rendered inside the fieldset.

I tested it with Firefox Stable 62 on Windows as well as Beta 63 and Nightly 64 on Linux.

The text gets rendered outside of the fieldset element in Chrome/Chromium too, but chrome doesn't behave inconsistent when re-enabling the css properties mentioned above, meaning you'll never see it rendered correctly.

Comment 1

[Mats Palmgren (inactive)]

Attachment: Reporter's testcase

Comment 2

[Mats Palmgren (inactive)]

Attachment: Testcase #2

This demonstrates that it's a not a bug in our Grid layout code,
but rather that the grid item report the wrong intrinsic size
when it has an orthogonal writing-mode child.

Comment 3

[Mats Palmgren (inactive)]

It's a known problem, see bug 1310551 and bug 1332555.