1547246 - <br style="display:block"> (e.g. due to being a flex item) has zero height

Status: NEW

(Core :: Layout: Block and Inline, defect, P3)

Description

[Kagami Rosylight [:saschanaz] (they/them)]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

https://codepen.io/SaschaNaz/pen/eoxpvd

I inserted <br> into a column-direction flexbox.

Actual results:

The <br> didn't rendered

Expected results:

It should probably be rendered as a separate new line as on Chrome and Edge.

Comment 1

[Alin Ilea, Desktop Test Engineering]

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

Hi,

I have managed to reproduce this issue on latest FF release (66.0.3), latest Nightly build 68.0a1 (2019-04-29) and beta version (67.0b14) using Win10 and Ubuntu 18.04.
In Chrome the issue is not reproducible.

I'm going to set a component so developers can take a look at it. If this is not the right component, please feel free to move it to a more appropriate one.

Thank you for your report.

Comment 2

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

I don't understand why this is changed to Editor. Looks like a layout bug.

Comment 3

[Daniel Holbert [:dholbert]]

Thanks for the bug report. What's going on here is:

• Every child of a flex container has its display value "blockified", i.e. it becomes display:block, per
  https://drafts.csswg.org/css-flexbox-1/#flex-items
• So we end up with <br style='display:block'>, effectively.
• ...and it seems that this styling inhibits the ability for <br> elements to take up any height.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

Comment 6

[Daniel Holbert [:dholbert]]

(note, this came up in https://github.com/w3c/csswg-drafts/issues/7049 where IanK initially interpreted Firefox's zero-height br behavior as a difference between browsers in flex-item blockification/anonymous-wrapper-generation.)

Comment 10

[Ting-Yu Lin [:TYLin] (PST, UTC-7)]

Re comment 5:

...and it seems that this styling inhibits the ability for <br> elements to take up any height.

To expand this a bit, for a <br> element with display:block, when we construct a line data for it, we put it a block line [1]. Later when the <br> gets reflowed, the logic that considers line-height, baseline, etc. is completely skipped because a block line has no aReflowInput.mLineLayout.

[1] https://searchfox.org/mozilla-central/rev/6b0b8c1003504e302e243c300355ef4d61e24909/layout/generic/nsBlockFrame.cpp#6323,6334
[2] https://searchfox.org/mozilla-central/rev/6b0b8c1003504e302e243c300355ef4d61e24909/layout/generic/BRFrame.cpp#118-119

Comment 11

[Calin Tanase]

The issue is still reproducible based on the test cases provided.

Environment:
Operating system: Windows 10
Browsers tested: Firefox Nightly 128.0a1 (2024-05-29) / Firefox Release 126 / Chrome 125.0.6422.113

Note: Not reproducible on Chrome.