Commit graph

455 commits

Author SHA1 Message Date
Andreas Kling
28d564197c LibWeb: Compute containing block boxes once at start of layout
We now cache the containing block (box) once at the start of layout,
which allows Layout::Node::containing_block() to return instantly
instead of doing tree traversal.

Removes a 0.7% profile item on Speedometer 3.
2025-04-19 01:14:02 +02:00
Andreas Kling
877391d569 LibWeb: Add more fast_is<T> helpers for layout and paintable nodes 2025-04-18 14:45:56 +02:00
Shannon Booth
3e17b1c9ae LibWeb: Make Node::parent_element return GC::Ptr
This is useful for people like myself who run with debug mode to
more reliably get stacktraces without spinning up a debugger.
2025-04-18 10:49:02 +02:00
Andrew Kaster
be2dd91289 LibGfx+LibWeb: Store Typeface and Font-related types in RefPtr to const 2025-04-16 10:41:44 -06:00
Andrew Kaster
6d11414957 LibWeb: Make storage of CSS::StyleValues const-correct
Now we consistently use `RefPtr<StyleValue const>` for all StyleValues.
2025-04-16 10:41:44 -06:00
Gingeh
bbf4f546af LibWeb: Only create backdrop when originating element is invalidated 2025-04-16 09:01:08 -06:00
Jelle Raaijmakers
8257788a20 LibWeb: Ignore negative margins for margin box rect
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 (arm64, macos-15, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (x86_64, 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
Negative margins are processed through the `offset` in layout state, and
should not contribute to the margin box' rect's size or position.

Fixes #4249.
2025-04-11 02:34:28 +01:00
Jelle Raaijmakers
76105d6a02 LibWeb: Use LayoutState::set_content_x/y() where possible
No functional changes.
2025-04-11 02:34:28 +01:00
Jelle Raaijmakers
4a6998497f LibWeb: Don't recalculate margin box rect for preceding floats
We already stored that rect while building up the side data during
floating box layout. No functional changes.
2025-04-11 02:34:28 +01:00
Viktor Szépe
5cc371d54c LibWeb: Fix typos - act II 2025-04-09 15:05:20 +01:00
Gingeh
972547635f LibWeb: Dispatch pointer events to ::backdrop originating element 2025-04-09 12:10:42 +01:00
Gingeh
4b9f5c6fb8 LibWeb: Generate ::backdrop pseudo-elements 2025-04-09 12:10:42 +01:00
Lukas Scheller
852e8ff12f LibWeb: Fix grid placement with named lines 2025-04-05 21:30:37 +02:00
Tim Ledbetter
32812f5db0 LibWeb: Return absolutized computed value for outline width property 2025-04-05 12:54:22 +02:00
Jelle Raaijmakers
99df80f81e LibWeb: Only apply box offset if the box is not already the ancestor
When determining the content/margin box rects within their ancestor's
coordinate space, we were returning early if the passed in values
already belonged to the requested ancestor. Unfortunately, we had
already applied the used values' offset to the rect, which is the offset
to the ancestor's ancestor.

This simplifies the logic to always apply the rect offset after checking
if we've reached the ancestor. Fixes determining float intrusions inside
block elements with `margin: auto` set.

Fixes #4083.
2025-04-04 15:35:26 +02:00
Jelle Raaijmakers
23f0fddeab LibWeb: Let LineBuilder decide on Y-coordinate for float insertion
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
Instead of reaching into the IFC of the LineBuilder from the BFC, we
should let LineBuilder determine how to deal with the running vertical
float clearance. No functional changes.
2025-04-01 16:02:53 +02:00
Jelle Raaijmakers
6d911a6baa LibWeb: Resolve block height correctly after line break with clear: ..
If a block with inline children ends with a line break clearing any
floats, we not only need to take the introduced clearance into account
for the next line box, but the containing block needs to set the correct
height as well.

Since the spec calls for using the last line box' bottom as the resolved
height (if treated as auto), we now correctly apply the clearance to the
previous line box' bottom coordinate.

Fixes #4058.
2025-04-01 16:02:53 +02:00
Jelle Raaijmakers
45905d6f7b LibWeb: Use relative coordinates for available_space_for_line()
We were accidentally providing it with absolute Y-coordinates, messing
up stacked floating boxes that would otherwise intrude on each other.

Fixes #4160.
2025-04-01 15:26:12 +02:00
Jelle Raaijmakers
a728d67ac2 LibWeb: Only calculate float intrusions for definite available width
No functional changes.
2025-04-01 15:26:12 +02:00
Glenn Skrzypczak
9973b01848 LibWeb/CSS: Improved implementation of background-blend-mode
This is a improved version of a73cd88f0c
The old commit was reverted in 552dd18696

The new version only paints an element into a new layer if background
blend modes other than normal are used. The rasterization performance
of most websites should therefore not suffer.

Co-Authored-By: Alexander Kalenik <kalenik.aliaksandr@gmail.com>
2025-04-01 13:38:00 +02:00
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