ladybird/Libraries/LibWeb/CSS/CSSRuleList.cpp
Sam Atkins 5c928eb7eb LibWeb/CSS: Implement the @scope rule
`@scope (a) to (b) {}` applies its contained style rules to elements
that have `a` as a parent, and do not have `a b` as a parent. Both the
`a` and `b` selector lists are optional.

Because it's situational whether a `@scope` will apply to a given
element, we store the ancestor scope on the `MatchingRule`, similar to
`@container`, and then determine during matching whether all the parent
`@scope`s match or not.

The rules for how selectors inside `@scope` are adjusted and interpreted
are a bit confusing. Unlike for other at-rules, nested style rules
inside `@scope` do not get a leading `&` added during parsing. To
support this, `adapt_nested_relative_selector_list()` now takes a flag
for whether its parent is a `@scope` or not.

`@scope` can also contain nested declarations without itself being
nested inside a style rule.

When determining their selectors, nested declarations rules adopt the
`@scope`'s scoping root if it has one, or otherwise fall back to the
parent element of the `<style>` element (not implemented here,) or the
`:root`. These are required to have zero specificity, so we wrap the
selector in `:where()`.
2026-05-22 10:00:42 +01:00

346 lines
14 KiB
C++
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*
* Copyright (c) 2021-2026, Sam Atkins <sam@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <AK/TypeCasts.h>
#include <LibJS/Runtime/ExternalMemory.h>
#include <LibWeb/Bindings/CSSRuleList.h>
#include <LibWeb/Bindings/Intrinsics.h>
#include <LibWeb/CSS/CSSContainerRule.h>
#include <LibWeb/CSS/CSSFontFaceRule.h>
#include <LibWeb/CSS/CSSFontFeatureValuesRule.h>
#include <LibWeb/CSS/CSSFunctionRule.h>
#include <LibWeb/CSS/CSSImportRule.h>
#include <LibWeb/CSS/CSSKeyframesRule.h>
#include <LibWeb/CSS/CSSLayerBlockRule.h>
#include <LibWeb/CSS/CSSMediaRule.h>
#include <LibWeb/CSS/CSSNestedDeclarations.h>
#include <LibWeb/CSS/CSSRule.h>
#include <LibWeb/CSS/CSSRuleList.h>
#include <LibWeb/CSS/CSSScopeRule.h>
#include <LibWeb/CSS/CSSSupportsRule.h>
#include <LibWeb/CSS/Parser/Parser.h>
#include <LibWeb/HTML/Window.h>
namespace Web::CSS {
GC_DEFINE_ALLOCATOR(CSSRuleList);
GC::Ref<CSSRuleList> CSSRuleList::create(JS::Realm& realm, ReadonlySpan<GC::Ref<CSSRule>> rules)
{
auto rule_list = realm.create<CSSRuleList>(realm);
for (auto rule : rules)
rule_list->m_rules.append(rule);
return rule_list;
}
CSSRuleList::CSSRuleList(JS::Realm& realm)
: Bindings::PlatformObject(realm)
{
m_legacy_platform_object_flags = LegacyPlatformObjectFlags { .supports_indexed_properties = 1 };
}
void CSSRuleList::initialize(JS::Realm& realm)
{
WEB_SET_PROTOTYPE_FOR_INTERFACE(CSSRuleList);
Base::initialize(realm);
}
void CSSRuleList::visit_edges(Cell::Visitor& visitor)
{
Base::visit_edges(visitor);
visitor.visit(m_rules);
visitor.visit(m_owner_rule);
}
size_t CSSRuleList::external_memory_size() const
{
return JS::saturating_add_external_memory_size(Base::external_memory_size(), JS::vector_external_memory_size(m_rules));
}
// AD-HOC: The spec doesn't include a declared_namespaces parameter, but we need it to handle parsing of namespaced selectors.
// https://drafts.csswg.org/cssom/#insert-a-css-rule
WebIDL::ExceptionOr<unsigned> CSSRuleList::insert_a_css_rule(Variant<StringView, CSSRule*> rule, u32 index, Nested nested, HashTable<FlyString> const& declared_namespaces)
{
// 1. Set length to the number of items in list.
auto length = m_rules.size();
// 2. If index is greater than length, then throw an IndexSizeError exception.
if (index > length)
return WebIDL::IndexSizeError::create(realm(), "CSS rule index out of bounds."_utf16);
// 3. Set new rule to the results of performing parse a CSS rule on argument rule.
// NOTE: The insert-a-css-rule spec expects `rule` to be a string, but the CSSStyleSheet.insertRule()
// spec calls this algorithm with an already-parsed CSSRule. So, we use a Variant and skip step 3
// if that variant holds a CSSRule already.
CSSRule* new_rule = nullptr;
if (rule.has<StringView>()) {
Parser::ParsingParams parsing_params { realm() };
parsing_params.declared_namespaces = declared_namespaces;
new_rule = parse_css_rule(parsing_params, rule.get<StringView>());
} else {
new_rule = rule.get<CSSRule*>();
}
// 4. If new rule is a syntax error, and nested is set, perform the following substeps:
if (!new_rule && nested == Nested::Yes) {
Parser::ParsingParams parsing_params { realm() };
parsing_params.rule_context = rule_context();
parsing_params.declared_namespaces = declared_namespaces;
// - Set declarations to the results of performing parse a CSS declaration block, on argument rule.
auto declarations = parse_css_property_declaration_block(parsing_params, rule.get<StringView>());
// - If declarations is empty, throw a SyntaxError exception.
if (declarations.custom_properties.is_empty() && declarations.properties.is_empty())
return WebIDL::SyntaxError::create(realm(), "Unable to parse CSS declarations block."_utf16);
// - Otherwise, set new rule to a new nested declarations rule with declarations as it contents.
new_rule = CSSNestedDeclarations::create(realm(), CSSStyleProperties::create(realm(), move(declarations.properties), move(declarations.custom_properties)));
}
// 5. If new rule is a syntax error, throw a SyntaxError exception.
if (!new_rule)
return WebIDL::SyntaxError::create(realm(), "Unable to parse CSS rule."_utf16);
auto has_rule_of_type_other_than_specified_before_index = [&](Vector<CSSRule::Type> types, size_t index) {
for (size_t i = 0; i < index; i++) {
if (!any_of(types, [&](auto type) { return m_rules[i]->type() == type; }))
return true;
}
return false;
};
auto has_rule_of_type_at_or_after_index = [&](CSSRule::Type type, size_t index) {
for (size_t i = index; i < m_rules.size(); i++) {
if (m_rules[i]->type() == type)
return true;
}
return false;
};
// 6. If new rule cannot be inserted into list at the zero-indexed position index due to constraints specified by CSS, then throw a HierarchyRequestError exception. [CSS21]
// "Any @import rules must precede all other valid at-rules and style rules in a style sheet
// (ignoring @charset and @layer statement rules) and must not have any other valid at-rules
// or style rules between it and previous @import rules, or else the @import rule is invalid."
// https://drafts.csswg.org/css-cascade-5/#at-import
//
// "Any @namespace rules must follow all @charset and @import rules and precede all other
// non-ignored at-rules and style rules in a style sheet.
auto rule_is_disallowed = false;
switch (new_rule->type()) {
case CSSRule::Type::LayerStatement:
break;
case CSSRule::Type::Import:
rule_is_disallowed = has_rule_of_type_other_than_specified_before_index({ CSSRule::Type::Import, CSSRule::Type::LayerStatement }, index);
break;
case CSSRule::Type::Namespace:
rule_is_disallowed = has_rule_of_type_at_or_after_index(CSSRule::Type::Import, index) || has_rule_of_type_other_than_specified_before_index({ CSSRule::Type::Import, CSSRule::Type::Namespace, CSSRule::Type::LayerStatement }, index);
break;
default:
rule_is_disallowed = has_rule_of_type_at_or_after_index(CSSRule::Type::Import, index) || has_rule_of_type_at_or_after_index(CSSRule::Type::Namespace, index);
break;
}
// FIXME: There are more constraints that we should check here - Parser::is_valid_in_the_current_context is probably a good reference for that.
if (rule_is_disallowed || (nested == Nested::Yes && first_is_one_of(new_rule->type(), CSSRule::Type::Import, CSSRule::Type::Namespace)))
return WebIDL::HierarchyRequestError::create(realm(), "Cannot insert rule at specified index."_utf16);
// 7. If new rule is an @namespace at-rule, and list contains anything other than @import at-rules, and @namespace at-rules, throw an InvalidStateError exception.
if (new_rule->type() == CSSRule::Type::Namespace && any_of(m_rules, [](auto existing_rule) { return existing_rule->type() != CSSRule::Type::Import && existing_rule->type() != CSSRule::Type::Namespace; }))
return WebIDL::InvalidStateError::create(realm(), "Cannot insert @namespace rule into a stylesheet with non-namespace/import rules"_utf16);
// 8. Insert new rule into list at the zero-indexed position index.
m_rules.insert(index, *new_rule);
// FIXME: Load font faces for inserted @font-face rules
// 9. Return index.
if (on_change)
on_change();
return index;
}
// https://www.w3.org/TR/cssom/#remove-a-css-rule
WebIDL::ExceptionOr<void> CSSRuleList::remove_a_css_rule(u32 index)
{
// 1. Set length to the number of items in list.
auto length = m_rules.size();
// 2. If index is greater than or equal to length, then throw an IndexSizeError exception.
if (index >= length)
return WebIDL::IndexSizeError::create(realm(), "CSS rule index out of bounds."_utf16);
// 3. Set old rule to the indexth item in list.
CSSRule& old_rule = m_rules[index];
// 4. If old rule is an @namespace at-rule, and list contains anything other than @import at-rules, and @namespace at-rules, throw an InvalidStateError exception.
if (old_rule.type() == CSSRule::Type::Namespace) {
for (auto& rule : m_rules) {
if (rule->type() != CSSRule::Type::Import && rule->type() != CSSRule::Type::Namespace)
return WebIDL::InvalidStateError::create(realm(), "Cannot remove @namespace rule from a stylesheet with non-namespace/import rules."_utf16);
}
}
// https://drafts.csswg.org/css-font-loading/#font-face-css-connection
// If a @font-face rule is removed from the document, its connected FontFace object is no longer CSS-connected.
if (auto* font_face_rule = as_if<CSSFontFaceRule>(old_rule))
font_face_rule->disconnect_font_face();
// 5. Remove rule old rule from list at the zero-indexed position index.
m_rules.remove(index);
// 6. Set old rule’s parent CSS rule and parent CSS style sheet to null.
// NOTE: We set the parent stylesheet to null within set_parent_rule.
old_rule.set_parent_rule(nullptr);
if (on_change)
on_change();
return {};
}
void CSSRuleList::for_each_effective_rule(TraversalOrder order, Function<void(Web::CSS::CSSRule const&)> const& callback) const
{
for (auto const& rule : m_rules) {
if (order == TraversalOrder::Preorder)
callback(rule);
switch (rule->type()) {
case CSSRule::Type::Import: {
auto const& import_rule = static_cast<CSSImportRule const&>(*rule);
if (import_rule.loaded_style_sheet())
import_rule.loaded_style_sheet()->for_each_effective_rule(order, callback);
break;
}
case CSSRule::Type::Container:
case CSSRule::Type::LayerBlock:
case CSSRule::Type::Media:
case CSSRule::Type::Page:
case CSSRule::Type::Scope:
case CSSRule::Type::Style:
case CSSRule::Type::Supports:
static_cast<CSSGroupingRule const&>(*rule).for_each_effective_rule(order, callback);
break;
case CSSRule::Type::CounterStyle:
case CSSRule::Type::FontFace:
case CSSRule::Type::FontFeatureValues:
case CSSRule::Type::Function:
case CSSRule::Type::FunctionDeclarations:
case CSSRule::Type::Keyframe:
case CSSRule::Type::Keyframes:
case CSSRule::Type::LayerStatement:
case CSSRule::Type::Margin:
case CSSRule::Type::Namespace:
case CSSRule::Type::NestedDeclarations:
case CSSRule::Type::Property:
break;
}
if (order == TraversalOrder::Postorder)
callback(rule);
}
}
bool CSSRuleList::evaluate_media_queries(DOM::Document const& document)
{
bool any_media_queries_changed_match_state = false;
for (auto& rule : m_rules) {
switch (rule->type()) {
case CSSRule::Type::Container: {
auto& container_rule = as<CSSContainerRule>(*rule);
if (container_rule.css_rules().evaluate_media_queries(document))
any_media_queries_changed_match_state = true;
break;
}
case CSSRule::Type::Function: {
any_media_queries_changed_match_state |= as<CSSFunctionRule>(*rule).css_rules().evaluate_media_queries(document);
break;
}
case CSSRule::Type::Import: {
auto& import_rule = as<CSSImportRule>(*rule);
if (import_rule.loaded_style_sheet() && import_rule.loaded_style_sheet()->evaluate_media_queries(document))
any_media_queries_changed_match_state = true;
break;
}
case CSSRule::Type::LayerBlock: {
auto& layer_rule = as<CSSLayerBlockRule>(*rule);
if (layer_rule.css_rules().evaluate_media_queries(document))
any_media_queries_changed_match_state = true;
break;
}
case CSSRule::Type::Media: {
auto& media_rule = as<CSSMediaRule>(*rule);
bool was_first_evaluation = !media_rule.did_evaluate();
bool did_match = media_rule.condition_matches();
bool now_matches = media_rule.evaluate(document);
// The first evaluation establishes the baseline. did_match defaults to false because each MediaQuery
// starts with m_matches=false, so a brand-new rule would otherwise look like a false->true flip the
// first time it gets evaluated against a matching state.
if (!was_first_evaluation && did_match != now_matches)
any_media_queries_changed_match_state = true;
if (now_matches && media_rule.css_rules().evaluate_media_queries(document))
any_media_queries_changed_match_state = true;
break;
}
case CSSRule::Type::Scope: {
auto& scope_rule = as<CSSScopeRule>(*rule);
if (scope_rule.css_rules().evaluate_media_queries(document))
any_media_queries_changed_match_state = true;
break;
}
case CSSRule::Type::Supports: {
auto& supports_rule = as<CSSSupportsRule>(*rule);
if (supports_rule.condition_matches() && supports_rule.css_rules().evaluate_media_queries(document))
any_media_queries_changed_match_state = true;
break;
}
case CSSRule::Type::Style: {
auto& style_rule = as<CSSStyleRule>(*rule);
if (style_rule.css_rules().evaluate_media_queries(document))
any_media_queries_changed_match_state = true;
break;
}
case CSSRule::Type::CounterStyle:
case CSSRule::Type::FontFace:
case CSSRule::Type::FontFeatureValues:
case CSSRule::Type::FunctionDeclarations:
case CSSRule::Type::Keyframe:
case CSSRule::Type::Keyframes:
case CSSRule::Type::LayerStatement:
case CSSRule::Type::Margin:
case CSSRule::Type::Namespace:
case CSSRule::Type::NestedDeclarations:
case CSSRule::Type::Property:
case CSSRule::Type::Page:
break;
}
}
return any_media_queries_changed_match_state;
}
Optional<JS::Value> CSSRuleList::item_value(size_t index) const
{
if (auto value = item(index))
return value;
return {};
}
Vector<Parser::RuleContext> CSSRuleList::rule_context() const
{
Vector<Parser::RuleContext> context;
for (auto* rule = m_owner_rule.ptr(); rule; rule = rule->parent_rule())
context.append(Parser::rule_context_type_for_rule(rule->type()));
context.reverse();
return context;
}
}