Commit graph

278 commits

Author SHA1 Message Date
Kenneth Myhra
f7442ae907 LibWeb: Remove unnecessary as_if<SVGGradientPaintStyle>() on paint_style
This causes a compiler error on GCC 15.0.1 and should be unnecessary
since paint_style already is of type SVGGradientPaintStyle.
2025-08-17 21:18:28 +01:00
Tim Ledbetter
ad06ac0d58 LibWeb: Implement the color-interpolation property for SVG gradients
This changes the operating color space for gradient `<linearGradient>`
and `<radialGradient>` elements.
2025-08-17 10:51:05 +02:00
Callum Law
ba62679a7a LibWeb: Make text cursor same height as text
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / 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
Previously we would paint the cursor the entire height of the text
fragment - this didn't look great with large line-heights. Now we only
paint it the height of the actual text, with the top of the cursor
aligning with the font "ascent" and the bottom the "descent".
2025-08-16 15:47:44 +02:00
Sam Atkins
5f986b2c33 LibWeb/Painting: Paint ridge and groove border styles 2025-08-11 11:07:15 +01:00
Sam Atkins
5d4a4e44fe LibWeb/Painting: Paint border-style: double using two solid borders
Call paint_border() recursively, once for the outer line, and once for
the inner one. This is done in a lambda so that we can reuse it for a
couple of other line styles.

Border-radius behaviour doesn't match other browsers, and goes a bit
haywire in some cases. I've left some FIXMEs for someone who
understands the maths here better than I do. 😅

The LineStyle handling is moved to the start of the function, to avoid
unnecessary work.
2025-08-11 11:07:15 +01:00
Sam Atkins
c660df70b4 LibWeb/Painting: Note that inset and outset borders are implemented 2025-08-11 11:07:15 +01:00
Sam Atkins
7c2b8f6ee7 LibWeb/Painting: Move per-edge getter into BordersDataDevicePixels
Reduces some duplication.
2025-08-11 11:07:15 +01:00
Sam Atkins
4e92ab52e3 LibWeb/CSS: Rename CSSKeywordValue -> KeywordStyleValue
The typed-om CSSKeywordValue will need to be a separate class.
2025-08-08 15:19:03 +01:00
InvalidUsernameException
add3a095d8 LibWeb/CSS: Rename background-repeat related symbols to align with spec
These will be used for the mask-repeat property as well in an upcoming
commit, hence the more generic names. Also, this more closely matches
the names used in the spec.
2025-08-06 23:09:07 +01:00
Callum Law
46153910ec LibWeb: Update to_color to take ColorResolutionContext
Using a generic context argument will allow us to resolve colors in
places where we have all the required information but not in the form of
a layout node as was expected previously.
2025-08-04 11:29:05 +01:00
Aliaksandr Kalenik
41e3ddb7fa LibGfx+LibWeb: Remove aa_translation from StrokePath and FillPath
`aa_translation` is something we inherited from times when
AntiAliasingPainter was a thing. This change replaces it by applying
offset directly to path.
2025-08-03 10:42:33 +02:00
Aliaksandr Kalenik
a41d586117 LibWeb: Merge FillPathUsingPaintStyle and FillPathUsingColor
Use `Variant<PaintStyle, Gfx::Color>` in new `FillPath` instead of
duplicating two almost identical display list items.
2025-08-03 10:42:33 +02:00
Aliaksandr Kalenik
5c11a541d3 LibWeb: Merge StrokePathUsingPaintStyle and StrokePathUsingColor
Use `Variant<PaintStyle, Gfx::Color>` in new `StrokePath` instead of
duplicating two almost identical display list items.
2025-08-03 10:42:33 +02:00
Aliaksandr Kalenik
e41c85ec47 LibWeb: Replace DrawTriangleWave with StrokePathUsingColor
There's no need to have separate display list item for drawing triangle
wave when we could simply use StrokePathUsingColor. By switching to
StrokePathUsingColor we could also reduce painting because it supports
filtering out by bounding box.
2025-08-03 10:42:33 +02:00
Jelle Raaijmakers
525f609c9b LibWeb: Reuse display list command nesting level change for verification
No functional changes.
2025-08-01 14:20:51 +02:00
Jelle Raaijmakers
f28b7064ee LibWeb: Add indentation to display list dumps
Output display list dumps with an indentation level to show balanced
commands. It makes it much easier to see what is happening between e.g.
PushStackingContext and PopStackingContext, or SaveLayer and Restore.
2025-08-01 14:20:51 +02:00
Aliaksandr Kalenik
ffa6813b61 LibWeb: Delete unused DisplayListRecorder::display_list() 2025-08-01 13:00:41 +02:00
Aliaksandr Kalenik
5eef78bcd8 LibWeb: Remove params suffix from paint_{inner}outer_box_shadow 2025-08-01 13:00:41 +02:00
Aliaksandr Kalenik
b1c5026b81 LibWeb: Rename painter to recorder in DisplayListRecorderStateSaver 2025-08-01 05:25:56 -04:00
Aliaksandr Kalenik
aea9136239 LibWeb: Remove unnecessary state saving in SVGPathPaintable::paint()
Nothing in this function needs to save painter state.
2025-08-01 05:25:56 -04:00
Aliaksandr Kalenik
0a97de85c9 LibWeb: Move item no-op check from display list player to recorder
If item doesn't produce any output then let's skip appending it to the
display list.
2025-08-01 05:25:56 -04:00
Aliaksandr Kalenik
7d90d9d0a3 LibWeb: Rename m_command_list to m_display_list in DisplayListRecorder 2025-08-01 05:25:56 -04:00
Aliaksandr Kalenik
b265618bfb LibWeb: Rename Command to DisplayListCommand
Gives name more consistent with other display list related classes.
2025-08-01 05:25:56 -04:00
Aliaksandr Kalenik
61114f6d16 LibWeb: Rename PaintContext to DisplayListRecordingContext
PaintContext dates back to a time when display lists didn't exist and it
truly represented "paint context". Renaming it to better align with its
current role.
2025-08-01 05:25:56 -04:00
zac
068974732f LibWeb: Improve cursor appearance
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / 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
`draw_rect` renders the outline of a rectangle.
`fill_rect` seems like a better option for rendering the cursor.
2025-07-31 13:06:56 +02:00
Andreas Kling
3b63582068 LibWeb: More thoroughly detach layout/paint trees from each other
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / 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
Before committing a new layout (and thus building a new paint tree)
we now go through both the old paint tree and the layout tree and detach
them from each other.

This is a little extra work, but it ensures that there are no lingering
references across the trees, which we were apparently accumulating in
some cases on Discord, causing GC leaks.
2025-07-30 16:58:29 -04:00
Andreas Kling
77abe2a84d LibWeb: Allow ImageProvider subclasses to visit additional GC edges
More prep work for CSS content:image.
2025-07-28 22:46:27 +02:00
Andreas Kling
9603aa0745 LibWeb: Allow Layout::ImageBox to be anonymous
This is prep work for CSS content:image, which means pseudo-elements can
be used to generate images without a corresponding DOM node.
2025-07-28 22:46:27 +02:00
Timothy Flynn
67cc02ab59 LibWeb+UI: Add an explicit IPC to handle mouse leave events
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / 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
The faux position we created here is adjusted by the device pixel ratio
later on, which would invoke integer overflow on screens with a DPR
greater than 1.

Instead of creating special data for a mouse move event, let's just add
an explicit leave event handler.
2025-07-28 21:26:33 +02:00
Arran Ireland
9a8599f265 LibGfx+LibMedia+LibWeb: Use new Matrix subscript operator 2025-07-28 09:15:23 +02:00
Aliaksandr Kalenik
a6857a6ce1 LibWeb: Log more useful information in display list dump
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / 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
2025-07-27 10:20:18 +02:00
Aliaksandr Kalenik
789016841e LibWeb: Pass device_pixels_per_css_pixel into DisplayList constructor
Having a setter for `device_pixels_per_css_pixel` was confusing because
display lists are immutable, so it doesn't make sense to override this
value after the display list has been created.
2025-07-27 10:20:18 +02:00
Aliaksandr Kalenik
8e3a42c54e LibWeb: Delete unused is_fixed_position from PushStackingContextParams 2025-07-27 10:20:18 +02:00
Aliaksandr Kalenik
0e8d70d8c3 LibWeb: Rename draw_text_run to draw_glyph_run in DisplayListRecorder
For consistency with corresponding display list item name.
2025-07-27 10:20:18 +02:00
Aliaksandr Kalenik
8569124b87 LibWeb: Fix scroll state refresh in cached display list for iframes
6507d23 introduced a bug when snapshot for iframe is saved in
`PaintNestedDisplayList` and, since display lists are immutable, it's
not possible to update before the next repaint.

This change fixes the issue by moving `ScrollStateSnapshot` for
nested display lists from `PaintNestedDisplayList` to
`HashMap<NonnullRefPtr<DisplayList>, ScrollStateSnapshot>` that is
placed into pending rendering task, making it possible to update
snapshots for all display lists before the next repaint.

This change doesn't have a test because it's really hard to make a ref
test that will specifically check scenario when scroll offset of an
iframe is advanced after display list is cached. We already have
`Tests/LibWeb/Ref/input/scroll-iframe.html` but unfortunately it did
not catch this bug.

Fixes https://github.com/LadybirdBrowser/ladybird/issues/5486
2025-07-26 11:53:21 -04:00
Timothy Flynn
97548f48de LibWeb: Port rendered text to UTF-16
This migrates TextNode::text_for_rendering() to Utf16String and deals
with the fallout. As a consequence, this effectively reverts commit
3df83dade8.

The layout test expecation file updates are because we now express text
lengths and offsets in UTF-16 code units.

The selection-over-multiple-code-units expectation file update actually
represents a correctness fix. Our result now matches Firefox.
2025-07-25 18:16:22 +02:00
Aliaksandr Kalenik
66e1d599f8 LibWeb: Use scroll state from snapshot while applying clip rectangles
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / 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
Fixes race condition introduced in eed47acb when rendering thread
accesses ScrollFrame that could be mutated in the middle of
rasterization by the main thread, resulting in broken rendering.

Fixes https://github.com/LadybirdBrowser/ladybird/issues/5553
2025-07-24 13:03:23 -04:00
Andreas Kling
b4435bd50c LibWeb: Don't clip descendants outside stacking context root rect
Skia allows you to pass a bounding rect to its saveLayer() function as
an optimization when you know that you won't paint outside those bounds.
Unfortunately, we were passing a too-small rectangle that didn't take
into account transformed descendants, etc.

For now, simply pass null instead of a bounding rect. This way, Skia
figures it out internally. It may allocate larger temporary bitmaps than
needed this way, but at least we get more correct results. I've left
re-enabling the optimization as a FIXME in the code.

This fixes unwanted clipping in various parts of the Discord UI.
2025-07-24 11:15:01 -04:00
dmaivel
52a23dc02e AK+LibWeb/CSS: Add lower-greek counter style 2025-07-21 15:18:17 +01:00
Timothy Flynn
9582895759 AK+LibJS+LibWeb+LibRegex: Replace AK::Utf16Data with AK::Utf16String 2025-07-18 12:45:38 -04:00
Jelle Raaijmakers
115e5f42af LibWeb: Improve graphical list item marker positioning
While 788d5368a7 took care of better text
marker positioning, this improves graphical marker positioning instead.

By looking at how Firefox and Chrome render markers, it's clear that
there are three parts to positioning a graphical marker:

  * The containing space that the marker resides in;
  * The marker dimensions;
  * The distance between the marker and the start of the list item.

The space that the marker can be contained in, is the area to the left
of the list item with a height of the marker's line-height. The marker
dimensions are relative to the marker's font's pixel size: most of them
are a square at 35% of the font size, but the disclosure markers are
sized at 50% instead. Finally, the marker distance is always gauged at
50% of the font size.

So for example, a list item with `list-style-type: disc` and `font-size:
20px`, has 10px between its start and the right side of the marker, and
the marker's dimensions are 7x7.

The percentages I've chosen closely resemble how Firefox lays out its
list item markers.
2025-07-17 09:35:09 +01:00
Callum Law
6a9c8d7767 LibWeb: Don't resolve colors with unresolved components
`CSSColorValue`s which have unresolved `calc` components should be able
to be resolved. Previously we would always resolve them but with
incorrect values.

This is useful as we will now be able to now whether we should serialize
colors in their normalized form or not.

Slight regression in that we now serialize (RGB, HSL and HWB) colors
with components that rely on compute-time information as an empty
string, but that will be fixed in the next commit.
2025-07-16 13:05:33 +01:00
Aliaksandr Kalenik
eed47acb1f LibWeb: Expand ClipFrame into clip rectangles during display list replay
Until now, every paint phase of every PaintableBox injected its own
clipping sequence into the display list:
```
before_paint: Save
              AddClipRect (1)
              ...clip rectangles for each containing block with clip...
              AddClipRect (N)

paint:        ...paint phase items...

after_paint:  Restore
```

Because we ran that sequence for every phase of every box, Skia had to
rebuild clip stack `paint_phases * paintable_boxes` times. Worse,
usually most paint phases contribute no visible drawing at all, yet we
still had to emit clipping items because `before_paint()` has no way to
know that in advance.

This change takes a different approach:
- Clip information is now attached as metadata `ClipFrame` to each
  DisplayList item.
- `DisplayListPlayer` groups consecutive commands that share a
  `ClipFrame`, applying the clip once at the start of the group and
  restoring it once at the end.

Going from 10 ms to 5 ms in rasterization on Discord might not sound
like much, but keep in mind that for 60fps we have 16 ms per frame and
there is a lot more work besides display list rasterization we do in
each frame.

* https://discord.com/channels/1247070541085671459/1247090064480014443
  - DisplayList items:  81844  -> 3671
  - rasterize time:     10 ms  -> 5 ms
  - record time:        5 ms   -> 3 ms

* https://github.com/LadybirdBrowser/ladybird
  - DisplayList items:  7902  -> 1176
  - rasterize time:     4 ms  -> 4 ms
  - record time:        3 ms  -> 2 ms
2025-07-14 15:48:28 +02:00
Aliaksandr Kalenik
7e333cdcf7 LibWeb: Separate device pixel conversion helpers from PaintContext
In the upcoming change, device pixel conversion of ClipFrame will
happen during display list replay, where PaintContext is not available,
so let’s move it out of PaintContext.
2025-07-14 15:48:28 +02:00
Aliaksandr Kalenik
8ae7417445 LibWeb: Add internals call to dump display list
It's useful to have tests that dump display list items, so we can more
easily see how changes to the display list recording process affect the
output. Even the small sample test added in this commit shows that we
currently record an unnecessary AddClipRect item for empty paint phases.

For now, the dump doesn't include every single property of an item, but
we can shape it to include more useful information as we iterate on it.
2025-07-13 19:15:05 +02:00
Aliaksandr Kalenik
4f9aca4302 LibWeb: Skip backing store allocation for traversables created for SVG
Recently, we moved the backing store manager into Navigable, which means
we now try to allocate a backing store for all navigables, including
those corresponding to SVG image documents. This change disables that
behavior for all navigables except top-level non-SVG traversables,
because otherwise it causes issues when we stop repainting: the browser
process was notified about an allocated backing stores that does not
correspond to the page, and then all subsequent repaints are ignored
until the window is resized.
2025-07-13 00:06:30 +02:00
Aliaksandr Kalenik
910fd426a2 LibWeb: Allow <svg> to establish a stacking context
83b6bc4 went too far by forbidding SVGSVGElement from establishing a
stacking context. This element type does follow the behavior of CSS
boxes, unlike inner SVG elements like `<rect>`, `<circle>`, etc., which
are not supposed to be aware of concepts like stacking contexts,
overflow clipping, scroll offsets, etc.

This change allows us to delete overrides of `before_paint()` and
`after_paint()` in SVGPaintable and SVGSVGPaintable, because display
list recording code has been rearranged to take care of clipping and
scrolling before recursing into SVGSVGPaintable descendants.

`Screenshot/images/css-transform-box-ref.png` expectation is updated and
fixes a bug where a rectangle at the very bottom of the page was not
clipped correctly.
`Screenshot/images/svg-filters-lb-website-ref.png` has a more subtle
difference, but if you look closely, you’ll see it matches other
browsers more closely now.
2025-07-12 11:01:15 +02:00
Aliaksandr Kalenik
410e82c9fd LibWeb: Rearrange code such that a lot less files include Command.h
Some checks failed
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / 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
Build Dev Container Image / build (push) Has been cancelled
With this change number of recompiled files after modification of
`Command.h` goes down from >1000 to <100.
2025-07-11 17:37:27 +02:00
Aliaksandr Kalenik
193900d661 LibWeb: Cache compiled shaders for masks in DisplayListPlayerSkia
Some checks are pending
CI / Linux, x86_64, Fuzzers_CI, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer_CI, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer_CI, Clang (push) Waiting to run
CI / macOS, arm64, Sanitizer_CI, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / 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
By avoiding recompilation every time `apply_mask_bitmap()` is called, we
save ~5 ms (20ms -> 15ms) in rendering of browser channel on Discord on
my machine.
2025-07-09 19:21:31 +02:00
Andreas Kling
dab1fd265d test-web: Dump stacking context tree in layout test output
This will allow us to test (and catch regressions in) stacking context
tree construction and updates, etc.
2025-07-09 14:36:08 +02:00