123795 2013-11-05 02:27:28 -0800 [CSS Regions] Percent-sized floats are sized relative to the size of the NamedFlowThread instead of the region they are rendered in 2022-07-12 17:19:14 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) Unspecified Unspecified RESOLVED WONTFIX AdobeTracked P2 Normal --- 124706 1 mibalan webkit-unassigned abucur bfulgham mihnea stearns WebkitBugTracker oldest_to_newest 947094 0 216017 mibalan 2013-11-05 02:27:28 -0800 Created attachment 216017 HTML file highlighting the problem When a float that has the size specified with percents is flowed through a region chain with multiple regions, the size of the float is computed relative to the sum of the sizes of the regions instead of the size of the region the float is rendered in. 947114 1 mibalan 2013-11-05 04:43:23 -0800 Must double check for width, too and non-floats, too. 947143 2 stearns 2013-11-05 06:31:58 -0800 And we should check that when a float is fragmented, each fragment is sized relative to its individual region 1009472 3 abucur 2014-05-15 00:16:09 -0700 I've investigated this a bit and it's not very straightforward to implement. The problem here is that the top position of a float depends on the width of a float. For example, a left float will be positioned alongside other left floats as long as it still fits. This means you first need to determine the width and if the float doesn't fit, reposition it below the other floats. This is doable with regions but it implies a multi-step layout and important changes in the code. Instead of computing the width and the positioning the float you: - first need to estimate the top - compute the width in the region at that top offset - if it doesn't fit, move it below the other floats - recompute the width at the new top 1882825 4 bfulgham 2022-07-12 17:19:14 -0700 CSS Regions were removed in Bug 174978. 216017 2013-11-05 02:27:28 -0800 2013-11-05 02:27:28 -0800 HTML file highlighting the problem floats-in-named-flow-010.html text/html 1781 mibalan PCFET0NUWVBFIGh0bWw+CjxodG1sPgoJPGhlYWQ+CgkJPHRpdGxlPkNTUyBSZWdpb25zOiBmbG9h dHMgaW4gYSBuYW1lZCBmbG93IHdpdGggbXVsdGlwbGUgcmVnaW9uczwvdGl0bGU+CgkJPGxpbmsg cmVsPSJhdXRob3IiIHRpdGxlPSJNaWhhaSBCYWxhbiIgaHJlZj0ibWFpbHRvOm1pYmFsYW5AYWRv YmUuY29tIj4KCQk8bGluayByZWw9ImhlbHAiIGhyZWY9Imh0dHA6Ly93d3cudzMub3JnL1RSL2Nz czMtcmVnaW9ucy8jdGhlLWZsb3ctaW50by1wcm9wZXJ0eSI+CgkJPG1ldGEgbmFtZT0iZmxhZ3Mi IGNvbnRlbnQ9ImFoZW0iPgoJCTxtZXRhIG5hbWU9ImFzc2VydCIgY29udGVudD0iVGVzdCBjaGVj a3MgdGhhdCBmbG9hdHMgaW4gbmFtZWQgZmxvdyBjb250ZW50cyBhcmUgZmxvYXRlZCByZWxhdGl2 ZQoJCQkJdG8gdGhlIHJlZ2lvbiBjb250YWluZXIgYW5kIG5vdCB0aGVpciBpbml0aWFsIGNvbnRh aW5lciwgZXZlbiB3aGVuIG11bHRpcGxlIHJlZ2lvbnMKCQkJCWFyZSBpbnZvbHZlZC4iPgoJCTxs aW5rIHJlbD0ibWF0Y2giIGhyZWY9IiI+CgkJPHN0eWxlPgoJCWFydGljbGUgewoJCQljb2xvcjog Z3JheTsKCQkJZm9udC1mYW1pbHk6IEFoZW07CgkJCWZvbnQtc2l6ZTogMjBweDsKCQkJbGluZS1o ZWlnaHQ6IDFlbTsKCQl9CgkJLmZsb3cgewoJCQktd2Via2l0LWZsb3ctaW50bzogZjsKCQl9CgkJ LmZsb2F0IHsKCQkJd2lkdGg6IDMwJTsKCQkJaGVpZ2h0OiA2MCU7CgkJCS8qd2lkdGg6IDYwcHg7 CgkJCWhlaWdodDogNjBweDsqLwoJCQliYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGJsdWU7CgkJfQoJ CS5sZWZ0IHsKCQkJZmxvYXQ6IGxlZnQ7CgkJfQoJCS5yaWdodCB7CgkJCWZsb2F0OiByaWdodDsK CQl9CgkJLnJlZ2lvbiB7CgkJCS13ZWJraXQtZmxvdy1mcm9tOiBmOwoJCQl3aWR0aDogMjAwcHg7 CgkJCWhlaWdodDogMTAwcHg7CgkJCW1hcmdpbjogMTBweDsKCQkJYm9yZGVyOiAycHggc29saWQg YmxhY2s7CgkJfQoKCQkucmVnaW9uID4gcCB7CgkJCWJhY2tncm91bmQ6IHJlZDsKCQl9CgkJPC9z dHlsZT4KCTwvaGVhZD4KCTxib2R5PgoJCTxwPgoJCQlUZXN0IHBhc3NlcyBpZiB5b3Ugc2VlIHR3 byBpZGVudGljYWwgcm93cyBvZiBjb2xvcmVkIHNxdWFyZXMuIEVhY2ggcm93IHNob3VsZCBoYXZl IHRocmVlCgkJCXNxdWFyZXMsIGZyb20gbGVmdCB0byByaWdodCBhcyBmb2xsb3dzOiBibHVlLCBn cmF5LCBncmVlbi4gVGhlIHNxdWFyZXMgaW4gYSByb3cgc2hvdWxkCgkJCWJlIGZsdXNoIHRvIGVh Y2ggb3RoZXIsIGJ1dCB0aGUgdHdvIHJvd3Mgc2hvdWxkIGhhdmUgc29tZSBzcGFjZSBiZXR3ZWVu IHRoZW0uPGJyPgoJCQlUZXN0IGZhaWxzIGlzIHlvdSBzZWUgYW55IHJlZC4KCQk8L3A+CgoJCTxh cnRpY2xlPgoJCQk8ZGl2IGNsYXNzPSJmbG93IHJpZ2h0IGZsb2F0Ij48L2Rpdj4KCQkJPGRpdiBj bGFzcz0iZmxvdyI+CgkJCQl4eHh4eHh4CgkJCQl4eHh4eHh4CgkJCQl4eHh4eHh4CgkJCQl4eHh4 eHh4eHh4CgkJCQl4eHh4eHh4eHh4CgkJCTwvZGl2PgoJCQk8ZGl2IGNsYXNzPSJmbG93IGxlZnQg ZmxvYXQiPjwvZGl2PgoJCQk8ZGl2IGNsYXNzPSJmbG93Ij4KCQkJCXh4eHh4eHgKCQkJCXh4eHh4 eHgKCQkJCXh4eHh4eHgKCQkJCXh4eHh4eHh4eHgKCQkJCXh4eHh4eHh4eHgKCQkJPC9kaXY+CgkJ PC9hcnRpY2xlPgoJCQoJCTxkaXYgY2xhc3M9InJlZ2lvbiI+CgkJCTxwPiZuYnNwOzwvcD4KCQk8 L2Rpdj4KCQk8ZGl2IGNsYXNzPSJyZWdpb24iPgoJCQk8cD4mbmJzcDs8L3A+CgkJPC9kaXY+Cgk8 L2JvZHk+CjwvaHRtbD4=