Bug 15869 – misalignment because of float:left of <div> tag

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Anantha Keesara]

I .Steps:
-----------
1. Go to: http://rc.9you.com/info_car_01.html

II. Issue:
-----------------
Notice that the contents are outside of the frame. See the screenshot.

III. Other browsers:
--------------------
Only IE gets it right. safari webkit version: 27433

[Anantha Keesara]

Created attachment 17082 [details]
reduced testcase

[Anantha Keesara]

Created attachment 17083 [details]
screenshot

[Robert Blaut]

Created attachment 19544 [details]
reduced test case #2

This test case is pretty interesting if you run it in Gecko. Setting 2px border in Gecko imply proper table positioning :D. The first example is incorrectly rendered. Webkit r30780 fails in both cases.  The latter shows incorrect overflow table outside a parent DIV. Presto (Opera 9.50) correctly displays both cases.

Definitely bug.

[Robert Blaut]

This is Live DOM Viewer version of the test case #2

[Robert Blaut]

http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cdiv%20style%3D%22width%3A800px%3B%20border%3A%200px%20solid%20blue%3B%22%3E%3Cdiv%20style%3D%22border%3A2px%20solid%20red%3B%20float%3A%20left%3B%20width%3A550px%22%3E(Parent%20DIV%20have%20no%20border%20set)%20There%20should%20be%20a%20green%20table%20below%20this%20block%3C%2Fdiv%3E%3Ctable%20style%3D%22border%3A2px%20solid%20green%3B%20width%3A100%25%3B%22%3E%3Ctd%3Etest%3C%2Ftd%3E%3C%2Ftable%3E%3C%2Fdiv%3E%3Cbr%3E%0A%3Cdiv%20style%3D%22width%3A800px%3B%20border%3A%202px%20solid%20blue%3B%22%3E%3Cdiv%20style%3D%22border%3A2px%20solid%20red%3B%20float%3A%20left%3B%20width%3A550px%22%3E(Parent%20DIV%20have%202px%20blue%20border%20set)%20%20There%20should%20be%20a%20green%20table%20below%20this%20block%3C%2Fdiv%3E%3Ctable%20style%3D%22border%3A2px%20solid%20green%3B%20width%3A100%25%3B%22%3E%3Ctd%3Etest%3C%2Ftd%3E%3C%2Ftable%3E%3C%2Fdiv%3E

This is one of two or three bugs about this quirk. See RenderBlock.cpp:2820.

[Robert Blaut]

(In reply to comment #6)
> This is one of two or three bugs about this quirk. See RenderBlock.cpp:2820.
> 

But reduced test case #2 is in strict mode (CSS1Compat) and the issue is still visible. 

Yup, there also seems to be an exception for percent-width objects, while on the other hand table widths are computed as if tables always clear floats.

Created attachment 34774 [details]
Use computed width for float avoidance and unify the rules across parsing modes

This appears to match Firefox and IE8 with the exceptions that in Firefox, <hr>s just overflow instead of clearing the float, and in IE, the <hr>’s percent sizes are computed relative to the available width next to the float (so 100% or less never needs to clear the float).

[Darin Adler]

Comment on attachment 34774 [details]
Use computed width for float avoidance and unify the rules across parsing modes

> +        (WebCore::RenderBlock::getClearDelta): Changed to apply the same float
> +            avoisame logic in strict mode and in compatibility mode, which

avoisame -> avoidance

> -    // Do not allow tables to wrap in quirks or even in almost strict mode 
> -    // (ebay on the PLT, finance.yahoo.com in the real world, versiontracker.com forces even almost strict mode not to work)

Did you try these test sites?

>      int result = clearSet ? max(0, bottom - yPos) : 0;
> -    if (!result && child->avoidsFloats() && child->style()->width().isFixed() && 
> -        child->minPrefWidth() > lineWidth(yPos, false) && child->minPrefWidth() <= availableWidth() && 
> -        document()->inStrictMode())   
> -        result = max(0, floatBottom() - yPos);
> +    if (!result && child->avoidsFloats()) {
> +        int oldYPos = child->y();
> +        int oldWidth = child->width();
> +        child->setY(yPos);
> +        child->calcWidth();
> +        if (child->width() > lineWidth(yPos, false) && child->minPrefWidth() <= availableWidth())
> +            result = max(0, floatBottom() - yPos);
> +        child->setY(oldYPos);
> +        child->setWidth(oldWidth);
> +    }

I'd love to say r=me, but this may be a little out of my league. Probably needs a Hyatt review or some other layout expert.

[Simon Fraser (smfr)]

Comment on attachment 34774 [details]
Use computed width for float avoidance and unify the rules across parsing modes

> Index: WebCore/ChangeLog
> ===================================================================

> +        * rendering/RenderBlock.cpp:
> +        (WebCore::RenderBlock::getClearDelta): Changed to apply the same float
> +            avoisame logic in strict mode and in compatibility mode, which

Avoidance?

(In reply to comment #10)
 
> > -    // Do not allow tables to wrap in quirks or even in almost strict mode 
> > -    // (ebay on the PLT, finance.yahoo.com in the real world, versiontracker.com forces even almost strict mode not to work)
> 
> Did you try these test sites?

VersionTracker and Yahoo! Finance in their current form appear to be unaffected by the change. The version of ebay on the PLT is affected, and with the change it looks like it looks in Firefox 3.5. The current version of ebay is unaffected as far as I can tell.

Fixed in <http://trac.webkit.org/projects/webkit/changeset/47255>.