Commit graph

135 commits

Author SHA1 Message Date
Andreas Kling
b4435bd50c LibWeb: Don't clip descendants outside stacking context root rect
Skia allows you to pass a bounding rect to its saveLayer() function as
an optimization when you know that you won't paint outside those bounds.
Unfortunately, we were passing a too-small rectangle that didn't take
into account transformed descendants, etc.

For now, simply pass null instead of a bounding rect. This way, Skia
figures it out internally. It may allocate larger temporary bitmaps than
needed this way, but at least we get more correct results. I've left
re-enabling the optimization as a FIXME in the code.

This fixes unwanted clipping in various parts of the Discord UI.
2025-07-24 11:15:01 -04:00
Andreas Kling
038d8ade50 LibWeb: Always parse calc() inside CSS color functions consistently
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (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
Before this change, calc() would resolve to different types depending on
the nearest containing value context. This meant that rgb(calc(), ...)
by itself worked correctly due to fallbacks, but rgb(calc(), ...) inside
e.g a linear-gradient would create a calc() value that resolves to a
length, which subsequently got rejected by the color value parser.

Fixing this makes various little gradients show up on Discord.
2025-07-22 08:47:22 +01:00
Tim Ledbetter
d38fac7518 LibWeb/SVG: Ignore view boxes with negative width or height 2025-07-22 00:52:24 +02:00
Tim Ledbetter
a990de65e4 LibWeb: Implement SVGViewElement
This identifies a particular region of an SVG image, which can then be
linked to by an SVG fragment identifier.
2025-07-22 00:52:24 +02:00
Sam Atkins
db75405881 LibWeb/CSS: Support overlay keyword as alias to auto in overflow
We don't yet have a system for "legacy value aliases", but until we have
a lot of them we can handle them manually.

We also have to do this in two places because
parse_css_value_for_property() doesn't call any property-specific
parsing code.
2025-07-21 10:04:42 +01:00
Jelle Raaijmakers
0d856a8fa7 Tests: Implement fuzzy screenshot comparisons in test-web
We now read WPT's `<meta name="fuzzy">` tags if present in tests and
apply them while comparing screenshots.
2025-07-17 12:59:11 +01:00
Sam Atkins
5d1ba658c9 Tests: Import attr()-related WPT tests 2025-07-16 14:47:45 +01:00
Jelle Raaijmakers
788d5368a7 LibWeb: Improve list item marker positioning and alpha/roman text
This commit is a three-parter that is hard to separate without breaking
marker rendering:

  1. Any marker style that results in a string, except for a literal
     string (e.g. `list-style-type: "@"`), should get the string ". "
     appended. We forgot to do this for the alpha and roman types.

  2. Instead of using the "pixel size rounded up" from a font and adding
     an arbitrary 1 to that, we now use the exact pixel size for as long
     as possible to improve our vertical positioning of markers.

  3. Instead of always adding a "default marker width" to the marker
     content width, we now only do this if we did not have text metrics
     available (i.e. the marker style is not a text type). This greatly
     improves horizontal positioning of text markers.
2025-07-15 19:05:36 +01:00
Tim Ledbetter
4dd538e708 LibWeb/SVG: Prefer href to xlink:href attribute on images
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (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
2025-07-12 13:13:47 +02:00
Aliaksandr Kalenik
910fd426a2 LibWeb: Allow <svg> to establish a stacking context
83b6bc4 went too far by forbidding SVGSVGElement from establishing a
stacking context. This element type does follow the behavior of CSS
boxes, unlike inner SVG elements like `<rect>`, `<circle>`, etc., which
are not supposed to be aware of concepts like stacking contexts,
overflow clipping, scroll offsets, etc.

This change allows us to delete overrides of `before_paint()` and
`after_paint()` in SVGPaintable and SVGSVGPaintable, because display
list recording code has been rearranged to take care of clipping and
scrolling before recursing into SVGSVGPaintable descendants.

`Screenshot/images/css-transform-box-ref.png` expectation is updated and
fixes a bug where a rectangle at the very bottom of the page was not
clipped correctly.
`Screenshot/images/svg-filters-lb-website-ref.png` has a more subtle
difference, but if you look closely, you’ll see it matches other
browsers more closely now.
2025-07-12 11:01:15 +02:00
Sam Atkins
8f01297182 LibWeb: Remove now-invalid attr() type support
Previously the type argument in attr() could be the name of a CSS type
on its own. This has changed, and now only `raw-string`
(previously `string`) or the name of a dimension unit is allowed. Other
types and more complex grammar use the `type()` function, which we
don't yet support.

I've updated the syntax comment, but not the algorithm itself, which
will be reimplemented in a later commit.
2025-07-09 16:44:20 +01:00
Tim Ledbetter
6ef96ba170 Revert "Tests: Replace background-near-zero-svg test with WPT import"
The unmodified test is flaky on CI.

This reverts commit 8fce09f521.
2025-07-07 06:53:21 -04:00
Psychpsyo
93ae57114d LibWeb: Stop clipping the root element's background 2025-07-04 16:18:57 +01:00
Aliaksandr Kalenik
5874b7a76f LibWeb: Skip update_associated_selection() when there's no selection
This change fixes at least two issues:
- `update_associated_selection()` is responsible for selectionchange
  dispatch, and we were incorrectly dispatching this event on ranges
  that were not associated with a selection.
- `Range::get_client_rects()` was using `update_associated_selection()`
  to refresh the selection state in the paintable tree for the current
  range, but since a range might not be associated with a selection,
  this could make the painted selection reflect the state of an
  arbitrary range instead of the actual selection range.

Fixes a bug on Discord where any text typed into the message input would
get selected.
2025-07-03 22:16:39 +02:00
Sam Atkins
994bbcaa75 LibWeb/Painting: Don't paint invisible paintables
This check technically isn't necessary in
`SVGForeignObjectPaintable::paint()` because
`PaintableWithLines::paint(context, phase);` does the check already, but
I've added it there anyway to save some debugging time if someone does
add more code there. :^)
2025-07-03 12:39:05 +02:00
Tim Ledbetter
8fce09f521 Tests: Replace background-near-zero-svg test with WPT import 2025-07-02 18:44:21 +02:00
Sam Atkins
c7166527ce LibWeb/Painting: Keep alpha for inset/outset border colors
Also return the original color when needed, instead of reconstructing it
from HSV.
2025-07-02 15:11:04 +02:00
Gingeh
fa410a67d9 LibWeb: Don't crash with near-zero background sizes 2025-07-02 11:45:34 +01:00
Tim Ledbetter
7a6e4f5ec8 LibWeb: Treat a CSS declaration with a "--" property name as invalid 2025-06-25 17:09:29 +01:00
Tim Ledbetter
b00e57139f LibWeb/CSS: Treat block at-rules with no block as invalid 2025-06-25 09:02:45 +02:00
Tim Ledbetter
212d748ded LibWeb: Apply clip rect before painting background and foreground items 2025-06-24 12:56:28 +01:00
Callum Law
6584ae0080 LibWeb: Treat CSS selectors containing undeclared namespaces as invalid
Selectors containing undeclared namespaces should be considered invalid,
not just not matching any elements.

Gains us 3 new WPT passes.
2025-06-24 12:51:12 +01:00
Tim Ledbetter
9b6da84fff LibWeb/CSS: Implement the font-kerning property
This sets whether the kerning information stored on the current font is
used.
2025-06-23 13:26:48 +01:00
Tim Ledbetter
689dff3ee8 Tests: Synchronize imported tests with the WPT repository 2025-06-22 23:51:34 +02:00
Callum Law
d7036daa89 LibWeb: Disallow trailing tokens in @supports(<declaration>) 2025-06-21 11:49:43 +01: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
Tim Ledbetter
59a2e10a4e LibWeb: Distinguish between empty block at-rules and statement at-rules 2025-06-17 08:58:00 +01: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
Manuel Zahariev
20546725be LibWeb: Tests for rendering lists and their ordinals
The following tests also expose bugs before this PR:
- Layout/input/ol-render-item-values.html: negative ordinal values
- Layout/input/ol-render-deep-hybrid-list-item-list.html: ordinals
  deep into the list owner subtree
2025-06-16 12:44:58 +01:00
Aliaksandr Kalenik
39fff3cf8a LibWeb: Don't early return when masking area of StackingContext is empty
An early return was occurring between the emission of
PushStackingContext and PopStackingContext, resulting in a
PushStackingContext without a corresponding PopStackingContext in the
display list, which caused broken painting.

Fixes black screen on Discord login page.
2025-06-06 00:52:19 +02:00
Ruben
88da6250f9 LibWeb: Use the correct definition of separated-borders mode
We previously checked the cell's computed values for the border-collapse
property, but a cell is only in separated-borders mode if the table has
border-collapse set to separate. Curiously in some other placed where
this mode is checked we already did the correct thing.
2025-06-04 15:02:42 +01:00
Manuel Zahariev
f972342c27 LibWeb/CSS: Unit tests for changes to counter definitions
Some checks are pending
CI / Lagom (arm64, Sanitizer_CI, false, macOS, macos-15, Clang) (push) Waiting to run
CI / Lagom (x86_64, Fuzzers_CI, false, Linux, blacksmith-16vcpu-ubuntu-2404, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, false, Linux, blacksmith-16vcpu-ubuntu-2404, GNU) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, true, Linux, blacksmith-16vcpu-ubuntu-2404, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (arm64, macOS, macOS-arm64, macos-15) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (x86_64, Linux, Linux-x86_64, blacksmith-8vcpu-ubuntu-2404) (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-06-03 03:51:42 +02:00
InvalidUsernameException
164afdcc59 LibWeb: Ensure scroll offset is applied to mask-images
When recording the display list for a stacking context, the following
operations (relevant to this bug) happened:
* push a stacking context
  * as part of that push a None-value to the scroll frame id stack
* apply filters
* apply masking
* paint recursively

This meant that mask-images were always recorded without scroll frame
id, causing them to be painted without any scroll offset. As a result
mask-images would break as soon as the website using them was scrolled.

Instead, push to the scroll frame id stack later to solve the problem:
* push a stacking context
* apply filters
* apply masking
* push a None-value to the scroll frame id stack
* paint recursively
2025-05-29 22:02:07 +02:00
Gingeh
7acc0f4a42 LibWeb: Implement :required/:optional pseudo-classes 2025-05-24 10:31:34 +01:00
Sam Atkins
bb035fbfe0 Tests: Import a whole bunch of WPT mediaqueries tests
A lot of these are ref-tests, so I'm skipping the failing ones for now,
and will make as many pass as possible in subsequent commits.
2025-05-23 10:17:58 +01:00
Veeti Paananen
7c4fd9f624 LibWeb/CSS: Use case insensitive tag and attribute name in ancestor hash
Fixes #4793.
2025-05-21 08:54:40 -04:00
rmg-x
e2fa8cf7a8 LibWeb+Tests: Continue variable expansion if CSS-wide keyword is parsed
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
This allows the existing fallback logic in `Parser::expand_variables` to
run when a CSS-wide keyword is encountered.
2025-05-19 16:32:07 +01:00
Sam Atkins
1fe29ac642 LibWeb/CSS: Bring :lang() matching closer to spec
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
With this, we pass the 8 ref tests in css/selectors/selectors-4/ which
previously failed. This is not technically a full implementation, as we
are supposed to first canonicalize the language range and tag, but that
will require downloading and processing the IANA language subtag
registry:

https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry

That's significantly more work, and WPT doesn't seem to test any cases
that require that, so we can leave it for now.
2025-05-15 16:40:44 +01:00
Psychpsyo
4989c5c793 LibWeb: Add paint containment clipping
The contain-paint-stacking-context-001a.html test has been removed
for now because it has a 1px tall blue line at the top that should
not be there. With paint containment, this line is removed only in
the actual test case, but not in the reference. This is because of
the font that we use in testing and happens in Chromium as well if
the test is run with that font.
2025-05-13 15:30:14 +03:00
Psychpsyo
ed7374783d LibWeb: Enable different overflow along the x and y axis 2025-05-13 15:30:14 +03: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
Psychpsyo
f52df06a2a LibWeb: Do not forget to unapply empty masks 2025-05-13 10:31:08 +02:00
Psychpsyo
91159df0dd LibWeb: Draw text even if it needs to go into a 0-size inline box 2025-05-12 10:49:46 +02:00
InvalidUsernameException
029bcf13fd Libweb: Invalidate layout for the value-attribute of li-elements 2025-05-11 01:14:31 +02:00
InvalidUsernameException
370098514a LibWeb: Invalidate layout for ol-attributes that affect it 2025-05-11 01:14:31 +02:00
Sam Atkins
09b508d8e8 Tests: Import some URL-related WPT tests 2025-05-03 23:22:40 +01:00
Psychpsyo
82387e2127 LibWeb: Avoid changing button border color on disable/hover 2025-04-30 20:13:14 +01:00
Jelle Raaijmakers
35efd4d14b LibWeb+LibGfx: Support alpha in CanvasRenderingContext2D
This is implemented by these related changes:

  * The Skia alpha type 'Opaque' is selected for surfaces that were
    created with the intention of not having an alpha channel.
    Previously we were simply creating one with alpha.

  * Clearing now happens through Skia's `clear()` which always uses the
    source color's value for the result, instead of setting all values
    to 0.

  * CanvasRenderingContext2D selects a different clearing color based on
    the `alpha` context attribute's value.
2025-04-29 13:51:23 +02:00
Tim Ledbetter
04fde1c550 LibWeb: Ensure lang pseudoclass matches multiple segment subcodes 2025-04-28 11:29:30 +01:00
Tim Ledbetter
74c803c87b LibWeb: Ensure |= value selector handles multiple segments correctly
Previously, the `|=` would not compare strings containing `-`
characters correctly because it would only compare the element
attribute up to the first `-` character.
2025-04-28 11:29:30 +01:00