Commit graph

76 commits

Author SHA1 Message Date
Tim Ledbetter
c8b219914e LibWeb: Use ErrorOr to propagate SVG attribute parsing errors
If an unexpected token is encountered when parsing an SVG attribute it
is now immediately propagated with ErrorOr. Previously, some situations
where an unexpected token was encountered could cause a crash.
2024-03-20 09:09:35 +01:00
MacDue
580763e43e Tests/LibWeb: Add SVG maskContentUnits ref test 2024-03-12 08:51:50 +01:00
Matthew Olsson
8f3b97e095 LibWeb: Don't render elements with invalid interpolated transform values 2024-03-06 07:45:56 +01:00
Matthew Olsson
e6aef49ef3 LibWeb: Consider fill state before calling Animation::play()
Animation::play_state() does not consider the fill state, and thus will
not return "Playing" for a fill-forward animation in the after phase.
It is still valid for paused, as pausing is not affected by the fill
mode.
2024-03-06 07:45:56 +01:00
Zac Brannelly
9165faca5e LibWeb: Support CSS property background-clip: text
From https://drafts.csswg.org/css-backgrounds-4/#background-clip
"The background is painted within (clipped to) the intersection of the
border box and the geometry of the text in the element and its in-flow
and floated descendants"

This change implements it in the following way:
1. Traverse the descendants of the element, collecting the Gfx::Path of
   glyphs into a vector.
2. The vector of collected paths is saved in the background painting
   command.
3. The painting commands executor uses the list of glyphs to paint a
   mask for background clipping.

Co-authored-by: Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
2024-03-03 15:33:12 +01:00
Aliaksandr Kalenik
b821f7b283 LibWeb: Implement scrollbar painting
Introduces the rendering of scroll thumbs in vertical and horizontal
directions. Currently, the thumbs are purely graphical elements that
do not respond to mouse events. Nevertheless, this is beneficial as it
makes it easier to identify elements that should respond to scrolling
events.

Painting of scrollbars uncovers numerous bugs in the calculation of
scrollable overflow rectangles highlighting all the places where
elements are made scrollable whey they shouldn't be. Positively, this
issue might motivate us to pay more attention to this problem to
eliminate unnecessary scrollbars.

Currently, the scrollbar style is uniform across all platforms: a
semi-transparent gray rectangle with rounded corners.

Also here we add `scrollbar-width: none` to all existing scrolling
ref-tests, so they keep working with this change.
2024-02-28 07:51:13 -05:00
Aliaksandr Kalenik
c74fc4c171 LibWeb: Clean previous border radii clips in refresh_clip_state()
The list of border radii clips needs to be reset before being populated
with new clips that have refreshed positions. Besides fixing painting,
this also improves performance because the number of sample/blit
commands does not increase as we scroll.
2024-02-28 07:44:12 -05: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
MacDue
f19b17e089 LibWeb: Use paths for text in CRC2D (if possible)
This allows for:

  * Transformed text (e.g. rotated text)
  * Stroked text
  * Filling/stroking text with PaintStyles (e.g. gradients)
  * Squashed/condensed text (via maxWidth parameter)

Fixes part of #22817
2024-02-12 13:38:10 +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
40246adfb9 LibWeb: Add internals.wheel() to simulate mouse wheel events
This function allows us to write tests for scrolling scenarios where
the events are processed by the EventHandler.
2024-02-10 11:18:40 +01:00
Aliaksandr Kalenik
ff3e454565 LibWeb: Invalidate paint-only property after relayout
Before this change, `set_needs_to_resolve_paint_only_properties()` was
only called after style invalidation. However, since relayout can be
triggered independently from style invalidation, we need to ensure that
paint-only properties are updated in that case too.
2024-02-08 13:08:10 +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
d43dbe2842 LibWeb: Shift SVG 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
623ad94582 LibWeb: Resolve effective overflow-x and overflow-y according to spec
Implements following rule from CSS Overflow Module Level 3:
"The visible/clip values of overflow compute to auto/hidden
(respectively) if one of overflow-x or overflow-y is neither visible
nor clip."
2024-02-06 08:39:06 +01:00
Aliaksandr Kalenik
36553d4566 LibWeb: Do not add CSS transforms into clip rect in PaintableWithLines
Painting command executor already accounts for CSS transforms so clip
rect only needs to be adjusted by scroll offset.
2024-02-03 20:05:09 +01:00
Aliaksandr Kalenik
bf14de4118 LibWeb: Remove direct calls of page_did_request_scroll_to()
By replacing the `page_did_request_scroll_to()` calls with a request
to perform scrolling in the corresponding navigable, we ensure that
the scrolling of iframes will scroll within them instead of triggering
scroll of top level document.
2024-02-03 19:00:26 +01:00
Aliaksandr Kalenik
1af466babf LibWeb: Fix invalidation of CSS properties that do not affect layout
Recently, we moved the resolution of CSS properties that do not affect
layout to occur within LayoutState::commit(). This decision was a
mistake as it breaks invalidation. With this change, we now re-resolve
all properties that do not affect layout before each repaint.
2024-02-03 09:28:03 +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
9dddd6b028 LibWeb: Account for scroll offset in overflow clip rect calculation
This change addresses an issue with overflow clipping in scenarios
where `overflow: hidden` is applied to boxes nested within elements
with `overflow: scroll`.

Fixes https://github.com/SerenityOS/serenity/issues/22733
2024-01-31 07:15:25 +01:00
Aliaksandr Kalenik
20de69693b LibWeb: Fix hidden overflow clipping with nested CSS transforms
This is a fix for regression introduced in
0bf82f748f

All CSS transforms need to be removed from the clip rectangle before
applying it. However, it is still necessary to calculate it with
applied transforms to find the correct intersection of all clip
rectangles in the containing block chain.
2024-01-29 07:21:38 +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
Sam Atkins
e025bcc4f9 LibWeb: Make use of transform-box when calculating transforms
We don't currently calculate the fill- or stroke-boxes of SVG elements,
so for now we use the content- and border-boxes respectively, as those
are the closest equivalents. The test will need updating when we do
support them.

Also, the test is a screenshot because of rendering differences when
applying transforms: a 20px box does not get painted the same as a 10px
box scaled up 2x. Otherwise that would be the more ideal form of test.
2024-01-27 07:46:37 +01:00
Aliaksandr Kalenik
d5e3158cfe LibWeb: Use PaintableFragment::baseline() in paint_text_decoration()
No need to calculate baseline based on glyph height when we can get
this information from a fragment.
2024-01-26 07:36:40 +01:00
Aliaksandr Kalenik
1294cfb55c LibWeb: Find font that has whitespace glyph in first_available_font()
Fixes https://github.com/SerenityOS/serenity/issues/22853
2024-01-22 14:14:59 +01:00
MacDue
9f710b0fb6 Revert "LibGfx: Slightly simplify Color::blend()"
This was producing incorrect results.

This reverts commit a1bafafd78.
2024-01-22 07:12:25 +01:00
MacDue
e9e1ee11d4 LibGfx: Decrease flatness a little in Path::stroke_to_fill()
Noticed larger stroke widths were looking a little 'low poly', this
looks a little nicer.

(Minor LibWeb test changes)
2024-01-21 19:23:31 +01:00
Aliaksandr Kalenik
f529188fb8 LibWeb: Resolve CSS transform lengths against padding rect
Fixes https://github.com/SerenityOS/serenity/issues/22797
2024-01-16 21:54:10 +01:00
Aliaksandr Kalenik
cc447c9c80 LibWeb+WebContent: Move paint recording init into Navigable
This refactoring makes WebContent less aware of LibWeb internals.
The code that initializes paint recording commands now resides in
`Navigable::paint()`. Additionally, we no longer need to reuse
PaintContext across iframes, allowing us to avoid saving and restoring
its state before recursing into an iframe.
2024-01-15 14:33:56 +01:00
Andreas Kling
e7de5cb4d2 LibWeb: Bring CSS line-height closer to other engines
This patch makes a few changes to the way we calculate line-height:

- `line-height: normal` is now resolved using metrics from the used
  font (specifically, round(A + D + lineGap)).

- `line-height: calc(...)` is now resolved at style compute time.

- `line-height` values are now absolutized at style compute time.

As a consequence of the above, we no longer need to walk the DOM
ancestor chain looking for line-heights during style computation.
Instead, values are inherited, resolved and absolutized locally.

This is not only much faster, but also makes our line-height metrics
match those of other engines like Gecko and Blink.
2024-01-12 15:04:06 +01:00
Shannon Booth
faccca7b32 LibWeb: Add ref-tests for 3-value background positions with center 2024-01-10 23:27:28 +01:00
Shannon Booth
72d0257a19 LibWeb: Add ref-test cases for reordered keywords in CSS positions
Where if 'center' is present the horizontal or vertical values must be
used to infer whether center is X or Y.
2024-01-09 13:37:35 +00:00
implicitfield
c994326d5a LibWeb/CSS: Improve parsing of length percentage values for transforms 2024-01-09 14:15:05 +01:00
MacDue
00b24a55b1 LibWeb: Fix drawing axis-aligned lines
Previously, these were clipped by the RecordingPainter, which used the
path's bounding box (which in this case is zero width or height). The
fix is to expand the bounding box by the stroke width.

Fixes #22661

Note: This is unrelated to any recent LibGfx changes :^)
2024-01-09 00:03:09 +01:00
MacDue
13a4fb0325 LibGfx: Increase bezier splitting tolerance to 0.5
No noticeable difference a bit faster. This is still arbitrary and
should be somehow derived from the curve.
2024-01-08 09:26:43 +01:00
Aliaksandr Kalenik
5c02b960ab LibGfx: Take into account unicode ranges to find font for space glyph
Instead of assuming that the first font in the cascade font list will
have a glyph for space, we need to find it in the list taking into
account unicode ranges.
2024-01-08 01:00:24 +01:00
Andreas Kling
ca57e40350 LibWeb: Take padding into account when resolving border radii
Before this change, we were resolving border radii values based on
content box + border widths only, ignoring padding.
2024-01-07 19:28:38 +01:00
Aliaksandr Kalenik
4bc38300ad LibWeb: Forbid using CSS::Length as reference value in resolved()
CSSPixels should not be wrapped into CSS::Length before being passed
to resolved() to end up resolving percentages without losing
precision.

Fixes thrashing layout when 33.3333% width is used together with
"box-sizing: border-box".
2024-01-07 09:03:57 +01:00
Aliaksandr Kalenik
e7eaf3b566 LibWeb: Remove rounding division for CSSPixels
Reverts 98926b487c
that regressed: block-and-inline/small-percentage-margin.html
(thrashing layout while window resizing)

Fixes https://github.com/SerenityOS/serenity/issues/22610
2024-01-06 21:40:27 +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
49fcc5dcd8 LibWeb: Do not require box to be positioned to create stacking context
Instead of implementing stacking context painting order exactly as it
is defined in CSS2.2 "Appendix E. Elaborate description of Stacking
Contexts" we need to account for changes in the latest standards where
a box can establish a stacking context without being positioned, for
example, by having an opacity different from 1.

Fixes https://github.com/SerenityOS/serenity/issues/21137
2024-01-02 21:45:05 +01:00
Aliaksandr Kalenik
e8f04be3ae LibWeb/CSS: Fix crashing when calc() is used for border-radius
`BorderRadiusStyleValue::absolutized` should not try to extract length
from LengthPercentage that represents calculated.
2024-01-01 10:12:20 +01:00
MacDue
7c162747ef Tests/LibWeb: Add ref test for SVG background without natural size 2023-12-30 23:23:19 +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
MacDue
daecf741d4 LibWeb: Ensure DocumentObserver document_completely_loaded() is called
This stopped being called for anything without a navigable container
after 76a97d8, due to the early return. This broke SVG <use> elements
that reference elements defined later in the document.
2023-12-26 21:37:04 +01:00
MacDue
64411127cb LibGfx: Clip edges above or below the visible area in the rasterizer
This avoids doing pointless plotting for scanlines that will never be
seen.

Note: This currently can only clip edges vertically. Horizontal clipping
is more tricky, since edges that are not visible can still change how
things accumulate across the scanline.

Fixes #22382

Sadly, this causes a bunch of LibWeb test churn as this change
imperceptibly changes the final rasterized output.
2023-12-24 13:25:40 +01:00
Aliaksandr Kalenik
25e9d2ccf0 Tests/LibWeb: Add ref-tests for "overflow: hidden"
Adds ref-tests from pages used in the following PRs:
https://github.com/SerenityOS/serenity/pull/16035
https://github.com/SerenityOS/serenity/pull/17591
2023-12-21 19:25:31 +01:00
MacDue
8b5d90734d Tests/LibWeb: Add ref test for SVG <textPath>s 2023-12-19 21:29:03 +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
Shannon Booth
74284abcba LibWeb/Tests: Rename css-attr-ref.html reference to text-div.html
This is currently only used by CSS attr ref tests, but is useful outside
of attr ref tests as well. Give a more generic name to this ref file for
this usage.
2023-12-11 16:54:59 +01:00