Commit graph

173 commits

Author SHA1 Message Date
Jelle Raaijmakers
71665fa504 LibWeb: Scale font size by 1.15 for line-height: normal
Browsers such as Chrome and Firefox apply an arbitrary scale to the
current font size if `normal` is used for `line-height`. Firefox uses
1.2 while Chrome uses 1.15. Let's go with the latter for now, it's
relatively easy to change if we ever want to go back on that decision.

This also requires updating the expectations for a lot of layout tests.
The upside of this is that it's a bit easier to compare our layout
results to other browsers', especially Chrome.
2025-05-05 13:15:56 +02:00
Lukas Scheller
852e8ff12f LibWeb: Fix grid placement with named lines 2025-04-05 21:30:37 +02:00
Aliaksandr Kalenik
d8ff71fbb5 LibWeb: Delete parent state pointer in LayoutState
It's safe to remove this pointer because intrinsic layout should never
look up a box's state beyond its containing block.

This change affects the expectations of two layout tests, but both
already differ slightly from other browsers, and the difference between
expectations is less than 5px.
2025-03-26 12:08:09 +00:00
Aliaksandr Kalenik
090ac66af1 LibWeb: Repeat grid track sizing with minmax where both are not definite
...should be treated as invalid value.
2025-03-25 09:53:04 +00:00
Aliaksandr Kalenik
057e643a63 LibWeb: Don't assume length-percentage is always a length [GFC]
Fixes crashing when trying to get length from LengthPercentage with
percentage value.
2025-03-24 18:59:21 +01:00
Aliaksandr Kalenik
1f8e7c3cca LibWeb/Layout: Improve grid item sizing for replaced boxes
With this change we no longer stretch "width: auto" for replaced
elements and also use "width calculation rules for block-level replaced
elements", like suggested by the spec.
2025-03-20 03:36:56 +01:00
Aliaksandr Kalenik
4a7b947c5d LibWeb: Clamp content-based minimum size by limited max track size [GFC]
Progress on https://wpt.live/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html
2025-03-18 15:01:02 +01:00
Aliaksandr Kalenik
23151de217 LibWeb/Layout: Fix min{max}-content size calculation for grid items
Instead of directly invoking `to_px()`,
`calculate_min_content_contribution()` needs to use
`calculate_inner_width()` and `calculate_inner_height()`, which are
aware of how to correctly handle `min-content` and `max-content` values.

Fixes https://github.com/LadybirdBrowser/ladybird/issues/3469
2025-03-15 13:51:16 +01:00
Aliaksandr Kalenik
08c155cd3f LibWeb: Resolve "height: auto" using preferred aspect ratio if possible
Fixes https://github.com/LadybirdBrowser/ladybird/issues/2276
2025-03-15 13:51:16 +01:00
Andreas Kling
7d4d7da28a LibWeb: Wrap inline children of table-cell in anonymous block
This fixes an issue where CSS vertical-align on a table-cell box would
incorrectly apply to both the table-cell box and any inline content it
had inside.
2025-02-25 23:55:36 +01:00
Andreas Kling
16662ab230 LibWeb: Account for collapsed top margins in BFC root height calculation
By the time we're measuring the height of a BFC root, we've already
collapsed all relevant margins for the root and its descendants.
Given this, we should simply use 0 (relative to the BFC root) as the
lowest block axis coordinate (i.e Y value) for the margin edges.

This fixes a long-standing issue where BFC roots were sometimes not tall
enough to contain their children due to margins.
2025-02-22 18:41:42 +01:00
Jelle Raaijmakers
4d9f17eddf LibGfx+LibWeb: Draw glyph runs with subpixel accuracy
This improves the quality of our font rendering, especially when
animations are involved. Relevant changes:

  * Skia fonts have their subpixel flag set, which means that individual
    glyphs are rendered at subpixel offsets causing glyph runs as a
    whole to look better.

  * Fragment offsets are no longer rounded to whole device pixels, and
    instead the floating point offset is kept. This allows us to pass
    through the floating point baseline position all the way to the Skia
    calls, which already expected that to be a float position.

The `scrollable-contains-table.html` ref test needed different table
headings since they would slightly inflate the column size in the test
file, but not the reference.
2024-12-21 23:09:52 +01:00
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
Psychpsyo
1d44df74f7 LibWeb: Stop zero-area children from causing scrollable overflow 2024-11-24 11:10:47 +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
Edward Banner
912511a152 LibWeb: Use containing block to compute scrollable overflow
Instead of using child boxes to compute scrollable overflow for the box,
we use descendants which have the box as their containing block.
2024-10-18 15:26:42 +02:00
Edward Banner
03569fc509 LibWeb: Fix table overflow issues
- Include vertical border spacing in row group offset calculation so
  that they are axis-aligned with child row/cell elements. This makes it
  so there isn't horizontal and vertical overflow caused by child
  row/cell elements.
- Include horizontal border spacing in tr width calculations. This makes
  it so tr elements don't have overflow anymore when there are multiple
  columns.
- Apply vertical caption offset to row group top offset.
- Don't double-count top padding when calculating vertical offset for
  tr and row groups.
2024-10-14 17:30:17 +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
BenJilks
0d63269cb7 LibGfx+LibWeb: Use harfbuzz for text shaping
This replaces glyph positioning system with harfbuzz's shaping
algorithm. Adding support for bidirectional encoded text.
2024-08-16 22:28:34 +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
BenJilks
3c897e7cf3 LibWeb: Propagate margin and offset when computing a box's baseline
When traversing the layout tree to find an appropriate box child to
derive the baseline from. Only the child's margin and offset was being
applied. Now we sum each offset on the recursive call.
2024-07-15 21:31:51 +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
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