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."
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 (!).
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.
Created attachment 155082 [details] Patch
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.
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. :(
(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
Comment on attachment 155082 [details] Patch Clearing flags on attachment: 155082 Committed r124064: <http://trac.webkit.org/changeset/124064>
All reviewed patches have been landed. Closing bug.