Bug 70792 – new flexbox should ignore float set on flexitems

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Ojan Vafai]

There's a bunch of cases we don't currently handle in the new flexbox code. This is the meta bug we'll use for each of the following cases. From example 2 at http://dev.w3.org/csswg/css3-flexbox/#flex-items:

"<div style="display:flexbox">

    <!-- flexbox item: block-level child -->
    <div id="item1">block</div>

    <!-- not a flexbox item, because it's out-of-flow -->
    <div id="not-an-item1.5" style="position: absolute;">block</div>
    
    <!-- flexbox item: block-level child -->
    <div id="item2" style="display:table">table</div>
    
    <!-- flexbox item: anonymous table wrapped around table-cell -->
    <div id="item3" style="display:table-cell">table-cell</div> 

    <!-- flexbox item: anonymous block around inline content -->
    anonymous item 4

    <!-- flexbox item: block-level child -->
    <div id="item5">block</div>

    <!-- flexbox item: anonymous block around inline content -->
    anonymous item 6.1
    <span id="item6.1">
        text 6.2
        <div id="not-an-item6.3">block</div>
        text 6.4
    </span>

    <!-- flexbox item: block-level replaced element -->
    <iframe id="item7">

    <!-- flexbox item: inline-level replaced element -->
    <img id="item7" style="display:inline">

    <!-- flexbox item: inline-level replaced element -->
    <button id="item8">button</button>

    <!-- flexbox item: inline-table -->
    <div id="item9" style="display:inline-table">table</div>
</div>
Notice that block element "not-an-item6.3" is not a separate flexbox item, because it is contained inside an inline element which is being wrapped into an anonymous flex item. Similarly, the block element "not-an-item1.5" is not a flexbox item, because it's absolutely positioned and thus out of flow."

[Tony Chang]

The spec has been updated and this is currently what the examples are:

<div style="display: -webkit-flex">
    <div id="item1">block</div>

    <!-- flex item: floated element; floating is ignored -->
    <div id="item2" style="float: left;">float</div>

    <!-- flex item: anonymous block box around inline content -->
    anonymous item 3

    <!-- flex item: inline child -->
    <span>
        item 4
        <!-- flex items do not split around blocks -->
        <div id=not-an-item>item 4</div>
        item 4
    </span>
</div>

We seem to handle this correctly, except for item2 where we get the right size, but don't seem to paint the float (!).

[Tony Chang]

I'm morphing this bug to just be about float on flex items. We'll probably need a separate issue for position absolute once the behavior is finalized.

For float, the spec says:
- ‘float’ and ‘clear’ have no effect on a flex item.

As mentioned in comment #1, we currently position and size properly, but never paint floating children.

This is an easy fix.

[Tony Chang]

Created attachment 155082 [details]
Patch

[Tony Chang]

This is similar to what we do for <td> in quirks mode and ruby (see above in the same function).  It's a little unfortunate since it gets leaked to getComputedStyle, however this seemed like the simpler approach.  Otherwise, we'd have to teach the painting code in RenderBlock to know about flex items.

[Ojan Vafai]

Comment on attachment 155082 [details]
Patch

FWIW, it seems correct to me that this is exposed to getComputedStyle. It's actually not floated. Do we need to do anything special with clear? As in, will a clear in a flexbox clear floated stuff above the flexbox? Float confuses me. :(

[Tony Chang]

(In reply to comment #5)
> (From update of attachment 155082 [details])
> FWIW, it seems correct to me that this is exposed to getComputedStyle. It's actually not floated. Do we need to do anything special with clear? As in, will a clear in a flexbox clear floated stuff above the flexbox? Float confuses me. :(

clear: on the flexitem appears to do nothing and clear: on the flexbox appears to clear floats.  However, setting clear: on the flexbox itself doesn't seem to be avoiding floats properly.  I'll fix this in a separate bug.

http://plexode.com/eval3/#ht=%3Cdiv%20style%3D%22float%3Aleft%22%3EI%20am%20a%20floated%20div.%3C%2Fdiv%3E%0A%3Cdiv%20style%3D%22display%3A%20-webkit-flex%3B%22%3E%3Cdiv%20style%3D%22clear%3Aboth%22%3EThis%20is%20a%20flexbox%2C%3C%2Fdiv%3E%3Cdiv%3Eit%20should%20be%20next%20the%20floated%20div.%3C%2Fdiv%3E%3C%2Fdiv%3E

[WebKit Review Bot]

Comment on attachment 155082 [details]
Patch

Clearing flags on attachment: 155082

Committed r124064: <http://trac.webkit.org/changeset/124064>

[WebKit Review Bot]

All reviewed patches have been landed.  Closing bug.