1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-24 00:05:07 +00:00
Commit graph

128 commits

Author SHA1 Message Date
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
de32b77ceb LibWeb: Use separate structure to represent fragments in paintable tree
This is a part of refactoring towards making the paintable tree
independent of the layout tree. Now, instead of transferring text
fragments from the layout tree to the paintable tree during the layout
commit phase, we allocate separate PaintableFragments that contain only
the information necessary for painting. Doing this also allows us to
get rid LineBoxes, as they are used only during layout.
2024-01-13 10:53:38 +01:00
Andreas Kling
e7de5cb4d2 LibWeb: Bring CSS line-height closer to other engines
This patch makes a few changes to the way we calculate line-height:

- `line-height: normal` is now resolved using metrics from the used
  font (specifically, round(A + D + lineGap)).

- `line-height: calc(...)` is now resolved at style compute time.

- `line-height` values are now absolutized at style compute time.

As a consequence of the above, we no longer need to walk the DOM
ancestor chain looking for line-heights during style computation.
Instead, values are inherited, resolved and absolutized locally.

This is not only much faster, but also makes our line-height metrics
match those of other engines like Gecko and Blink.
2024-01-12 15:04:06 +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
Aliaksandr Kalenik
4bc38300ad LibWeb: Forbid using CSS::Length as reference value in resolved()
CSSPixels should not be wrapped into CSS::Length before being passed
to resolved() to end up resolving percentages without losing
precision.

Fixes thrashing layout when 33.3333% width is used together with
"box-sizing: border-box".
2024-01-07 09:03:57 +01:00
Aliaksandr Kalenik
e7eaf3b566 LibWeb: Remove rounding division for CSSPixels
Reverts 98926b487c
that regressed: block-and-inline/small-percentage-margin.html
(thrashing layout while window resizing)

Fixes https://github.com/SerenityOS/serenity/issues/22610
2024-01-06 21:40:27 +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
Aliaksandr Kalenik
549dee4db1 LibWeb: Call prepare_for_replaced_layout() on replaced boxes in GFC
We need to call prepare_for_replaced_layout() on grid items to populate
their natural sizes and aspect ration.
2023-10-31 07:08:30 +01:00
FalseHonesty
2285dfb80e LibWeb: Resolve block max-width percentage against containing block 2023-10-29 19:35:02 +01:00
Aliaksandr Kalenik
d22aa851cf LibWeb: Float property should be ignored for grid items 2023-10-29 09:43:13 +01:00
Aliaksandr Kalenik
f75186ec8f LibWeb: Add support for grid item's min-height and max-height in GFC 2023-10-29 08:46:51 +01:00
Aliaksandr Kalenik
d1a01c4c65 LibWeb: Fix box alignment when it has min-width or max-width in GFC
Changing `try_compute_width()` to return width and margins, instead of
mutating them in the box's state makes it works in cases when box has
min-width or max-width and this function needs to be called multiple
times.

Fixes https://github.com/SerenityOS/serenity/issues/21598
2023-10-27 07:14:34 +02:00
Aliaksandr Kalenik
58f8068853 LibWeb: Handle fit-content in calculate_max_content_contribution in GFC
Fixes https://github.com/SerenityOS/serenity/issues/21569
2023-10-26 08:37:42 +02:00
Aliaksandr Kalenik
4dab17427f LibWeb: Use max content contribution in flex_fraction in GFC
As spec comment in the code says we should use item’s max-content
contribution to calculate flex fraction.

Likely, it was calculate_max_content_size() because we didn't have
calculate_max_content_contribution() when this function was implemented
initially.
2023-10-24 07:26:25 +02:00
Aliaksandr Kalenik
802b58d7e1 LibWeb: Resolve grid item's min-width and max-width in GFC
Now min-width and max-width properties affect resulting width of grid
item instead of being ignored.
2023-10-24 07:25:20 +02:00
Aliaksandr Kalenik
122d847720 LibWeb: Fix building of areas spanning multiple rows in GFC
Rewrites the grid area building to accurately identify areas that span
multiple rows. Also now we can recognize invalid areas but do not
handle them yet.
2023-10-22 19:38:18 +02:00
Aliaksandr Kalenik
719b12b19d LibWeb: Support alignment of abspos grid items
Grid items should respect alignment properties if top/right/bottom/left
are not specified.

This change adds a separate implementation of
layout_absolutely_positioned_element that is extended with support for
alignment.
2023-10-21 09:08:51 +02:00
Aliaksandr Kalenik
2def1de4be LibWeb: Rerun rows sizings if grid auto height is less than min-height
If the first pass of rows sizing results in the container's automatic
height being less than the specified min-height, we need to run a
second pass using the updated available space.
2023-10-21 09:08:11 +02:00
Aliaksandr Kalenik
693d602b2f LibWeb: Fix infinite loop in GFC growth limit distribution
This change is bd85e1b30b ported from
base size to growth limit distribution.

Fixes https://github.com/SerenityOS/serenity/issues/21056
2023-09-20 18:28:11 +02:00
Hendiadyoin1
d262670729 LibWeb: Use more CSSPixelFractions in GFC::expand_flexible_tracks
Also contains a drive-by expression simplification, and accidental
double truncation fix.
2023-09-18 18:02:51 +02:00
Zaggy1024
98926b487c LibWeb: Perform rounding when dividing CSSPixels
This should allow us to produce results that more closely match old
layouts when divisions were done in floating-point.
2023-09-05 14:50:45 +02:00
Zaggy1024
bd85e1b30b LibWeb: Entirely and exactly distribute grids' extra space to tracks
Previously, the code assumed that in dividing up the space in the
affected tracks there would never be an overshoot. Instead, we can
check for each track how much extra space is left and never consume any
extra.

In the same way, we can ensure that all extra space is consumed by
distributing all remaining extra space starting from the first track.
Thus, if there is no growth limit, the space distribution should always
consume all the extra space.
2023-09-05 14:50:45 +02:00
Zaggy1024
eb7c2ee307 LibWeb: Limit affected size of grid tracks instead of only increase
The spec says that the sum of affected size + item-incurred increase
should reach the limit, rather than just the item-incurred increase.

This seems to improve layout on the testcase `row-span-2-with-gaps`.
The extra line of space at the bottom of the left div
(`div.grid-item.item-span-two`) is not present anymore, matching other
browsers' layout much more closely.
2023-09-05 14:50:45 +02:00
Zaggy1024
34c5043cbe LibWeb: Use CSSPixelFraction to represent aspect ratios
This allows us to retain perfect precision for aspect ratios derived
from either the intrinsic sizes of replaced elements, or the
`aspect-ratio` CSS property.
2023-09-04 12:40:17 +02:00
Aliaksandr Kalenik
2495302991 LibWeb: Reset auto_placement_cursor_x after adding new column in GFC
We need to start looking from the beginning of current row if adding
new implicit column track made enough space to accomodate spanning item

This fixes placement for spanning grid items when `grid-auto-flow` is
specified to `column`.
2023-08-29 12:35:21 +02:00
Aliaksandr Kalenik
b66f65dc9e LibWeb: Define if identifier represent area or line during layout [GFC]
This fixes regression introduced in
c03e025a32 by assuming that it is
possible to determine whether identifier stands for line or area
during parsing.
2023-08-28 09:19:41 +02:00
Aliaksandr Kalenik
e4dd4808c4 Tests/LibWeb: Split "grid/named-tracks.html" into smaller layout tests
The file grid/named-tracks.html contained multiple subtests. Splitting
them into individual files will make it simpler to identify where is
the issue.
2023-08-27 14:51:44 +02:00
Aliaksandr Kalenik
d3d67857b2 LibWeb: Use containing block width to measure fit-content width in GFC
When the grid layout gets to
`resolve_items_box_metrics(GridDimension::Column)`, we've already
determined the width of each column. However, the widths of the
individual grid items themselves haven't been set. Rather than using
`get_available_space_for_item()`, which returns an indefinite size if
an item's width/height hasn't been set, we should use the already
known track width as the available size to calculate the fit-content
width.
2023-08-27 05:11:55 +02:00
Aliaksandr Kalenik
c03e025a32 LibWeb: Disambiguate GridTrackPlacement API
- Ambiguous `raw_value()` method is replaced with `line_number()` and
  `span()`.
- `line_name()` that before returned either line name or area name is
  replaced with `line_name()` and `area_name()`.
- `Position` type is replaced with `Line` and `Area` type so we don't
   have to guess while doing layout.

Affected test expectations:
- `template-lines-and-areas` - improvement over what we had before.
- `named-tracks` - rebaseline a giant test. will have to split it into
  smaller tests in the future.
2023-08-26 13:16:17 +02:00
Aliaksandr Kalenik
6267037a74 Tests/LibWeb: Split grid/positions-and-spans.html into smaller tests
This giant grid test has been a source of problems while iterating on
GFC for a long time. Let's split it into smaller tests to make it
easier to identify issues without needing further reductions on the
test.
2023-08-24 20:18:00 +02:00
Aliaksandr Kalenik
37f5253ec9 LibWeb/Layout: Add support for grid-auto-flow in GFC 2023-08-20 15:36:18 +02:00