Bug 30764 – Inconsistency between calculation and display when a div with overflow other than visible follows a float element.

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Hanrui]

Created attachment 41847 [details]
The screenshot for your reference.

Other browsers tested:
     Safari 4: Fail
   Chrome 3/4: Fail
  Firefox 3.x: OK
     IE 6/7/8: OK

What steps will reproduce the problem?
1. Launch the URL above
2. Pay attention to "7月起新售电脑预装过滤软件" area (or you can search this string in page)
3. Safari and Chrome have a large blank area and miss the introduction of "绿坝-花季护航上网过滤软件" which should appear just on the right of the picture.

What is the expected result?
The introduction words of "绿坝-花季护航上网过滤软件" should appear on the right hand of the picture in "7月起新售电脑预装过滤软件" area.

What happens instead?
Safari and Chrome have a large blank area and miss the introduction of "绿坝-花季护航上网过滤软件" which should appear just on the right of the picture.
(Attached please find the screenshot.)


Please provide any additional information below.
1) This looks like a bug of webkit engine, so Safari and Chrome 3/4 all have this issue.
2) This bug only happens when there's a float element and a div which has overflow set other than 'visible' and have a left-margin.
3) I guess this is caused by inconsistency between calculation and display.
From my testcases you can find that when calculating the width(rule in W3C is here: http://www.w3.org/TR/CSS2/visudet.html#blockwidth) of the inner unfloat div, Chrome and Safari use the (width of the outer div) - (width of inner the float div) as the containing block width. So in Chrome and Safari, the inner unfloat div width is:
 600px(width of outer div)-200px(width of inner float div)-300px(left margin of itself)=100px

The reason of Safari and Chrome deduct the float width from the containing block width is like they both refer the rule here: http://www.w3.org/TR/CSS2/visuren.html#floats (the 5th paragraph of 9.5).

But when laying out, Chrome and Safari overlap the left-margin area and the float element. So there will be a unexpected blank area on the right of the outer div.

[Hanrui]

Created attachment 41848 [details]
Testcase of quirks mode.

[Hanrui]

Created attachment 41849 [details]
Testcase of standards mode.

[Philippe Wittenbergh]

That is the same issue as bug 19123.

[Ahmad Saleem]

All browsers (Chrome Canary 106, Firefox Nightly 104 and Safari 15.6 on macOS 12.5) match each other in both quirks mode and standards mode test cases and I don't see difference in layout or color fill rate across all test scenario (unless if I am testing incorrectly, please then ignore my comment).

I think this can be marked as "RESOLVED CONFIGURATION CHANGED". Thanks!

[Alexey Proskuryakov]

Thank you for testing!