70792 2011-10-24 19:21:15 -0700 new flexbox should ignore float set on flexitems 2012-07-30 11:40:15 -0700 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) Unspecified Unspecified RESOLVED FIXED P2 Normal --- 70793 76076 76077 62048 1 ojan tony cmarcelo macpherson menard tony webkit.review.bot oldest_to_newest 489840 0 ojan 2011-10-24 19:21:15 -0700 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." 681137 1 tony 2012-07-27 15:11:41 -0700 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 (!). 681157 2 tony 2012-07-27 15:30:58 -0700 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. 681207 3 155082 tony 2012-07-27 16:08:20 -0700 Created attachment 155082 Patch 681211 4 tony 2012-07-27 16:10:08 -0700 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. 681418 5 155082 ojan 2012-07-28 07:31:13 -0700 Comment on attachment 155082 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. :( 682195 6 tony 2012-07-30 10:56:50 -0700 (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 682227 7 155082 webkit.review.bot 2012-07-30 11:40:11 -0700 Comment on attachment 155082 Patch Clearing flags on attachment: 155082 Committed r124064: <http://trac.webkit.org/changeset/124064> 682228 8 webkit.review.bot 2012-07-30 11:40:15 -0700 All reviewed patches have been landed. Closing bug. 155082 2012-07-27 16:08:20 -0700 2012-07-30 11:40:11 -0700 Patch bug-70792-20120727160835.patch text/plain 4905 tony U3VidmVyc2lvbiBSZXZpc2lvbjogMTIzOTI4CmRpZmYgLS1naXQgYS9Tb3VyY2UvV2ViQ29yZS9D aGFuZ2VMb2cgYi9Tb3VyY2UvV2ViQ29yZS9DaGFuZ2VMb2cKaW5kZXggYTUxYzE2OWZjODNiMzU1 MGE3NjVkMTVjMDZhMzkwMGRiYzdlMTQ0OS4uMDI2MjEzY2I2ODdjMDkxZDU0N2E1N2RkMTg4ZGMx M2I2ZGIwNTIwMiAxMDA2NDQKLS0tIGEvU291cmNlL1dlYkNvcmUvQ2hhbmdlTG9nCisrKyBiL1Nv dXJjZS9XZWJDb3JlL0NoYW5nZUxvZwpAQCAtMSwzICsxLDE3IEBACisyMDEyLTA3LTI3ICBUb255 IENoYW5nICA8dG9ueUBjaHJvbWl1bS5vcmc+CisKKyAgICAgICAgbmV3IGZsZXhib3ggc2hvdWxk IGlnbm9yZSBmbG9hdCBzZXQgb24gZmxleGl0ZW1zCisgICAgICAgIGh0dHBzOi8vYnVncy53ZWJr aXQub3JnL3Nob3dfYnVnLmNnaT9pZD03MDc5MgorCisgICAgICAgIFJldmlld2VkIGJ5IE5PQk9E WSAoT09QUyEpLgorCisgICAgICAgIEZvcmNlIGZsZXggaXRlbXMgdG8gbm90IGZsb2F0LgorCisg ICAgICAgIFRlc3Q6IGNzczMvZmxleGJveC9mbG9hdGVkLWZsZXhpdGVtLmh0bWwKKworICAgICAg ICAqIGNzcy9TdHlsZVJlc29sdmVyLmNwcDoKKyAgICAgICAgKFdlYkNvcmU6OlN0eWxlUmVzb2x2 ZXI6OmFkanVzdFJlbmRlclN0eWxlKTogRm9yY2UgTm9GbG9hdCBvbiBmbGV4IGl0ZW1zLgorCiAy MDEyLTA3LTI3ICBDaHJpc3RvcGhlIER1bWV6ICA8Y2hyaXN0b3BoZS5kdW1lekBpbnRlbC5jb20+ CiAKICAgICAgICAgQnVpbGQgd2FybmluZyBpbiBDU1NQcmltaXRpdmVWYWx1ZU1hcHBpbmdzLmgg d2hlbiBDU1NfU1RJQ0tZX1BPU0lUSU9OIGlzIGRpc2FibGVkCmRpZmYgLS1naXQgYS9Tb3VyY2Uv V2ViQ29yZS9jc3MvU3R5bGVSZXNvbHZlci5jcHAgYi9Tb3VyY2UvV2ViQ29yZS9jc3MvU3R5bGVS ZXNvbHZlci5jcHAKaW5kZXggOTJiOTI1Y2EyYTFkMTE1Mjg0ZmVlNDUwOWNjZThmOTJlOTQ4ZDIy MS4uZDNiZjQxYjk0Mzg4MGQ4Nzc1MDVkZjZiOTA4MGY0OTdkOGRjNjdlZCAxMDA2NDQKLS0tIGEv U291cmNlL1dlYkNvcmUvY3NzL1N0eWxlUmVzb2x2ZXIuY3BwCisrKyBiL1NvdXJjZS9XZWJDb3Jl L2Nzcy9TdHlsZVJlc29sdmVyLmNwcApAQCAtMjE0Myw4ICsyMTQzLDEwIEBAIHZvaWQgU3R5bGVS ZXNvbHZlcjo6YWRqdXN0UmVuZGVyU3R5bGUoUmVuZGVyU3R5bGUqIHN0eWxlLCBSZW5kZXJTdHls ZSogcGFyZW50U3R5CiAgICAgICAgIGlmIChzdHlsZS0+d3JpdGluZ01vZGUoKSAhPSBUb3BUb0Jv dHRvbVdyaXRpbmdNb2RlICYmIChzdHlsZS0+ZGlzcGxheSgpID09IEJPWCB8fCBzdHlsZS0+ZGlz cGxheSgpID09IElOTElORV9CT1gpKQogICAgICAgICAgICAgc3R5bGUtPnNldFdyaXRpbmdNb2Rl KFRvcFRvQm90dG9tV3JpdGluZ01vZGUpOwogCi0gICAgICAgIGlmIChlICYmIGUtPnBhcmVudE5v ZGUoKSAmJiBlLT5wYXJlbnROb2RlKCktPnJlbmRlcmVyKCkgJiYgZS0+cGFyZW50Tm9kZSgpLT5y ZW5kZXJlcigpLT5pc0ZsZXhpYmxlQm94KCkpCisgICAgICAgIGlmIChlICYmIGUtPnBhcmVudE5v ZGUoKSAmJiBlLT5wYXJlbnROb2RlKCktPnJlbmRlcmVyKCkgJiYgZS0+cGFyZW50Tm9kZSgpLT5y ZW5kZXJlcigpLT5pc0ZsZXhpYmxlQm94KCkpIHsKKyAgICAgICAgICAgIHN0eWxlLT5zZXRGbG9h dGluZyhOb0Zsb2F0KTsKICAgICAgICAgICAgIHN0eWxlLT5zZXREaXNwbGF5KGVxdWl2YWxlbnRC bG9ja0Rpc3BsYXkoc3R5bGUtPmRpc3BsYXkoKSwgc3R5bGUtPmlzRmxvYXRpbmcoKSwgbV9jaGVj a2VyLnN0cmljdFBhcnNpbmcoKSkpOworICAgICAgICB9CiAgICAgfQogCiAgICAgLy8gTWFrZSBz dXJlIG91ciB6LWluZGV4IHZhbHVlIGlzIG9ubHkgYXBwbGllZCBpZiB0aGUgb2JqZWN0IGlzIHBv c2l0aW9uZWQuCmRpZmYgLS1naXQgYS9MYXlvdXRUZXN0cy9DaGFuZ2VMb2cgYi9MYXlvdXRUZXN0 cy9DaGFuZ2VMb2cKaW5kZXggYzM3YTg1NDUwZjI0NTk1ODc4NzA2MmUzYTk1YmE1Y2E5YTRiMWVj YS4uZDdmN2M4YmE4N2EwMTA0NjZiMDY0MWM2MTk2Njg4NjVlMmYyNjRiMiAxMDA2NDQKLS0tIGEv TGF5b3V0VGVzdHMvQ2hhbmdlTG9nCisrKyBiL0xheW91dFRlc3RzL0NoYW5nZUxvZwpAQCAtMSwz ICsxLDE1IEBACisyMDEyLTA3LTI3ICBUb255IENoYW5nICA8dG9ueUBjaHJvbWl1bS5vcmc+CisK KyAgICAgICAgbmV3IGZsZXhib3ggc2hvdWxkIGlnbm9yZSBmbG9hdCBzZXQgb24gZmxleGl0ZW1z CisgICAgICAgIGh0dHBzOi8vYnVncy53ZWJraXQub3JnL3Nob3dfYnVnLmNnaT9pZD03MDc5Mgor CisgICAgICAgIFJldmlld2VkIGJ5IE5PQk9EWSAoT09QUyEpLgorCisgICAgICAgIE1ha2UgYW4g ZXhhbXBsZSBpbiB0aGUgc3BlYyBpbnRvIGEgcmVmIHRlc3QuICBBZGQgc29tZSBzdHlsZXMgdG8g bWFrZSBpdCBhIGJpdCBtb3JlIGNsZWFyIHdoYXQncyBoYXBwZW5pbmcuCisKKyAgICAgICAgKiBj c3MzL2ZsZXhib3gvZmxvYXRlZC1mbGV4aXRlbS1leHBlY3RlZC5odG1sOiBBZGRlZC4KKyAgICAg ICAgKiBjc3MzL2ZsZXhib3gvZmxvYXRlZC1mbGV4aXRlbS5odG1sOiBBZGRlZC4KKwogMjAxMi0w Ny0yNyAgQ2FpbyBNYXJjZWxvIGRlIE9saXZlaXJhIEZpbGhvICA8Y2Fpby5vbGl2ZWlyYUBvcGVu Ym9zc2Eub3JnPgogCiAgICAgICAgIFtRdF0gUmVtYWluaW5nIHJlYmFzZWxpbmVzIGFmdGVyIG5l dyB0ZXN0IGZvbnRzCmRpZmYgLS1naXQgYS9MYXlvdXRUZXN0cy9jc3MzL2ZsZXhib3gvZmxvYXRl ZC1mbGV4aXRlbS1leHBlY3RlZC5odG1sIGIvTGF5b3V0VGVzdHMvY3NzMy9mbGV4Ym94L2Zsb2F0 ZWQtZmxleGl0ZW0tZXhwZWN0ZWQuaHRtbApuZXcgZmlsZSBtb2RlIDEwMDY0NAppbmRleCAwMDAw MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwLi5hZTBjZDJlOTYwOGNmZWU3NGY4 ZTI2OWU1ODg2NDIyMjlmNWY4YmY2Ci0tLSAvZGV2L251bGwKKysrIGIvTGF5b3V0VGVzdHMvY3Nz My9mbGV4Ym94L2Zsb2F0ZWQtZmxleGl0ZW0tZXhwZWN0ZWQuaHRtbApAQCAtMCwwICsxLDI4IEBA Cis8IURPQ1RZUEUgaHRtbD4KKzxodG1sPgorPHN0eWxlPgorI2ZsZXhib3ggeworICBiYWNrZ3Jv dW5kLWNvbG9yOiBsaWdodGdyZXk7Cit9CisjZmxleGJveCA+ICogeworICBib3JkZXI6IDFweCBz b2xpZCBncmVlbjsKKyAgdmVydGljYWwtYWxpZ246IHRvcDsKK30KKzwvc3R5bGU+Cis8Ym9keT4K KzxwPgorVGhpcyBleGFtcGxlIGlzIGZyb20gdGhlIHNwZWMuIFRoZXJlIHNob3VsZCBiZSBmb3Vy IGZsZXggaXRlbXMuIEFub255bW91cyBpdGVtIDMgc2hvdWxkbid0IGhhdmUKK2EgZ3JlZW4gYm9y ZGVyIGJlY2F1c2UgdGhlIGFub255bW91cyBibG9jayBpcyB0aGUgZmxleCBpdGVtLgorPC9wPgor PGRpdiBpZD0iZmxleGJveCI+CisgICAgPGRpdiBzdHlsZT0iZGlzcGxheTogaW5saW5lLWJsb2Nr Ij5ibG9jazwvZGl2PjxkaXYKKyAgICAgIHN0eWxlPSJkaXNwbGF5OiBpbmxpbmUtYmxvY2siPmZs b2F0PC9kaXY+PGRpdgorICAgICAgc3R5bGU9ImRpc3BsYXk6IGlubGluZS1ibG9jazsgYm9yZGVy OiAwIj5hbm9ueW1vdXMgaXRlbSAzPC9kaXY+PGRpdgorICAgICAgc3R5bGU9ImRpc3BsYXk6IGlu bGluZS1ibG9jayI+CisgICAgICAgIGl0ZW0gNDxicj4KKyAgICAgICAgaXRlbSA0PGJyPgorICAg ICAgICBpdGVtIDQKKyAgICA8L2Rpdj4KKzwvZGl2PgorPC9ib2R5PgorPC9odG1sPgpkaWZmIC0t Z2l0IGEvTGF5b3V0VGVzdHMvY3NzMy9mbGV4Ym94L2Zsb2F0ZWQtZmxleGl0ZW0uaHRtbCBiL0xh eW91dFRlc3RzL2NzczMvZmxleGJveC9mbG9hdGVkLWZsZXhpdGVtLmh0bWwKbmV3IGZpbGUgbW9k ZSAxMDA2NDQKaW5kZXggMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMC4u ZWNmZWUxYWZjMmRiMmUyZWVhYjUxMzA1ZDM4OGNhMjM0Y2FkNTc1ZgotLS0gL2Rldi9udWxsCisr KyBiL0xheW91dFRlc3RzL2NzczMvZmxleGJveC9mbG9hdGVkLWZsZXhpdGVtLmh0bWwKQEAgLTAs MCArMSwzNyBAQAorPCFET0NUWVBFIGh0bWw+Cis8aHRtbD4KKzxzdHlsZT4KKyNmbGV4Ym94IHsK KyAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRncmV5OworICAtd2Via2l0LWFsaWduLWl0ZW1zOiBm bGV4LXN0YXJ0OworfQorI2ZsZXhib3ggPiAqIHsKKyAgYm9yZGVyOiAxcHggc29saWQgZ3JlZW47 Cit9Cis8L3N0eWxlPgorPGJvZHk+Cis8cD4KK1RoaXMgZXhhbXBsZSBpcyBmcm9tIHRoZSBzcGVj LiBUaGVyZSBzaG91bGQgYmUgZm91ciBmbGV4IGl0ZW1zLiBBbm9ueW1vdXMgaXRlbSAzIHNob3Vs ZG4ndCBoYXZlCithIGdyZWVuIGJvcmRlciBiZWNhdXNlIHRoZSBhbm9ueW1vdXMgYmxvY2sgaXMg dGhlIGZsZXggaXRlbS4KKzwvcD4KKzxkaXYgaWQ9ImZsZXhib3giIHN0eWxlPSJkaXNwbGF5OiAt d2Via2l0LWZsZXgiPgorCisgICAgPCEtLSBmbGV4IGl0ZW06IGJsb2NrIGNoaWxkIC0tPgorICAg IDxkaXYgaWQ9Iml0ZW0xIj5ibG9jazwvZGl2PgorCisgICAgPCEtLSBmbGV4IGl0ZW06IGZsb2F0 ZWQgZWxlbWVudDsgZmxvYXRpbmcgaXMgaWdub3JlZCAtLT4KKyAgICA8ZGl2IGlkPSJpdGVtMiIg c3R5bGU9ImZsb2F0OiBsZWZ0OyI+ZmxvYXQ8L2Rpdj4KKworICAgIDwhLS0gZmxleCBpdGVtOiBh bm9ueW1vdXMgYmxvY2sgYm94IGFyb3VuZCBpbmxpbmUgY29udGVudCAtLT4KKyAgICBhbm9ueW1v dXMgaXRlbSAzCisKKyAgICA8IS0tIGZsZXggaXRlbTogaW5saW5lIGNoaWxkIC0tPgorICAgIDxz cGFuPgorICAgICAgICBpdGVtIDQKKyAgICAgICAgPCEtLSBmbGV4IGl0ZW1zIGRvIG5vdCBzcGxp dCBhcm91bmQgYmxvY2tzIC0tPgorICAgICAgICA8ZGl2IGlkPW5vdC1hbi1pdGVtPml0ZW0gNDwv ZGl2PgorICAgICAgICBpdGVtIDQKKyAgICA8L3NwYW4+Cis8L2Rpdj4KKzwvYm9keT4KKzwvaHRt bD4K