WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
70792
new flexbox should ignore float set on flexitems
https://bugs.webkit.org/show_bug.cgi?id=70792
Summary
new flexbox should ignore float set on flexitems
Ojan Vafai
Reported
2011-10-24 19:21:15 PDT
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."
Attachments
Patch
(4.79 KB, patch)
2012-07-27 16:08 PDT
,
Tony Chang
no flags
Details
Formatted Diff
Diff
View All
Add attachment
proposed patch, testcase, etc.
Tony Chang
Comment 1
2012-07-27 15:11:41 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 (!).
Tony Chang
Comment 2
2012-07-27 15:30:58 PDT
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
Comment 3
2012-07-27 16:08:20 PDT
Created
attachment 155082
[details]
Patch
Tony Chang
Comment 4
2012-07-27 16:10:08 PDT
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 5
2012-07-28 07:31:13 PDT
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
Comment 6
2012-07-30 10:56:50 PDT
(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 7
2012-07-30 11:40:11 PDT
Comment on
attachment 155082
[details]
Patch Clearing flags on attachment: 155082 Committed
r124064
: <
http://trac.webkit.org/changeset/124064
>
WebKit Review Bot
Comment 8
2012-07-30 11:40:15 PDT
All reviewed patches have been landed. Closing bug.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug