Commit graph

35 commits

Author SHA1 Message Date
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
Timothy Flynn
4a8c70b3a5 LibWeb: Parse CSS/image URLs using DOMURL::parse
DOMURL::parse handles blob URLs.
2025-08-08 17:47:51 +01:00
Jelle Raaijmakers
59a867d3e3 Tests: Enable all screenshot tests on all platforms
Some checks are pending
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
With the newly supported fuzzy matching in our test-web runner, we can
now define the expected maximum color channel and pixel count errors per
failing test and set a baseline they should not exceed.

The figures I added to these tests all come from my macOS M4 machine.
Most discrepancies seem to come from color calculations being slightly
off.
2025-07-17 12:59:11 +01:00
Lucien Fiorini
4711c38aa1 Tests: Add screenshot test for the background SVG in the LB website 2025-07-09 18:07:12 +01:00
Psychpsyo
baf2063e31 LibWeb: Fix selection when start node is inside end node
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
Fixes a regression introduced in
bc8870d019 (in a performant way this
time)
2025-07-04 20:19:50 +02:00
Manuel Zahariev
51b4b4a270 LibWeb: Tests for recalculating ordinals after list manipulation
FIXME: Rendering modifications to a list is sometimes not pixel-perfect
       vs. reference (likely a bug). After this is fixed, screenshot
       tests from this commit will likely fail + can be moved to
       ref tests.
2025-06-16 12:44:58 +01:00
InvalidUsernameException
52ba40f161 Tests/LibWeb: Fix flaky css background test
This test was introduced in 70b52e0994 and
was flaky in CI and on my local machine.
2025-05-30 12:03:25 -04:00
Timothy Flynn
4c8b5ba9de Tests/LibWeb: Add a screenshot test for acid2
This test has flaked over the years, so let's add a screenshot test to
catch future regressions.

This copy of the test was taken from:
https://www.webstandards.org/files/acid2/test.html#top

Our CI infra does not support navigating to the "#top" anchor out of the
gate. So the intro section was removed from this copy so that we render
the happy face immediately.
2025-05-22 17:44:40 -04:00
Jelle Raaijmakers
70b52e0994 LibWeb: Use efficient background repeat path for either direction
We're able to efficiently draw repeated bitmaps through Skia, but for
backgrounds we only did so if the background was `repeat-x` _and_
`repeat-y`, and not if just one was set. This meant that for backgrounds
that were only repeating in one direction, we were taking the slow path.
Turns out that this slow path also produced graphical artifacts when
zooming in and out, so let's not do that :^)
2025-05-09 21:37:48 +02:00
Timothy Flynn
30e8f3f1ad LibWeb: Update the <details> layout tree when it is opened/closed
Otherwise, the arrow painted next to the <details> element does not
update.

Using a screenshot test here because apparently the direction of the
arrow has no effect on the layout or paint trees.
2025-05-09 21:37:14 +02:00
Psychpsyo
86f2d291ca Meta: Add HTML doctype to a screenshot test that should have it
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-06 20:04:18 +02:00
Glenn Skrzypczak
da09608156 LibWeb/Painting: Fix blending with viewport background
The viewport is now drawn onto transparent black instead of the
background color of the viewport.
2025-04-01 13:38:00 +02:00
Jelle Raaijmakers
bf517f9ac2 LibGfx+LibWeb: Convert bitmap alpha type when creating ImmutableBitmaps
When decoding data into bitmaps, we end up with different alpha types
(premultiplied vs. unpremultiplied color data). Unfortunately, Skia only
seems to handle premultiplied color data well when scaling bitmaps with
an alpha channel. This might be due to Skia historically only supporting
premultiplied color blending, with unpremultiplied support having been
added more recently.

When using Skia to blend bitmaps, we need the color data to be
premultiplied. ImmutableBitmap gains a new method to enforce the alpha
type to be used, which is now used by SharedResourceRequest and
CanvasRenderingContext2D to enforce the right alpha type.

Our LibWeb tests actually had a couple of screenshot tests that exposed
the graphical glitches caused by Skia; see the big smiley faces in the
CSS backgrounds tests for example. The failing tests are now updated to
accommodate the new behavior.

Chromium and Firefox both seem to apply the same behavior; e.g. they
actively decode PNGs (which are unpremultiplied in nature) to a
premultiplied bitmap.

Fixes #3691.
2025-03-22 17:49:38 +01:00
Psychpsyo
a5a84159a3 Meta: Add DOCTYPEs to sceenshot tests
input-placeholder-ref was modified because the input box ends up
being slightly wider outside of quirks mode.
2025-03-20 11:50:49 +01:00
Mehran Kamal
bb87de58a0 LibWeb+LibGfx: Paint line_cap, line_join for Canvas Strokes 2025-03-15 14:02:27 +01:00
Mehran Kamal
670a7ab048 LibWeb/SVG: Implement cap_style, join_style for Skia painting backend 2025-03-13 15:09:41 +01:00
Tommy van der Vorst
89f8dd9b3b Tests: Do not use data URI in css-mask-longhand test
Instead use an existing image and ensure it loads to prevent
flakiness
2025-03-11 12:16:32 -04:00
Gingeh
31853c13d3 LibWeb: Implement css gradient-interpolation-method 2025-03-06 11:33:12 +00:00
InvalidUsernameException
495b3169e0 Tests: Mark existing workarounds consistently 2025-03-05 16:32:47 +01:00
Tommy van der Vorst
056205aa76 LibWeb/CSS: Treat 'mask' as a longhand property
Before this change, an element masked with 'mask-image: url(...)' would
show the mask, but 'mask: url(...)' would not. On e.g. dialogic.nl it
would show white boxes instead of the actual images in the top
navigation bar. We still do not support many of the other mask
properties, but with this change at least the masks show up in both
cases.
2025-03-05 12:10:02 +00:00
Sam Atkins
532c01c388 LibWeb: Implement text-decoration: spelling-error and grammar-error 2025-02-28 16:34:08 +00:00
Sam Atkins
d8a73a8165 LibWeb/Painting: Paint triangle waves using Skia
This has been left unimplemented since we switched to the Skia renderer.
Now `text-decoration-style: wavy` actually paints a wavy line. :^)

We had a text-decoration test, but it only checked `solid` lines, so
I've replaced it with a modified version of the old test page from
Serenity, without the blink option, and with some thickness parameters.

I did experiment with using a `SkPath1DPathEffect` to make it repeat the
pattern for us, but I couldn't make it look good at all.
2025-02-28 16:34:08 +00:00
Glenn Skrzypczak
0750513993 LibWeb: Support reversed ordered lists
Some checks are pending
CI / Lagom (false, NO_FUZZ, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (true, NO_FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (false, FUZZ, 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 PR adds support for the `reversed` attribute of
ordered lists.
2025-02-21 04:23:28 +00:00
Sam Atkins
5c5e9b3d1b Tests: Correct image URL for border-radius screenshot test
I missed these in b7efb61fbe
2025-02-12 13:45:11 +00:00
Gingeh
93f9ed72d2 LibWeb/SVG: Skip unwanted transformations on clip-path 2025-02-01 13:38:56 +01:00
Sam Atkins
d7ea949d2f LibWeb/HTML: Convert drop-shadow() lengths to pixels
Using the raw value meant that 1em would be incorrectly treated as 1px,
for example.

I've updated our canvas-filters test to demonstrate this - without the
code change this would instead have an x-offset of 2px.
2025-01-24 13:55:52 +01:00
Gingeh
8e56109515 LibWeb/CSS: Implement the light-dark color function 2025-01-08 11:18:13 +00:00
InvalidUsernameException
c790cf2194 LibWeb: Prevent paths thinner than 1px from disappearing
SVGs are rendered with subpixel precision. As such it can happen that
paths are rendered with less than 1px width or height and that they can
have a bounding box thinner than 1px. Due to an optimization such paths
were ignored when painting because their bounding box was incorrectly
calculated to be empty.

As a result horizontal or vertical lines inside SVGs were missing if:
* The SVG is displayed at viewbox size but the lines are defined with
  less than 1px.
* The SVG contians 1px-thin lines, but is displayed at a size smaller
  than viewbox size.

To prevent this, the bounding box of the path is now enlarged to contain
all pixels that are partially affected.
2025-01-07 09:05:04 +00:00
Lucien Fiorini
b909e3d587 Tests: Add screenshot test for Canvas2D fillstyle opacity 2024-12-19 13:31:12 +01:00
Lucien Fiorini
aea0172a44 Tests: Add screenshot test for canvas filters 2024-12-18 18:54:20 +01:00
Lucien Fiorini
6260e18de6 Tests: Add fillstyle gradients screenshot test for canvas 2024-12-06 20:21:57 +01:00
Lucien Fiorini
00a1dd2763 Tests: Modify canvas-shadow test to use shadowBlur 2024-12-05 17:07:13 +01:00
Jelle Raaijmakers
e5d71a6c82 LibWeb: Apply the paint transformation in SVGGradientElement
In commit 1b82cb43c2 I accidentally
removed the paint transformation altogether. The result was that
zoomed-in SVGs, or SVG elements with a transformation applied could have
their gradient coordinates misplaced significantly.

This was also exposed in the `svg-text-effects` test by way of a slight
visual difference. Add a new test that very clearly exposes the fixed
issue by rotating the gradient coordinates by 45 degrees.
2024-11-15 23:21:13 +01:00
Sam Atkins
b7efb61fbe Tests/LibWeb: Restructure Ref and Screenshot test dirs to match others
Now each test type has the same directories:
- input
- expected
- data

Also, tests can be in subdirectories within ./input.
2024-11-05 14:02:07 +00:00