Commit graph

1317 commits

Author SHA1 Message Date
Callum Law
ce0fef7c45 LibWeb: Initialize properties before calling compute_{math_depth|font}
`StyleComputer::create_document_style` was the only place this wasn't
the case so we can remove the calls to
`compute_defaulted_property_value`. The call to
`compute_defaulted_values` in `create_document_style` is now redundant
so has been removed`
2025-08-21 13:49:21 +02:00
Callum Law
b267012ba7 LibWeb: Handle color: currentcolor in compute_properties
This was the last thing that `compute_defaulted_values` was doing when
called from here.

It also comes with the added benefit of us correctly inheriting animated
colors.
2025-08-21 13:49:21 +02:00
Callum Law
48832972b1 LibWeb: Handle -libweb-inherit-or-center in compute_text_align
This seems like a more natural place to handle this
2025-08-21 13:49:21 +02:00
Callum Law
ca9cb42ed4 LibWeb: Handle unset immediately in compute_properties
Previously we would hand off to `compute_defaulted_properties` to
resolve these values but there is no need as we can just resolve them
immediately.
2025-08-21 13:49:21 +02:00
Callum Law
9330bf4b72 LibWeb: Propagate animated values in recompute_inherited_style
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
As `recompute_inherited_style` works in-place rather than building
ComputedProperties from scratch we need to keep track of which animated
properties are inherited to know whether we should remove them when we
have no more inherited value.
2025-08-21 10:46:55 +01:00
Sam Atkins
0fc512e56d LibWeb/CSS: Reify UnresolvedStyleValue as CSSUnparsedValue 2025-08-21 10:21:54 +01:00
Sam Atkins
6428c9990d LibWeb/CSS: Implement CSSUnparsedValue and CSSVariableReferenceValue
We don't serialize these the way WPT expects, because we don't implement
the comment-insertion rules from CSS-Syntax. We don't implement that
for regular serialization either, so it's something we can worry about
later.
2025-08-21 10:21:54 +01:00
Sam Atkins
213a548b1f LibWeb/CSS: Implement CSSStyleValue.parse() and .parseAll()
The "subdivide into iterations" part is left as a FIXME for now, until
we have a way of knowing if a property is a list or not.

The parse_a_css_style_value() helper has an unwieldy return type because
of the requirement that it return either one value or a list of values,
but sticking to the spec here seems worthwhile for now.
2025-08-21 10:21:54 +01:00
Sam Atkins
3613181f54 LibWeb/CSS: Reify idents as CSSKeywordValue
For us, that's KeywordStyleValue and CustomIdentStyleValue.

CustomIdentStyleValue now has a .cpp file to reduce the number of
includes in its header file.
2025-08-21 10:21:54 +01:00
Sam Atkins
a93c6a347f LibWeb/CSS: Implement CSSKeywordValue
CSSStyleValue is adjusted to allow for subclasses. Serialization for
CSSKeywordValue is implemented differently than the spec says because
of a spec bug: https://github.com/w3c/csswg-drafts/issues/12545
2025-08-21 10:21:54 +01:00
Tim Ledbetter
4906afb2ae LibWeb: Set the initial value of stroke-dashoffset to 0px
Previously, an initial value of 0 was being used.
2025-08-20 14:30:51 +02:00
Andreas Kling
05d6090fcc Revert "LibWeb: Invalidate layout on opacity change to/from zero"
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
This partially reverts commit 3aff3327c4
by removing the code change but keeping the added test.

Now that paintables visibility caching has been reverted, this is no
longer doing anything except causing excessive relayouts on pages
like https://linear.app/
2025-08-20 09:14:58 +02:00
Andreas Kling
657f1c37a8 LibWeb: Mark CSS filter property as affecting stacking context tree 2025-08-20 09:14:58 +02:00
Tim Ledbetter
1d745884be LibWeb: Parse the shape-rendering property 2025-08-19 09:47:28 +01:00
Andreas Kling
29278038a2 LibWeb: Don't assume grid-related properties don't have var() in them
When serializing the "style" attribute, we were incorrectly assuming
that some of the grid-related CSS properties would never contain var()
substitution functions.

With this fixed, we can now book appointments on https://cal.com/ :^)
2025-08-18 21:18:16 +02:00
Sam Atkins
92dc2faa10 LibWeb/CSS: Use serialize_a_number() for Ratio serialization
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-08-18 16:52:39 +01:00
Sam Atkins
6b69b00a05 LibWeb/CSS: Use serialize_a_number() for Time serialization
As noted, the spec tells us to do something different than what is
expected by WPT, so we slightly ignore it.
2025-08-18 16:52:39 +01:00
Sam Atkins
682e080d57 LibWeb/CSS: Use serialize_a_number() for Resolution serialization
As noted, the spec tells us to do something different than what is
expected by WPT, so we slightly ignore it.
2025-08-18 16:52:39 +01:00
Sam Atkins
53f226c14c LibWeb/CSS: Use serialize_a_number() for Percentage serialization 2025-08-18 16:52:39 +01:00
Sam Atkins
e30d968049 LibWeb/CSS: Use serialize_a_number() for Frequency serialization 2025-08-18 16:52:39 +01:00
Sam Atkins
1c82d74a18 LibWeb/CSS: Use serialize_a_number() for Flex serialization 2025-08-18 16:52:39 +01:00
Sam Atkins
00b1b34c80 LibWeb/CSS: Use serialize_a_number() for Angle serialization
Gets us 12 known passes!
2025-08-18 16:52:39 +01:00
Sam Atkins
dffebee901 LibWeb/CSS: Use serialize_a_number() for Length serialization
This changes the maximum number of decimal places from 5 to 6, but 5 was
previously a guess, and not specified behaviour:

> For all of the decimal changes (except color) I couldn't really find a
> spec that mandates any required precision, so I just copied what
> Firefox seems to do, which is limit the output to 5 decimal places.
> https://github.com/SerenityOS/serenity/pull/23449
2025-08-18 16:52:39 +01:00
Sam Atkins
1a7f6c8f87 LibWeb/CSS: Define and use serialize_a_number()
No behaviour change, this just moves things.
2025-08-18 16:52:39 +01:00
Tim Ledbetter
4f663ca6e7 LibWeb: Parse the will-change property
This property provides a hint to the rendering engine about properties
that are likely to change in the near future, allowing for early
optimizations to be applied.
2025-08-18 12:36:37 +01:00
Callum Law
9a8c6ff8c3 LibWeb: Inherit animated CSS property values separately
When starting transitions we compute the after-change style, for any
inherited properties this should include the non-animated value.

Previously we were only inheriting the animated value and treating it as
non-animated so were instead including the animated value.

This commit fixes that by inheriting both the animated and non-animated
values (with the former being stored in `m_animated_property_values`,
and the latter in `m_property_values`).

This gains us 12 new WPT passes.

This brings with it 252 new WPT fails from the various 'events' tests in
css/css-transitions/properties-value-inherit-001.html, however these
also fail in other browsers (Chrome, Edge and Firefox) and the behaviour
that causes these failures is specifically mentioned in the spec.
2025-08-18 11:18:34 +01:00
Callum Law
54f1407177 LibWeb: Only associate transition with element once
We already handle this within the above call to `Animation::set_effect`

Gains us 3 WPT tests.
2025-08-18 11:18:34 +01:00
Callum Law
84fb0b458f LibWeb: Properly initialize KeyframeEffect contained in CSSTransition
This commit updates the CSSTransition constructor to:
 - Leave the KeyframeEffect start time unresolved
 - Set the KeyframeEffect start delay

Gains us 14 WPT passes but exposes one false positive in
properties-value-inherit-001.html
2025-08-18 11:18:34 +01:00
Jelle Raaijmakers
39f36327d4 LibWeb: Simplify obtaining used value for PaintableBox
No functional changes.
2025-08-18 11:04:34 +01:00
Callum Law
3aff3327c4 LibWeb: Invalidate layout on opacity change to/from zero
As of 7dc8062 paintables compute and cache their visibility (which
depends on opacity) at construction - this cached value can fall out of
sync with reality if if the opacity changes to/from zero within the
lifetime of that paintable.

This commit invalidates layout when an opacity changes to/from zero so
that we reconstruct paintables with the correct visibility.
2025-08-18 10:21:44 +01:00
Sam Atkins
089f70a918 LibWeb/CSS: Reify StyleValues in StylePropertyMap get()/getAll()
The limitations right now are:
- We don't know if a property is a list or not.
- We always reify as a CSSStyleValue directly.

So, we pass some tests but only ones that expect a CSSStyleValue.
2025-08-18 10:12:53 +01:00
Sam Atkins
25c4c2397e LibWeb/CSS: Add StyleValue getter to CSSStyleDeclarations
Will be used by StylePropertyMap, as that wants a StyleValue to reify,
not a string representation.
2025-08-18 10:12:53 +01:00
Sam Atkins
276540fbe9 LibWeb/CSS: Add ability to reify a StyleValue
When no better reification form is available, we produce an opaque
CSSStyleValue with a serialized value. For starters, this will be the
only way to reify, and then we'll add others later.
2025-08-18 10:12:53 +01:00
Sam Atkins
b80930ae34 LibWeb/CSS: Connect up StylePropertyMaps to their source
After looking into this more, the `[[declarations]]` slot does not seem
to need to be a literal map of property names and values. Instead, it
can just point at the source (an element or style declaration), and
then direct all read or write operations to that.

This means the `has()` and `delete()` methods actually work now.

A few remaining failures in these tests are because of:
- StylePropertyMap[ReadOnly]s not being iterable yet
- We're not populating an element's custom properties map, which get
  fixed whenever someone gets around to producing proper computed
  values of them.
2025-08-18 10:12:53 +01:00
Sam Atkins
37ea9a4ce3 LibWeb/CSS: Add has_property() to CSSStyleDeclaration
This isn't part of the CSSOM API directly, but will be used by
StylePropertyMapReadOnly.has() to avoid doing the work to serialize a
string version of the property's value, just to throw it away again.
2025-08-18 10:12:53 +01:00
Andreas Kling
efd4f63454 LibWeb: Allow blockification across display: contents boundary
Flex/grid items are always blockified (have their CSS display forced
into "block") by style computation.

We were doing this by looking at the CSS display of the parent. However,
if the parent has `display: contents`, we must look at the *grandparent*
instead.

This corrects the layout of buttons underneath Reddit article cards.
2025-08-17 19:09:50 +02:00
Tim Ledbetter
ad06ac0d58 LibWeb: Implement the color-interpolation property for SVG gradients
This changes the operating color space for gradient `<linearGradient>`
and `<radialGradient>` elements.
2025-08-17 10:51:05 +02:00
Andreas Kling
9208a54b0b LibWeb: Allow style inheritance through slots
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
When a subtree is projected through a slot, its root now inherits style
from the slot's parent, rather than the parent of the unprojected root.

This fixes a ton of subtle issues, and is very noticeable on Reddit.
2025-08-16 21:03:31 +02:00
Sam Atkins
888cb038e8 LibWeb/CSS: Expose a couple of types on PaintWorklet and LayoutWorklet
This has no actual effect, but it's nice to remove the FIXMEs.
2025-08-15 09:21:28 +02:00
norbiros
783ae44462 LibWeb: Fix color interpolation by premultiplying alpha
The current Color::interpolate_color method does not follow the specs
properly. Started improving it by handling premultiplied alpha in color
interpolation.

Only one WPT test covers this (color-transition-premultiplied), which we
currently pass due to a different approach in Color.mixed_with.
2025-08-14 11:09:05 +02:00
Timothy Flynn
70db474cf0 LibJS+LibWeb: Port interned bytecode strings to UTF-16
This was almost a no-op, except we intern JS exception messages. So the
bulk of this patch is porting exception messages to UTF-16.
2025-08-14 10:27:08 +02:00
Sam Atkins
911274a84d LibWeb/CSS: Implement ElementCSSInlineStyle.attributeStyleMap
Again, this isn't yet very usable, but it does appease some tests.
2025-08-13 09:47:50 +01:00
Sam Atkins
215d8b8076 LibWeb/CSS: Implement CSSStyleRule.styleMap
StylePropertyMap is just a stub, so this doesn't yet accomplish much.
2025-08-13 09:47:50 +01:00
Sam Atkins
3bb54ffd59 LibWeb/CSS: Stub out StylePropertyMap 2025-08-13 09:47:50 +01:00
Sam Atkins
c768cc7208 LibWeb/CSS: Implement Element.computedStyleMap()
Currently the map doesn't return any values, so it's not very useful,
but this does make a few tests pass just by existing. :^)
2025-08-13 09:47:50 +01:00
Sam Atkins
1620fc5bf6 LibWeb/CSS: Stub out StylePropertyMapReadOnly
Nothing yet produces this, and the useful parts of get() and get_all()
will have to wait until type reification is implemented.
2025-08-13 09:47:50 +01:00
Sam Atkins
05884f1d91 LibWeb/CSS: Implement is_a_valid_css_property()
Also mark these functions as inline instead of static, to fix a compiler
error about them being unused.
2025-08-13 09:47:50 +01:00
Sam Atkins
882288bf86 LibWeb/CSS: Stub out CSSStyleValue 2025-08-13 09:47:50 +01:00
Sam Atkins
00cadf41d8 LibWeb/CSS: Update UA stylesheet to use :heading
Corresponds to part of
65dc095e44
2025-08-13 09:47:28 +01:00
Sam Atkins
503d41d02d LibWeb/CSS: Implement the :heading/:heading() pseudo-class
Corresponds to part of
65dc095e44
2025-08-13 09:47:28 +01:00