Commit graph

66 commits

Author SHA1 Message Date
Aliaksandr Kalenik
5a874cc62a LibWeb: Remove ClippableAndScrollable mixin
Initially ClippableAndScrollable was introduced, because we had
PaintableBox and InlinePaintable and both wanted to share clipping and
scrolling logic. Now, when InlinePaintable is gone, we could inline
ClippableAndScrollable implementation into PaintableBox.
2025-07-07 22:04:25 +02:00
Aliaksandr Kalenik
c0526b085d LibWeb: Make apply_scroll_offset and reset_scroll_offset non-virtual 2025-07-07 18:55:30 +02:00
Aliaksandr Kalenik
773d19b406 LibWeb: Apply either enclosing or own clip rect depending on PaintPhase
Previously, we always applied the enclosing clip rectangle for all paint
phases except overlays, and the own clip rectangle for the background
and foreground phases. The problem is that applying a clip rectangle
means emitting an AddClipRect display list item for each clip rectangle
in the containing block. With this change, we choose whether to include
the own clip based on the paint phase and this way avoid emitting
AddClipRect for enclosing clip rectangles twice.
2025-07-07 18:55:30 +02:00
Aliaksandr Kalenik
85001185a7 LibWeb: Remove unnecessary apply_own_clip_rect() in PaintableWithLines
Some checks are pending
CI / macOS, arm64, Sanitizer_CI, Clang (push) Waiting to run
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
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
Own clip rect is alredy applied in `PaintableBox::before_paint()` for
all paintables with lines, so there's no need to do it once again in
`PaintableWithLines::paint()`.
2025-07-06 21:56:02 +01:00
Jelle Raaijmakers
2cc8f0821c LibWeb: Don't hit test anonymous containers if there are no fragments
We were always delegating hit tests to PaintableBox if a
PaintableWithLines has no fragments, which means that anonymous
containers could overlap with previous siblings and prioritize their
border box rect. Instead, the nearest non-anonymous ancestor should take
care of hit testing the children so the correct order is maintained.

To achieve this, we no longer do an early hit test in
PaintableWithLines::hit_test() if there are no fragments and default
to the later PaintableBox::hit_test() call that does take anonymous
containers into account.

Fixes the issue seen in #4864.
2025-07-05 23:56:42 +01:00
Jelle Raaijmakers
c24be6a39d LibWeb: Extract hit testing on children into a separate method
This way we can reuse the logic between PaintableWithLines and
PaintableBox. It also introduces the .is_positioned() check for the
children of a PaintableWithLines, which makes sure to skip positioned
child nodes since those are handled by the StackingContext.
2025-07-05 23:56:42 +01:00
Jelle Raaijmakers
e3864f9a9e LibWeb: Do not hit test anonymous containers' box for inline content
A PaintableWithLines will first try to see if there are any fragments
that have a hit. If not, it falls back to hit testing against its border
box rect.

However, inline content is often hoisted out of its parent into an
anonymous container to maintain the invariant that all layout nodes
either have inline or block level children. If that's the case, we
should not check the border box rect of the anonymous container, because
we might trigger a hit too early if the node has previous siblings in
its original parent node that overlap with their bounds.

By ignoring anonymous nodes, we leave the border box hit testing to the
nearest non-anonymous ancestor, which correctly applies the hit testing
order to its children.

Note that the border box rect checks whether the _untransformed_ point
is inside of it, which mirrors the behavior of PaintableBox::hit_test().
2025-07-05 23:56:42 +01:00
Tim Ledbetter
212d748ded LibWeb: Apply clip rect before painting background and foreground items 2025-06-24 12:56:28 +01:00
Sam Atkins
f98312d022 LibWeb/DOM: Move pseudo-element scroll offsets into PseudoElement 2025-06-19 12:35:31 +01:00
Jelle Raaijmakers
e56146edec LibWeb: Limit scroll bar thumb movement based on grab point
We were calculating the scroll delta based on the last known mouse
position, even if that position ventured far beyond the scroll bar's
rect. This caused weird behavior such as scrolling when the mouse was
clearly not on the scrollbar.

This reworks the scrollbar logic to use the mouse's absolute position
instead of a delta, and to always calculate and set the absolute scroll
offset. This makes it much easier to reason about the scrollbar's
position, plus we don't need the last mouse position anymore.

As far as I can tell, our scroll bar behavior now closely resembles
Firefox' behavior.
2025-06-19 07:03:54 -04:00
Tim Ledbetter
e0af205d69 LibWeb/CSS: Implement the empty-cells property
This property sets whether table borders and backgrounds are painted
if a given table cell has no visible content.
2025-06-18 14:55:03 +01:00
Jelle Raaijmakers
046d1169de LibWeb: Only calculate enclosing rect for fragments if we use it
This would show up in profiles for pages with lots of fragments. No
functional changes.
2025-06-17 11:55:28 +02:00
Jelle Raaijmakers
7beecaa43d LibWeb: Rename PaintableFragment::m_start and ::m_length
Make it extra clear that we're dealing with byte offsets here. No
functional changes.
2025-06-13 15:08:26 +02:00
Jelle Raaijmakers
3df83dade8 LibWeb: Treat DOM::Range offsets as UTF-16 code unit offsets
We generated `PaintableFragment`s with a start and length represented in
UTF-8 byte offsets, but failed to consider that the offsets in a
`DOM::Range` are actually expressed in UTF-16 code units.

This is a bit of a mess: almost all web specs use UTF-16 code units as
the unit for indexing into text nodes, but we almost exclusively use
UTF-8 in our code base. Arguably the best thing would for us to use
UTF-16 everywhere as well: it prevents these mismatches in our
implementations for the price of a bit more memory usage - and even that
could potentially be optimized for.

But for now, try to do the correct thing and lazily allocate UTF-16 data
in a `PaintableFragment` whenever we need to index into it or if we're
asked to determine the code unit offset of a pixel position.
2025-06-13 15:08:26 +02:00
Jelle Raaijmakers
9126507dc6 LibWeb: Make fragment start/length size_t instead of int
These must always be unsigned. No functional changes.
2025-06-13 15:08:26 +02:00
Tim Ledbetter
e2d0d8e2b9 LibWeb/CSS: Implement the scrollbar-color property
This allows the user to set the scrollbar thumb and track colors.
2025-06-02 00:17:51 +02:00
Lucien Fiorini
0fcb574041 LibGfx+LibWeb: Turn Gfx::Filter into a SkImageFilter wrapper 2025-06-01 23:22:10 +02:00
Psychpsyo
85883ee5ce LibWeb: Deduplicate clipping code
This makes it so that PaintableWithLines no longer has its own
bespoke clipping logic, using the same code as regular scroll/
overflow clipping.
2025-05-13 15:30:14 +03:00
Timothy Flynn
c846616d51 LibWeb: Adjust positions by the scroll offset for scrollbar hit testing
This ensures we scroll to the correct position when dragging a scrollbar
or clicking its gutter.
2025-05-08 10:40:58 +01:00
Timothy Flynn
22532c769c LibWeb: Be less lenient in scrollbar hit testing
A scrollbar contains a mouse position only if its gutter rect contains
that position. We were incorrectly deciding a position was contained if
it fell to the right of a vertical scrollbar, or below a horizontal
scrollbar.
2025-05-08 10:40:58 +01:00
Psychpsyo
dbece92637 LibWeb: Make elements with 'opacity: 0' respond to hit-testing
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
2025-05-07 01:45:07 +03:00
Jonne Ransijn
e5d89c72a6 LibWeb: Remove unuses variable in PaintableBox.cpp 2025-04-22 21:19:31 -06:00
Timothy Flynn
4cd186f3f5 LibWeb: Adjust the scroll offset when the scrollbar gutter is clicked
This allows clicking on the scrollbar gutter to scroll to the offset
indicated by the mouse position.
2025-04-22 11:29:06 -04:00
Timothy Flynn
a135ce528e LibWeb: Move adjustmust of scrollbar offset into compute_scrollbar_data
Currently, compute_scrollbar_data does not adjust the position of the
scrollbar thumb based on the actual scroll offset. This is because we
perform this offset in most cases inside the display list executor, in
order to allow us to avoid recomputing the display list.

However, there are cases where we do want the thumb rect with an offset
inside PaintableBox. We currently use scroll_thumb_rect to perform that
computation.

In an upcoming patch, we will need both this offset thumb rect and the
scrollbar gutter rect. So this patch moves the computation of the offset
to compute_scrollbar_data, performed behind an optional parameter.
2025-04-22 11:29:06 -04:00
Timothy Flynn
66e422b4f1 LibWeb: Draw a scrollbar gutter when the scrollbar is enlarged 2025-04-22 11:29:06 -04:00
Timothy Flynn
843468dbf8 LibWeb: Enlarge scrollbars that are interacting with the mouse
When a scrollbar is not interacting with the mouse, we now draw the
scrollbar slightly slimmer. When the mouse enters the space occupied
by the scrollbar, we enlarge it for easier mouse interactivity.
2025-04-22 11:29:06 -04:00
Andreas Kling
c394344e7d LibWeb: Put PaintableWithLines in dedicated GC allocator 2025-04-22 12:09:42 +02:00
Aliaksandr Kalenik
8e2d1559ec LibGfx: Join ScaledFont into Font
Since ScaledFont is the only class inherited from Font we could simply
merge them.
2025-04-21 09:51:16 +02: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
9e287465b9 LibWeb: Fix CSS transform invalidation when transitioning to none
Fixes https://github.com/LadybirdBrowser/ladybird/issues/2707
2025-03-15 13:30:45 +01:00
Tim Ledbetter
88d35c547c LibWeb/CSS: Implement the caret-color property 2025-03-09 19:36:29 +01:00
Vaxry
c5d0af54d0 LibWeb: Don't handle scroll if no axes are accepted
In some cases, we might be hovering directly on an element
scrollable e.g. horizontally, but we are scrolling vertically.
In these cases, we need to delegate the scroll to the parent
instead of stalling the user's scroll.
2025-03-01 23:54:48 +01:00
Sam Atkins
532c01c388 LibWeb: Implement text-decoration: spelling-error and grammar-error 2025-02-28 16:34:08 +00:00
Sam Atkins
bfd7ac1204 LibWeb+WebContent+UI: Support image cursors
The `cursor` property accepts a list of possible cursors, which behave
as a fallback: We use whichever cursor is the first available one. This
is a little complicated because initially, any remote images have not
loaded, so we need to use the fallback standard cursor, and then switch
to another when it loads.

So, ComputedValues stores a Vector of cursors, and then in EventHandler
we scan down that list until we find a cursor that's ready for use.

The spec defines cursors as being `<url>`, but allows for `<image>`
instead. That includes functions like `linear-gradient()`.

This commit implements image cursors in the Qt UI, but not AppKit.
2025-02-28 13:50:13 +01:00
Sam Atkins
fd2414ba35 LibWeb/Painting: Call Base::resolve_paint_properties() from children 2025-02-28 13:50:13 +01:00
Timothy Flynn
72905c84d5 LibWeb+LibWebView+WebContent: Support both inspecting/highlighting nodes
Our own Inspector differs from most other DevTools implementations with
regard to highlighting DOM nodes as you hover elements in the inspected
DOM tree. In other implementations, as you change the hovered node, the
browser will render a box model overlay onto the page for that node. We
currently don't do this; we wait until you click the node, at which
point we both paint the overlay and inspect the node's properties.

This patch does not change that behavior, but separates the IPCs and
internal tracking of inspected nodes to support the standard DevTools
behavior. So the DOM document now stores an inspected node and a
highlighted node. The former is used for features such as "$0" in the
JavaScript console, and the latter is used for the box model overlay.
Our Inspector continues to set these to the same node.
2025-02-24 12:05:29 -05:00
InvalidUsernameException
be47f95180 LibWeb: Reduce number of recompiled files for display list headers
This reduces the number of `.cpp` files that need to be recompiled when
one of the below header files changes as follows:

Painting/Command.h: 1030 -> 61
Painting/DisplayList.h: 1030 -> 60
Painting/DisplayListRecorder.h: 557 -> 59
2025-02-23 10:14:39 -05:00
Jelle Raaijmakers
f204970052 LibWeb: Ignore fragments with pointer-events: none in hit-testing 2025-01-31 13:37:15 +01:00
Aliaksandr Kalenik
a4c331c199 LibWeb: Fix unnecessary wheel event consumption with overflow: scroll
Allow wheel event to be consumed by a `overflow: scroll` box only if it
has content that overflows a scrollport.

This fixes the timing issue in the
`Text/input/scroll-window-using-wheel-event.html` test, where a `<body>`
element with `overflow: scroll` was incorrectly consuming wheel events
that should have propagated to the window.
2025-01-31 00:11:34 +01:00
Aliaksandr Kalenik
74dde4dc0f LibWeb: Rename is_scrollable() to could_be_scrolled_by_wheel_event()
Previous name for misleading because it checks if box could be scrolled
by user input event which is diffent from checking if box is scrollable.
For example box with `overflow: hidden` is scrollable but it can't be
scrolled by user input event.
2025-01-31 00:11:34 +01:00
Jelle Raaijmakers
84c4702b10 LibWeb: Handle continuation chain during hit-testing instead of after it
My previous attempt at resolving the continuation chain tried to deal
with `pointer-events: none` by repeatedly falling back to the parent
paintable until one was found that _would_ want to handle pointer
events. But since we were no longer performing hit-tests on those
paintables, false positives could pop up. This could happen for
out-of-flow block elements that did not overlap with their parent rects,
for example.

This approach works much better since it only handles the continuation
case that's relevant (the "middle" anonymous box) and it does so during
hit-testing instead of after, allowing all the other relevant logic to
come into play.
2025-01-26 17:30:00 +01:00
Jelle Raaijmakers
b7a554d1f2 LibWeb: Reorder paintable hit-testing to account for pointer-events
Instead of ignoring any paintable immediately when they're invisible to
hit-testing, consider every candidate and while the most specific
candidate is invisible to hit-testing, traverse up to its parent
paintable.

This more closely reflects the behavior expected when wrapping block
elements inside inline elements, where although the block element might
have `pointer-events: none`, it still becomes part of the hit-test body
of the inline parent.

This makes the following link work as expected:

  <a href="https://ladybird.org">
    <div style="pointer-events: none">Ladybird</div>
  </a>
2025-01-23 09:33:10 +01:00
Jelle Raaijmakers
e076cb9b0e LibWeb: Simplify hit testing coordinate calculations
There are many simpler APIs that we can use here. No functional changes.
2025-01-23 09:33:10 +01:00
Jelle Raaijmakers
336684bc5c LibWeb: Support inserting non-inline elements into inline elements
Our layout tree requires that all containers either have inline or
non-inline children. In order to support the layout of non-inline
elements inside inline elements, we need to do a bit of tree
restructuring. It effectively simulates temporarily closing all inline
nodes, appending the block element, and resumes appending to the last
open inline node.

The acid1.txt expectation needed to be updated to reflect the fact that
we now hoist its <p> elements out of the inline <form> they were in.
Visually, the before and after situations for acid1.html are identical.
2025-01-23 09:33:10 +01:00
Jelle Raaijmakers
7eb4f3da37 LibGfx: Add Rect::unite()
The existing `::unite_horizontally()` and `::unite_vertically()` tests
did not properly test the edge cases where left/top in the Rect were
updated, so they get re-arranged a bit.
2025-01-23 09:33:10 +01:00
Tim Ledbetter
639ed5a052 WebContent+LibWeb: Add an option to disable painting viewport scrollbars 2025-01-15 12:33:53 +00:00
Gingeh
ce5cd012b9 LibWeb/CSS: Implement the color-scheme CSS property 2025-01-08 11:18:13 +00:00
Aliaksandr Kalenik
0b8b690f92 LibWeb+LibWebView: Allow to specify default font size in FontPlugin
Instead of always assuming 12pt size for default font, explicitly pass
it as a parameter.
2025-01-02 10:47:21 +01:00
Andreas Kling
4324439006 LibWeb: Reorder some checks in PaintableWithLines::hit_test for speed
In particular:

- Don't compute DOM node editability if we don't need it. This was 22%
  of CPU time when scrolling on Wikipedia.

- Defer inversion of transformed coordinates until we actually need
  them, after we've performed early returns.
2024-12-30 21:25:20 +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