Summary: | new flexbox should ignore float set on flexitems | ||||||
---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Ojan Vafai <ojan> | ||||
Component: | Layout and Rendering | Assignee: | Tony Chang <tony> | ||||
Status: | RESOLVED FIXED | ||||||
Severity: | Normal | CC: | cmarcelo, macpherson, menard, tony, webkit.review.bot | ||||
Priority: | P2 | ||||||
Version: | 528+ (Nightly build) | ||||||
Hardware: | Unspecified | ||||||
OS: | Unspecified | ||||||
Bug Depends on: | 70793, 76076, 76077 | ||||||
Bug Blocks: | 62048 | ||||||
Attachments: |
|
Description
Ojan Vafai
2011-10-24 19:21:15 PDT
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. |