[Webkit-unassigned] [Bug 30764] New: Inconsistency between calculation and display when a div with overflow other than visible follows a float element.

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=30764

           Summary: Inconsistency between calculation and display when a
                    div with overflow other than visible follows a float
                    element.
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: PC
               URL: http://tech.sina.com.cn/roll/2009-06-10/11093166185.sh
                    tml
        OS/Version: Windows XP
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: hanrui.gao at gmail.com
                CC: johnnyding.webkit at gmail.com


Created an attachment (id=41847)
 --> (https://bugs.webkit.org/attachment.cgi?id=41847)
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.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.