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

892 lines
40 KiB
C++
Raw Permalink 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
*/
#include <LibCore/ReportTime.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>
#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>
#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: 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::visit_edges(GC::Cell::Visitor& visitor)
{
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(m_node);
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
visitor.visit(m_user_style_sheet);
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
for (auto& cache : m_pseudo_class_rule_cache) {
if (cache)
cache->visit_edges(visitor);
}
if (m_author_rule_cache)
m_author_rule_cache->visit_edges(visitor);
if (m_user_rule_cache)
m_user_rule_cache->visit_edges(visitor);
if (m_user_agent_rule_cache)
m_user_agent_rule_cache->visit_edges(visitor);
}
void MatchingRule::visit_edges(GC::Cell::Visitor& visitor)
{
visitor.visit(shadow_root);
visitor.visit(rule);
visitor.visit(sheet);
}
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)
{
m_qualified_layer_names_in_order.append({});
}
void StyleScope::build_rule_cache()
{
m_author_rule_cache = make<RuleCaches>();
m_user_rule_cache = make<RuleCaches>();
m_user_agent_rule_cache = make<RuleCaches>();
m_selector_insights = make<SelectorInsights>();
m_style_invalidation_data = make<StyleInvalidationData>();
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
build_qualified_layer_names_cache();
m_pseudo_class_rule_cache[to_underlying(PseudoClass::Hover)] = make<RuleCache>();
m_pseudo_class_rule_cache[to_underlying(PseudoClass::Active)] = make<RuleCache>();
m_pseudo_class_rule_cache[to_underlying(PseudoClass::Focus)] = make<RuleCache>();
m_pseudo_class_rule_cache[to_underlying(PseudoClass::FocusWithin)] = make<RuleCache>();
m_pseudo_class_rule_cache[to_underlying(PseudoClass::FocusVisible)] = make<RuleCache>();
m_pseudo_class_rule_cache[to_underlying(PseudoClass::Target)] = make<RuleCache>();
make_rule_cache_for_cascade_origin(CascadeOrigin::Author, *m_selector_insights);
make_rule_cache_for_cascade_origin(CascadeOrigin::User, *m_selector_insights);
make_rule_cache_for_cascade_origin(CascadeOrigin::UserAgent, *m_selector_insights);
}
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: 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
m_author_rule_cache = nullptr;
// 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_rule_cache = nullptr;
m_user_style_sheet = nullptr;
// NOTE: It might not be necessary to throw away the UA rule cache.
// If we are sure that it's safe, we could keep it as an optimization.
m_user_agent_rule_cache = nullptr;
m_pseudo_class_rule_cache = {};
m_style_invalidation_data = 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;
if (auto user_style_source = document().page().user_style(); user_style_source.has_value())
m_user_style_sheet = GC::make_root(parse_css_stylesheet(CSS::Parser::ParsingParams(document()), user_style_source.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
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: 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));
}
}
void StyleScope::make_rule_cache_for_cascade_origin(CascadeOrigin cascade_origin, SelectorInsights& insights)
{
GC::Ptr<DOM::ShadowRoot const> scope_shadow_root;
if (m_node->is_shadow_root())
scope_shadow_root = as<DOM::ShadowRoot>(*m_node);
Vector<MatchingRule> matching_rules;
size_t style_sheet_index = 0;
for_each_stylesheet(cascade_origin, [&](auto& sheet) {
auto& rule_caches = [&] -> RuleCaches& {
switch (cascade_origin) {
case CascadeOrigin::Author:
return *m_author_rule_cache;
case CascadeOrigin::User:
return *m_user_rule_cache;
case CascadeOrigin::UserAgent:
return *m_user_agent_rule_cache;
default:
VERIFY_NOT_REACHED();
}
}();
size_t rule_index = 0;
sheet.for_each_effective_style_producing_rule([&](auto const& rule) {
SelectorList const& absolutized_selectors = [&]() {
if (rule.type() == CSSRule::Type::Style)
return static_cast<CSSStyleRule const&>(rule).absolutized_selectors();
if (rule.type() == CSSRule::Type::NestedDeclarations)
return static_cast<CSSNestedDeclarations const&>(rule).parent_style_rule().absolutized_selectors();
VERIFY_NOT_REACHED();
}();
for (auto const& selector : absolutized_selectors) {
m_style_invalidation_data->build_invalidation_sets_for_selector(selector);
}
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
.shadow_root = scope_shadow_root,
.rule = &rule,
.sheet = sheet,
.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>(); });
collect_selector_insights(selector, insights);
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.
if (!m_pseudo_class_rule_cache[i])
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.
m_pseudo_class_rule_cache[i]->add_rule(matching_rule, {}, contains_root_pseudo_class);
}
}
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_cache.add_rule(matching_rule, selector.target_pseudo_element().map([](auto& it) { return it.type(); }), 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) {
if (simple_selector.pseudo_class().type == PseudoClass::Has) {
insights.has_has_selectors = true;
}
for (auto const& argument_selector : simple_selector.pseudo_class().argument_selector_list) {
collect_selector_insights(*argument_selector, insights);
}
}
}
}
}
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);
}
void StyleScope::build_qualified_layer_names_cache()
{
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:
case CSSRule::Type::Supports:
break;
}
});
});
// Now, produce a flat list of qualified names to use later
m_qualified_layer_names_in_order.clear();
flatten_layer_names_tree(m_qualified_layer_names_in_order, ""sv, {}, root);
}
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
{
if (!has_valid_rule_cache())
return true;
build_rule_cache_if_needed();
return m_selector_insights->has_has_selectors;
}
bool StyleScope::have_has_selectors() const
{
build_rule_cache_if_needed();
return m_selector_insights->has_has_selectors;
}
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();
return *m_pseudo_class_rule_cache[to_underlying(pseudo_class)];
}
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: 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
void StyleScope::schedule_ancestors_style_invalidation_due_to_presence_of_has(DOM::Node& node)
{
m_pending_nodes_for_style_invalidation_due_to_presence_of_has.set(node);
document().set_needs_invalidation_of_elements_affected_by_has();
}
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_style_of_elements_affected_by_has()
{
if (m_pending_nodes_for_style_invalidation_due_to_presence_of_has.is_empty()) {
return;
}
ScopeGuard clear_pending_nodes_guard = [&] {
m_pending_nodes_for_style_invalidation_due_to_presence_of_has.clear();
};
// It's ok to call have_has_selectors() instead of may_have_has_selectors() here and force
// rule cache build, because it's going to be built soon anyway, since we could get here
// only from update_style().
if (!have_has_selectors()) {
return;
}
LibWeb: Deduplicate :has() ancestor invalidation When multiple descendant nodes change in one style invalidation cycle, invalidate_style_of_elements_affected_by_has() walks from each pending node up to all ancestors. Since ancestor paths converge going up, the same ancestor elements get processed repeatedly, causing redundant invalidate_style_if_affected_by_has() calls.
2026-03-10 20:59:28 +01:00
HashTable<DOM::Element*> elements_already_invalidated_for_has;
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 nodes = move(m_pending_nodes_for_style_invalidation_due_to_presence_of_has);
LibWeb: Use GC::WeakHashSet for StyleScope's pending :has() nodes Replace the unsafe HashTable<GC::Weak<DOM::Node>> with GC::WeakHashSet<DOM::Node>. The null check in the iteration loop is no longer needed since WeakHashSet's iterator skips dead entries.
2026-02-24 12:36:25 +01:00
for (auto& node : nodes) {
for (auto* ancestor = &node; ancestor; ancestor = ancestor->parent_or_shadow_host()) {
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 (!ancestor->is_element())
continue;
auto& element = static_cast<DOM::Element&>(*ancestor);
LibWeb: Deduplicate :has() ancestor invalidation When multiple descendant nodes change in one style invalidation cycle, invalidate_style_of_elements_affected_by_has() walks from each pending node up to all ancestors. Since ancestor paths converge going up, the same ancestor elements get processed repeatedly, causing redundant invalidate_style_if_affected_by_has() calls.
2026-03-10 20:59:28 +01:00
if (elements_already_invalidated_for_has.set(&element) != AK::HashSetResult::InsertedNewEntry)
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
element.invalidate_style_if_affected_by_has();
auto* parent = ancestor->parent_or_shadow_host();
if (!parent)
return;
// If any ancestor's sibling was tested against selectors like ".a:has(+ .b)" or ".a:has(~ .b)"
// its style might be affected by the change in descendant node.
parent->for_each_child_of_type<DOM::Element>([&](auto& ancestor_sibling_element) {
LibWeb: Deduplicate :has() ancestor invalidation When multiple descendant nodes change in one style invalidation cycle, invalidate_style_of_elements_affected_by_has() walks from each pending node up to all ancestors. Since ancestor paths converge going up, the same ancestor elements get processed repeatedly, causing redundant invalidate_style_if_affected_by_has() calls.
2026-03-10 20:59:28 +01:00
if (ancestor_sibling_element.affected_by_has_pseudo_class_with_relative_selector_that_has_sibling_combinator()) {
if (elements_already_invalidated_for_has.set(&ancestor_sibling_element) != AK::HashSetResult::InsertedNewEntry)
return IterationDecision::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
ancestor_sibling_element.invalidate_style_if_affected_by_has();
LibWeb: Deduplicate :has() ancestor invalidation When multiple descendant nodes change in one style invalidation cycle, invalidate_style_of_elements_affected_by_has() walks from each pending node up to all ancestors. Since ancestor paths converge going up, the same ancestor elements get processed repeatedly, causing redundant invalidate_style_if_affected_by_has() calls.
2026-03-10 20:59:28 +01: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
return IterationDecision::Continue;
});
}
}
}
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