Commit graph

41 commits

Author SHA1 Message Date
Jelle Raaijmakers
4d9f17eddf LibGfx+LibWeb: Draw glyph runs with subpixel accuracy
Some checks are pending
CI / path-changes (push) Waiting to run
CI / Lagom (false, FUZZ, ubuntu-24.04, Linux, Clang) (push) Blocked by required conditions
CI / Lagom (false, NO_FUZZ, macos-15, macOS, Clang) (push) Blocked by required conditions
CI / Lagom (false, NO_FUZZ, ubuntu-24.04, Linux, GNU) (push) Blocked by required conditions
CI / Lagom (true, NO_FUZZ, ubuntu-24.04, Linux, Clang) (push) Blocked by required conditions
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 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
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
Lucas CHOLLET
8f8ec146a1 LibGfx: Explicitly set color space of SkImages
If not set, when copying pixels into the SkImage, skia assumes that the
color space is the same as the input, so no transformation is done. We
are currently setting the color space to sRGB, this is fine for now as
it allows us to start making some transformations, but down the road we
will want to set that to the actual output's display color space.
2024-12-05 17:16:41 +01:00
Lucien Fiorini
00a1dd2763 Tests: Modify canvas-shadow test to use shadowBlur 2024-12-05 17:07:13 +01:00
Psychpsyo
1d44df74f7 LibWeb: Stop zero-area children from causing scrollable overflow 2024-11-24 11:10:47 +01:00
Lucas CHOLLET
a1687854ab LibWeb/CSS: Use double in CSSHWB::to_color()
See previous the commit description for more details about the floating
points operations.

The hwb test cases in `css-color-functions` are now rendered identically
to what firefox does (I haven't checked the others tests, but they
aren't affected by this commit).
2024-11-21 11:59:44 +00:00
Lucas CHOLLET
248e4bb517 LibGfx: Round values in Color::with_opacity()
`svg-gradient-userSpaceOnUse` is now rendered to something closer to
what firefox does, so it is at least some progress.
2024-11-21 11:59:44 +00: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
Some checks are pending
CI / Lagom (false, FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, macos-14, 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
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
Push notes / build (push) Waiting to run
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
Gingeh
c4e8eeb9a3 LibWeb: Don't crash on transformed clip-paths
Some checks are pending
CI / Lagom (false, FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, macos-14, 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
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
Push notes / build (push) Waiting to run
We can remove this check and FIXME because we already support them
2024-11-02 04:30:14 +00:00
Gingeh
3467076dbc LibWeb+LibGfx: Keep path properties when cloning and implement fill-rule 2024-10-31 10:30:24 +00:00
Gingeh
a7e83c38ee LibWeb: Implement missing basic shapes 2024-10-31 10:30:24 +00:00
Gingeh
4ecf56cadf LibWeb: Allow calculated values in css filters 2024-10-31 08:19:46 +01:00
Gingeh
bd25d0b1b4 LibWeb: Parse drop-shadow filter with missing or starting color
Some checks are pending
CI / Lagom (false, FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, macos-14, 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
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
Push notes / build (push) Waiting to run
2024-10-30 12:41:02 +01:00
Jelle Raaijmakers
1b82cb43c2 LibWeb+LibGfx: Fix SVG userSpaceOnUse gradient coordinate transformation
We were transforming coordinates for SVG gradients in a pretty
convoluted way: an inverse, unscaled transformation matrix was set up in
order to work around some (old?) technical limitations.

Rework this so the coordinate transformation no longer needs to be
inversed. This fixes gradients with "userSpaceOnUse" for its
gradientUnits attribute, which might cause coordinates to lie outside of
the bounding box of the gradient.

Two tests have updated reference screenshots with minor pixel updates;
this is probably the result of floating point precision improvements by
not inversing the matrix.

One test (svg-text-effects) has a bigger change: the gradient stops seem
to have moved along the text. This does seem to match other browsers
slightly better, so I'm moving forward with this ref update.
2024-10-28 22:53:17 +01:00
uysalibov
e537adad77 LibWeb: Add screenshot test for canvas-shadow 2024-10-23 11:42:56 -06:00
ronak69
6c3ecf6a34 LibWeb/CSS: Tweak in CSSRGB::to_color() to avoid floating point errors
Example of the difference:

    50 * 2.55      --> 127.4999 --> round towards +∞ --> 127
    50 * 255 / 100 --> 127.5000 --> round towards +∞ --> 128

Now, 9 failing WPT tests in /css/css-color/ pass.
2024-10-22 14:18:17 +01:00
Jelle Raaijmakers
e4533e5595 LibWeb: Do not floor SVG offset in SVGPathPaintable
Resolves a FIXME and improves the visuals of https://tweakers.net :^)
2024-10-22 07:37:59 -04:00
Aliaksandr Kalenik
83b6bc4ccb LibWeb: Don't allow SVG boxes to create a stacking context
Prior to this change, SVGs were following the CSS painting order, which
means SVG boxes could have established stacking context and be sorted by
z-index. There is a section in the spec that defines what kind of SVG
boxes should create a stacking context
https://www.w3.org/TR/SVG2/render.html#EstablishingStackingContex
Although this spec is marked as a draft and rendering order described in
this spec does not match what other engines do.

This spec issue comment has a good summary of what other engines
actually do regarding painting order
https://github.com/w3c/svgwg/issues/264#issuecomment-246432360
"as long as you're relying solely on the default z-index (which SVG1
does, by definition), nothing ever changes order when you apply
opacity/filter/etc".

This change aligns our implementation with other engines by forbidding
SVGs to create a formatting context and painting them in order they are
defined in tree tree.
2024-10-09 18:42:20 +02:00
Andreas Kling
795471ce31 LibWeb: Render CSS and SVG masks on the GPU if possible
Some checks are pending
CI / Lagom (true, NO_FUZZ, ubuntu-22.04, Linux, Clang) (push) Waiting to run
CI / Lagom (false, FUZZ, ubuntu-22.04, Linux, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, macos-14, macOS, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, ubuntu-22.04, Linux, GNU) (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-22.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
Push notes / build (push) Waiting to run
Instead of converting images to alpha masks on the CPU, we now delegate
that work to the GPU if possible, by way of SkSL shaders.

This noticeably speeds up https://vercel.com/ which has a ton of SVG
masking going on. The old implementation used 15% of CPU time when
loading the page, this one uses basically none.
2024-09-26 16:30:50 +02:00
Timothy Flynn
f0105b473b LibWeb: Iterate over text chunks using a grapheme-aware segmenter
Our current text iterator is not aware of multi-code point graphemes.
Instead of simply incrementing an iterator one code point at a time, use
our Unicode grapheme segmenter to break text into fragments.
2024-09-21 08:57:54 +02:00
Aliaksandr Kalenik
15c47dc623 Meta+LibWeb: Update Skia to version 129 2024-09-19 14:07:16 -04:00
Gingeh
74e12a9c97 LibWeb: Add tests for ellipses with varying angles and directions 2024-09-07 11:11:31 +02:00
Aliaksandr Kalenik
a9d5a99568 LibGfx+LibWeb: Replace remaining OpenType implementation with Skia
This change should move us forward toward emoji support, as we are no
longer limited by our own OpenType implementation, which was failing
to parse the TrueType Collection format used to store emoji fonts
(at least on macOS).
2024-09-05 19:21:52 +02:00
Andreas Kling
8a6c8a1c27 LibWeb: Propagate text-decoration-* properties to anonymous wrappers
Fixes an issue where old prices were not displayed with strike-through
text on the PlayStation store. :^)
2024-09-03 17:41:05 +02:00
BenJilks
11e7d72686 LibWeb: Layout text chunks based on their Unicode direction
Some checks are pending
CI / Lagom (false, FUZZ, ubuntu-22.04, Linux, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, macos-14, macOS, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, ubuntu-22.04, Linux, GNU) (push) Waiting to run
CI / Lagom (true, NO_FUZZ, ubuntu-22.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-22.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
Push notes / build (push) Waiting to run
Append text chunks to either the start or end of the text fragment,
depending on the text direction. The direction is determined by what
script its code points are from.
2024-08-31 11:49:47 +02:00
Sam Atkins
3af6a69f1e LibWeb: Introduce color-function-specific style values
Instead of CSSColorValue holding a Gfx::Color, make it an abstract class
with subclasses for each different color function, to match the Typed-OM
spec. This means moving the color calculations from the parsing code to
the `to_color()` method on the style value.

This lets us have calc() inside a color function, instead of having to
fully resolve the color at parse time. The canvas fillStyle tests have
been updated to reflect this.

The other test change is Screenshot/css-color-functions.html: previously
we produced slightly different colors for an alpha of 0.5 and one of
50%, and this incorrect behavior was baked into the test. So now it's
more correct. :^)
2024-08-21 10:51:48 +01:00
Jelle Raaijmakers
bd55e85027 LibGfx: Implement Gfx::AlphaType for SkiaPainter
Always assuming unpremultiplied color data only worked for PNGs (which
are specced as unpremultiplied) and bitmaps with alpha set to 100%.
Properly propagate the Gfx::AlphaType of a bitmap to Skia.

The reference tests were updated to reflect this change, but visually
it's practically impossible to see the difference. A new test was added
to clearly expose this issue.

Fixes #1104
2024-08-20 20:39:09 +02:00
Aliaksandr Kalenik
bc20e3ac6c LibWeb: Do not allocate mask bitmap for CSS "clip-path" property
Instead, it could be applied directly as a clip path in Skia painter.

As a side bonus, we get rid of some DeprecatedPath and
AntiAliasingPainter usage.
2024-08-20 20:00:56 +02:00
Andreas Kling
ca2cd86999 Tests/LibWeb: Update screenshot test reference images for Skia changes 2024-08-20 09:30:05 +02:00
BenJilks
0d63269cb7 LibGfx+LibWeb: Use harfbuzz for text shaping
This replaces glyph positioning system with harfbuzz's shaping
algorithm. Adding support for bidirectional encoded text.
2024-08-16 22:28:34 +02:00
Jelle Raaijmakers
5865cf5864 LibWeb: Use bitmap's alpha type instead of assuming unpremultiplied
When converting a `Gfx::Bitmap` to a Skia bitmap, we cannot assume the
color data is unpremultiplied. For example, everything canvas-related
uses premultiplied color data:

  https://html.spec.whatwg.org/multipage/canvas.html#premultiplied-alpha-and-the-2d-rendering-context

We were probably assuming unpremultiplied since that is what the PNG
decoder gives us. Since we now make `Gfx::Bitmap` identify what alpha
type is being used, we can instruct Skia a bit better :^)

Update our `EdgeFlagPathRasterizer` to use premultiplied alpha instead
of unpremultiplied so we can apply alpha correctly for path masks.

This fixes the dark borders sometimes visible when SVGs are blended
with a colored background.

This also exposed an issue with our `CanvasRenderingContext2D`, which is
supposed to hold a bitmap with premultiplied alpha internally but expose
a bitmap with unpremultiplied alpha in `CanvasImageData`. Expand our C2D
test to include the alpha channel as well.

Finally, this also exposed an off-by-one issue in
`EdgeFlagPathRasterizer` which caused the last scanlines for edges to
render incorrectly. We had some reference images which included these
corruptions (they were almost unnoticeable), so update them as well.
2024-08-07 18:51:12 +02:00
Aliaksandr Kalenik
1bd0871ed8 LibWeb+LibGfx: Use Skia for text rasterization
The main incentive is much better performance. We could have gone a bit
further in optimizing the Skia painter to blit glyphs produced by LibGfx
more efficiently from the glyph atlas, but eventually, we also want Skia
to improve correctness.

This change does not completely replace LibGfx in text handling. It's
still used at all stages, including layout, up until display list
replaying.
2024-07-27 08:18:54 +02:00
doctortheemh
9cbb3fac12 LibWeb: Parse fill and stroke values
Use the CSS color data type using the CSS parser.
2024-07-26 09:14:09 +01:00
Aliaksandr Kalenik
67d68eac64 LibWeb: Save "background-clip: text" mask as a nested display list
Before this change, "background-clip: text" was implemented by saving a
Vector<Gfx::Path> of all glyphs needed to paint a mask for the
background. The issue with this approach was that once glyphs were
extracted into vector paths, the glyph rasterization cache could no
longer be utilized.

With this change, all text required for mask painting is saved in a
nested display list and rasterized as a regular text.
2024-07-25 14:33:33 +02:00
Aliaksandr Kalenik
c5afe70f77 LibWeb: Add optimized painting command for repeated background
With this change, instead of recording a display list item for each
instance of a repeated background, a new DrawRepeatedImmutableBitmap
type is used. This allows the painter to use optimized repeated image
painting and, when the GPU backend is used, avoid re-uploading the image
texture for each repetition.

Some screenshot tests are affected, but there are no visible
regressions.

https://null.com/games/chainstaff works a lof faster with this change.
2024-07-24 11:13:04 +02:00
Aliaksandr Kalenik
3627329bed Everywhere: Use Skia painter by default
Skia painter is visibly faster than LibGfx painter and has more complete
CSS transforms support. With this change:
- On Linux, it will try to use Vulkan-backend with fallback to
  CPU-backend
- On macOS it will try to use Metal-backend with fallback to
  CPU-backend
- headless-browser always runs with CPU-backend in layout mode
2024-07-21 10:36:17 +02:00
Aliaksandr Kalenik
9ab25c47a4 Tests: Transform some ref tests into screenshot tests
These test work with LibGfx painter but won't longer work after
switching to Skia, because it produces slightly different antialiasing,
rounding in color blending, etc.
2024-07-21 10:36:17 +02:00
Aliaksandr Kalenik
715f033007 Tests+headless-browser: Move screenshot ref-tests into own directory
This change will make it easier to disable screenshot comparison tests
on a specific platform or have per-platform expectations.

Additionally, it's nice to be able to tell if a ref-test uses a
screenshot as an expectation by looking at the test path.
2024-07-19 13:52:00 +02:00