Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upUse the size of the containing block, not the size of the block formatting context, to place floats in layout 2020. #27376
+170
−106
Conversation
…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
| /// floats may be placed. If `None`, there are no floats to the right; distinguishing between | ||
| /// the cases of "a zero-width float is present" and "no floats at all are present" is | ||
| /// necessary to, for example, clear past zero-width floats. | ||
| /// The distance from the *left* edge of the block formatting context to the first legal |
This comment has been minimized.
This comment has been minimized.
pcwalton
force-pushed the
pcwalton:floats-2020-containing-block
branch
from
277393f
to
362b64a
|
@bors-servo r+ |
|
|
bors-servo
added a commit
that referenced
this pull request
Jul 23, 2020
…hearth Use the size of the containing block, not the size of the block formatting 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 r? @Manishearth <!-- Please describe your changes on the following line: --> --- <!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: --> - [x] `./mach build -d` does not report any errors - [x] `./mach test-tidy` does not report any errors - [x] These changes fix #___ (GitHub issue number if applicable) <!-- Either: --> - [x] There are tests for these changes OR - [ ] These changes do not require tests because ___ <!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.--> <!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
|
|
|
@bors-servo retry |
|
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
pcwalton commentedJul 23, 2020
•
edited
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:
In this case, the
<html>element is the block formatting context with inlinesize equal to the width of the window, but the
<body>element with nonzeroinline 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 overlapthe
<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
FloatContextand associated tests only and doesn'tactually wire the context up to the rest of layout, so floats in pages still
aren't actually laid out.
r? @Manishearth
./mach build -ddoes not report any errors./mach test-tidydoes not report any errors