-
Notifications
You must be signed in to change notification settings - Fork 637
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css2][css-flow] Define the intrinsic sizing algorithm for block containers #9120
Comments
The algorithm in Firefox is here, and in particular We seem to be preserving more float information than just left / right (we keep actually an array of pointers to all floats). But that might be something that we can just simplify, I haven't looked closely enough to see when it differs from your algorithm. It seems blame for most of that code points to @upsuper (in https://bugzilla.mozilla.org/show_bug.cgi?id=1260031 and https://bugzilla.mozilla.org/show_bug.cgi?id=1322843) and @dbaron (reviewer, and in the original reflow branch), so they may have opinions. Per the comments in the first link above we were mostly trying to match Chromium and EdgeHTML which at the time agreed. |
(In any case +1 on specifying this in more detail) |
Calculating the max-content size of a block container may add the outer max-content sizes of multiple children. The problem is that the outer size may be negative (due to margins), producing an incorrect result. In particular, it could happen that the max-content size was 50-25=25, but the min-content size would just take the maximum and be 50, which doesn't make sense. Therefore, this patch floors the size of all children by 0. This seems to match Blink. Firefox and WebKit don't floor in some cases, but then the result seems suboptimal to me. Note that there is no spec for this, see w3c/csswg-drafts#9120 for details.
…xes (#30034) Calculating the max-content size of a block container may add the outer max-content sizes of multiple children. The problem is that the outer size may be negative (due to margins), producing an incorrect result. In particular, it could happen that the max-content size was 50-25=25, but the min-content size would just take the maximum and be 50, which doesn't make sense. Therefore, this patch floors the size of all children by 0. This seems to match Blink. Firefox and WebKit don't floor in some cases, but then the result seems suboptimal to me. Note that there is no spec for this, see w3c/csswg-drafts#9120 for details.
WebKit code is in https://searchfox.org/wubkat/rev/ea191c94955ddd2f015f7a677b138109987620b2/Source/WebCore/rendering/RenderBlock.cpp#2275 It seems quite similar to what I wrote above, except that it does weird things with margins. |
https://drafts.csswg.org/css2/#float-width
This is especially tricky in the presence of floats, clearance, and children that establish an independent formatting context.
However, we do seem to have good interoperability (at least in the block-level children case), even if there is no WPT coverage. So I would like to discuss resolving on this interoperable behavior.
Some interesting examples:
The max-content size may be bigger than necessary
It uses a width of 100px, even though 80px would suffice to avoid "breaking lines" between the cyan and the yellow floats.
The max-content size may not be big enough to avoid "breaking lines"
Note that the 2nd case just wraps the BFC root inside an intermediate container, and the 3rd case inserts and empty block before it. Both changes reduce the max-content size and then the BFC root no longer fits next to the floats.
If the block container contains block-level children (and is not a table wrapper box?):
In Servo I have tried to implement the behavior that I observed on other browsers, I haven't checked their source code but it seems to be:
For the max-content size,
max_size
be 0px. This tracks the maximum size seen so far, not including trailing uncleared floats.left_floats
be 0px. This tracks the size of the trailing uncleared left floats.right_floats
be 0px. This tracks the size of the trailing uncleared right floats.clear
be the the computed value of theclear
CSS property of the child.clear := both
(this is to avoid adding its size to the floats)clear
is different thannone
,max_size := max(max_size, left_floats + right_floats)
clear
isleft
orboth
,left_floats := 0px
clear
isright
orboth
,right_floats := 0px
size
be the outer max-content size of the child, floored by 0pxclear
is none and the element doesn't floatleft_floats + right_floats
instead of each float individuallyleft_floats := left_floats + size
right_floats := right_floats + size
max_size := max(max_size, left_floats + right_floats + size)
left_floats := 0px
right_floats := 0px
max(max_size, left_floats + right_floats)
The min-content size is just the maximum among the outer min-content sizes of each float or in-flow block-level child.
Firefox flooring bug (?)
There is no left float, so
clear: left
should have no effect. However, removing it causes Firefox to stop flooring the size of the BFC root by 0px before adding it to the floats, and then the container becomes 0px wide.WebKit flooring bug (?)
WebKit doesn't floor the floats individually, so
left_floats + right_floats
is 25px instead of 50px. This seems suboptimal since it forces the BFC root to move down.If the block container establishes an inline formatting context:
There is less interoperability here, e.g.
I haven't implemented this case yet so I don't have the details, but aligning with Firefox seems more consistent with the block-level children case. Blink and WebKit seem to ignore
clear: left
.The text was updated successfully, but these errors were encountered: