Commit graph

21 commits

Author SHA1 Message Date
Andreas Kling
e2e3c7fcdf LibWeb: Rebuild counter style cache lazily
Stop rebuilding the counter style cache from every style update.
That made unrelated restyles pay the full counter-style cost even when
no relevant stylesheet state had changed.

Dirty the cache when stylesheet rule caches are invalidated and rebuild
it on the first counter-style lookup instead. Also make cold cache
rebuilds include user stylesheets.

Add regression tests covering insertRule() and replaceSync() updates
that should make newly defined counter styles take effect.
2026-04-05 12:34:28 +02:00
Tim Ledbetter
af6bc07c4f LibWeb/CSS: Resolve var() in keyframe animation-timing-function
When a `@keyframes` rule contains `animation-timing-function` with a
`var()`, we cannot eagerly resolve it to an `EasingFunction` at rule
cache build time because there is no element context available. We now
store the unresolved `StyleValue` and defer resolution to
`collect_animation_into()`, where the animated element's custom
properties can be used to substitute the variable. Previously, an
`animation-timing-function` with a `var()` in a `@keyframe` would cause
a crash.
2026-04-01 11:38:48 +01:00
Sam Atkins
214d2b5e1f LibWeb/CSS: Implement CSSContainerRule
No parsing yet, just CSSContainerRule and the supporting ContainerQuery
class.

CSSContainerRule is unusual in how it matches, because instead of it
either matching or not matching globally, it instead is matched against
a specific element. But also, some at-rules inside it always apply, as
if they were written outside it. This doesn't fit well with how
CSSConditionRule is implemented, and will likely require some rework
later. For now, `condition_matches()` always returns false, and
`for_each_effective_rule()` is overridden to always process those
global at-rules and nothing else.
2026-03-30 14:49:24 +01:00
Tim Ledbetter
4c48827ed2 LibWeb: Merge duplicate @keyframe rule selector values
Previously, a keyframe with duplicate selector would cause a crash.
2026-03-30 12:42:57 +01:00
Callum Law
7d158c47d1 LibWeb: Implement CSSFunctionDeclarations
We also define it as a valid `NestedDeclarationsRule` for the relevant
functions
2026-03-27 11:19:28 +00:00
Callum Law
19c8eb4146 LibWeb: Implement CSSFunctionRule
Parsing/using this rule will come in later commits
2026-03-27 11:19:28 +00:00
Andreas Kling
42bf301acd LibWeb: Apply animation-timing-function per keyframe interval
Per the CSS Animations spec, the animation-timing-function property
describes how the animation progresses between each pair of keyframes,
not as an overall effect-level timing function.

Previously we set it as the effect-level timing function on the
AnimationEffect, which caused easing to be applied to the global
animation progress. This made animations with multiple keyframes
"pause" at the start and end of the full animation cycle instead of
easing smoothly between each pair of keyframes.

Now we:
- Store per-keyframe easing in ResolvedKeyFrame from @keyframes rules
- Store the default easing on CSSAnimation instead of on the effect
- Apply per-keyframe easing to the interval progress during
  interpolation, falling back to the CSS animation's default easing
- Also store per-keyframe easing from JS-created KeyframeEffects to
  avoid incorrectly applying CSS default easing to replaced effects
2026-03-21 23:16:32 -05:00
Aliaksandr Kalenik
345cc022a2 LibWeb: Deduplicate :has() ancestor invalidation
When multiple descendant nodes change in one style invalidation cycle,
invalidate_style_of_elements_affected_by_has() walks from each pending
node up to all ancestors. Since ancestor paths converge going up, the
same ancestor elements get processed repeatedly, causing redundant
invalidate_style_if_affected_by_has() calls.
2026-03-10 21:37:17 +01:00
Andreas Kling
f1573dfc63 LibWeb: Use GC::WeakHashSet for StyleScope's pending :has() nodes
Replace the unsafe HashTable<GC::Weak<DOM::Node>> with
GC::WeakHashSet<DOM::Node>. The null check in the iteration loop is
no longer needed since WeakHashSet's iterator skips dead entries.
2026-02-24 22:35:03 +01:00
Callum Law
3e9cdb2cf4 LibWeb: Store whether sheet being parsed is a UA stylesheet
UA stylesheets allow some things that regular stylesheets don't, for
instance allowing use of "non-overridable" `@counter-style` names.
2026-02-23 11:21:09 +00:00
Callum Law
3d150e46c2 LibWeb: Avoid template for StyleScope::for_each_stylesheet
This only ever takes a `Function<void(CSS::CSSStyleSheet&)` so there is
no need to use a template here.
2026-02-23 11:21:09 +00:00
Callum Law
2cc3fbb017 LibWeb: Pass callback as lvalue ref in for_each_active_stylesheet
Taking the callback as an rvalue ref meant we couldn't use the same
callback more than once
2026-02-23 11:21:09 +00:00
Callum Law
f0434655f9 LibWeb: Reduce recompilation from editing Enums.json
Reduces the recompilation caused by editing `Enums.json` from ~1528 to
~327
2026-02-19 11:27:06 +00:00
Callum Law
784911fb6d LibWeb: Implement CSSFontFeatureValuesRule 2026-02-17 12:25:27 +00:00
Aliaksandr Kalenik
eea9837438 LibWeb: Skip :has() invalidation in update_style when nothing is pending
Add a document-level boolean flag that tracks whether any :has()
invalidations have been scheduled. This avoids iterating over all
shadow roots just to check is_empty() on each style scope when no
:has() invalidations are pending, which is the common case during
scrolling on complex pages like Reddit.

Results in ~10% reduction of is_empty() calls in profiles when
scrolling on Reddit.
2026-02-11 00:28:42 +01:00
Callum Law
703259a24c LibWeb: Parse and serialize @counter-style rule
We don't yet parse or serialize any of the descriptors in the rule, just
the rule itself and the name
2026-02-03 09:58:47 +00:00
Andreas Kling
a9cc425cde LibJS+LibWeb: Add missing GC marking visits
This adds visit_edges(Cell::Visitor&) methods to various helper structs
that contain GC pointers, and makes sure they are called from owning
GC-heap-allocated objects as needed.

These were found by our Clang plugin after expanding its capabilities.
The added rules will be enforced by CI going forward.
2026-01-07 12:48:58 +01:00
Tim Ledbetter
e4fb4d7c1a LibWeb: Extract animation-composition value from keyframe at-rules
Previously, we weren't respecting the value of this property, so the
composite operation always defaulted to
`AnimationComposition::Replace`.
2026-01-06 12:58:54 +01:00
Sam Atkins
4ab9ac86a7 LibWeb/CSS: Implement basic ::part() matching
Matches elements with a `part` attribute, against their parent shadow
host.
2025-12-15 14:12:39 +00:00
Sam Atkins
c19139f1c7 LibWeb/CSS: Assign layers to @import statements
Specifically, we create and assign a layer if its import conditions
currently apply.

With this change, every case in the `layer-import.html` test actually
functions correctly, apart from our lack of proper `load` event
support. (Tested by hacking in a 100ms wait after the `await Promise()`
statement.)
2025-12-08 13:30:53 +00:00
Andreas Kling
66263f142b LibWeb: Add StyleScope to keep style caches per Document/ShadowRoot
Before this change, we've been maintaining various StyleComputer caches
at the document level.

This made sense for old-school documents without shadow trees, since
all the style information was document-wide anyway. However, documents
with many shadow trees ended up suffering since any time you mutated
a style sheet inside a shadow tree, *all* style caches for the entire
document would get invalidated.

This was particularly expensive on Reddit, which has tons of shadow
trees with their own style elements. Every time we'd create one of their
custom elements, we'd invalidate the document-level "rule cache" and
have to rebuild it, taking about ~60ms each time (ouch).

This commit introduces a new object called StyleScope.

Every Document and ShadowRoot has its own StyleScope. Rule caches etc
are moved from StyleComputer to StyleScope.

Rule cache invalidation now happens at StyleScope level. As an example,
rule cache rebuilds now take ~1ms on Reddit instead of ~60ms.

This is largely a mechanical change, moving things around, but there's
one key detail to be aware of: due to the :host selector, which works
across the shadow DOM boundary and reaches from inside a shadow tree out
into the light tree, there are various places where we have to check
both the shadow tree's StyleScope *and* the document-level StyleScope
in order to get all rules that may apply.
2025-11-14 22:05:33 +01:00