1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 10:18:11 +00:00
Commit graph

9 commits

Author SHA1 Message Date
Andreas Kling
1ebae7a779 LibWeb: Stop changing width of block-level flex containers during layout
If the parent BFC can come up with a nice stretch-fit width for the flex
container, it will have already done so *before* even entering flex
layout. There's no need to do it again, midway through the flex layout
algorithm.

This wasn't just unnecessary, but we were also doing it incorrectly and
not taking margins into account when calculating the amount of available
space for stretch-fit. This led to oversized flex containers in the
presence of negative margins.

Fixes #18614
2023-05-08 15:56:00 +02:00
Andreas Kling
590723aa3b LibWeb: Implement the "The html element fills the viewport quirk"
Fixes #18037.
2023-05-03 20:44:30 +02:00
Andreas Kling
968db96101 LibWeb: Show formatting context roots in layout tree dumps
This patch does three things:

- Factors out the code that determines whether a box will create a new
  formatting context for its children (and which type of context)

- Uses that code to mark all formatting context roots in layout tree
  dumps. This makes it much easier to follow along with layout since
  you can now see exactly where control is transferred to a new
  formatting context.

- Rebaselines all existing layout tests, since the output format has
  changed slightly.
2023-05-03 13:14:36 +02:00
Andreas Kling
d053cb6fae LibWeb: Fix bug where box-sizing: border-box made flex items too small
If a flex item has a preferred cross size of "auto", we should not be
subtracting padding and border in the cross axis when computing the
cross size.
2023-04-27 13:57:52 +02:00
Andreas Kling
0d5e0d27aa LibWeb: Treat unresolvable percentage flex-basis values as 'content'
Per CSS-FLEXBOX-1, we should treat percentage values of flex-basis as
'content' if they resolve against an indefinite size of the flex
container.
2023-04-18 10:06:02 +02:00
Andreas Kling
c710575f88 LibWeb: Honor box-sizing in flex item "specified size suggestion"
Although the spec doesn't mention it, if a flex item has box-sizing:
border-box, and the specified size suggestion is a definite size, we
have to subtract the borders and padding from the size before using it.

This fixes an issue seen in "This Week in Ladybird #4" where the
screenshots ended up in one long vertical stack instead of paired up
2 by 2.
2023-04-17 18:22:53 +02:00
Andreas Kling
e7f5b5a2f3 LibWeb: Fix multi-line flex column layouts with auto height on container
When sizing a flex container with flex-direction:column under a
max-content height constraint, we were incorrectly truncating the
infinite available height to 0 when collecting flex items into lines.

This caused us to put every flex item in its own flex line, which is the
complete opposite of what we want during max-content intrinsic sizing,
as the layout would grow wide but not tall.
2023-04-16 21:45:15 +02:00
Andreas Kling
b9b6037d2b LibWeb: Honor gap between flex lines when using align-content: stretch
We have to take the cross gap into account when calculating the "sum of
flex line cross sizes" in "Handle 'align-content: stretch'".
2023-04-16 20:52:32 +02:00
Andreas Kling
47c21cc349 LibWeb: Honor column-gap and row-gap CSS properties in flex layout
This isn't actually part of CSS-FLEXBOX-1, but all major engines honor
these properties in flex layout, and it's widely used on the web.

There's a bug open against the flexbox spec where fantasai says the
algorithm will be updated in CSS-FLEXBOX-2:
https://github.com/w3c/csswg-drafts/issues/2336

I've added comments to all the places where we adjust calculations for
gaps with "CSS-FLEXBOX-2" so we can find them easily. When that spec
becomes available, we can add proper spec links.
2023-04-14 13:22:07 +02:00