Commit graph

129 commits

Author SHA1 Message Date
Aliaksandr Kalenik
bfdf52701f LibWeb: Treat min{max}-height as none if available is intrinsic [GFC]
Fixes infinite recursion in following cases:
- max-height: fit-content
- max-height: min-content
- max-height: max-content
2024-12-03 23:10:08 +01:00
Aliaksandr Kalenik
a8c1d12e84 LibWeb: Fix percentage insets resolution for grid items
compute_inset() was incorrectly retrieving the containing block size
because containing_block() is unaware of grid areas that form a
containing block for grid items but do not exist in the layout tree.
With this change, we explicitly pass the containing block into
compute_inset(), allowing it to correctly provide the containing block
sizes for grid items.
2024-11-11 20:20:39 +01:00
Gingeh
6862d33e7c LibWeb: Don't crash from clipping grid spans 2024-11-11 00:57:10 +01:00
Aliaksandr Kalenik
e95226839e LibWeb: Fix infinite recursion when max-width is min/max-content in GFC
Treat max-width as auto when it's specified to min/max-content and
available size is intrinsic constraint.

Fixes stack overflow on https://claude.ai/
2024-10-30 08:47:52 +01:00
Aliaksandr Kalenik
0dec2dc21c LibWeb: Improve grid area calculation for abspos items in GFC
- Add support for placement of abspos items into track formed by last
  line and padding edge of grid container
- Correctly handle auto-positioned abspos items by placing them between
  padding edges of grid container

Fixes crashing on https://wpt.live/css/css-grid/abspos/positioned-grid-descendants-001.html
2024-10-11 09:08:46 +02:00
Neil Viloria
9e2b70661e LibWeb/Layout: Unify grid justify-content handling for grid area 2024-10-10 13:37:08 +02:00
Neil Viloria
b9e7c6a2f6 LibWeb/Layout: Implement align-content for grid layout 2024-10-08 21:30:03 +02:00
Neil Viloria
4bda65c8b3 LibWeb/Layout: Implement justify-content for column spacing in grid 2024-10-05 19:21:49 +02:00
Aliaksandr Kalenik
91b2cd7d31 LibWeb: Account for x-axis in static position for inline items
..and delay static position calculation in IFC until trailing
whitespace are removed, because otherwise it's not possible to correctly
calculate x offset.
2024-09-21 20:10:49 +02:00
Aliaksandr Kalenik
19afc5b11b LibWeb: Align to padding edge only auto positioned abspos grid items
Containing block for abspos grid items depends on their grid placement:
- if element has definite grid position, then corresponding grid area
  should be used as a containing block
- if element does not have definite grid position, then padding edge of
  grid container should be used as a containing block

So offset should be adjusted for paddings only for boxes without
definite grid position.
2024-09-21 20:10:49 +02:00
Aliaksandr Kalenik
5f74da6ae8 LibWeb: Fix "box-sizing: border-box" resolution for abspos items
The `calculate_inner_width()` and `calculate_inner_height()` resolve
percentage paddings using the width returned by
`containing_block_width_for()`. However, this function does not account
for grids where the containing block is defined by the grid area to
which an item belongs.

This change fixes the issue by modifying `calculate_inner_width()` and
`calculate_inner_height()` to use the already resolved paddings from the
layout state. Corresponding changes ensure that paddings are resolved
and saved in the state before box-sizing is handled.

As a side effect, this change also improves abspos layout for BFC where
now paddings are resolved using padding box of containing block instead
of content box of containing block.
2024-09-17 07:56:18 +02:00
Aliaksandr Kalenik
805b0fed13 LibWeb: Use grid area size for abspos grid items alignment
Fixes yet another case of GFC bug, where Node::containing_block() should
not be used for grid items, because their containing block is grid area
which is not represented in layout tree.
2024-09-17 07:51:50 +02:00
Aliaksandr Kalenik
6481ef821d LibWeb: Use available size in calculate_inner_height()
Although the parameter is named "available size," it is always supposed
to represent the containing block size whenever it has a definite value.
Therefore, it is possible to simply use this value instead of performing
a containing block lookup.

This change actually improves correctness for grid items whose
containing block is defined by the grid area, as
`Node::containing_block()` does not account for this.
2024-09-15 18:00:08 +02:00
Aliaksandr Kalenik
de3c007d79 LibWeb: Fix min-width and max-width resolution for grid items
Change try_compute_width() to check whether min-width/max-width or width
is auto instead of always using `computed_values.width()`.

`grid/min-max-content.html` test is affected but it's progression.
2024-09-13 11:59:51 +02:00
Aliaksandr Kalenik
a64d182583 LibWeb: Use grid area as available size for abspos contained in GFC
Fixes incorrect percentage length resolution for abspos boxes contained
by a grid.
2024-09-12 21:07:41 +02:00
Aliaksandr Kalenik
863416e3ac LibWeb: Make FC of containing block responsible for abspos layout
Before this change, a formatting context was responsible for layout of
absolutely positioned boxes whose FC root box was their parent (either
directly or indirectly). This only worked correctly when the containing
block of the absolutely positioned child did not escape the FC root.
This is because the width and height of an absolutely positioned box are
resolved based on the size of its containing block, so we needed to
ensure that the containing block's layout was completed before laying
out an absolutely positioned box.

With this change, the layout of absolutely positioned boxes is delayed
until the FC responsible for the containing block's layout is complete.
This has affected the way we calculate the static position. It is no
longer possible to ask the FC for a box's static position, as this FC's
state might be gone by the time the layout for absolutely positioned
elements occurs. Instead, the "static position rectangle" (a concept
from the spec) is saved in the layout state, along with information on
how to align the box within this rectangle when its width and height are
resolved.
2024-09-12 07:36:32 +02:00
Gingeh
1d30d84f41 LibWeb: Add tests for justify-*: left/right 2024-09-10 10:40:07 +01:00
Aliaksandr Kalenik
ee41dbfec3 LibWeb: Fix wrong assumption that repeat() is always first track [GFC]
Fixes crashing in
https://wpt.live/css/css-grid/grid-definition/grid-auto-fit-columns-001.html
2024-09-09 22:05:30 +02:00
Aliaksandr Kalenik
07aa25ce50 LibWeb: Clamp growth limit after adding planned increase in GFC
Fixes implementation of the following line from the spec:
"However, limit the growth of any fit-content() tracks by their
fit-content() argument."

Now we correctly apply a limit to increased growth limit rather than to
the planned increase.

Change in "Tests/LibWeb/Layout/input/grid/fit-content-2.html" is a
progression and "Item as wide as the content." is actually as wide as a
content.
2024-09-09 11:41:10 +02:00
BenJilks
ef037b4152 LibWeb: Use the correct dimension when computing the max grid size
When deciding if the grid containers min size should be limited by a
max size. Check for a max height or width depending on the dimension,
instead of just always checking for a max width.
2024-09-04 22:41:15 +02:00
Aliaksandr Kalenik
7b2042571b LibWeb: Implement missing step in GFC fr size calculation
Implements:
"If the product of the hypothetical fr size and a flexible track’s flex
factor is less than the track’s base size, restart this algorithm
treating all such tracks as inflexible."

Fixes https://github.com/LadybirdBrowser/ladybird/issues/1211
2024-08-31 07:47:20 +02:00
Adam Harald Jørgensen
3e92ec80f3 LibWeb: Set correct longhand values when using grid-placement shorthand
According to https://www.w3.org/TR/css-grid-2/#placement-shorthands
when setting the 'grid-row' and 'grid-column' shorthand property to a
single <custom-ident> value, both 'grid-row-start'/'grid-column-start'
and 'grid-row-end'/'grid-column-end' should be set to that
<custom_ident>.
2024-08-29 07:00:00 +02:00
Edwin Hoksberg
e5deaa1c07 LibWeb: Implement grid-template function fit-content() 2024-07-25 13:12:26 +02:00
Aliaksandr Kalenik
7a1f3f7ae3 LibWeb: Change grid item placement to look for area by boundary lines
Areas are disassembled into boundary lines on `build_grid_areas()` step,
so we can always use them to find grid item's position during placement.
This way we support both ways to define area: `grid-template-areas` and
implicitly using `-start` and `-end` boundary line names.
2024-07-18 09:05:37 +02:00
Aliaksandr Kalenik
3270df476d LibWeb: Fix flexible track sizing in GFC
- Change min track sizing function to be "auto" when flex size is
  specified.
- Never check if min track sizing funciton is flexible, because only
  max is allowed to be flexible.
- Address FIXME in automatic_minimum_size to avoid regressions after
  making two fixes mentioned above.
2024-07-17 18:00:18 +02:00
Aliaksandr Kalenik
4d8bc16812 LibWeb: Respect "auto flow" property in grid layout
Before this change, we only considering `grid-auto-flow` to determine
whether a row or column should be added when there was not enough space
in the implicit grid to fit the next unplaced item.

Now, we also choose the direction in which the "auto placement cursor"
is moved, based on the auto flow property.
2024-03-06 07:23:27 +01:00
Aliaksandr Kalenik
aee5120078 LibWeb: Fix infinite recursion when grid has "max-width: max-content"
With this change "max-width: max-content" is treated as "none" when
the available width is also "max-content". This fix prevents a stack
overflow in the grid track size maximization algorithm by avoiding
recursive calls to calculate_max_width() when determining the maximum
grid container size.
2024-02-21 10:06:19 +01:00
Tommy van der Vorst
1c7ec9c770 LibWeb: Ignore repeat(auto-fit/auto-fill, auto) as it is not allowed 2024-02-11 17:51:50 +01:00
Aliaksandr Kalenik
a22ef086f5 LibWeb/CSS: Support calc() in grid placement values
Fixes reduction in https://github.com/SerenityOS/serenity/issues/22802
but does not result in visual improvement on https://kotlinlang.org/
2024-01-17 17:26:55 +01:00
Aliaksandr Kalenik
0a09ff698f LibWeb: Fix accounting for gaps in auto-fit count calculation in GFC
Fixes a bug where gaps between repeated tracks were accounted for only
once instead of multiple times, corresponding to the repeat count.

Fixes https://github.com/SerenityOS/serenity/issues/22823
2024-01-17 15:15:06 +01:00
Aliaksandr Kalenik
6a4dd8fa47 LibWeb: Account for gaps in grid container's intrinsic size calculation
Fixes https://github.com/SerenityOS/serenity/issues/22804
2024-01-16 21:54:23 +01:00
Aliaksandr Kalenik
9e23503c9c LibWeb: Align with spec "stretch auto tracks" step in GFC
Now, we will evenly distribute the remaining free space across tracks
using the auto max-tracks sizing function, exactly as the specification
states. Many tests are affected, but they are not visually broken.

Fixes https://github.com/SerenityOS/serenity/issues/22798
2024-01-16 13:13:47 +01:00
Aliaksandr Kalenik
6480ed20b8 LibWeb: Add support for implicit grid lines formed by grid areas in GFC
According to spec each grid area implicitly defines 4 additional named
lines that could be used to specify items position.
2024-01-08 09:28:37 +01:00
Aliaksandr Kalenik
903d3c92c8 LibWeb: Support auto-fill for rows in GFC
This change fixes the function that calculates the number of auto-fill
tracks, ensuring it uses height when applied to rows, instead of
assuming that it always operates on columns.
2024-01-07 11:12:35 +01:00
Aliaksandr Kalenik
a32046ea50 LibWeb: Fix auto-fill track counting to correctly handle gaps in GFC
Fixes the mistake that gaps are counted as if they exist after each
track, when actually gaps are present only between tracks.

Visual progression on https://kde.org/products/
2024-01-07 09:57:13 +01:00
Andreas Kling
cc88a2657d LibWeb: Resolve grid item vertical margin/padding against CB width
Percentage vertical margin and padding values are relative to the
containing block *width*, not *height*. This has to be one of the most
commonly recurring mistakes we make :^)
2024-01-06 21:06:21 +01:00
Aliaksandr Kalenik
9c72807976 LibWeb: Account for auto-fill/fit when expanding grid lines in GFC
Named line placement now works when auto-fill or auto-fit is used to
define grid columns.
2024-01-05 22:52:25 +01:00
Aliaksandr Kalenik
90142ad307 LibWeb: Account for gap in auto-fill columns count calculation in GFC
Fixes https://github.com/SerenityOS/serenity/issues/22603
2024-01-05 22:52:25 +01:00
Aliaksandr Kalenik
cfcc459140 LibWeb: Fix grid line name placement when repeat() is used
Before this change, parsed grid-template-columns/grid-template-rows
were represented as two lists: line names and track sizes. The problem
with this approach is that it erases the relationship between tracks
and their names, which results in unnecessarily complicated code that
restores this data (incorrectly if repeat() is involved) during layout.
This change solves that by representing line definitions as a list of
sizes and names in the order they were defined.

Visual progression https://genius.com/
2024-01-05 13:21:09 +01:00
Aliaksandr Kalenik
b6123df492 LibWeb: Add support for start, center and end justify-content in GFC
Fixes https://github.com/SerenityOS/serenity/issues/22555
2024-01-04 09:47:20 +01:00
Aliaksandr Kalenik
cd56ec6e5c LibWeb: Redo "tracks maximize" if initial run is over max-size in GFC
Implements missing "redo" step defined in the spec.
2023-12-26 19:19:50 +01:00
Aliaksandr Kalenik
ed42b12123 LibWeb: Respect box-sizing in min-height calculation of grid container 2023-12-26 11:13:38 +01:00
Aliaksandr Kalenik
4c81414b14 LibWeb: Fix division by zero in auto-fit/fill track calculation in GFC
Fixes https://github.com/SerenityOS/serenity/issues/22319
2023-12-16 19:39:44 +01:00
Sam Atkins
6cd6186399 LibWeb: Don't assume grid size is always Function or Token
This stops `grid-template-columns: minmax({},{})` from crashing.
2023-11-22 09:45:51 +01:00
Sam Atkins
1a17b8a304 LibWeb: Don't assume grid-area parts are Tokens
This stops `grid-area: {}` from crashing.
2023-11-22 09:45:51 +01:00
Sam Atkins
ab9d39bf4a LibWeb: Don't assume grid-row/grid-column parts are Tokens
This stops `grid-column: {}` from crashing.
2023-11-22 09:45:51 +01:00
Sam Atkins
314a30b12e LibWeb: Don't assume grid-line parts are Tokens
This stops `grid-row-start: {}` from crashing.

Also tidy up the parsing code a little.
2023-11-22 09:45:51 +01:00
Sam Atkins
1f6e13d8fe LibWeb: Don't assume repeat() contents are Tokens
This stops `grid-template-rows: repeat({})` from crashing.
2023-11-22 09:45:51 +01:00
Aliaksandr Kalenik
2fb0cede9a LibWeb: Account for box-sizing in grid-items width calculation
Visual improvement on (now there is a gap between grid items):
https://twinings.co.uk/collections/earl-grey-tea
2023-11-02 07:37:11 +01:00
Aliaksandr Kalenik
141f56accc LibWeb: Position abspos items inside grid relative to their grid area
Since grid item's containing block is not grid container but
corresponding grid area, it affect positioning of abspos items.
2023-10-31 08:46:17 +01:00