Commit graph

435 commits

Author SHA1 Message Date
Glenn Skrzypczak
1022566bff LibWeb/Layout: Properly remove layout nodes
Some checks are pending
CI / Lagom (x86_64, Fuzzers_CI, false, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (arm64, Sanitizer_CI, false, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, false, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, true, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
This properly remove the old layout node subtree when no new layout
node is created during layout update.
2025-03-31 18:19:58 +01:00
Jelle Raaijmakers
86b831750d LibWeb: Layout children a bit earlier in BlockFormattingContext
Some checks are pending
CI / Lagom (arm64, Sanitizer_CI, false, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (x86_64, Fuzzers_CI, false, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, false, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, true, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
We don't need to duplicate this piece of code. No functional changes.
2025-03-31 08:11:10 +01:00
Jelle Raaijmakers
04ba375cc7 LibWeb: Only set line builder's block offset if clearance increases it
This prevents text from overlapping with each other if a `<br>` with
`clear: ..` is used in between.
2025-03-31 08:11:10 +01:00
Aliaksandr Kalenik
552dd18696 Revert "LibWeb/CSS: Implement 'background-blend-mode'"
This reverts commit a73cd88f0c.

Emitting SaveLayer for each paintable made rasterization a lot slower
on every website because now Skia has to allocate enormous amounts of
temporary surfaces. Let's revert it for now and figure how to implement
it with less aggressive SaveLayer usage.
2025-03-28 16:48:03 +00:00
Glenn Skrzypczak
a73cd88f0c LibWeb/CSS: Implement 'background-blend-mode'
This implements the 'background-blend-mode' CSS property.
2025-03-28 09:41:06 +00:00
Aliaksandr Kalenik
732a5cdc12 LibWeb: Respect min/max-content available size in auto width calculation
Some checks are pending
CI / Lagom (arm64, Sanitizer_CI, false, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (x86_64, Fuzzers_CI, false, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, false, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, true, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
...for block level boxes. Otherwise we end up resolving auto width as
zero during intrinsic layout, which leads to incorrectly applied
max-width constraint.

Fixes https://github.com/LadybirdBrowser/ladybird/issues/4123
2025-03-28 02:13:41 +00:00
Tim Ledbetter
7853b757c2 LibWeb: Lower the baseline of text with veritcal-align: sub
This lowers the baseline of the given text by one fifth of the parent's
font size.
2025-03-27 23:30:57 +00:00
Tim Ledbetter
6fbbbc9b81 LibWeb: Raise the baseline of text with veritcal-align: super
This raises the baseline of the given text by one third of the parent's
font size.
2025-03-27 23:30:57 +00:00
Aliaksandr Kalenik
fc45121b70 LibWeb: Size box as normal if it has aspect ratio but auto sizes
Otherwise we apply `calculate_stretch_fit_width()` instead of
calculating width based on the content inside the box, like other
browsers do.
2025-03-27 23:13:57 +00:00
Oliver Medhurst
60fd406903 LibWeb: Fix inside list style overriding content offset
Previously, if a horizontal margin was set on a list-item and
it was list-style-position: inside, it would effectively remove
that margin.
2025-03-27 23:10:09 +00:00
Oliver Medhurst
b272bb3373 LibWeb: Fix ::marker placement in tree
Fixes ::marker (pseudo-element) placement in the tree for list-items.

Previously:
- ::before
- content
- ::marker
- ::after

Now (matches Firefox, afaik per-spec):
- ::marker
- ::before
- content
- ::after
2025-03-27 23:10:09 +00:00
Jelle Raaijmakers
15103d172c LibWeb: Apply remaining vertical float clearance to next block level box
Whenever we generate line boxes, we might end up with a residual
vertical float clearance by way of having a `<br>` with `clear: ..` set.
Set the Y offset of the next block level box to place by this vertical
clearance.

Relates to #4058.
2025-03-27 17:21:56 +00:00
Jelle Raaijmakers
683d6b77dd LibWeb: Apply vertical clearance to next line after <br> with clear:
We were introducing a line break and applying vertical clearance to the
inline formatting context, but that vertical clearance only applied to
new floating boxes. We should move the current block offset to the
vertical clearance to make sure the next line box starts beyond the
cleared floats.

There was a layout test for `<br>` with `clear: ..` set, but that test
did not actually do anything - removing the `clear` property would
result in the same layout. Replace that test with something that
actually tests float clearing.

Relates to #4058.
2025-03-27 13:57:59 +00:00
Jelle Raaijmakers
c4bb74f40b LibWeb: Fix and improve float positioning behavior
Our recent change to get rid of the "move 1px at a time" algorithm in
the float positioning logic introduced the issue that potentially
intersecting float boxes were not evaluated in order anymore. This could
result in float boxes being pushed down further than strictly necessary.

By finding the highest point we can move the floating box to and
repeating the process until we're no longer intersecting any floating
box, we also solve some edge cases like intersecting with very long
floating boxes whose edges lay outside the current box' edges.

This is by no means the most efficient solution, but it is more correct
than what we had until now.

Fixes #4110.
2025-03-27 10:56:13 +00:00
Jelle Raaijmakers
f340f8682b LibWeb: Do not clear float sides for floating boxes with clear: ..
Some checks are pending
CI / Lagom (arm64, Sanitizer_CI, false, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (x86_64, Fuzzers_CI, false, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, false, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, true, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
We used to always clear the side data after encountering a box with
`clear: ..`, but this is not the right thing to do if that same box also
has `float: ..` set. For example, with `clear: right` and `float: left`
it might be that the next box still wants to clear the right side, and
since the previous box is floating it did not push the next box down far
enough to justify clearing the side data at that point.

This changes the logic to only clear the float side if the clearing box
itself is not floating. We also no longer clear the opposite side after
placing a floating box; that doesn't seem to be necessary anymore.

Fixes #4102.
2025-03-27 00:56:56 +00:00
Jelle Raaijmakers
002e79a658 LibWeb: Exclude trailing whitespace from line width when placing floats
When generating line boxes, we place floats simultaneously with the
other items on the same line. The CSS text spec requires us to trim the
whitespace at the end of each line, but we only did so after laying out
all the line boxes.

This changes the way we calculate the current line box width for floats
by subtracting the amount of pixels that the current trailing whitespace
is using.

Fixes #4050.
2025-03-26 19:35:38 +00:00
Aliaksandr Kalenik
7cae4fadbc LibWeb: Cache "has size containment" flag in Layout::Box
Allows us to avoid DOM node lookup whenever we need to query natural
size of a box during layout.

Makes 3-4% of `Box::preferred_aspect_ratio()` go away from profiles on
www.nyan.cat
2025-03-26 17:52:02 +00:00
Aliaksandr Kalenik
85e28a29f0 LibWeb: Replace 1px iteration in y_for_float_to_be_inserted_here()
...with a loop through already inserted floating boxes that probes
potential insertion points on their edges.

Makes www.nyan.cat go faster.
2025-03-26 13:51:11 +00: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
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
Sam Atkins
2c86fd539d LibWeb: Generate an enum for generated pseudo-elements 2025-03-24 09:49:50 +00:00
Sam Atkins
0ed2e71801 LibWeb/CSS: Move and rename PseudoElement types to prep for code gen
The upcoming generated types will match those for pseudo-classes: A
PseudoElementSelector type, that then holds a PseudoElement enum
defining what it is. That enum will be at the top level in the Web::CSS
namespace.

In order to keep the diffs clearer, this commit renames and moves the
types, and then a following one will replace the handwritten enum with
a generated one.
2025-03-24 09:49:50 +00:00
Aliaksandr Kalenik
c49dd2036b LibWeb: Mark height as definite before doing inner layout of abspos
...boxes with non-auto height.

We know for sure that by the time we layout abspos boxes, their
containing block has definite height, so it's possible to resolve
non-auto heights and mark it as definite before doing inner layout.

Big step towards having reasonable performance on
https://demo.immich.app/photos because now we avoid a bunch of work
initiated by mistakenly invoked intersection observer callbacks.

Co-Authored-By: Andreas Kling <andreas@ladybird.org>
2025-03-21 14:46:31 -05:00
Aliaksandr Kalenik
9ec986753a LibWeb: Delete const from GridDimension function parameters in GFC
Using const on primitive type was only adding unnecessary noise.
2025-03-21 15:19:39 +01:00
Aliaksandr Kalenik
76482559d0 LibWeb: Unify grid item's width and height resolution in GFC
It was annoying to maintain two separate but almost identical functions
that gradually accumulated small differences over time. This change
replaces them with a single function that resolves either width or
height, depending on the specified dimension.
2025-03-21 15:19:39 +01:00
Aliaksandr Kalenik
484cd8a0c3 LibWeb: Move item's available space getter into GridItem method in GFC
No behavior change intended.
2025-03-21 15:19:39 +01:00
Aliaksandr Kalenik
2ce40b5687 LibWeb: Move preferred size getter into GridItem method in GFC
No behavior change intended.
2025-03-21 15:19:39 +01:00
Aliaksandr Kalenik
c40f88ddcb LibWeb: Move minimum/maximum size getter into GridItem method in GFC
No behavior change intended.
2025-03-21 15:19:39 +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
b8fa355a21 LibWeb: Implement "transferred size suggestion" part of GFC spec 2025-03-19 10:21:54 +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
stasoid
a6935299eb LibWeb: Correctly calculate static position rect when absolutely
positioned element is a descendant of inline-block

Sets inline block offsets in InlineFormattingContext.cpp, but this is
not enough. When static position rect is calculated during layout,
not all ancestors of abspos box may have their offsets calculated yet
(more info here: https://github.com/LadybirdBrowser/ladybird/pull/2583#issuecomment-2507140272).
So now static position rect is calculated relative to static containing
block during layout and calculation relative to actual containing block
is done later in
FormattingContext::layout_absolutely_positioned_element.

Fixes wpt/css/CSS2/abspos/static-inside-inline-block.html
2025-03-17 15:55:06 +01:00
Sam Atkins
95730c66aa LibWeb: Make non-replaced flex items make use of transferred size
Corresponds to 9beaea1f2a
2025-03-17 09:35:58 +00:00
Aliaksandr Kalenik
2e256d2eac LibWeb: Invalidate text-decoration-thickness as paint-only property
Fixes underinvalidation caused by resolving text-decoration-thickness
during layout commit, while this property can be invalidated
independently of layout.
2025-03-16 22:25:26 +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
Aliaksandr Kalenik
227b4c38b7 LibWeb: Use parent's available space for anonymous blocks in BFC
Height resolution assumes that when available space is definite, it
matches the size of non-anonymous containing block. With this change, we
correctly maintain this assumption when box is wrapped in anonymous
node.

Fixes https://github.com/LadybirdBrowser/ladybird/issues/3422
2025-03-15 13:31:07 +01:00
Aliaksandr Kalenik
733d124380 LibWeb: Delete root pointer in LayoutState
It's no longer needed after we moved intrinsic sizes cache into layout
nodes.
2025-03-14 01:27:40 +01:00
Aliaksandr Kalenik
76aa99a626 LibWeb: Update HTMLSlotElement subtree during partial layout tree build
Before this change, the layout tree for slots was only updated after
creating a layout node for the slot itself. This was not enough to
account for partial layout tree rebuilds when the slot content changed.
With this change, we always recurse into the slot content.

Fixes expanding and collapsing of nodes in DOM tree inspector broken in
9b26f7eb0f
2025-03-13 04:29:26 +01:00
Tim Ledbetter
88d35c547c LibWeb/CSS: Implement the caret-color property 2025-03-09 19:36:29 +01:00
Aliaksandr Kalenik
667cb01b60 LibWeb: Fix layout mode propagation in SVGFormattingContext 2025-03-09 18:40:37 +01:00
Aliaksandr Kalenik
a4463c45b9 LibWeb: Bring back cache of intrinsic sizes across layout runs
12c6ac78e2 with fixed mistake when cache
slot is copied instead of being referenced:
```cpp
auto cache =
    box.cached_intrinsic_sizes().min_content_height.ensure(width);
```
while it should've been:
```cpp
auto& cache =
    box.cached_intrinsic_sizes().min_content_height.ensure(width);
```
2025-03-08 14:52:33 +01:00
Andreas Kling
73a4b176cf Revert "LibWeb: Cache intrinsic sizes across layout runs"
This reverts commit 12c6ac78e2.

Very large performance regression when viewing GitHub repository pages.
2025-03-08 12:08:51 +01:00
Aliaksandr Kalenik
12c6ac78e2 LibWeb: Cache intrinsic sizes across layout runs
This change moves intrinsic sizes cache from
LayoutState, which is local to current layout run,
to layout nodes, so it could be reused between
layout runs. This optimization is possible because
we can guarantee that these measurements will
remain unchanged unless the style of the element
or any of its descendants changes.

For now, invalidation is implemented simply by
resetting cache on whole ancestors chain once we
figured that element needs layout update.
The case when layout is invalidated by DOM's
structural changes is covered by layout tree
invalidation that drops intrinsic sizes cache
along with layout nodes.

I measured improvement on couple websites:
- Mail list on GMail 28ms -> 6ms
- GitHub large code page 47ms -> 36ms
- Discord chat history 15ms -> 8ms
(Time does not include `commit()`)
2025-03-08 11:45:36 +01:00
Andreas Kling
267b84ebb6 LibWeb: Skip flex/grid layout when doing intrinsic sizing for ancestor
We don't need to perform inside layout of flex and grid formatting
contexts when one of their ancestors is undergoing intrinsic size
measurement. This is because the parent formatting context will have
already sized the flex/grid container, and thus inside layout is
completely redundant work.
2025-03-08 03:37:38 +01:00
Aliaksandr Kalenik
dd78d5d50e LibWeb: Don't layout grid descendants in intrinsic layout mode
We already have a check to skip the layout of descendants if the
available size is intrinsic, but this is not sufficient in nested
intrinsic layout cases, where the available size might be definite even
though we are in intrinsic layout mode.
2025-03-05 21:40:59 +01:00
Aliaksandr Kalenik
b51c026f3d LibWeb: Don't layout flex descendants in intrinsic layout mode
We already have a check to skip the layout of descendants if the
available size is intrinsic, but this is not sufficient in nested
intrinsic layout cases, where the available size might be definite even
though we are in intrinsic layout mode.
2025-03-05 21:40:59 +01:00
Lukas Scheller
ce93088a81 LibWeb: Respect margin boxes when center-aligning flex items 2025-03-05 18:07:10 +01:00
Tommy van der Vorst
056205aa76 LibWeb/CSS: Treat 'mask' as a longhand property
Before this change, an element masked with 'mask-image: url(...)' would
show the mask, but 'mask: url(...)' would not. On e.g. dialogic.nl it
would show white boxes instead of the actual images in the top
navigation bar. We still do not support many of the other mask
properties, but with this change at least the masks show up in both
cases.
2025-03-05 12:10:02 +00:00
Aliaksandr Kalenik
da5d4e9f6a LibWeb: Assign sticky insets to Layout::InlineNode
Before this change we were ignoring boxes with `display: inline` while
assigning sticky insets. This was not correct because inline boxes are
allowed to have sticky positioning.

Fixes:
https://github.com/LadybirdBrowser/ladybird/issues/3718
https://github.com/LadybirdBrowser/ladybird/issues/3507
https://github.com/LadybirdBrowser/ladybird/issues/3133
2025-02-27 19:55:46 +01:00