1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 07:37:35 +00:00

LibWeb: Express intrinsic size layout via size constraints

Previously, we had three layout modes:

- Normal:
    - Everything uses the computed values from CSS.

- MinContent:
    - Containing blocks act as if they have 0 width.
    - All line breaking opportunities are taken.

- MaxContent:
    - Containing blocks act as if they have infinite width.
    - Only forced line breaks are accepted.

The above was based on a set of misunderstandings of CSS sizing.
A major problem with the above was that *all* containing blocks
behaved differently during intrinsic size layout, not just the
relevant one.

With this patch there are only two layout modes:

- Normal:
    - Everything uses the computed values from CSS.

- IntrinsicSizeDetermination:
    - One or more boxes have size constraints applied.

There are two size constraints per layout box, set here:

- FormattingState::NodeState::width_constraint
- FormattingState::NodeState::height_constraint

They are of type SizeConstraint and can be one of None, MinContent,
or MaxContent. The default is None.

When performing an IntrinsicSizeDetermination layout, we now assign
a size constraint to the box we're trying to determine the intrinsic
size of, which is then honored by using two new helpers to query
the dimensions of containing blocks:

- FormattingContext::containing_block_width_for(Box)
- FormattingContext::containing_block_height_for(Box)

If there's a relevant constraint in effect on the Box, the size of
its containing block is adjusted accordingly.

This is essentially an implementation of the "available space"
constraints from CSS-SIZING-3. I'm sure some things will break from
this, and we'll have to deal with that separately.

Spec: https://drafts.csswg.org/css-sizing-3/#available
This commit is contained in:
Andreas Kling 2022-07-09 15:17:47 +02:00
parent 66d08d2417
commit 64959a8504
13 changed files with 213 additions and 174 deletions

View file

@ -21,20 +21,13 @@
namespace Web::Layout {
enum class LayoutMode {
// Normal layout.
// - We use the containing block's used width.
// - Content flows into the available space, line breaks inserted where necessary.
// Normal layout. No min-content or max-content constraints applied.
Normal,
// MinContent layout is used for discovering the min-content intrinsic size of a box.
// - We act as if the containing block has 0 used width.
// - Every line-breaking opportunity is taken.
MinContent,
// MaxContent layout is used for discovering the max-content intrinsic size of a box.
// - We act as if the containing block has infinite used width.
// - Only forced line-breaking opportunities are taken.
MaxContent,
// Intrinsic size determination.
// Boxes honor min-content and max-content constraints (set via FormattingState::NodeState::{width,height}_constraint)
// by considering their containing block to be 0-sized or infinitely large in the relevant axis.
IntrinsicSizeDetermination,
};
class Node : public TreeNode<Node> {