1499458 - A block with negative margin-top tramps the 0-height clear:both table

Status: RESOLVED INVALID

(Core :: Layout: Floats, enhancement, P3)

Description

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

A friend of mine sends this test case to me. It renders differently on Firefox and Chrome. 

On Firefox, the "clear:both" in the after-pseudo is ignored, and the flex block with negative margin-top will wrap around the float, where Chrome won't.

Though, if removing the following CSS

#hehe:before {
  display: table;
  content: " ";
}

Chrome will render the same as Firefox.

Comment 1

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

Attachment: float-clear.htm

Attached the test case.

Comment 2

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

Attachment: Chrome.png

Comment 3

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

Attachment: Firefox.png

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: (obsolete version of testcase 2, ignore)

(In reply to Ting-Yu Lin [:TYLin] (UTC-7) from comment #0)
> On Firefox, the "clear:both" in the after-pseudo is ignored, and the flex
> block [...]

Note that there's no special flex/flexbox significance here; the same results happen if I tweak the testcase to remove "display:flex". (the background color shifts slightly since the block participates in the same BFC as its parent, but the text is still positioned differently in Firefox vs. Chrome)

Here's a more reduced testcase. I've removed all tables and flex containers so that there are only blocks involved.  In Chrome, "AAAA" and "BBBB" are superimposed; whereas in Firefox, "BBBB" is positioned to the right of "AAAA".

I believe Firefox is probably correct here -- there's only one block formatting context[1] here, so it's correct that the repositioned "BBBB" text dodges the float.  And I can get Chrome to agree with Firefox if I remove the unstyled parent <div> that wraps the second half of this testcase, or if I remove the lightgray spacer div. (And neither of those changes seems like it should cause much of a change in positioning).

[1] https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

(sorry, posted the wrong version of testcase 2 -- here's a better version where I've made the lightgray "spacer div" smaller, so it can be trivially removed without affecting the spacing too much.  If you do remove it, it fixes Chrome's rendering, which makes no sense, hence likely a Chrome bug.)

Comment 6

[Daniel Holbert [:dholbert]]

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=895962 and I'll file a webkit version shortly (Safari/WebKit is affected as well)

Comment 7

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

Daniel, thank you for the analysis.

Comment 8

[Daniel Holbert [:dholbert]]

Note that the Chromium bug is fixed-in-LayoutNG (which will supposedly be shipping in Chrome 76), and I believe it's even the float behavior-change that's described at https://www.chromium.org/blink/layoutng