Bug 99002 – floating box is higher than previous floating box

• Component: Layout and Rendering
• Status: RESOLVED CONFIGURATION CHANGED

[xiaozhen wang]

In "http://www.w3.org/TR/CSS2/visuren.html", 9.5.1 Positioning the float, item 5 said that "The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.". But    if i create a page like

<div style="float:left; border:red 1px solid; width:350px; ">
        <div class="float1" style="float:left; border:red 1px solid; width:100px; height:100px">float1</div>
	aaaaaaaaaaaa
	<div class="float2" style="float:left; border:red 1px solid; width:300px; height:100px">float2</div>
	<div class="float3" style="float:left; border:red 1px solid; width:100px; height:100px">float3</div>
</div>

then open it with webkit, the last floating box(float3) is higher than it's previous floating box. By the way, IE and firefox works well.

This bug is caused that when the agent layout more than one floating boxes(in such case) in RenderBlock::positionNewFloats, it don't update its logicalTop. So if we add such process(logicalTop = max(logicalTopForFloat(floatingObject), logicalTop);) in RenderBlock::positionNewFloats, then webkit works well too.

====================================== code in RenderBlock::positionNewFloats ===================================
    for (; it != end; ++it) {
        FloatingObject* floatingObject = *it;
        // The containing block is responsible for positioning floats, so if we have floats in our
        // list that come from somewhere else, do not attempt to position them.
        if (floatingObject->renderer()->containingBlock() != this)
            continue;

        RenderBox* childBox = floatingObject->renderer();
        LayoutUnit childLogicalLeftMargin = style()->isLeftToRightDirection() ? marginStartForChild(childBox) : marginEndForChild(childBox);

        LayoutRect oldRect = childBox->frameRect();

        if (childBox->style()->clear() & CLEFT)
            logicalTop = max(lowestFloatLogicalBottom(FloatingObject::FloatLeft), logicalTop);
        if (childBox->style()->clear() & CRIGHT)
            logicalTop = max(lowestFloatLogicalBottom(FloatingObject::FloatRight), logicalTop);

        LayoutPoint floatLogicalLocation = computeLogicalLocationForFloat(floatingObject, logicalTop);

        setLogicalLeftForFloat(floatingObject, floatLogicalLocation.x());
        setLogicalLeftForChild(childBox, floatLogicalLocation.x() + childLogicalLeftMargin);
        setLogicalTopForChild(childBox, floatLogicalLocation.y() + marginBeforeForChild(childBox));

        LayoutState* layoutState = view()->layoutState();
        bool isPaginated = layoutState->isPaginated();
        if (isPaginated && !childBox->needsLayout())
            childBox->markForPaginationRelayoutIfNeeded();
        
        childBox->layoutIfNeeded();

        if (isPaginated) {
            // If we are unsplittable and don't fit, then we need to move down.
            // We include our margins as part of the unsplittable area.
            LayoutUnit newLogicalTop = adjustForUnsplittableChild(childBox, floatLogicalLocation.y(), true);
            
            // See if we have a pagination strut that is making us move down further.
            // Note that an unsplittable child can't also have a pagination strut, so this is
            // exclusive with the case above.
            RenderBlock* childBlock = childBox->isRenderBlock() ? toRenderBlock(childBox) : 0;
            if (childBlock && childBlock->paginationStrut()) {
                newLogicalTop += childBlock->paginationStrut();
                childBlock->setPaginationStrut(0);
            }
            
            if (newLogicalTop != floatLogicalLocation.y()) {
                floatingObject->m_paginationStrut = newLogicalTop - floatLogicalLocation.y();

                floatLogicalLocation = computeLogicalLocationForFloat(floatingObject, newLogicalTop);
                setLogicalLeftForFloat(floatingObject, floatLogicalLocation.x());
                setLogicalLeftForChild(childBox, floatLogicalLocation.x() + childLogicalLeftMargin);
                setLogicalTopForChild(childBox, floatLogicalLocation.y() + marginBeforeForChild(childBox));
        
                if (childBlock)
                    childBlock->setChildNeedsLayout(true, MarkOnlyThis);
                childBox->layoutIfNeeded();
            }
        }

        setLogicalTopForFloat(floatingObject, floatLogicalLocation.y());
        setLogicalHeightForFloat(floatingObject, logicalHeightForChild(childBox) + marginBeforeForChild(childBox) + marginAfterForChild(childBox));

        m_floatingObjects->addPlacedObject(floatingObject);

        // If the child moved, we have to repaint it.
        if (childBox->checkForRepaintDuringLayout())
            childBox->repaintDuringLayoutIfMoved(oldRect);

        logicalTop = max(logicalTopForFloat(floatingObject), logicalTop);  // add this 
    }
==========================================================================================

[Kunihiko Sakamoto]

Created attachment 176431 [details]
Patch

[Anders Carlsson]

Comment on attachment 176431 [details]
Patch

Clearing review flag on patches from before 2014. If this patch is still relevant, please reset the r? flag.

[Ahmad Saleem]

Changed test case from Comment 0 in JSFiddle:

Link - https://jsfiddle.net/q419rj2g/show

Safari 16.1, STP 158, Chrome Canary 110 and Firefox Nightly 109 all are rendering it same, so marking this as "RESOLVED CONFIGURATION CHANGED".