Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2026-06-28 12:10:28 +00:00
Code Issues Projects Releases Packages Wiki Activity
ladybird/Libraries/LibWeb/CSS/StyleScope.cpp

1192 lines
53 KiB
C++
Raw Normal View History

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-13 19:08:08 +01:00
/*
* Copyright (c) 2018-2025, Andreas Kling <andreas@ladybird.org>
* Copyright (c) 2022-2025, Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
LibWeb: Add cosmetic rules to ContentBlocker Split cosmetic blocker rules out from network patterns. Expose matching rules as user CSS through StyleScope. Invalidate affected user style caches when blocker state changes. Generated cosmetic CSS now respects disabled content blocking.
2026-05-21 18:35:29 +02:00
#include <AK/StringBuilder.h>
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
#include <LibWeb/CSS/CSSConditionRule.h>
#include <LibWeb/CSS/CSSContainerRule.h>
#include <LibWeb/CSS/CSSGroupingRule.h>
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-04 14:34:28 +00:00
#include <LibWeb/CSS/CSSImportRule.h>
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-13 19:08:08 +01:00
#include <LibWeb/CSS/CSSKeyframesRule.h>
#include <LibWeb/CSS/CSSLayerBlockRule.h>
#include <LibWeb/CSS/CSSLayerStatementRule.h>
#include <LibWeb/CSS/CSSNestedDeclarations.h>
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
#include <LibWeb/CSS/CSSScopeRule.h>
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-13 19:08:08 +01:00
#include <LibWeb/CSS/CSSStyleRule.h>
#include <LibWeb/CSS/CSSStyleSheet.h>
LibWeb: Make `@counter-style` tree-scoped This was a pretty straightforward change of storing registered counter styles on the relevant `StyleScope`s and resolving by following the process to dereference a global tree-scoped name, the only things of note are: - We only define predefined counter styles (e.g. decimal) on the document's scope (since otherwise overrides in outer scopes would themselves be overriden). - When registering counter styles we don't have the full list of extendable styles so we defer fallback to "decimal" for undefined styles until `CounterStyle::from_counter_style_definition`.
2026-04-06 11:23:33 +12:00
#include <LibWeb/CSS/CounterStyle.h>
#include <LibWeb/CSS/CounterStyleDefinition.h>
LibWeb: Reduce recompilation from editing `Enums.json` Reduces the recompilation caused by editing `Enums.json` from ~1528 to ~327
2026-02-19 18:30:55 +13:00
#include <LibWeb/CSS/Enums.h>
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-13 19:08:08 +01:00
#include <LibWeb/CSS/Parser/Parser.h>
#include <LibWeb/CSS/PropertyID.h>
#include <LibWeb/CSS/StyleComputer.h>
#include <LibWeb/CSS/StyleScope.h>
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 10:18:25 -05:00
#include <LibWeb/CSS/StyleValues/StyleValueList.h>
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-13 19:08:08 +01:00
#include <LibWeb/DOM/Document.h>
LibWeb: Add cosmetic rules to ContentBlocker Split cosmetic blocker rules out from network patterns. Expose matching rules as user CSS through StyleScope. Invalidate affected user style caches when blocker state changes. Generated cosmetic CSS now respects disabled content blocking.
2026-05-21 18:35:29 +02:00
#include <LibWeb/Loader/ContentBlocker.h>
LibWeb: Narrow :has descendant invalidation fanout When a :has() mutation is known to come from a specific subtree, use that subtree as the mutation root while walking observed ancestors. Before dirtying an anchor and its non-subject descendants, check whether any cached :has() rule for that anchor can observe the changed subtree. This keeps unrelated descendant mutations from invalidating every rule that merely contains :has().
2026-04-27 10:06:35 +02:00
#include <LibWeb/Namespace.h>
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-13 19:08:08 +01:00
#include <LibWeb/Page/Page.h>
namespace Web::CSS {
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-06 00:36:34 +01:00
void RuleCaches::visit_edges(GC::Cell::Visitor& visitor)
{
main.visit_edges(visitor);
for (auto& it : by_layer) {
it.value->visit_edges(visitor);
}
}
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
NonnullRefPtr<StyleCache> StyleCache::create()
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-13 19:08:08 +01:00
{
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
auto style_cache = adopt_ref(*new StyleCache);
style_cache->qualified_layer_names_in_order.append({});
return style_cache;
}
NonnullRefPtr<StyleCache> StyleCache::create_for_style_scope(StyleScope& style_scope)
{
auto style_cache = StyleCache::create();
style_scope.populate_rule_cache(*style_cache);
return style_cache;
}
void StyleCache::visit_edges(GC::Cell::Visitor& visitor)
{
for (auto& cache : pseudo_class_rule_cache) {
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-06 00:36:34 +01:00
if (cache)
cache->visit_edges(visitor);
}
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
author_rule_cache.visit_edges(visitor);
user_rule_cache.visit_edges(visitor);
user_agent_rule_cache.visit_edges(visitor);
}
void StyleScope::visit_edges(GC::Cell::Visitor& visitor)
{
visitor.visit(m_node);
visitor.visit(m_user_style_sheet);
if (m_rule_cache)
m_rule_cache->visit_edges(visitor);
LibWeb: Use an `OrderedHashMap` for pending :has() invalidations Every DOM mutation that may affect a :has() selector enqueues an entry in StyleScope keyed by an ancestor node. The entries were previously stored in a Vector and linearly scanned on every insert to deduplicate by node. We now use an OrderedHashMap instead, eliminating the quadratic deduplication.
2026-04-29 07:03:01 +01:00
visitor.visit(m_pending_has_invalidations);
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-06 00:36:34 +01:00
}
LibWeb: Reuse scoped rule matching scratch storage Keep the temporary scoped matching rule list on StyleComputer. This lets repeated style matching reuse its allocation instead of creating a large stack object in collect_matching_rules(). Release builds zero that stack object before the constructor runs due to automatic variable initialization. This was causing a 16 KiB memset on every call to this function(!) Verify that the scratch vector is empty on entry so accidental reentry is caught before it can corrupt the outer rule collection.
2026-05-30 12:11:50 +02:00
void MatchingRule::visit_edges(GC::Cell::Visitor& visitor) const
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-06 00:36:34 +01:00
{
visitor.visit(rule);
visitor.visit(sheet);
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
visitor.visit(container_rule);
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
visitor.visit(scope_rule);
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-06 00:36:34 +01:00
}
void RuleCache::visit_edges(GC::Cell::Visitor& visitor)
{
auto visit_vector = [&](auto& vector) {
for (auto& rule : vector)
rule.visit_edges(visitor);
};
auto visit_map = [&](auto& map) {
for (auto& [_, rules] : map) {
visit_vector(rules);
}
};
visit_map(rules_by_id);
visit_map(rules_by_class);
visit_map(rules_by_tag_name);
visit_map(rules_by_attribute_name);
for (auto& rules : rules_by_pseudo_element) {
visit_vector(rules);
}
visit_vector(root_rules);
visit_vector(slotted_rules);
visit_vector(part_rules);
visit_vector(other_rules);
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-13 19:08:08 +01:00
}
StyleScope::StyleScope(GC::Ref<DOM::Node> node)
: m_node(node)
{
}
void StyleScope::build_rule_cache()
{
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
if (auto* shadow_root = as_if<DOM::ShadowRoot>(*m_node)) {
GC::Ptr<CSSStyleSheet> constructed_style_sheet;
bool saw_more_than_one_style_sheet = false;
shadow_root->for_each_active_css_style_sheet([&](CSSStyleSheet& style_sheet) {
if (constructed_style_sheet) {
saw_more_than_one_style_sheet = true;
return;
}
constructed_style_sheet = style_sheet;
});
LibWeb: Share constructed shadow style caches with ad blocking Content blocker cosmetic rules now live in the document style scope, so single constructed stylesheet shadow roots can still reuse their shared style cache when cosmetic rules are enabled. This keeps the existing sharing fast path active on pages with many constructed shadow roots.
2026-05-23 11:37:10 +02:00
if (constructed_style_sheet && !saw_more_than_one_style_sheet && constructed_style_sheet->constructed() && !document().page().user_style().has_value()) {
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
m_rule_cache = constructed_style_sheet->shared_single_constructed_sheet_style_cache(*this);
return;
}
}
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-13 19:08:08 +01:00
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
m_rule_cache = StyleCache::create();
populate_rule_cache(*m_rule_cache);
}
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-13 19:08:08 +01:00
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
void StyleScope::populate_rule_cache(StyleCache& style_cache)
{
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 11:20:32 +02:00
build_user_style_sheet_if_needed();
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-13 19:08:08 +01:00
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
build_qualified_layer_names_cache(style_cache);
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-13 19:08:08 +01:00
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
style_cache.pseudo_class_rule_cache[to_underlying(PseudoClass::Hover)] = make<RuleCache>();
style_cache.pseudo_class_rule_cache[to_underlying(PseudoClass::Active)] = make<RuleCache>();
style_cache.pseudo_class_rule_cache[to_underlying(PseudoClass::Focus)] = make<RuleCache>();
style_cache.pseudo_class_rule_cache[to_underlying(PseudoClass::FocusWithin)] = make<RuleCache>();
style_cache.pseudo_class_rule_cache[to_underlying(PseudoClass::FocusVisible)] = make<RuleCache>();
LibWeb: Narrow :has descendant invalidation fanout When a :has() mutation is known to come from a specific subtree, use that subtree as the mutation root while walking observed ancestors. Before dirtying an anchor and its non-subject descendants, check whether any cached :has() rule for that anchor can observe the changed subtree. This keeps unrelated descendant mutations from invalidating every rule that merely contains :has().
2026-04-27 10:06:35 +02:00
style_cache.pseudo_class_rule_cache[to_underlying(PseudoClass::Has)] = make<RuleCache>();
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
style_cache.pseudo_class_rule_cache[to_underlying(PseudoClass::Target)] = make<RuleCache>();
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-13 19:08:08 +01:00
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
make_rule_cache_for_cascade_origin(CascadeOrigin::Author, style_cache);
make_rule_cache_for_cascade_origin(CascadeOrigin::User, style_cache);
make_rule_cache_for_cascade_origin(CascadeOrigin::UserAgent, style_cache);
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-13 19:08:08 +01:00
}
void StyleScope::invalidate_rule_cache()
{
LibWeb: Make `@counter-style` tree-scoped This was a pretty straightforward change of storing registered counter styles on the relevant `StyleScope`s and resolving by following the process to dereference a global tree-scoped name, the only things of note are: - We only define predefined counter styles (e.g. decimal) on the document's scope (since otherwise overrides in outer scopes would themselves be overriden). - When registering counter styles we don't have the full list of extendable styles so we defer fallback to "decimal" for undefined styles until `CounterStyle::from_counter_style_definition`.
2026-04-06 11:23:33 +12:00
invalidate_counter_style_cache();
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
m_rule_cache = nullptr;
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-13 19:08:08 +01:00
// NOTE: We could be smarter about keeping the user rule cache, and style sheet.
// Currently we are re-parsing the user style sheet every time we build the caches,
// as it may have changed.
m_user_style_sheet = nullptr;
}
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 11:20:32 +02:00
void StyleScope::build_user_style_sheet_if_needed()
{
if (m_user_style_sheet)
return;
LibWeb: Cache content blocker styles per document Build the user stylesheet only for document style scopes, since user rules are already considered relevant across shadow boundaries during rule matching. This avoids regenerating and reparsing the same cosmetic content blocker stylesheet for every shadow root in the document. Keep the generated cosmetic stylesheet cached on the Document and clear it whenever user style is invalidated, so content blocker changes still produce fresh CSS for the next style update.
2026-05-23 11:21:05 +02:00
if (!is<DOM::Document>(*m_node))
return;
LibWeb: Add cosmetic rules to ContentBlocker Split cosmetic blocker rules out from network patterns. Expose matching rules as user CSS through StyleScope. Invalidate affected user style caches when blocker state changes. Generated cosmetic CSS now respects disabled content blocking.
2026-05-21 18:35:29 +02:00
auto user_style_source = document().page().user_style();
LibWeb: Cache content blocker styles per document Build the user stylesheet only for document style scopes, since user rules are already considered relevant across shadow boundaries during rule matching. This avoids regenerating and reparsing the same cosmetic content blocker stylesheet for every shadow root in the document. Keep the generated cosmetic stylesheet cached on the Document and clear it whenever user style is invalidated, so content blocker changes still produce fresh CSS for the next style update.
2026-05-23 11:21:05 +02:00
auto const& content_blocker_style_source = document().content_blocker_style_sheet();
LibWeb: Add cosmetic rules to ContentBlocker Split cosmetic blocker rules out from network patterns. Expose matching rules as user CSS through StyleScope. Invalidate affected user style caches when blocker state changes. Generated cosmetic CSS now respects disabled content blocking.
2026-05-21 18:35:29 +02:00
if (!user_style_source.has_value() && content_blocker_style_source.is_empty())
return;
StringBuilder source;
if (user_style_source.has_value())
source.append(user_style_source.value());
if (!content_blocker_style_source.is_empty()) {
if (!source.is_empty())
source.append('\n');
source.append(content_blocker_style_source);
}
m_user_style_sheet = GC::make_root(parse_css_stylesheet(CSS::Parser::ParsingParams(document()), source.to_string_without_validation()));
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 11:20:32 +02:00
}
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-13 19:08:08 +01:00
void StyleScope::build_rule_cache_if_needed() const
{
if (has_valid_rule_cache())
return;
const_cast<StyleScope&>(*this).build_rule_cache();
}
static CSSStyleSheet& default_stylesheet()
{
static GC::Root<CSSStyleSheet> sheet;
if (!sheet.cell()) {
extern String default_stylesheet_source;
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-07 21:40:54 +13:00
sheet = GC::make_root(parse_css_stylesheet(CSS::Parser::ParsingParams(internal_css_realm(), Parser::IsUAStyleSheet::Yes), default_stylesheet_source));
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-13 19:08:08 +01:00
}
return *sheet;
}
static CSSStyleSheet& quirks_mode_stylesheet()
{
static GC::Root<CSSStyleSheet> sheet;
if (!sheet.cell()) {
extern String quirks_mode_stylesheet_source;
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-07 21:40:54 +13:00
sheet = GC::make_root(parse_css_stylesheet(CSS::Parser::ParsingParams(internal_css_realm(), Parser::IsUAStyleSheet::Yes), quirks_mode_stylesheet_source));
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-13 19:08:08 +01:00
}
return *sheet;
}
static CSSStyleSheet& mathml_stylesheet()
{
static GC::Root<CSSStyleSheet> sheet;
if (!sheet.cell()) {
extern String mathml_stylesheet_source;
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-07 21:40:54 +13:00
sheet = GC::make_root(parse_css_stylesheet(CSS::Parser::ParsingParams(internal_css_realm(), Parser::IsUAStyleSheet::Yes), mathml_stylesheet_source));
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-13 19:08:08 +01:00
}
return *sheet;
}
static CSSStyleSheet& svg_stylesheet()
{
static GC::Root<CSSStyleSheet> sheet;
if (!sheet.cell()) {
extern String svg_stylesheet_source;
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-07 21:40:54 +13:00
sheet = GC::make_root(parse_css_stylesheet(CSS::Parser::ParsingParams(internal_css_realm(), Parser::IsUAStyleSheet::Yes), svg_stylesheet_source));
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-13 19:08:08 +01:00
}
return *sheet;
}
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
static GC::Ptr<CSSContainerRule const> current_container_rule(Vector<GC::Ptr<CSSContainerRule const>> const& container_rule_stack)
{
if (container_rule_stack.is_empty())
return nullptr;
return container_rule_stack.last();
}
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
using RuleCacheStyleRuleCallback = Function<void(CSSRule const&, GC::Ptr<CSSContainerRule const>, GC::Ptr<CSSScopeRule const>)>;
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
static void for_each_style_producing_rule_for_rule_cache(
CSSRuleList const& rule_list,
Vector<GC::Ptr<CSSContainerRule const>>& container_rule_stack,
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
GC::Ptr<CSSScopeRule const> scope_rule,
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
RuleCacheStyleRuleCallback const& callback);
static void for_each_style_producing_rule_for_rule_cache(
CSSStyleSheet const& sheet,
Vector<GC::Ptr<CSSContainerRule const>>& container_rule_stack,
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
GC::Ptr<CSSScopeRule const> scope_rule,
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
RuleCacheStyleRuleCallback const& callback)
{
if (!sheet.media()->matches())
return;
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
for_each_style_producing_rule_for_rule_cache(sheet.rules(), container_rule_stack, scope_rule, callback);
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
}
static void for_each_style_producing_rule_for_rule_cache(
CSSRuleList const& rule_list,
Vector<GC::Ptr<CSSContainerRule const>>& container_rule_stack,
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
GC::Ptr<CSSScopeRule const> scope_rule,
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
RuleCacheStyleRuleCallback const& callback)
{
for (auto const& rule : rule_list) {
switch (rule->type()) {
case CSSRule::Type::Import: {
auto const& import_rule = as<CSSImportRule>(*rule);
if (import_rule.loaded_style_sheet())
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
for_each_style_producing_rule_for_rule_cache(*import_rule.loaded_style_sheet(), container_rule_stack, scope_rule, callback);
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
break;
}
case CSSRule::Type::Container: {
auto const& container_rule = as<CSSContainerRule>(*rule);
// @container conditions are element-dependent, so keep their style rules and evaluate the container later.
container_rule_stack.append(&container_rule);
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
for_each_style_producing_rule_for_rule_cache(container_rule.css_rules(), container_rule_stack, scope_rule, callback);
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
container_rule_stack.take_last();
break;
}
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
case CSSRule::Type::Scope: {
auto const& nested_scope_rule = as<CSSScopeRule>(*rule);
for_each_style_producing_rule_for_rule_cache(nested_scope_rule.css_rules(), container_rule_stack, &nested_scope_rule, callback);
break;
}
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
case CSSRule::Type::Media:
case CSSRule::Type::Supports:
if (as<CSSConditionRule>(*rule).condition_matches())
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
for_each_style_producing_rule_for_rule_cache(as<CSSGroupingRule>(*rule).css_rules(), container_rule_stack, scope_rule, callback);
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
break;
case CSSRule::Type::LayerBlock:
case CSSRule::Type::Page:
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
for_each_style_producing_rule_for_rule_cache(as<CSSGroupingRule>(*rule).css_rules(), container_rule_stack, scope_rule, callback);
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
break;
case CSSRule::Type::Style:
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
callback(*rule, current_container_rule(container_rule_stack), scope_rule);
for_each_style_producing_rule_for_rule_cache(as<CSSGroupingRule>(*rule).css_rules(), container_rule_stack, scope_rule, callback);
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
break;
case CSSRule::Type::NestedDeclarations:
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
callback(*rule, current_container_rule(container_rule_stack), scope_rule);
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
break;
case CSSRule::Type::CounterStyle:
case CSSRule::Type::FontFace:
case CSSRule::Type::FontFeatureValues:
case CSSRule::Type::Function:
case CSSRule::Type::FunctionDeclarations:
case CSSRule::Type::Keyframe:
case CSSRule::Type::Keyframes:
case CSSRule::Type::LayerStatement:
case CSSRule::Type::Margin:
case CSSRule::Type::Namespace:
case CSSRule::Type::Property:
break;
}
}
}
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-08 10:25:02 +13:00
void StyleScope::for_each_stylesheet(CascadeOrigin cascade_origin, Function<void(CSS::CSSStyleSheet&)> const& callback) const
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-13 19:08:08 +01:00
{
if (cascade_origin == CascadeOrigin::UserAgent) {
callback(default_stylesheet());
if (document().in_quirks_mode())
callback(quirks_mode_stylesheet());
callback(mathml_stylesheet());
callback(svg_stylesheet());
}
if (cascade_origin == CascadeOrigin::User) {
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 11:20:32 +02:00
auto& style_scope = const_cast<StyleScope&>(*this);
style_scope.build_user_style_sheet_if_needed();
if (style_scope.m_user_style_sheet)
callback(*style_scope.m_user_style_sheet);
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-13 19:08:08 +01:00
}
if (cascade_origin == CascadeOrigin::Author) {
for_each_active_css_style_sheet(move(callback));
}
}
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
void StyleScope::make_rule_cache_for_cascade_origin(CascadeOrigin cascade_origin, StyleCache& style_cache)
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-13 19:08:08 +01:00
{
LibGC: Default-construct ConservativeVector from the global heap
2026-05-19 20:55:11 +02:00
GC::ConservativeVector<MatchingRule> matching_rules;
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-13 19:08:08 +01:00
size_t style_sheet_index = 0;
for_each_stylesheet(cascade_origin, [&](auto& sheet) {
auto& rule_caches = [&] -> RuleCaches& {
switch (cascade_origin) {
case CascadeOrigin::Author:
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
return style_cache.author_rule_cache;
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-13 19:08:08 +01:00
case CascadeOrigin::User:
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
return style_cache.user_rule_cache;
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-13 19:08:08 +01:00
case CascadeOrigin::UserAgent:
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
return style_cache.user_agent_rule_cache;
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-13 19:08:08 +01:00
default:
VERIFY_NOT_REACHED();
}
}();
size_t rule_index = 0;
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
Vector<GC::Ptr<CSSContainerRule const>> container_rule_stack;
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
for_each_style_producing_rule_for_rule_cache(sheet, container_rule_stack, nullptr, [&](auto const& rule, auto container_rule, auto scope_rule) {
LibWeb: Parse and evaluate `@container` `<size-feature>`s e.g., `@container (width >= 300px) {}` and similar. During style computation, flag any elements whose style depends on a size container. Then re-evaluate their style after the initial layout has been computed and size containers have a size. This may take multiple passes, as these may have further descendants that depend on their size, etc. We limit this to 8 passes currently. SizeFeature itself is very similar to MediaFeature, but queries the container element instead. There are only 6 size features specified, so they're hard-coded instead of generated from JSON. Also add a counter test for the narrower restyle path.
2026-05-14 12:46:17 +01:00
if (container_rule && container_rule->contains_size_feature())
style_cache.has_size_container_queries = true;
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
SelectorList const& absolutized_selectors = [&]() -> SelectorList const& {
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-13 19:08:08 +01:00
if (rule.type() == CSSRule::Type::Style)
return static_cast<CSSStyleRule const&>(rule).absolutized_selectors();
if (rule.type() == CSSRule::Type::NestedDeclarations)
LibWeb/CSS: Ask CSSNestedDeclarations for selectors and layer directly This is preparation for nested declarations inside `@scope`. User code no longer makes assumptions about there being a style rule parent, as there may not be one. We cache the absolutized selectors because `@scope` will require us to modify the parent's selectors instead of using them directly.
2026-05-21 13:34:03 +01:00
return static_cast<CSSNestedDeclarations const&>(rule).absolutized_selectors();
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-13 19:08:08 +01:00
VERIFY_NOT_REACHED();
}();
for (auto const& selector : absolutized_selectors) {
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
style_cache.style_invalidation_data.build_invalidation_sets_for_selector(selector);
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-13 19:08:08 +01:00
}
for (CSS::Selector const& selector : absolutized_selectors) {
MatchingRule matching_rule {
LibWeb/CSS: Use Selector's methods to query its pseudo-elements ...instead of iterating through its components. This lets us initialize the MatchingRule directly, now using designated initializers to distinguish between the different bool fields. No behaviour changes.
2026-04-09 14:36:40 +01:00
.rule = &rule,
.sheet = sheet,
LibWeb: Evaluate container queries when collecting matching style rules MatchingRules now have a container_rule member which stores the nearest ancestor CSSContainerRule, if any. When populating the rule cache, we maintain a stack of CSSContainerRules that we are within, and use record the last one on the MatchingRule, so that it's O(1) instead of having to walk up the rule's ancestors each time. This does mean we have reimplement some "for each rule" code. When collecting rules to apply to an element, we see if the MatchingRule has a container_rule, and if so, we evaluate that rule's query to see if the element has a matching container. We then also match any ancestor container rules, using the cached parent container rule. Add a custom test to cover the case of nested name-only `@container`s, which WPT lacks currently as far as I can tell.
2026-05-08 15:57:57 +01:00
.container_rule = container_rule,
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
.scope_rule = scope_rule,
LibWeb/CSS: Use Selector's methods to query its pseudo-elements ...instead of iterating through its components. This lets us initialize the MatchingRule directly, now using designated initializers to distinguish between the different bool fields. No behaviour changes.
2026-04-09 14:36:40 +01:00
.default_namespace = sheet.default_namespace(),
.selector = selector,
.style_sheet_index = style_sheet_index,
.rule_index = rule_index,
.specificity = selector.specificity(),
.cascade_origin = cascade_origin,
.contains_pseudo_element = selector.target_pseudo_element().has_value(),
.slotted = selector.is_slotted(),
.contains_part_pseudo_element = selector.has_part_pseudo_element(),
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-13 19:08:08 +01:00
};
auto const& qualified_layer_name = matching_rule.qualified_layer_name();
auto& rule_cache = qualified_layer_name.is_empty() ? rule_caches.main : *rule_caches.by_layer.ensure(qualified_layer_name, [] { return make<RuleCache>(); });
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
collect_selector_insights(selector, style_cache.selector_insights);
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-13 19:08:08 +01:00
LibWeb/CSS: Use Selector's methods to query its pseudo-elements ...instead of iterating through its components. This lets us initialize the MatchingRule directly, now using designated initializers to distinguish between the different bool fields. No behaviour changes.
2026-04-09 14:36:40 +01:00
bool contains_root_pseudo_class = false;
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-13 19:08:08 +01:00
for (auto const& simple_selector : selector.compound_selectors().last().simple_selectors) {
if (!contains_root_pseudo_class) {
if (simple_selector.type == CSS::Selector::SimpleSelector::Type::PseudoClass
&& simple_selector.pseudo_class().type == CSS::PseudoClass::Root) {
contains_root_pseudo_class = true;
}
}
}
for (size_t i = 0; i < to_underlying(PseudoClass::__Count); ++i) {
auto pseudo_class = static_cast<PseudoClass>(i);
// If we're not building a rule cache for this pseudo class, just ignore it.
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
if (!style_cache.pseudo_class_rule_cache[i])
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-13 19:08:08 +01:00
continue;
if (selector.contains_pseudo_class(pseudo_class)) {
// For pseudo class rule caches we intentionally pass no pseudo-element, because we don't want to bucket pseudo class rules by pseudo-element type.
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
style_cache.pseudo_class_rule_cache[i]->add_rule(matching_rule, {}, contains_root_pseudo_class);
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-13 19:08:08 +01:00
}
}
LibWeb/CSS: Insert a combinator before all pseudo-element selectors Previously, and according to the spec, `a::part(foo)::before` would be a single CompoundSelector, even though it matches against 3 different targets. This meant some awkward swapping of targets in the middle of matching, and in particular it made `::part()` and `::slotted()` quite hacky, requiring them to track extra data on the MatchContext to then use later. This was scattered around and difficult to follow. Partly inspired by Gecko, this commit instead introduces an invisible PseudoElement combinator. After parsing a selector, we find any CompoundSelectors that contain a pseudo-element and split them up, so that each CompoundSelector only has a single target in the end. Where the pseudo-element was at the start of a CompoundSelector, we insert an invisible universal selector before it to represent its originating element. So now, a CompoundSelector deals with one target, and switching targets is done at the combinator. The one inconsistency is that we match the target of ::slotted() and ::part() in pseudo_element_transition_target(), instead of before then when processing the SimpleSelector. This is to avoid repeating the same computations twice. No outward-facing behaviour changes, though the invalidation metrics have changed.
2026-05-01 16:16:47 +01:00
rule_cache.add_rule(matching_rule, selector.target_pseudo_element(), contains_root_pseudo_class);
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-13 19:08:08 +01:00
}
++rule_index;
});
// Loosely based on https://drafts.csswg.org/css-animations-2/#keyframe-processing
sheet.for_each_effective_keyframes_at_rule([&](CSSKeyframesRule const& rule) {
auto keyframe_set = adopt_ref(*new Animations::KeyframeEffect::KeyFrameSet);
HashTable<PropertyID> animated_properties;
// Forwards pass, resolve all the user-specified keyframe properties.
for (auto const& keyframe_rule : *rule.css_rules()) {
auto const& keyframe = as<CSSKeyframeRule>(*keyframe_rule);
Animations::KeyframeEffect::KeyFrameSet::ResolvedKeyFrame resolved_keyframe;
auto key = static_cast<u64>(keyframe.key().value() * Animations::KeyframeEffect::AnimationKeyFrameKeyScaleFactor);
auto const& keyframe_style = *keyframe.style();
for (auto const& it : keyframe_style.properties()) {
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 10:18:25 -05:00
if (it.property_id == PropertyID::AnimationTimingFunction) {
// animation-timing-function is a list property, but inside @keyframes only
// a single value is meaningful.
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-03-30 08:34:55 +01:00
NonnullRefPtr<StyleValue const> easing_value = it.value;
if (easing_value->is_value_list()) {
auto const& list = easing_value->as_value_list();
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 10:18:25 -05:00
if (list.size() > 0)
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-03-30 08:34:55 +01:00
easing_value = list.value_at(0, false);
else
continue;
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 10:18:25 -05:00
}
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-03-30 08:34:55 +01:00
if (easing_value->is_easing() || easing_value->is_keyword())
resolved_keyframe.easing = EasingFunction::from_style_value(*easing_value);
else
resolved_keyframe.easing = easing_value;
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 10:18:25 -05:00
continue;
}
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 03:11:08 +00:00
if (it.property_id == PropertyID::AnimationComposition) {
auto composition_str = it.value->to_string(SerializationMode::Normal);
AnimationComposition composition = AnimationComposition::Replace;
if (composition_str == "add"sv)
composition = AnimationComposition::Add;
else if (composition_str == "accumulate"sv)
composition = AnimationComposition::Accumulate;
resolved_keyframe.composite = Animations::css_animation_composition_to_bindings_composite_operation_or_auto(composition);
continue;
}
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-13 19:08:08 +01:00
if (!is_animatable_property(it.property_id))
continue;
// Unresolved properties will be resolved in collect_animation_into()
StyleComputer::for_each_property_expanding_shorthands(it.property_id, it.value, [&](PropertyID shorthand_id, StyleValue const& shorthand_value) {
animated_properties.set(shorthand_id);
resolved_keyframe.properties.set(shorthand_id, NonnullRefPtr<StyleValue const> { shorthand_value });
});
}
LibWeb: Merge duplicate `@keyframe` rule selector values Previously, a keyframe with duplicate selector would cause a crash.
2026-03-30 09:34:01 +01:00
if (auto* existing_keyframe = keyframe_set->keyframes_by_key.find(key)) {
for (auto& [property_id, value] : resolved_keyframe.properties)
existing_keyframe->properties.set(property_id, move(value));
if (resolved_keyframe.composite != Bindings::CompositeOperationOrAuto::Auto)
existing_keyframe->composite = resolved_keyframe.composite;
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-03-30 08:34:55 +01:00
if (!resolved_keyframe.easing.has<Empty>())
existing_keyframe->easing = move(resolved_keyframe.easing);
LibWeb: Merge duplicate `@keyframe` rule selector values Previously, a keyframe with duplicate selector would cause a crash.
2026-03-30 09:34:01 +01:00
} else {
keyframe_set->keyframes_by_key.insert(key, resolved_keyframe);
}
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-13 19:08:08 +01:00
}
Animations::KeyframeEffect::generate_initial_and_final_frames(keyframe_set, animated_properties);
if constexpr (LIBWEB_CSS_DEBUG) {
dbgln("Resolved keyframe set '{}' into {} keyframes:", rule.name(), keyframe_set->keyframes_by_key.size());
for (auto it = keyframe_set->keyframes_by_key.begin(); it != keyframe_set->keyframes_by_key.end(); ++it)
dbgln(" - keyframe {}: {} properties", it.key(), it->properties.size());
}
rule_caches.main.rules_by_animation_keyframes.set(rule.name(), move(keyframe_set));
});
++style_sheet_index;
});
}
void StyleScope::collect_selector_insights(Selector const& selector, SelectorInsights& insights)
{
for (auto const& compound_selector : selector.compound_selectors()) {
for (auto const& simple_selector : compound_selector.simple_selectors) {
if (simple_selector.type == Selector::SimpleSelector::Type::PseudoClass) {
LibWeb: Keep shadow rule caches for user styles Do not invalidate shadow-root rule caches when the document user style sheet changes. Shadow trees still need style invalidation because document user rules can match their descendants, but their local author rule caches do not include the document user sheet. Since user and content-blocker sheets now live only in the document scope, shadow-DOM state changes also have to consult the document user selector insights for :has() and pseudo-class invalidation. Add content blocker coverage for user-style refreshes, shadow :has() state changes, and shadow pseudo-class invalidation.
2026-05-23 13:50:41 +02:00
insights.pseudo_classes.set(simple_selector.pseudo_class().type, true);
if (simple_selector.pseudo_class().type == PseudoClass::LocalLink)
insights.has_local_link_selectors = true;
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-13 19:08:08 +01:00
if (simple_selector.pseudo_class().type == PseudoClass::Has) {
insights.has_has_selectors = true;
LibWeb: Skip useless sibling scans in generic :has() walks Track whether any :has() relative selector in a style scope uses a sibling combinator and let the generic ancestor walk consult that before scanning ancestor siblings. This keeps descendant-only :has() invalidations from walking unrelated siblings while preserving the existing behavior for selectors that use + or ~. Add counter-based test coverage so the reduced sibling scans stay visible through the invalidation counters.
2026-04-18 22:25:15 +02:00
for (auto const& argument_selector : simple_selector.pseudo_class().argument_selector_list) {
for (auto const& relative_compound_selector : argument_selector->compound_selectors()) {
if (relative_compound_selector.combinator == Selector::Combinator::NextSibling
|| relative_compound_selector.combinator == Selector::Combinator::SubsequentSibling) {
insights.has_has_selectors_with_relative_selector_that_has_sibling_combinator = true;
break;
}
}
}
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-13 19:08:08 +01:00
}
for (auto const& argument_selector : simple_selector.pseudo_class().argument_selector_list) {
collect_selector_insights(*argument_selector, insights);
}
LibWeb: Make :has() invalidation reach ::slotted/:host rules Two related fixes that together let :host(...:has(...)) and ::slotted(.x:has(...)) rules re-evaluate when their light-DOM input changes: * StyleScope::collect_selector_insights only recursed into pseudo-class argument selectors. The :has() inside a ::slotted(...) compound argument was therefore invisible to a shadow scope's insights, so may_have_has_selectors() reported false and Node::invalidate_style skipped the :has() walk for that scope. Walk the ::slotted() argument selector through the same insight collection. * Element::invalidate_style_if_affected_by_has only set needs_style_update for elements in subject position. Inside ::slotted(.x:has(...)) and :host(...:has(...)) the rule's selector subject is the slot or host, but the styled element is this element; when the :has() result flips, this element's own computed style must be recomputed. Mark it dirty in the non-subject branch as well.
2026-04-25 16:13:43 +02:00
} else if (simple_selector.type == Selector::SimpleSelector::Type::PseudoElement) {
// Pseudo-elements like ::slotted(...) carry a compound selector argument whose contents need the
// same insight collection pass.
auto const& pseudo_element = simple_selector.pseudo_element();
if (pseudo_element.type() == PseudoElement::Slotted)
collect_selector_insights(pseudo_element.compound_selector(), insights);
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-13 19:08:08 +01:00
}
}
}
}
struct LayerNode {
OrderedHashMap<FlyString, LayerNode> children {};
};
static void flatten_layer_names_tree(Vector<FlyString>& layer_names, StringView const& parent_qualified_name, FlyString const& name, LayerNode const& node)
{
FlyString qualified_name = parent_qualified_name.is_empty() ? name : MUST(String::formatted("{}.{}", parent_qualified_name, name));
for (auto const& item : node.children)
flatten_layer_names_tree(layer_names, qualified_name, item.key, item.value);
layer_names.append(qualified_name);
}
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
void StyleScope::build_qualified_layer_names_cache(StyleCache& style_cache)
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-13 19:08:08 +01:00
{
LayerNode root;
auto insert_layer_name = [&](FlyString const& internal_qualified_name) {
auto* node = &root;
internal_qualified_name.bytes_as_string_view()
.for_each_split_view('.', SplitBehavior::Nothing, [&](StringView part) {
auto local_name = MUST(FlyString::from_utf8(part));
node = &node->children.ensure(local_name);
});
};
// Walk all style sheets, identifying when we first see a @layer name, and add its qualified name to the list.
// TODO: Separate the light and shadow-dom layers.
for_each_stylesheet(CascadeOrigin::Author, [&](auto& sheet) {
// NOTE: Postorder so that a @layer block is iterated after its children,
// because we want those children to occur before it in the list.
sheet.for_each_effective_rule(TraversalOrder::Postorder, [&](auto& rule) {
switch (rule.type()) {
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-04 14:34:28 +00:00
case CSSRule::Type::Import: {
auto& import = as<CSSImportRule>(rule);
// https://drafts.csswg.org/css-cascade-5/#at-import
// The layer is added to the layer order even if the import fails to load the stylesheet, but is
// subject to any import conditions (just as if declared by an @layer rule wrapped in the appropriate
// conditional group rules).
if (auto layer_name = import.internal_qualified_layer_name({}); layer_name.has_value() && import.matches())
insert_layer_name(layer_name.release_value());
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-13 19:08:08 +01:00
break;
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-04 14:34:28 +00:00
}
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-13 19:08:08 +01:00
case CSSRule::Type::LayerBlock: {
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-04 14:34:28 +00:00
auto& layer_block = as<CSSLayerBlockRule>(rule);
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-13 19:08:08 +01:00
insert_layer_name(layer_block.internal_qualified_name({}));
break;
}
case CSSRule::Type::LayerStatement: {
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-04 14:34:28 +00:00
auto& layer_statement = as<CSSLayerStatementRule>(rule);
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-13 19:08:08 +01:00
auto qualified_names = layer_statement.internal_qualified_name_list({});
for (auto& name : qualified_names)
insert_layer_name(name);
break;
}
// Ignore everything else
case CSSRule::Type::Style:
case CSSRule::Type::Media:
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-27 14:14:00 +00:00
case CSSRule::Type::Container:
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-01-31 01:03:29 +13:00
case CSSRule::Type::CounterStyle:
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-13 19:08:08 +01:00
case CSSRule::Type::FontFace:
LibWeb: Implement `CSSFontFeatureValuesRule`
2026-01-13 21:44:21 +13:00
case CSSRule::Type::FontFeatureValues:
LibWeb: Implement `CSSFunctionRule` Parsing/using this rule will come in later commits
2026-03-04 13:42:47 +13:00
case CSSRule::Type::Function:
LibWeb: Implement `CSSFunctionDeclarations` We also define it as a valid `NestedDeclarationsRule` for the relevant functions
2026-03-04 22:40:51 +13:00
case CSSRule::Type::FunctionDeclarations:
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-13 19:08:08 +01:00
case CSSRule::Type::Keyframes:
case CSSRule::Type::Keyframe:
case CSSRule::Type::Margin:
case CSSRule::Type::Namespace:
case CSSRule::Type::NestedDeclarations:
case CSSRule::Type::Page:
case CSSRule::Type::Property:
LibWeb/CSS: Implement the `@scope` rule `@scope (a) to (b) {}` applies its contained style rules to elements that have `a` as a parent, and do not have `a b` as a parent. Both the `a` and `b` selector lists are optional. Because it's situational whether a `@scope` will apply to a given element, we store the ancestor scope on the `MatchingRule`, similar to `@container`, and then determine during matching whether all the parent `@scope`s match or not. The rules for how selectors inside `@scope` are adjusted and interpreted are a bit confusing. Unlike for other at-rules, nested style rules inside `@scope` do not get a leading `&` added during parsing. To support this, `adapt_nested_relative_selector_list()` now takes a flag for whether its parent is a `@scope` or not. `@scope` can also contain nested declarations without itself being nested inside a style rule. When determining their selectors, nested declarations rules adopt the `@scope`'s scoping root if it has one, or otherwise fall back to the parent element of the `<style>` element (not implemented here,) or the `:root`. These are required to have zero specificity, so we wrap the selector in `:where()`.
2026-05-15 17:11:08 +01:00
case CSSRule::Type::Scope:
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-13 19:08:08 +01:00
case CSSRule::Type::Supports:
break;
}
});
});
// Now, produce a flat list of qualified names to use later
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
style_cache.qualified_layer_names_in_order.clear();
flatten_layer_names_tree(style_cache.qualified_layer_names_in_order, ""sv, {}, root);
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-13 19:08:08 +01:00
}
LibWeb: Make `@counter-style` tree-scoped This was a pretty straightforward change of storing registered counter styles on the relevant `StyleScope`s and resolving by following the process to dereference a global tree-scoped name, the only things of note are: - We only define predefined counter styles (e.g. decimal) on the document's scope (since otherwise overrides in outer scopes would themselves be overriden). - When registering counter styles we don't have the full list of extendable styles so we defer fallback to "decimal" for undefined styles until `CounterStyle::from_counter_style_definition`.
2026-04-06 11:23:33 +12:00
void StyleScope::invalidate_counter_style_cache()
{
m_needs_counter_style_cache_update = true;
// FIXME: We only need to invalidate this style scope and those belonging to descendant shadow roots (since they may
// include counter styles which extend the ones defined in this scope), not all style scopes in the document.
m_node->document().style_scope().m_needs_counter_style_cache_update = true;
m_node->document().for_each_shadow_root([&](DOM::ShadowRoot& shadow_root) {
shadow_root.style_scope().m_needs_counter_style_cache_update = true;
});
}
void StyleScope::build_counter_style_cache()
{
m_is_doing_counter_style_cache_update = true;
m_registered_counter_styles.clear_with_capacity();
HashMap<FlyString, CSS::CounterStyleDefinition> counter_style_definitions;
auto const define_complex_predefined_counter_styles = [&]() {
// https://drafts.csswg.org/css-counter-styles-3/#complex-predefined-counters
// While authors may define their own counter styles using the @counter-style rule or rely on the set of
// predefined counter styles, a few counter styles are described by rules that are too complex to be captured by
// the predefined algorithms.
// FIXME: All of the counter styles defined in this section have a spoken form of numbers
// https://drafts.csswg.org/css-counter-styles-3/#ethiopic-numeric-counter-style
// For this system, the name is "ethiopic-numeric", the range is 1 infinite, the suffix is "/ " (U+002F SOLIDUS
// followed by a U+0020 SPACE), and the rest of the descriptors have their initial value.
counter_style_definitions.set(
"ethiopic-numeric"_fly_string,
CSS::CounterStyleDefinition::create(
"ethiopic-numeric"_fly_string,
CSS::CounterStyleAlgorithmOrExtends { CSS::EthiopicNumericCounterStyleAlgorithm {} },
{},
{},
"/ "_fly_string,
Vector<CSS::CounterStyleRangeEntry> { { 1, AK::NumericLimits<i32>::max() } },
{},
{}));
// https://drafts.csswg.org/css-counter-styles-3/#extended-range-optional
// For all of these counter styles, the descriptors are the same as for the limited range variants, except for
// the range, which is calc(-1 * pow(10, 16) + 1) calc(pow(10, 16) - 1).
// AD-HOC: Ranges (as with all other CSS <integer>s are limited to i32 range)
Vector<CSS::CounterStyleRangeEntry> extended_cjk_range { { AK::clamp_to<i32>(-9999999999999999), AK::clamp_to<i32>(9999999999999999) } };
// https://drafts.csswg.org/css-counter-styles-3/#limited-chinese
// For all of these counter styles, the suffix is "、" U+3001, the fallback is cjk-decimal, the range is -9999
// 9999, and the negative value is given in the table of symbols for each style.
// simp-chinese-informal simp-chinese-formal trad-chinese-informal trad-chinese-formal
// Negative Sign 负 U+8D1F 负 U+8D1F 負 U+8CA0 負 U+8CA0
// https://drafts.csswg.org/css-counter-styles-3/#simp-chinese-informal
// simp-chinese-informal
counter_style_definitions.set(
"simp-chinese-informal"_fly_string,
CSS::CounterStyleDefinition::create(
"simp-chinese-informal"_fly_string,
CSS::CounterStyleAlgorithmOrExtends { CSS::ExtendedCJKCounterStyleAlgorithm { CSS::ExtendedCJKCounterStyleAlgorithm::Type::SimpChineseInformal } },
CSS::CounterStyleNegativeSign { "\U00008D1F"_fly_string, ""_fly_string },
{},
"\U00003001"_fly_string,
extended_cjk_range,
"cjk-decimal"_fly_string,
{}));
// https://drafts.csswg.org/css-counter-styles-3/#simp-chinese-formal
// simp-chinese-formal
counter_style_definitions.set(
"simp-chinese-formal"_fly_string,
CSS::CounterStyleDefinition::create(
"simp-chinese-formal"_fly_string,
CSS::CounterStyleAlgorithmOrExtends { CSS::ExtendedCJKCounterStyleAlgorithm { CSS::ExtendedCJKCounterStyleAlgorithm::Type::SimpChineseFormal } },
CSS::CounterStyleNegativeSign { "\U00008D1F"_fly_string, ""_fly_string },
{},
"\U00003001"_fly_string,
extended_cjk_range,
"cjk-decimal"_fly_string,
{}));
// https://drafts.csswg.org/css-counter-styles-3/#trad-chinese-informal
// trad-chinese-informal
counter_style_definitions.set(
"trad-chinese-informal"_fly_string,
CSS::CounterStyleDefinition::create(
"trad-chinese-informal"_fly_string,
CSS::CounterStyleAlgorithmOrExtends { CSS::ExtendedCJKCounterStyleAlgorithm { CSS::ExtendedCJKCounterStyleAlgorithm::Type::TradChineseInformal } },
CSS::CounterStyleNegativeSign { "\U00008CA0"_fly_string, ""_fly_string },
{},
"\U00003001"_fly_string,
extended_cjk_range,
"cjk-decimal"_fly_string,
{}));
// https://drafts.csswg.org/css-counter-styles-3/#trad-chinese-formal
// trad-chinese-formal
counter_style_definitions.set(
"trad-chinese-formal"_fly_string,
CSS::CounterStyleDefinition::create(
"trad-chinese-formal"_fly_string,
CSS::CounterStyleAlgorithmOrExtends { CSS::ExtendedCJKCounterStyleAlgorithm { CSS::ExtendedCJKCounterStyleAlgorithm::Type::TradChineseFormal } },
CSS::CounterStyleNegativeSign { "\U00008CA0"_fly_string, ""_fly_string },
{},
"\U00003001"_fly_string,
extended_cjk_range,
"cjk-decimal"_fly_string,
{}));
// https://drafts.csswg.org/css-counter-styles-3/#cjk-ideographic
// cjk-ideographic
// This counter style is identical to trad-chinese-informal. (It exists for legacy reasons.)
counter_style_definitions.set(
"cjk-ideographic"_fly_string,
CSS::CounterStyleDefinition::create(
"cjk-ideographic"_fly_string,
CSS::CounterStyleAlgorithmOrExtends { CSS::ExtendedCJKCounterStyleAlgorithm { CSS::ExtendedCJKCounterStyleAlgorithm::Type::TradChineseInformal } },
CSS::CounterStyleNegativeSign { "\U00008CA0"_fly_string, ""_fly_string },
{},
"\U00003001"_fly_string,
extended_cjk_range,
"cjk-decimal"_fly_string,
{}));
// https://drafts.csswg.org/css-counter-styles-3/#japanese-informal
// japanese-informal
counter_style_definitions.set(
"japanese-informal"_fly_string,
CSS::CounterStyleDefinition::create(
"japanese-informal"_fly_string,
CSS::CounterStyleAlgorithmOrExtends { CSS::ExtendedCJKCounterStyleAlgorithm { CSS::ExtendedCJKCounterStyleAlgorithm::Type::JapaneseInformal } },
CSS::CounterStyleNegativeSign { "\U000030DE\U000030A4\U000030CA\U000030B9"_fly_string, ""_fly_string },
{},
"\U00003001"_fly_string,
extended_cjk_range,
"cjk-decimal"_fly_string,
{}));
// https://drafts.csswg.org/css-counter-styles-3/#japanese-formal
// japanese-formal
counter_style_definitions.set(
"japanese-formal"_fly_string,
CSS::CounterStyleDefinition::create(
"japanese-formal"_fly_string,
CSS::CounterStyleAlgorithmOrExtends { CSS::ExtendedCJKCounterStyleAlgorithm { CSS::ExtendedCJKCounterStyleAlgorithm::Type::JapaneseFormal } },
CSS::CounterStyleNegativeSign { "\U000030DE\U000030A4\U000030CA\U000030B9"_fly_string, ""_fly_string },
{},
"\U00003001"_fly_string,
extended_cjk_range,
"cjk-decimal"_fly_string,
{}));
// https://drafts.csswg.org/css-counter-styles-3/#korean-hangul-formal
// korean-hangul-formal
counter_style_definitions.set(
"korean-hangul-formal"_fly_string,
CSS::CounterStyleDefinition::create(
"korean-hangul-formal"_fly_string,
CSS::CounterStyleAlgorithmOrExtends { CSS::ExtendedCJKCounterStyleAlgorithm { CSS::ExtendedCJKCounterStyleAlgorithm::Type::KoreanHangulFormal } },
CSS::CounterStyleNegativeSign { "\U0000B9C8\U0000C774\U0000B108\U0000C2A4 "_fly_string, ""_fly_string },
{},
", "_fly_string,
extended_cjk_range,
"cjk-decimal"_fly_string,
{}));
// https://drafts.csswg.org/css-counter-styles-3/#korean-hanja-informal
// korean-hanja-informal
counter_style_definitions.set(
"korean-hanja-informal"_fly_string,
CSS::CounterStyleDefinition::create(
"korean-hanja-informal"_fly_string,
CSS::CounterStyleAlgorithmOrExtends { CSS::ExtendedCJKCounterStyleAlgorithm { CSS::ExtendedCJKCounterStyleAlgorithm::Type::KoreanHanjaInformal } },
CSS::CounterStyleNegativeSign { "\U0000B9C8\U0000C774\U0000B108\U0000C2A4 "_fly_string, ""_fly_string },
{},
", "_fly_string,
extended_cjk_range,
"cjk-decimal"_fly_string,
{}));
// https://drafts.csswg.org/css-counter-styles-3/#korean-hanja-formal
// korean-hanja-formal
counter_style_definitions.set(
"korean-hanja-formal"_fly_string,
CSS::CounterStyleDefinition::create(
"korean-hanja-formal"_fly_string,
CSS::CounterStyleAlgorithmOrExtends { CSS::ExtendedCJKCounterStyleAlgorithm { CSS::ExtendedCJKCounterStyleAlgorithm::Type::KoreanHanjaFormal } },
CSS::CounterStyleNegativeSign { "\U0000B9C8\U0000C774\U0000B108\U0000C2A4 "_fly_string, ""_fly_string },
{},
", "_fly_string,
extended_cjk_range,
"cjk-decimal"_fly_string,
{}));
};
CSS::ComputationContext computation_context {
.length_resolution_context = CSS::Length::ResolutionContext::for_document(document())
};
Function<void(CSS::CSSStyleSheet&)> const collect_counter_style_definitions = [&](CSS::CSSStyleSheet const& style_sheet) {
style_sheet.for_each_effective_counter_style_at_rule([&](CSS::CSSCounterStyleRule const& counter_style_rule) {
if (auto const& definition = CSS::CounterStyleDefinition::from_counter_style_rule(counter_style_rule, computation_context); definition.has_value())
counter_style_definitions.set(definition->name(), *definition);
});
};
// NB: We should only register predefined counter styles in the document's style scope, this ensures overrides are
// correctly inherited by shadow roots.
if (m_node->is_document()) {
for_each_stylesheet(CSS::CascadeOrigin::UserAgent, collect_counter_style_definitions);
define_complex_predefined_counter_styles();
for_each_stylesheet(CSS::CascadeOrigin::User, collect_counter_style_definitions);
}
for_each_stylesheet(CSS::CascadeOrigin::Author, collect_counter_style_definitions);
VERIFY(!m_node->is_document() || counter_style_definitions.contains("decimal"_fly_string));
auto const is_part_of_extends_cycle = [&](FlyString const& counter_style_name) {
HashTable<FlyString> visited;
auto current_counter_style_name = counter_style_name;
while (true) {
if (visited.contains(current_counter_style_name))
return true;
visited.set(current_counter_style_name);
auto const& current_definition = counter_style_definitions.get(current_counter_style_name);
// NB: If we don't have a definition for this counter style it means it's either undefined in this scope
// (and will the counter style extending it will instead default to extending "decimal" instead) or it's
// defined in an outer style scope (and thus can't extend a counter style in the current scope), neither
// of which can lead to a cycle.
if (!current_definition.has_value())
return false;
if (current_definition->algorithm().has<CSS::CounterStyleAlgorithm>())
return false;
current_counter_style_name = current_definition->algorithm().get<CSS::CounterStyleSystemStyleValue::Extends>().name;
}
VERIFY_NOT_REACHED();
};
// NB: We register non-extending counter styles immediately and then extending counter styles after we have
// registered their corresponding extended counter style.
Vector<CSS::CounterStyleDefinition> extending_counter_styles;
for (auto const& [name, definition] : counter_style_definitions) {
// NB: We don't need to wait for this counter style's extended counter style to be registered since it doesn't
// have one - register it immediately.
if (definition.algorithm().has<CSS::CounterStyleAlgorithm>()) {
m_registered_counter_styles.set(name, CSS::CounterStyle::from_counter_style_definition(definition, *this));
continue;
}
auto extends = definition.algorithm().get<CSS::CounterStyleSystemStyleValue::Extends>();
if (is_part_of_extends_cycle(name)) {
auto copied = definition;
copied.set_algorithm(CSS::CounterStyleSystemStyleValue::Extends { "decimal"_fly_string });
extending_counter_styles.append(copied);
} else {
extending_counter_styles.append(definition);
}
}
// FIXME: This is O(n^2) in the worst case but we usually don't see many counter styles so it should be fine in practice.
while (!extending_counter_styles.is_empty()) {
for (size_t i = 0; i < extending_counter_styles.size(); ++i) {
auto const& definition = extending_counter_styles.at(i);
auto extends = definition.algorithm().get<CSS::CounterStyleSystemStyleValue::Extends>();
if (!m_registered_counter_styles.contains(extends.name) && counter_style_definitions.contains(extends.name))
continue;
m_registered_counter_styles.set(definition.name(), CSS::CounterStyle::from_counter_style_definition(definition, *this));
extending_counter_styles.remove(i);
--i;
}
}
m_is_doing_counter_style_cache_update = false;
m_needs_counter_style_cache_update = false;
}
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-13 19:08:08 +01:00
bool StyleScope::may_have_has_selectors() const
{
LibWeb: Avoid cold rule cache builds for :has() checks Cache lightweight selector insights on each stylesheet so cold style scopes can answer whether :has() invalidation is relevant without building a complete rule cache. This avoids forcing rule caches for shadow roots whose active sheets do not contain :has() selectors. Imported sheets contribute to their parent sheet's effective rules, so an imported sheet load or CSSOM change also clears ancestor selector insight caches. Add test-only counters and regression coverage for cold shadow roots with and without :has() selectors, plus delayed imported :has() rules.
2026-05-23 13:16:30 +02:00
if (!has_valid_rule_cache()) {
bool may_have_has_selectors = false;
for (auto cascade_origin : { CascadeOrigin::Author, CascadeOrigin::User, CascadeOrigin::UserAgent }) {
for_each_stylesheet(cascade_origin, [&](auto& style_sheet) {
if (style_sheet.selector_insights().has_has_selectors)
may_have_has_selectors = true;
});
}
return may_have_has_selectors;
}
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-13 19:08:08 +01:00
build_rule_cache_if_needed();
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
return m_rule_cache->selector_insights.has_has_selectors;
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-13 19:08:08 +01:00
}
LibWeb: Keep shadow rule caches for user styles Do not invalidate shadow-root rule caches when the document user style sheet changes. Shadow trees still need style invalidation because document user rules can match their descendants, but their local author rule caches do not include the document user sheet. Since user and content-blocker sheets now live only in the document scope, shadow-DOM state changes also have to consult the document user selector insights for :has() and pseudo-class invalidation. Add content blocker coverage for user-style refreshes, shadow :has() state changes, and shadow pseudo-class invalidation.
2026-05-23 13:50:41 +02:00
bool StyleScope::may_have_user_has_selectors() const
{
bool may_have_user_has_selectors = false;
for_each_stylesheet(CascadeOrigin::User, [&](auto& style_sheet) {
if (style_sheet.selector_insights().has_has_selectors)
may_have_user_has_selectors = true;
});
return may_have_user_has_selectors;
}
bool StyleScope::may_have_user_pseudo_class_selectors(PseudoClass pseudo_class) const
{
bool may_have_user_pseudo_class_selectors = false;
for_each_stylesheet(CascadeOrigin::User, [&](auto& style_sheet) {
if (style_sheet.selector_insights().pseudo_classes.get(pseudo_class))
may_have_user_pseudo_class_selectors = true;
});
return may_have_user_pseudo_class_selectors;
}
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-13 19:08:08 +01:00
bool StyleScope::have_has_selectors() const
{
build_rule_cache_if_needed();
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
return m_rule_cache->selector_insights.has_has_selectors;
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-13 19:08:08 +01:00
}
LibWeb: Skip useless sibling scans in generic :has() walks Track whether any :has() relative selector in a style scope uses a sibling combinator and let the generic ancestor walk consult that before scanning ancestor siblings. This keeps descendant-only :has() invalidations from walking unrelated siblings while preserving the existing behavior for selectors that use + or ~. Add counter-based test coverage so the reduced sibling scans stay visible through the invalidation counters.
2026-04-18 22:25:15 +02:00
bool StyleScope::may_have_has_selectors_with_relative_selector_that_has_sibling_combinator() const
{
LibWeb: Avoid cold rule cache builds for :has() checks Cache lightweight selector insights on each stylesheet so cold style scopes can answer whether :has() invalidation is relevant without building a complete rule cache. This avoids forcing rule caches for shadow roots whose active sheets do not contain :has() selectors. Imported sheets contribute to their parent sheet's effective rules, so an imported sheet load or CSSOM change also clears ancestor selector insight caches. Add test-only counters and regression coverage for cold shadow roots with and without :has() selectors, plus delayed imported :has() rules.
2026-05-23 13:16:30 +02:00
if (!has_valid_rule_cache()) {
bool may_have_has_selectors_with_relative_selector_that_has_sibling_combinator = false;
for (auto cascade_origin : { CascadeOrigin::Author, CascadeOrigin::User, CascadeOrigin::UserAgent }) {
for_each_stylesheet(cascade_origin, [&](auto& style_sheet) {
if (style_sheet.selector_insights().has_has_selectors_with_relative_selector_that_has_sibling_combinator)
may_have_has_selectors_with_relative_selector_that_has_sibling_combinator = true;
});
}
return may_have_has_selectors_with_relative_selector_that_has_sibling_combinator;
}
LibWeb: Skip useless sibling scans in generic :has() walks Track whether any :has() relative selector in a style scope uses a sibling combinator and let the generic ancestor walk consult that before scanning ancestor siblings. This keeps descendant-only :has() invalidations from walking unrelated siblings while preserving the existing behavior for selectors that use + or ~. Add counter-based test coverage so the reduced sibling scans stay visible through the invalidation counters.
2026-04-18 22:25:15 +02:00
build_rule_cache_if_needed();
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
return m_rule_cache->selector_insights.has_has_selectors_with_relative_selector_that_has_sibling_combinator;
LibWeb: Skip useless sibling scans in generic :has() walks Track whether any :has() relative selector in a style scope uses a sibling combinator and let the generic ancestor walk consult that before scanning ancestor siblings. This keeps descendant-only :has() invalidations from walking unrelated siblings while preserving the existing behavior for selectors that use + or ~. Add counter-based test coverage so the reduced sibling scans stay visible through the invalidation counters.
2026-04-18 22:25:15 +02:00
}
bool StyleScope::have_has_selectors_with_relative_selector_that_has_sibling_combinator() const
{
build_rule_cache_if_needed();
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
return m_rule_cache->selector_insights.has_has_selectors_with_relative_selector_that_has_sibling_combinator;
LibWeb: Skip useless sibling scans in generic :has() walks Track whether any :has() relative selector in a style scope uses a sibling combinator and let the generic ancestor walk consult that before scanning ancestor siblings. This keeps descendant-only :has() invalidations from walking unrelated siblings while preserving the existing behavior for selectors that use + or ~. Add counter-based test coverage so the reduced sibling scans stay visible through the invalidation counters.
2026-04-18 22:25:15 +02:00
}
LibWeb: Parse and evaluate `@container` `<size-feature>`s e.g., `@container (width >= 300px) {}` and similar. During style computation, flag any elements whose style depends on a size container. Then re-evaluate their style after the initial layout has been computed and size containers have a size. This may take multiple passes, as these may have further descendants that depend on their size, etc. We limit this to 8 passes currently. SizeFeature itself is very similar to MediaFeature, but queries the container element instead. There are only 6 size features specified, so they're hard-coded instead of generated from JSON. Also add a counter test for the narrower restyle path.
2026-05-14 12:46:17 +01:00
bool StyleScope::have_size_container_queries() const
{
build_rule_cache_if_needed();
return m_rule_cache->has_size_container_queries;
}
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-13 19:08:08 +01:00
DOM::Document& StyleScope::document() const
{
return m_node->document();
}
RuleCache const& StyleScope::get_pseudo_class_rule_cache(PseudoClass pseudo_class) const
{
build_rule_cache_if_needed();
LibWeb: Share singleton constructed stylesheet rule caches Share the style cache for shadow roots whose only active author sheet is the same constructed stylesheet. Matching already carries the effective shadow root separately, so the cache can be reused while selectors such as :host and ::slotted() still evaluate against each consuming shadow root. Keep the optimization conservative by falling back to the existing per-scope cache whenever the shadow root has multiple active sheets, a non-constructed sheet, or a page user stylesheet. Drop the shared cache when the stylesheet rules or media query match state change. Add coverage for two shadow roots adopting the same constructed sheet, including :host, ::slotted(), and replaceSync() invalidation.
2026-04-28 10:27:31 +02:00
return *m_rule_cache->pseudo_class_rule_cache[to_underlying(pseudo_class)];
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-13 19:08:08 +01:00
}
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-08 10:20:32 +13:00
void StyleScope::for_each_active_css_style_sheet(Function<void(CSS::CSSStyleSheet&)> const& callback) const
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-13 19:08:08 +01:00
{
if (auto* shadow_root = as_if<DOM::ShadowRoot>(*m_node)) {
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-08 10:20:32 +13:00
shadow_root->for_each_active_css_style_sheet(callback);
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-13 19:08:08 +01:00
} else {
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-08 10:20:32 +13:00
m_node->document().for_each_active_css_style_sheet(callback);
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-13 19:08:08 +01:00
}
}
LibWeb: Narrow :has descendant invalidation fanout When a :has() mutation is known to come from a specific subtree, use that subtree as the mutation root while walking observed ancestors. Before dirtying an anchor and its non-subject descendants, check whether any cached :has() rule for that anchor can observe the changed subtree. This keeps unrelated descendant mutations from invalidating every rule that merely contains :has().
2026-04-27 10:06:35 +02:00
void StyleScope::schedule_ancestors_style_invalidation_due_to_presence_of_has(GC::Ref<DOM::Node> node)
{
LibWeb: Use an `OrderedHashMap` for pending :has() invalidations Every DOM mutation that may affect a :has() selector enqueues an entry in StyleScope keyed by an ancestor node. The entries were previously stored in a Vector and linearly scanned on every insert to deduplicate by node. We now use an OrderedHashMap instead, eliminating the quadratic deduplication.
2026-04-29 07:03:01 +01:00
auto previous_size = m_pending_has_invalidations.size();
auto& mutation_features = m_pending_has_invalidations.ensure(node);
if (m_pending_has_invalidations.size() == previous_size)
return;
LibWeb: Narrow :has descendant invalidation fanout When a :has() mutation is known to come from a specific subtree, use that subtree as the mutation root while walking observed ancestors. Before dirtying an anchor and its non-subject descendants, check whether any cached :has() rule for that anchor can observe the changed subtree. This keeps unrelated descendant mutations from invalidating every rule that merely contains :has().
2026-04-27 10:06:35 +02:00
mutation_features.is_conservative = true;
document().set_needs_invalidation_of_elements_affected_by_has();
}
static void merge_pending_has_invalidation_mutation_features(PendingHasInvalidationMutationFeatures& target, PendingHasInvalidationMutationFeatures const& source)
{
target.is_conservative |= source.is_conservative;
LibWeb: Skip unchanged :has() mutation fanout Collect concrete features from pending :has() mutations and use them to avoid re-invalidating non-subject :has() anchors whose matching rules cannot be affected by the mutation. Keep conservative behavior for shadow-boundary fanout, structural sibling changes, and selectors whose relevant features cannot be proven. For sibling-combinator relative selectors, avoid marking an anchor as handled until it is actually invalidated, and make the sibling scan respect anchors skipped by the feature filter for the same mutation.
2026-04-29 18:04:18 +02:00
target.may_affect_sibling_relationships |= source.may_affect_sibling_relationships;
target.may_affect_pseudo_classes |= source.may_affect_pseudo_classes;
LibWeb: Narrow :has descendant invalidation fanout When a :has() mutation is known to come from a specific subtree, use that subtree as the mutation root while walking observed ancestors. Before dirtying an anchor and its non-subject descendants, check whether any cached :has() rule for that anchor can observe the changed subtree. This keeps unrelated descendant mutations from invalidating every rule that merely contains :has().
2026-04-27 10:06:35 +02:00
for (auto const& tag_name : source.tag_names)
target.tag_names.set(tag_name);
for (auto const& id : source.ids)
target.ids.set(id);
for (auto const& class_name : source.class_names)
target.class_names.set(class_name);
for (auto const& attribute_name : source.attribute_names)
target.attribute_names.set(attribute_name);
LibWeb: Skip unchanged :has() mutation fanout Collect concrete features from pending :has() mutations and use them to avoid re-invalidating non-subject :has() anchors whose matching rules cannot be affected by the mutation. Keep conservative behavior for shadow-boundary fanout, structural sibling changes, and selectors whose relevant features cannot be proven. For sibling-combinator relative selectors, avoid marking an anchor as handled until it is actually invalidated, and make the sibling scan respect anchors skipped by the feature filter for the same mutation.
2026-04-29 18:04:18 +02:00
for (auto const& pseudo_class : source.pseudo_classes)
target.pseudo_classes.set(pseudo_class);
LibWeb: Narrow :has descendant invalidation fanout When a :has() mutation is known to come from a specific subtree, use that subtree as the mutation root while walking observed ancestors. Before dirtying an anchor and its non-subject descendants, check whether any cached :has() rule for that anchor can observe the changed subtree. This keeps unrelated descendant mutations from invalidating every rule that merely contains :has().
2026-04-27 10:06:35 +02:00
}
static void collect_pending_has_invalidation_features_from_element(PendingHasInvalidationMutationFeatures& features, DOM::Element const& element)
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-10 21:50:24 +01:00
{
LibWeb: Narrow :has descendant invalidation fanout When a :has() mutation is known to come from a specific subtree, use that subtree as the mutation root while walking observed ancestors. Before dirtying an anchor and its non-subject descendants, check whether any cached :has() rule for that anchor can observe the changed subtree. This keeps unrelated descendant mutations from invalidating every rule that merely contains :has().
2026-04-27 10:06:35 +02:00
features.tag_names.set(element.local_name());
if (element.namespace_uri() != Namespace::HTML)
features.tag_names.set(element.lowercased_local_name());
if (auto id = element.id(); id.has_value())
features.ids.set(*id);
for (auto const& class_name : element.class_names())
features.class_names.set(class_name);
element.for_each_attribute([&](FlyString const& name, String const&) {
features.attribute_names.set(name);
if (element.namespace_uri() != Namespace::HTML)
features.attribute_names.set(name.to_ascii_lowercase());
});
}
LibWeb: Coalesce safe :has() child-list invalidations Avoid repeated :has() child-list scheduling when pending data already covers every concrete feature bucket used by :has() selectors in a style scope. Featureless-sensitive scopes record child-list mutations conservatively instead. That conservative path avoids scanning mutation subtrees for concrete features when invalidation cannot rely on them anyway. When loading the Intel ISA PDF in pdf.js, instrumented subtree feature-collection visits at about 40k style invalidations dropped from around 71k to 1.6k, saving ~650ms of main thread time on my Linux machine. :^)
2026-04-30 11:24:35 +02:00
void StyleScope::record_conservative_pending_has_invalidation(GC::Ref<DOM::Node> scheduled_node, bool may_affect_sibling_relationships)
{
auto previous_size = m_pending_has_invalidations.size();
auto& mutation_features = m_pending_has_invalidations.ensure(scheduled_node);
mutation_features.is_conservative = true;
mutation_features.may_affect_sibling_relationships |= may_affect_sibling_relationships;
mutation_features.may_affect_pseudo_classes = true;
if (m_pending_has_invalidations.size() != previous_size)
document().set_needs_invalidation_of_elements_affected_by_has();
}
LibWeb: Narrow :has descendant invalidation fanout When a :has() mutation is known to come from a specific subtree, use that subtree as the mutation root while walking observed ancestors. Before dirtying an anchor and its non-subject descendants, check whether any cached :has() rule for that anchor can observe the changed subtree. This keeps unrelated descendant mutations from invalidating every rule that merely contains :has().
2026-04-27 10:06:35 +02:00
static PendingHasInvalidationMutationFeatures collect_pending_has_invalidation_mutation_features(DOM::Node& mutation_root, bool includes_descendants)
{
PendingHasInvalidationMutationFeatures features;
LibWeb: Skip unchanged :has() mutation fanout Collect concrete features from pending :has() mutations and use them to avoid re-invalidating non-subject :has() anchors whose matching rules cannot be affected by the mutation. Keep conservative behavior for shadow-boundary fanout, structural sibling changes, and selectors whose relevant features cannot be proven. For sibling-combinator relative selectors, avoid marking an anchor as handled until it is actually invalidated, and make the sibling scan respect anchors skipped by the feature filter for the same mutation.
2026-04-29 18:04:18 +02:00
features.may_affect_sibling_relationships = includes_descendants;
features.may_affect_pseudo_classes = true;
LibWeb: Narrow :has descendant invalidation fanout When a :has() mutation is known to come from a specific subtree, use that subtree as the mutation root while walking observed ancestors. Before dirtying an anchor and its non-subject descendants, check whether any cached :has() rule for that anchor can observe the changed subtree. This keeps unrelated descendant mutations from invalidating every rule that merely contains :has().
2026-04-27 10:06:35 +02:00
auto collect_node = [&](DOM::Node& node) {
if (node.is_character_data())
return;
if (auto* element = as_if<DOM::Element>(node))
collect_pending_has_invalidation_features_from_element(features, *element);
};
if (!includes_descendants) {
collect_node(mutation_root);
return features;
}
mutation_root.for_each_in_inclusive_subtree([&](DOM::Node& node) {
collect_node(node);
return TraversalDecision::Continue;
});
return features;
}
static PendingHasInvalidationMutationFeatures collect_pending_has_invalidation_mutation_features(Vector<CSS::InvalidationSet::Property> const& properties)
{
PendingHasInvalidationMutationFeatures features;
for (auto const& property : properties) {
switch (property.type) {
case InvalidationSet::Property::Type::Class:
features.class_names.set(property.name());
break;
case InvalidationSet::Property::Type::Id:
features.ids.set(property.name());
break;
case InvalidationSet::Property::Type::TagName:
features.tag_names.set(property.name());
break;
case InvalidationSet::Property::Type::Attribute:
features.attribute_names.set(property.name());
break;
case InvalidationSet::Property::Type::InvalidateSelf:
case InvalidationSet::Property::Type::InvalidateWholeSubtree:
features.is_conservative = true;
break;
LibWeb: Skip unchanged :has() mutation fanout Collect concrete features from pending :has() mutations and use them to avoid re-invalidating non-subject :has() anchors whose matching rules cannot be affected by the mutation. Keep conservative behavior for shadow-boundary fanout, structural sibling changes, and selectors whose relevant features cannot be proven. For sibling-combinator relative selectors, avoid marking an anchor as handled until it is actually invalidated, and make the sibling scan respect anchors skipped by the feature filter for the same mutation.
2026-04-29 18:04:18 +02:00
case InvalidationSet::Property::Type::PseudoClass:
features.pseudo_classes.set(property.value.get<PseudoClass>());
break;
LibWeb: Narrow :has descendant invalidation fanout When a :has() mutation is known to come from a specific subtree, use that subtree as the mutation root while walking observed ancestors. Before dirtying an anchor and its non-subject descendants, check whether any cached :has() rule for that anchor can observe the changed subtree. This keeps unrelated descendant mutations from invalidating every rule that merely contains :has().
2026-04-27 10:06:35 +02:00
}
}
return features;
}
void StyleScope::record_pending_has_invalidation_mutation_features(GC::Ref<DOM::Node> scheduled_node, GC::Ref<DOM::Node> mutation_root, bool includes_descendants)
{
auto features = collect_pending_has_invalidation_mutation_features(*mutation_root, includes_descendants);
LibWeb: Use an `OrderedHashMap` for pending :has() invalidations Every DOM mutation that may affect a :has() selector enqueues an entry in StyleScope keyed by an ancestor node. The entries were previously stored in a Vector and linearly scanned on every insert to deduplicate by node. We now use an OrderedHashMap instead, eliminating the quadratic deduplication.
2026-04-29 07:03:01 +01:00
auto previous_size = m_pending_has_invalidations.size();
auto& existing_features = m_pending_has_invalidations.ensure(scheduled_node);
if (m_pending_has_invalidations.size() == previous_size) {
merge_pending_has_invalidation_mutation_features(existing_features, features);
return;
LibWeb: Narrow :has descendant invalidation fanout When a :has() mutation is known to come from a specific subtree, use that subtree as the mutation root while walking observed ancestors. Before dirtying an anchor and its non-subject descendants, check whether any cached :has() rule for that anchor can observe the changed subtree. This keeps unrelated descendant mutations from invalidating every rule that merely contains :has().
2026-04-27 10:06:35 +02:00
}
LibWeb: Use an `OrderedHashMap` for pending :has() invalidations Every DOM mutation that may affect a :has() selector enqueues an entry in StyleScope keyed by an ancestor node. The entries were previously stored in a Vector and linearly scanned on every insert to deduplicate by node. We now use an OrderedHashMap instead, eliminating the quadratic deduplication.
2026-04-29 07:03:01 +01:00
existing_features = move(features);
LibWeb: Narrow :has descendant invalidation fanout When a :has() mutation is known to come from a specific subtree, use that subtree as the mutation root while walking observed ancestors. Before dirtying an anchor and its non-subject descendants, check whether any cached :has() rule for that anchor can observe the changed subtree. This keeps unrelated descendant mutations from invalidating every rule that merely contains :has().
2026-04-27 10:06:35 +02:00
document().set_needs_invalidation_of_elements_affected_by_has();
}
void StyleScope::record_pending_has_invalidation_mutation_features(GC::Ref<DOM::Node> scheduled_node, Vector<CSS::InvalidationSet::Property> const& properties)
{
auto features = collect_pending_has_invalidation_mutation_features(properties);
LibWeb: Use an `OrderedHashMap` for pending :has() invalidations Every DOM mutation that may affect a :has() selector enqueues an entry in StyleScope keyed by an ancestor node. The entries were previously stored in a Vector and linearly scanned on every insert to deduplicate by node. We now use an OrderedHashMap instead, eliminating the quadratic deduplication.
2026-04-29 07:03:01 +01:00
auto previous_size = m_pending_has_invalidations.size();
auto& existing_features = m_pending_has_invalidations.ensure(scheduled_node);
if (m_pending_has_invalidations.size() == previous_size) {
merge_pending_has_invalidation_mutation_features(existing_features, features);
return;
LibWeb: Narrow :has descendant invalidation fanout When a :has() mutation is known to come from a specific subtree, use that subtree as the mutation root while walking observed ancestors. Before dirtying an anchor and its non-subject descendants, check whether any cached :has() rule for that anchor can observe the changed subtree. This keeps unrelated descendant mutations from invalidating every rule that merely contains :has().
2026-04-27 10:06:35 +02:00
}
LibWeb: Use an `OrderedHashMap` for pending :has() invalidations Every DOM mutation that may affect a :has() selector enqueues an entry in StyleScope keyed by an ancestor node. The entries were previously stored in a Vector and linearly scanned on every insert to deduplicate by node. We now use an OrderedHashMap instead, eliminating the quadratic deduplication.
2026-04-29 07:03:01 +01:00
existing_features = move(features);
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-10 21:50:24 +01:00
document().set_needs_invalidation_of_elements_affected_by_has();
}
LibWeb: Make `@counter-style` tree-scoped This was a pretty straightforward change of storing registered counter styles on the relevant `StyleScope`s and resolving by following the process to dereference a global tree-scoped name, the only things of note are: - We only define predefined counter styles (e.g. decimal) on the document's scope (since otherwise overrides in outer scopes would themselves be overriden). - When registering counter styles we don't have the full list of extendable styles so we defer fallback to "decimal" for undefined styles until `CounterStyle::from_counter_style_definition`.
2026-04-06 11:23:33 +12:00
RefPtr<CSS::CounterStyle const> StyleScope::get_registered_counter_style(FlyString const& name) const
{
if (m_needs_counter_style_cache_update && !m_is_doing_counter_style_cache_update)
const_cast<StyleScope*>(this)->build_counter_style_cache();
return dereference_global_tree_scoped_reference<CSS::CounterStyle const*>([&](StyleScope const& scope) { return scope.m_registered_counter_styles.get(name); })
.value_or(nullptr);
}
LibWeb: Add helper method to dereference global tree-scoped references
2026-04-05 23:19:13 +12:00
template<typename T>
Optional<T> StyleScope::dereference_global_tree_scoped_reference(Function<Optional<T>(StyleScope const&)> const& callback) const
{
// https://drafts.csswg.org/css-shadow-1/#tree-scoped-name-global
// If a tree-scoped name is global (such as @font-face names), then when a tree-scoped reference is dereferenced to
// find it, first search only the tree-scoped names associated with the same root as the tree-scoped reference. If
// no relevant tree-scoped name is found, and the root is a shadow root, then repeat this search in the root’s
// host’s node tree (recursively). (In other words, global tree-scoped names “inherit” into descendant shadow trees,
// so long as they don’t define the same name themselves.)
if (auto result = callback(*this); result.has_value())
return result;
if (auto* shadow_root = as_if<DOM::ShadowRoot>(*m_node)) {
if (auto* host = shadow_root->host()) {
auto const& root = host->root();
if (root.is_shadow_root()) {
auto const& shadow_root = as<DOM::ShadowRoot>(root);
if (shadow_root.uses_document_style_sheets())
return root.document().style_scope().dereference_global_tree_scoped_reference(callback);
return shadow_root.style_scope().dereference_global_tree_scoped_reference(callback);
}
return as<DOM::Document>(root).style_scope().dereference_global_tree_scoped_reference(callback);
}
}
return {};
}
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-13 19:08:08 +01:00
}
Reference in a new issue Copy permalink