1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-16 01:24:59 +00:00
Commit graph

78 commits

Author SHA1 Message Date
Aliaksandr Kalenik
9c99182b1e LibWeb: Change StackingContext::hit_test() to accept callback
This change modifies hit_test() to no longer return the first paintable
encountered at a specified position. Instead, this function accepts a
callback that is invoked for each paintable located at a position, in
hit-testing order.

This modification will allow us to reuse this call for
`Document.elementsFromPoint()` in upcoming changes.
2024-02-14 06:56:22 +01:00
Aliaksandr Kalenik
95d91a37d2 LibWeb: Resolve outline CSS property before paint commands recording
Refactor to resolve paint-only properties before painting, aiming to
stop using layout nodes during recording of painting commands.

Also adds a test, as we have not had any for outlines yet.
2024-02-12 13:38:24 +01:00
Aliaksandr Kalenik
d4932196cc LibWeb: Account for all clipped border radii in containing block chain
With this change, instead of applying only the border-radius clipping
from the closest containing block with hidden overflow, we now collect
all boxes within the containing block chain and apply the clipping from
all of them.
2024-02-11 08:12:31 +01:00
Aliaksandr Kalenik
1ae416fa94 LibWeb: Add compute_combined_css_transform() for PaintableBox
This prepares for upcoming changes where the code that finds combined
CSS transform will be reused in `clear_clip_overflow_rect()`.
2024-02-11 08:12:31 +01:00
Aliaksandr Kalenik
76d1536307 LibWeb: Optimize scroll offset and clip state recalculation
In this commit we have optimized the handling of scroll offsets and
clip rectangles to improve performance. Previously, the process
involved multiple full traversals of the paintable tree before each
repaint, which was highly inefficient, especially on pages with a
large number of paintables. The steps were:

1. Traverse the paintable tree to identify all boxes with scrollable or
   clipped overflow.
2. Gather the accumulated scroll offset or clip rectangle for each box.
3. Perform another traversal to apply the corresponding scroll offset
   and clip rectangle to each paintable.

To address this, we've adopted a new strategy that separates the
assignment of the scroll/clip frame from the refresh of accumulated
scroll offsets and clip rectangles, thus reducing the workload:

1. Post-relayout: Identify all boxes with overflow and link each
   paintable to the state of its containing scroll/clip frame.
2. Pre-repaint: Update the clip rectangle and scroll offset only in the
   previously identified boxes.

This adjustment ensures that the costly tree traversals are only
necessary after a relayout, substantially decreasing the amount of work
required before each repaint.
2024-02-09 16:45:44 +01:00
Aliaksandr Kalenik
4a41a65ec5 LibWeb: Shift button paintable clip rectangle by scroll offset
Rectangles should be recorded using absolute coordinates, including
the scroll offset.
2024-02-06 13:06:16 +01:00
Aliaksandr Kalenik
5484062095 LibWeb: Apply scroll offset to PushStackingContext command
In cases where the stacking context painting requires a separate
bitmap, the destination position needs to be translated by the
scrolling offset to ensure it ends up in the correct position.
2024-02-01 13:38:45 +01:00
Aliaksandr Kalenik
16f1962f10 LibWeb: Use clip rectangles assigned to paintables in hit-testing
This change makes hit-testing more consistent in the handling of hidden
overflow by reusing the same clip-rectangles.

Also, it fixes bugs where the box is visible for hit-testing even
though it is clipped by the hidden overflow of the containing block.
2024-01-30 11:22:22 +01:00
Aliaksandr Kalenik
d27b376699 LibWeb: Store clip border radii in CSSPixels instead of DevicePixels
Paintable boxes should not hold information stored in device pixels.
It should be converted from CSS pixels only by the time painting
command recording occurs.
2024-01-30 11:22:22 +01:00
Aliaksandr Kalenik
556679fedd LibWeb: Account for scroll offset in hit-testing
The hit-testing position is now shifted by the scroll offsets before
performing any checks for containment. This is implemented by assigning
each PaintableBox/InlinePaintable an offset corresponding to the scroll
frame in which it is contained. The non-scroll-adjusted position is
still passed down when recursing to children because the assigned
offset accumulated for nested scroll frames.

With this change, hit testing works in the Inspector.
Fixes https://github.com/SerenityOS/serenity/issues/22068
2024-01-29 09:57:40 +01:00
Aliaksandr Kalenik
0bf82f748f LibWeb: Move clip rect calculation to happen before painting
With this change, clip rectangles for boxes with hidden overflow or the
clip property are no longer calculated during the recording of painting
commands. Instead, it has moved to the "pre-paint" phase, along with
the assignment of scrolling offsets, and works in the following way:

1. The paintable tree is traversed to collect all paintable boxes that
   have hidden overflow or use the CSS clip property. For each of these
   boxes, the "final" clip rectangle is calculated by intersecting clip
   rectangles in the containing block chain for a box.
2. The paintable tree is traversed another time, and a clip rectangle
   is assigned for each paintable box contained by a node with hidden
   overflow or the clip property.

This way, clipping becomes much easier during the painting commands
recording phase, as it only concerns the use of already assigned clip
rectangles. The same approach is applied to handle scrolling offsets.

Also, clip rectangle calculation is now implemented more correctly, as
we no longer stop at the stacking context boundary while intersecting
clip rectangles in the containing block chain.

Fixes:
https://github.com/SerenityOS/serenity/issues/22932
https://github.com/SerenityOS/serenity/issues/22883
https://github.com/SerenityOS/serenity/issues/22679
https://github.com/SerenityOS/serenity/issues/22534
2024-01-28 08:25:28 +01:00
Aliaksandr Kalenik
ef0c390b79 LibWeb: Resolve CSS transform properties during layout commit
Now, instead of resolving "transform" and "transform-origin" during the
construction of the stacking context tree, we do so during the layout
commit.

This is part of a refactoring effort to make the paintable tree
independent from the layout tree.
2024-01-16 21:54:10 +01:00
Aliaksandr Kalenik
7c2713c14f LibWeb: Move set_needs_display() from layout node to paintable
For this method, there is no need to go through the layout node when we
can directly reach the paintable.
2024-01-15 09:00:35 +01:00
Aliaksandr Kalenik
2960bf4ec8 LibWeb: Make inline paintables own their fragments
The paintable tree structure more closely matches the painting order
when fragments are owned by corresponding inline paintables. This
change does not affect the layout tree, as it is more convenient for
layout purposes to have all fragments owned by a block container in
one place.

Additionally, this improves performance significantly on pages with
many fragments, as we no longer have to walk the ancestor chain up
to the closest block container to determine if a fragment belongs
to an inline paintable.
2024-01-13 18:46:41 +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
Aliaksandr Kalenik
3cf5ad002a LibWeb: Allow inline nodes to establish a stacking context
With this change, a stacking context can be established by any
paintable, including inline paintables. The stacking context traversal
is updated to remove the assumption that the stacking context root is
paintable box.
2024-01-05 19:36:55 +01:00
Aliaksandr Kalenik
6c645f3a9f LibWeb: Paint fragments contained by inline node as part of this node
Fragments contained by the inline node should be painted in the
foreground phase for this node, instead of being painted as a part of
the containing PaintableWithLines. This change implements that by
marking all fragments contained by inline nodes so they can be skipped
while painting the content of PaintableWithLines. This is an ugly way,
and instead, we should make InlinePaintables own all fragments
contained by them.
2024-01-05 19:36:55 +01:00
Aliaksandr Kalenik
ac6b3c989d LibWeb: Apply scroll boxes offsets after painting commands recording
With this change, instead of applying scroll offsets during the
recording of the painting command list, we do the following:
1. Collect all boxes with scrollable overflow into a PaintContext,
   each with an id and the total amount of scrolling offset accumulated
   from ancestor scrollable boxes.
2. During the recording phase assign a corresponding scroll_frame_id to
   each command that paints content within a scrollable box.
3. Before executing the recorded commands, translate each command that
   has a scroll_frame_id by the accumulated scroll offset.

This approach has following advantages:
- Implementing nested scrollables becomes much simpler, as the
  recording phase only requires the correct assignment of the nearest
  scrollable's scroll_frame_id, while the accumulated offset from
  ancestors is applied subsequently.
- The recording of painting commands is not tied to a specific offset
  within scrollable boxes, which means in the future, it will be
  possible to update the scrolling offset and repaint without the need
  to re-record painting commands.
2023-12-30 11:10:24 +01:00
Aliaksandr Kalenik
b2abd1dd05 LibWeb: Resolve box shadow data for paintable boxes during layout
Step towards making the paintable tree independent of the layout tree.
2023-12-19 21:08:51 +01:00
Aliaksandr Kalenik
6b79508c08 LibWeb: Use offset of nearest scrollable ancestor for positioned boxes
Because positioned descendants are painted out-of-order we need to
separately apply offset of nearest scrollable box for them.

Fixes https://github.com/SerenityOS/serenity/issues/20554
2023-12-11 20:37:05 +01:00
Aliaksandr Kalenik
2952f01e84 LibWeb: Add pair of methods to apply/reset scroll offset of paintable
Separate scroll application from before_children_paint and
after_children_paint.
2023-12-11 20:37:05 +01:00
Aliaksandr Kalenik
d1d6da6ab6 LibWeb: Resolve border radius during layout and save it in paintables
This change fixes a problem that we should not call `to_px()` to
resolve any length or percentage values during paintables traversal
because that is supposed to happen while performing layout.

Also it improves performance because before we were resolving border
radii during each painting phase but now it happens only once during
layout.
2023-12-07 10:52:47 +01:00
Aliaksandr Kalenik
e8960cf754 LibWeb: Move BorderRadiusCornerClipper allocation into CPU executor
BorderRadiusCornerClipper usage to clip border radius is specific to
CPU painter so it should not be stored in painting commands.

Also with this change bitmaps for corner sampling are allocated during
painting commands replaying instead of commands recording.
2023-12-06 13:05:59 +01:00
Aliaksandr Kalenik
063e66cae9 LibWeb: Introduce RecordingPainter to serialize painting commands
This modification introduces a new layer to the painting process. The
stacking context traversal no longer immediately calls the
Gfx::Painter methods. Instead, it writes serialized painting commands
into newly introduced RecordingPainter. Created list of commands is
executed later to produce resulting bitmap.

Producing painting command list will make it easier to add new
optimizations:
- It's simpler to check if the painting result is not visible in the
  viewport at the command level rather than during stacking context
  traversal.
- Run painting in a separate thread. The painting thread can process
  serialized painting commands, while the main thread can work on the
  next paintable tree and safely invalidate the previous one.
- As we consider GPU-accelerated painting support, it would be easier
  to back each painting command rather than constructing an alternative
  for the entire Gfx::Painter API.
2023-10-18 10:58:42 +02:00
MacDue
909bcfe9a4 LibWeb: Resolve and paint simple SVG masks
This allows applying SVG <mask>s to elements. It is only implemented for
the simplest (and default) case:

	- mask-type = luminance
 	- maskContentUnits = maskContentUnits
 	- maskUnits = objectBoundingBox
	- Default masking area

It should be possible to extend to cover more cases. Though the layout
for maskContentUnits = objectBoundingBox will be tricky to figure out.
2023-09-19 10:46:05 +02:00
Andreas Kling
1f69e9cddf LibWeb: Remove Layout::Node::m_visible and compute it on the fly
This fixes an issue where the value would be out of sync with reality
in anonymous wrapper block boxes, since we forgot to compute m_visible
after assigning the computed values to them.

Fixes #21106
2023-09-18 14:45:20 +02:00
Zaggy1024
9d4a1ac2b3 LibWeb: Apply CSS clip property to an element as well as its children
d06d4eb made the `clip` property apply to children of an absolute-
positioned element, but caused it not to be applied to the element the
property was applied to directly.

To fix this, apply the clip in new `before_paint()` and `after_paint()`
functions. Doing so keeps painter state from leaking from `paint()`,
but still allows subclasses of `PaintableBox` clip their contents
correctly without repeating the application of the clip rectangle.
2023-09-01 09:40:14 +02:00
Andreas Kling
c01c4b41e2 LibWeb: Add ViewportPaintable to represent viewports in the paint tree
This patch just adds the new root paintable and updates the tests
expectations. The next patch will move painting logic from the layout
viewport to the paint viewport.
2023-08-20 05:02:59 +02:00
Andreas Kling
136ac1a6a5 LibWeb: Add virtuals to check if Paintable is PBox or PWithLines
Instead of inferring the type of paintables by looking at the type of
their origin in the layout tree, let's ask them directly.
2023-08-20 05:02:59 +02:00
Andreas Kling
79db9c27c6 LibWeb: Rename PaintableBox::effective_offset() => offset()
Since this function no longer does any computation, just "offset" seems
like a fine name.
2023-08-15 16:37:11 +02:00
Andreas Kling
25a3d0d643 LibWeb: Resolve relative offsets *once* after layout
Instead of applying relative offsets (like position:relative insets)
during painting and hit testing, we now do a pass at the end of layout
and assign the final resolved offsets to paintables.

This makes painting and hit testing easier since they don't have to
think about relative offsets, and it also fixes a bug where offsets were
not applied to text fragments inside inline-flow elements that were
themselves position:relative.
2023-08-15 16:37:11 +02:00
Aliaksandr Kalenik
cdf8b9e943 LibWeb/Painting: Translate by scroll offset before painting descendants
Fixes painting of nested nodes in scrollable containers by moving
painter's scroll offset translation from paint_node() to
before_children_paint() and after_children_paint().
2023-08-08 16:55:14 +02:00
Aliaksandr Kalenik
fee5b4deb6 LibWeb: Move set_scroll_offset() from Layout::Box to PaintableBox
Nodes in layout tree should not be aware of scroll state.
2023-08-07 05:23:31 +02:00
Aliaksandr Kalenik
5b7926fa53 LibWeb: Move scroll_offset() from Layout::Box to PaintableBox
Nodes in layout tree should not be aware of scroll state.
2023-08-07 05:23:31 +02:00
Aliaksandr Kalenik
23a07a8ab6 LibWeb: Introduce PaintableBox::scroll_by()
Moves code responsible for calculation of new scroll offset into
scroll_by() so it could be reused for JS functions that trigger
scroll.
2023-08-07 05:23:31 +02:00
Aliaksandr Kalenik
c7673605bb LibWeb: Move mouse wheel handling from Paintable to PaintableBox
It is only PaintableBox that can have scrollable overflow so it doesn't
make sense to have handle_mousewheel() implementation in Paintable.

Also new implementation of handle_mousewheel() takes in account overflow
limits from scrollable_overflow_rect().
2023-08-07 05:23:31 +02:00
Andi Gallo
a7166eb103 LibWeb: Complete table border conflict resolution
Add the element type and grid position to the algorithm and change the
table borders painting to apply the new criteria to corners as well.
2023-07-25 15:21:04 +02:00
Andreas Kling
bf25568703 LibWeb: Bring measuring of scrollable overflow closer to spec
Importantly, we now only consider overflow from descendants with
explicltly visible overflow, and only from descendants that have the
measured box as their containing block.

Also, we now measure scrollable overflow for all boxes, not just scroll
containers. This will allow us to fix a long-standing paint problem in
the next commit.
2023-07-13 05:09:08 +02:00
Andi Gallo
4c81d39483 LibWeb: Adjust border widths for tables using collapsing borders
When using the collapsing border model, cells on either side of the edge
get half the specified width of the border for their box model.
2023-07-09 06:29:43 +02:00
Timothy Flynn
c911781c21 Everywhere: Remove needless trailing semi-colons after functions
This is a new option in clang-format-16.
2023-07-08 10:32:56 +01:00
Andi Gallo
f6d2a21d27 LibWeb: Store table cell indices and spans in PaintableBox
The adjacency information is required to position borders correctly
between columns and rows.
2023-07-06 10:31:51 +02:00
Andi Gallo
98c5efc385 LibWeb: Move collapsed table border painting to a separate function
Move painting of cell borders to a separated function since doing it
correctly has to consider the entire grid as a whole for the collapsed
borders case.
2023-07-06 10:31:51 +02:00
Andi Gallo
8090adf268 LibWeb: Add partial implementation of border conflict resolution
Fix handling of border style specified per column as well.
2023-06-10 11:17:21 +02:00
Linus Groh
352da3623b LibWeb/Painting: Remove redundant 'Painting::' namespace prefixes 2023-04-20 20:43:30 +02:00
Aliaksandr Kalenik
dcc4868a3c LibWeb: Rename PaintableBox::clip_rect() 2023-03-19 19:04:51 +01:00
Aliaksandr Kalenik
87fa1c5e66 Revert "LibWeb: Fix clip of hidden overflow..."
This reverts commit eb1ef59603c13c43b87c099c43c4d118dc8441f6.

The idea of saving clip box to apply it to handle `overflow: hidden`
turned out to break painting if box is painted before it's containing
block (it is possible if box has negative z-index).
2023-02-24 20:55:40 +01:00
Aliaksandr Kalenik
08f217526a LibWeb: Use rect of containing block instead of parent to clip overflow
Move overflow clipping from `before_children_paint` into separate
method and call this method on containing block instead of parent.

Example that got fixed:
```html
<!DOCTYPE html><html><head><style>
    * {
      border: 2px solid black;
    }
    body {
      overflow: hidden;
    }
    .inner {
      position: absolute;
      width: 100px;
      height: 100px;
      background: lime;
    }
</style></head><body><div class=inner></div>
```
2023-01-25 10:44:58 +01:00
Aliaksandr Kalenik
ee4ba7617c LibWeb: Fix clip of hidden overflow when translated boxes are involved
There is a problem with current approach where overflow clip rectange is
calculated by aggregating intersection of absolute padding boxes of
boxes in containing block chain that resulting rectangle doesn't
respect transform properties.

To solve this problem `PaintableBox` is changed to store clip rectangle
saved from painter because it does respect transform properties of all
previously applied clip rectangles.
2023-01-25 10:44:58 +01:00
Aliaksandr Kalenik
802d9336f0 LibWeb: Use CSS Pixels for overflow clip rect 2023-01-23 10:21:23 +01:00
Andreas Kling
6b4062ab61 LibWeb: Make a handful of paintable leaf classes final 2023-01-11 14:03:25 +01:00