Skip to content
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

Use the size of the containing block, not the size of the block formatting context, to place floats in layout 2020. #27376

Merged
merged 1 commit into from Jul 24, 2020

Commits on Jul 23, 2020

  1. Use the size of the containing block, not the size of the block forma…

    …tting
    
    context, to place floats in layout 2020.
    
    The containing block for a float is not necessarily the same as the block
    formatting context the float is in per CSS 2.1 [1]:
    
    "For other elements, if the element’s position is relative or static, the
    containing block is formed by the content edge of the nearest block container
    ancestor box."
    
    This shows up in the simplest case:
    
    	<html>
    	<body>
    	<div style="float: left">Hello</div>
    	</body>
    	</html>
    
    In this case, the `<html>` element is the block formatting context with inline
    size equal to the width of the window, but the `<body>` element with nonzero
    inline margins is the containing block for the float. The float placement must
    respect the content box of the `<body>` element (i.e. floats must not overlap
    the `<body>` element's margins), not that of the `<html>` element.
    
    Because a single block formatting context may contain floats with different
    containing blocks, the left and right "walls" of that containing block become
    properties of individual floats at the time of placement, not properties of the
    float context itself.
    
    Additionally, this commit generalizes the float placement logic a bit to allow
    the placement of arbitrary objects, not just floats. This is intended to
    support inline layout and block formatting context placement.
    
    This commit updates the `FloatContext` and associated tests only and doesn't
    actually wire the context up to the rest of layout, so floats in pages still
    aren't actually laid out.
    
    [1]: https://drafts.csswg.org/css2/#containing-block-details
    pcwalton committed Jul 23, 2020
You can’t perform that action at this time.