Commit graph

139 commits

Author SHA1 Message Date
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
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
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
6cad3f1921 LibWeb/CSS: Rename CSSColorValue -> ColorStyleValue
The typed-om class will be a separate thing.
2025-08-08 15:19:03 +01:00
Sam Atkins
4e92ab52e3 LibWeb/CSS: Rename CSSKeywordValue -> KeywordStyleValue
The typed-om CSSKeywordValue will need to be a separate class.
2025-08-08 15:19:03 +01:00
Sam Atkins
c57975c9fd LibWeb: Move and rename CSSStyleValue to StyleValues/StyleValue.{h,cpp}
This reverts 0e3487b9ab.

Back when I made that change, I thought we could make our StyleValue
classes match the typed-om definitions directly. However, they have
different requirements. Typed-om types need to be mutable and GCed,
whereas StyleValues are immutable and ideally wouldn't require a JS VM.

While I was already making such a cataclysmic change, I've moved it into
the StyleValues directory, because it *not* being there has bothered me
for a long time. 😅
2025-08-08 15:19:03 +01:00
Callum Law
9db3c66a85 LibWeb: Use correct font size when absolutizing animated properties 2025-08-06 17:44:12 +01:00
Andreas Kling
c4b13589e9 LibWeb: Make StyleComputer and FontLoader GC-allocated
This allows them to keep style sheets alive while loading fonts for
them. Fixes some GC crashes seen on the WPT WOFF2 tests after
66a19b8550 stopped FetchRecord leaks from
keeping various other things alive.
2025-07-30 16:35:08 +02:00
Aliaksandr Kalenik
d1fbb7b51e LibWeb: Invalidate less elements affected by CSS custom properties
Before this change, whenever element's attributes changed, we would add
a flag to "pending invalidation", indicating that all descendants whose
style uses CSS custom properties needed to be recomputed. This resulted
in severe overinvalidation, because we would run invalidation regardless
of whether any custom property on affected element actually changed.

This change takes another approach, and now we decide whether
descendant's style needs to be recomputed based on whether ancestor's
style recomputation results in a change of custom properties, though
this approach adds a little overhead to style computation as now we have
to compare old vs new hashmap of custom properties.

This brings substantial improvement on discord and x.com where, before
this change, advantage of using invalidation sets was lost and we had
to recompute all descendants, because almost all of them use custom
properties.
2025-07-30 11:06:05 +02:00
Jelle Raaijmakers
73967ee90c Everywhere: Use HashMap::update() where applicable 2025-07-25 16:22:06 +02:00
aplefull
34f0ac15fd LibWeb: Resolve calculated time values in animations and transitions
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 lets us play animations and transitions when time values are
stored in the form of calculated values, such as `calc(1s + 500ms)`.
2025-07-23 15:21:23 +01:00
Andreas Kling
e749be2295 LibWeb: Only cascade relevant CSS properties for logical alias context
We only need the cascaded values for writing-mode and direction when
resolving the logical alias context, so we can skip all other
properties.
2025-07-21 20:37:17 +01:00
Aliaksandr Kalenik
4319e6b80e LibWeb: Don't put unlayered rules into into empty "service" layer
Fixes bug when `build_matching_rule_set()` mistakenly included all
unlayered rules twice. This was caused by mistakenly including all
unlayered rules into `""` named "service" layer, because we couldn't
tell if FlyString = `""` means no layer or layer named `""`.
2025-07-21 12:33:35 +01:00
Andreas Kling
128b66e30d LibWeb: Avoid duplicate work when computing 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
Before this change we were running the CSS cascade machinery twice per
element:

- First, to compute the "logical alias mapping context" based on
  writing-mode and pals.

- Then, to compute all properties.

This patch factors out the heaviest work from the cascade machinery
to a separate step that can be run only once. This step will:

- Collect all the matching rules for the element
- Resolve custom properties for the element

We still perform the per-element cascade twice, but now this is hogging
less than 1% of CPU time when typing on Discord (compared to 9% before.)
2025-07-20 17:22:23 -04:00
Aliaksandr Kalenik
714ff4e3f9 LibWeb: Fix previous style calculation for CSS transitions on pseudo
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
...elements. Adds missing pseudo-element type passed into computed
properties getter.

Previously, due to this bug, we were using the element's computed
properties as the previous computed properties for its pseudo-elements.
This caused an excessive number of unintended CSS transitions to run.
The issue was particularly noticeable in Discord's emoji picker, where
each emoji has `::after` pseudo-element. We were incorrectly triggering
transitions on all their properties, resulting in significant
unnecessary work in style computation and animation event dispatching.
2025-07-18 21:19:37 +02:00
norbiros
7ad01d28a8 LibWeb/CSS: Add basic registered properties with initial values
Add global registry for registered properties and partial support
for `@property` rule. Enables registering properties with initial
values. Also adds basic retrieval via `var()`.

Note: This is not a complete `@property` implementation.
2025-07-18 11:12:39 +01:00
Callum Law
afa95c2815 LibWeb: Mark CalculatedStyleValue::resolve_* methods as deprecated
The existing resolve methods are not to spec and we are working to
replace them with new ones based on the `simplify_a_calculation_tree`
method.

These are marked as deprecated rather than replaced outright as work
will need to be done on the caller side to be made compatible with the
new methods, for instance the new methods can fail to resolve (e.g.
if we are missing required context), where the existing methods will
always resolve (albeit sometimes with an incorrect value).

No functionality changes.
2025-07-16 13:05:33 +01:00
Sam Atkins
b973c8d275 LibWeb/CSS: Remove the :target-within pseudo-class
This has been removed from the spec:

03b340c34f
2025-07-15 21:27:44 +02:00
Callum Law
927cd969b2 LibWeb: Generically serialize "positional-value-list-shorthand"s
We were previously handling this ad-hoc via logic in
`get_property_internal` but this didn't cover all contexts (for
instance `CSSStyleProperties::serialized`.

Gains us 9 more WPT tests as we now cover properties which weren't
included in the previous ad-hoc approach.
2025-07-15 14:26:02 +01:00
Sam Atkins
b3abbeab89 LibWeb/CSS: Support inherit custom properties on :root
Make sure we have a parent element before trying to look at it!

I've also pulled out a stub function for getting a custom property's
initial value, so that there's only one place to change once we support
`@property` more.
2025-07-15 10:36:08 +02:00
Jelle Raaijmakers
9f7447f546 LibWeb: Prioritize inheriting text-align for <th>
Because we defined `th { text-align: center }` in our UA stylesheet, it
received a higher precedence than inherited (inline) styles. Firefox
deals with this by defining a custom `text-align` value that prioritizes
any inherited value before defaulting to `text-align: center`.

We now do this as well :^)
2025-07-15 10:05:48 +02:00
Callum Law
cfafb3bf36 LibWeb: Remove unused code in for_each_property_expanding_shorthands
This case is already handled by this point as `value` is a shorthand.

No functionality changes.
2025-07-09 16:59:22 +01:00
Sam Atkins
b6032b0fcd LibWeb/CSS: Reimplement var()/attr() as arbitrary substitution functions
"Arbitrary substitution functions" are a family of functions that
includes var() and attr(). All of them resolve to an arbitrary set of
component values that are not known at parse-time, so they have to be
substituted at computed-value time.

Besides it being nice to follow the spec closely, this means we'll be
able to implement the others (such as `if()` and `inherit()`) more
easily.

The main omission here is the new "spread syntax", which can be
implemented in the future.
2025-07-09 16:44:20 +01:00
Sam Atkins
26acd897bf LibWeb: Produce computed values for custom properties
Custom properties are required to produce a computed value just like
regular properties. The computed value is defined in the spec as
"specified value with variables substituted, or the guaranteed-invalid
value", though in reality all arbitrary substitution functions should be
substituted, not just `var()`.

To support this, we parse the CSS-wide keywords normally in custom
properties, instead of ignoring them. We don't yet handle all of them
properly, and because that will require us to cascade them like regular
properties. This is just enough to prevent regressions when implementing
ASFs.

Our output in this new test is not quite correct, because of the awkward
way we handle whitespace in property values - so it has 3 spaces in the
middle instead of 1, until that's fixed.

It's possible this computed-value production should go in
cascade_custom_properties(), but I had issues with that. Hopefully once
we start cascading custom properties properly, it'll be clearer how
this should all work.
2025-07-09 16:44:20 +01:00
Andreas Kling
b3fd939628 LibWeb: Make sure we run selectors for mixed-case tag names
Before this change, we would never apply CSS rules where the selector
had a mixed-case tag name. This happened because our rule caches would
key them on the lowercased tag name, but we didn't lowercase the tag
name when fetching things from the cache.

This uncovered the fact that the SVG2 spec has a bunch of style applied
to non-rendered elements in a way that doesn't match other browsers.
Instead of blindly following the spec, we now match other browsers.
2025-07-09 14:36:08 +02:00
Callum Law
d280cf56e6 LibWeb: Handle border-{inline,block}-* properties with a single value
Gains us 14 WPT tests
2025-07-09 10:10:38 +01:00
Callum Law
7d50dba3fc LibWeb: Deduplicate logic in for_each_property_expanding_shorthands 2025-07-09 10:10:38 +01:00
Sam Atkins
69d4811ef7 LibWeb: Generate logical property mappings
To support this, how we declare logical property aliases has changed.
Instead of `logical-alias-for` being a list of properties, it's now an
object with a `group` and `mapping`. The group is the name of a logical
property group in LogicalPropertyGroups.json. The mapping is which
side/dimension/corner this property is. Hopefully it's self-explanatory
enough.

The generated code is very much a copy of what was previously in
`StyleComputer::map_logical_alias_to_physical_property_id()`, so there
should be no behaviour change.
2025-07-08 11:45:15 -06:00
Tim Ledbetter
5b522c096e LibWeb: Add border-*-radius logical properties 2025-07-01 11:16:37 +02:00
Gingeh
b85a8a23a7 LibWeb: Handle percentage font-size values 2025-06-24 12:42:26 +01:00
Tim Ledbetter
b46378085d LibWeb: Absolutize keyframe values before interpolating 2025-06-24 12:36:47 +01:00
Gingeh
4292344729 LibWeb: Don't skip last keyframe 2025-06-23 21:01:26 +02:00
Callum Law
b0cdc3f03b LibWeb: Respect writing-mode and direction when mapping logical aliases 2025-06-23 15:19:07 +01:00
Callum Law
cfc8d3031b LibWeb: Map logical aliases at cascade time
Previously we would incorrectly map these in
`CSSStyleProperties::convert_declarations_to_specified_order`, aside
from being too early (as it meant we didn't maintain them as distinct
from their physical counterparts in CSSStyleProperties), this meant
that we didn't yet have the required context to map them correctly.

We now map them as part of the cascade process. To compute the mapping
context we do a cascade without mapping, and extract the relevant
properties (writing-direction and direction).
2025-06-23 15:19:07 +01:00
Callum Law
4e87f85458 LibWeb: Convert logical property shorthands to full-fledged shorthands
No functionality changes. This is just prep work for later commits
around moving logical alias mapping to cascade time
2025-06-23 15:19:07 +01:00
Callum Law
12581fa995 LibWeb: Resolve conflicts in compute_keyframe_values correctly
As conflict resolution depends on whether the property was set directly
or via a shorthand, we have to store the non-expanded values in the
resolved keyframe properties.
2025-06-23 15:19:07 +01:00
Gingeh
e96338dd63 LibWeb: Don't play initially-paused animations
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 / 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-06-18 17:17:29 +02:00
Tim Ledbetter
28b24b72bc LibWeb: Don't resolve flow-relative values for float too early
This allows `getComputedStyle()` to return the correct value if `float`
is set to `inline-start` or `inline-end`
2025-06-17 09:26:26 +02:00
Callum Law
3c6b8d5a2c LibWeb: Propagate CSS-wide keyword to transition longhands
Previously we would treat CSS-wide keywords as equivalent to "none"
2025-06-16 12:37:40 +01:00
Callum Law
64d79d4c3f LibWeb: Avoid overwriting resolved values in compute_keyframe_values
When we have an unresolved value for a shorthand (e.g. `border-style:
var(--border-style)`, `keyframe_values` will contain an
`UnresolvedStyleValue` for the shorthand and
`PendingSubstitutionStyleValue`s for each of it's longhands.

When we come across the shorthand's `UnresolvedStyleValue` we will
resolve the value and set all of the relevant longhands.

If the longhand's `PendingSubstitutionStyleValue` was processed after
(which isn't always the case as the iteration order depends on a
HashMap) would overwrite the correctly resolved longhand.

To avoid this we just skip any `PendingSubstitutionStyleValue`s we come
across and rely on the resolution of the shorthand to set those
properties.

Resolves a crash @tcl3 was experiencing when adding a new
"border-image-repeat" property.
2025-06-13 17:06:00 +02:00
Callum Law
d31a58a7d6 LibWeb: Add support for the 'all' CSS property
The "longhands" array is populated in the code generator to avoid the
overhead of manually maintaining the list in Properties.json

There is one subtest that still fails in
'cssstyledeclaration-csstext-all-shorthand', this is related to
us not maintaining the relative order of CSS declarations for custom vs
non-custom properties.
2025-06-12 15:25:35 +01:00
Andreas Kling
ea0bfda1b9 LibWeb: Cache the font in StyleComputer::initial_font()
This function is bogus, but it's still getting called a lot during media
query evaluation, so let's at least cache the font instead of recreating
it every single time.
2025-06-11 16:25:42 +02:00
Aliaksandr Kalenik
4b4d960cba LibWeb: Cancel previous animation if new animation-name is "none"
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
"none" value should be interpreted as "no animation" to trigger the path
that cancels previous animation if it exists.
2025-06-01 05:02:12 +02:00
Aliaksandr Kalenik
3178679f0b LibWeb: Implement CSS transitions support for pseudo elements
We already had all necessary things for pseudo elements support in place
except ability to save transition properties in Animatable. This commit
adds the missing part.
2025-05-30 15:48:16 +02:00
Aliaksandr Kalenik
36a255eedd LibWeb: Fix glitchy CSS transitions
`start_needed_transitions()` decides which animations need to be started
based on previous and current style property values. Before this change,
we were using the style value without animations applied as the
"current" value. This caused issues such as starting a new transition
from the animation’s end value when an ongoing animation was
interrupted.
2025-05-28 17:35:59 +01:00
Tim Ledbetter
b16f34767e LibWeb: Ensure discrete interpolated properties are non-transitionable
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-universal2, 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
If a property is uses discrete interpolation and TransitionBehavior is
not set to `AllowDiscrete` that property should be non-transitionable.

This is now true for properties whose animation type is not discrete,
but the animation type falls back to discrete.
2025-05-27 13:33:29 +02: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
Sam Atkins
eec4365542 LibWeb/CSS: Extract SerializationMode into its own header
Prep for using this to serialize dimension types, and perhaps other
things in the future.
2025-05-17 07:53:24 +01:00
Sam Atkins
870f24f181 LibWeb/CSS: Add basic implementation of CSSMarginRule
This is a bit under-specced, specifically there's no definition of
CSSMarginDescriptors so I've gone with CSSStyleProperties for now. Gets
us 17 WPT subtests.
2025-05-16 11:01:39 +01:00
Sam Atkins
aaf07ae30d LibWeb: Add basic implementation of @page
This doesn't support selectors, and the only descriptors for now are for
margins.
2025-05-15 09:53:29 +01:00