mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2026-06-19 08:11:58 +00:00
`@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()`.
230 lines
7.9 KiB
C++
230 lines
7.9 KiB
C++
/*
|
||
* Copyright (c) 2018-2020, Andreas Kling <andreas@ladybird.org>
|
||
* Copyright (c) 2021-2026, Sam Atkins <sam@ladybird.org>
|
||
*
|
||
* SPDX-License-Identifier: BSD-2-Clause
|
||
*/
|
||
|
||
#include <LibWeb/Bindings/CSSStyleRule.h>
|
||
#include <LibWeb/Bindings/Intrinsics.h>
|
||
#include <LibWeb/CSS/CSSRuleList.h>
|
||
#include <LibWeb/CSS/CSSStyleRule.h>
|
||
#include <LibWeb/CSS/CSSStyleSheet.h>
|
||
#include <LibWeb/CSS/Parser/Parser.h>
|
||
#include <LibWeb/CSS/StyleComputer.h>
|
||
#include <LibWeb/CSS/StylePropertyMap.h>
|
||
#include <LibWeb/Dump.h>
|
||
|
||
namespace Web::CSS {
|
||
|
||
GC_DEFINE_ALLOCATOR(CSSStyleRule);
|
||
|
||
GC::Ref<CSSStyleRule> CSSStyleRule::create(JS::Realm& realm, SelectorList&& selectors, CSSStyleProperties& declaration, CSSRuleList& nested_rules)
|
||
{
|
||
return realm.create<CSSStyleRule>(realm, move(selectors), declaration, nested_rules);
|
||
}
|
||
|
||
CSSStyleRule::CSSStyleRule(JS::Realm& realm, SelectorList&& selectors, CSSStyleProperties& declaration, CSSRuleList& nested_rules)
|
||
: CSSGroupingRule(realm, nested_rules, Type::Style)
|
||
, m_selectors(move(selectors))
|
||
, m_declaration(declaration)
|
||
{
|
||
m_declaration->set_parent_rule(*this);
|
||
}
|
||
|
||
void CSSStyleRule::initialize(JS::Realm& realm)
|
||
{
|
||
WEB_SET_PROTOTYPE_FOR_INTERFACE(CSSStyleRule);
|
||
Base::initialize(realm);
|
||
}
|
||
|
||
void CSSStyleRule::visit_edges(Cell::Visitor& visitor)
|
||
{
|
||
Base::visit_edges(visitor);
|
||
visitor.visit(m_declaration);
|
||
visitor.visit(m_style_map);
|
||
}
|
||
|
||
// https://drafts.csswg.org/cssom-1/#dom-cssstylerule-style
|
||
GC::Ref<CSSStyleProperties> CSSStyleRule::style()
|
||
{
|
||
return m_declaration;
|
||
}
|
||
|
||
// https://drafts.css-houdini.org/css-typed-om-1/#dom-cssstylerule-stylemap
|
||
GC::Ref<StylePropertyMap> CSSStyleRule::style_map()
|
||
{
|
||
if (!m_style_map)
|
||
m_style_map = StylePropertyMap::create(realm(), m_declaration);
|
||
return *m_style_map;
|
||
}
|
||
|
||
// https://drafts.csswg.org/cssom-1/#serialize-a-css-rule
|
||
String CSSStyleRule::serialized() const
|
||
{
|
||
StringBuilder builder;
|
||
|
||
// 1. Let s initially be the result of performing serialize a group of selectors on the rule’s associated selectors,
|
||
// followed by the string " {", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B).
|
||
builder.append(serialize_a_group_of_selectors(selectors()));
|
||
builder.append(" {"sv);
|
||
|
||
// 2. Let decls be the result of performing serialize a CSS declaration block on the rule’s associated declarations,
|
||
// or null if there are no such declarations.
|
||
auto decls = declaration().length() > 0 ? declaration().serialized() : Optional<String>();
|
||
|
||
// 3. Let rules be the result of performing serialize a CSS rule on each rule in the rule’s cssRules list,
|
||
// or null if there are no such rules.
|
||
Vector<String> rules;
|
||
for (auto& rule : css_rules()) {
|
||
rules.append(rule->serialized());
|
||
}
|
||
|
||
// 4. If decls and rules are both null, append " }" to s (i.e. a single SPACE (U+0020) followed by RIGHT CURLY BRACKET (U+007D)) and return s.
|
||
if (!decls.has_value() && rules.is_empty()) {
|
||
builder.append(" }"sv);
|
||
return builder.to_string_without_validation();
|
||
}
|
||
|
||
// 5. If rules is null:
|
||
if (rules.is_empty()) {
|
||
// 1. Append a single SPACE (U+0020) to s
|
||
builder.append(' ');
|
||
// 2. Append decls to s
|
||
builder.append(*decls);
|
||
// 3. Append " }" to s (i.e. a single SPACE (U+0020) followed by RIGHT CURLY BRACKET (U+007D)).
|
||
builder.append(" }"sv);
|
||
// 4. Return s.
|
||
return builder.to_string_without_validation();
|
||
}
|
||
|
||
// 6. Otherwise:
|
||
else {
|
||
// 1. If decls is not null, prepend it to rules.
|
||
if (decls.has_value())
|
||
rules.prepend(decls.value());
|
||
|
||
// 2. For each rule in rules:
|
||
for (auto& rule : rules) {
|
||
// * If rule is the empty string, do nothing.
|
||
if (rule.is_empty())
|
||
continue;
|
||
|
||
// * Otherwise:
|
||
// 1. Append a newline followed by two spaces to s.
|
||
// 2. Append rule to s.
|
||
builder.appendff("\n {}", rule);
|
||
}
|
||
|
||
// 3. Append a newline followed by RIGHT CURLY BRACKET (U+007D) to s.
|
||
builder.append("\n}"sv);
|
||
|
||
// 4. Return s.
|
||
return builder.to_string_without_validation();
|
||
}
|
||
}
|
||
|
||
// https://drafts.csswg.org/cssom-1/#dom-cssstylerule-selectortext
|
||
String CSSStyleRule::selector_text() const
|
||
{
|
||
// The selectorText attribute, on getting, must return the result of serializing the associated group of selectors.
|
||
return serialize_a_group_of_selectors(selectors());
|
||
}
|
||
|
||
// https://drafts.csswg.org/cssom-1/#dom-cssstylerule-selectortext
|
||
void CSSStyleRule::set_selector_text(StringView selector_text)
|
||
{
|
||
clear_caches();
|
||
|
||
// 1. Run the parse a group of selectors algorithm on the given value.
|
||
Parser::ParsingParams parsing_params { realm() };
|
||
|
||
if (m_parent_style_sheet)
|
||
parsing_params.declared_namespaces = m_parent_style_sheet->declared_namespaces();
|
||
|
||
Optional<SelectorList> parsed_selectors;
|
||
if (auto nesting_parent = nesting_parent_rule()) {
|
||
// AD-HOC: If we're a nested style rule, then we need to parse the selector as relative and then adapt it with implicit &s.
|
||
auto nesting_parent_type = [&] {
|
||
switch (nesting_parent->type()) {
|
||
case Type::Style:
|
||
return StyleNestingParent::Style;
|
||
case Type::Scope:
|
||
return StyleNestingParent::Scope;
|
||
default:
|
||
VERIFY_NOT_REACHED();
|
||
}
|
||
}();
|
||
parsed_selectors = parse_selector_for_nested_style_rule(parsing_params, selector_text, nesting_parent_type);
|
||
} else {
|
||
parsed_selectors = parse_selector(parsing_params, selector_text);
|
||
}
|
||
|
||
// 2. If the algorithm returns a non-null value replace the associated group of selectors with the returned value.
|
||
if (parsed_selectors.has_value()) {
|
||
// NOTE: If we have a parent style rule, we need to update the selectors to add any implicit `&`s
|
||
|
||
m_selectors = parsed_selectors.release_value();
|
||
if (auto* sheet = parent_style_sheet()) {
|
||
sheet->invalidate_owners(DOM::StyleInvalidationReason::SetSelectorText);
|
||
}
|
||
}
|
||
|
||
// 3. Otherwise, if the algorithm returns a null value, do nothing.
|
||
}
|
||
|
||
SelectorList const& CSSStyleRule::absolutized_selectors() const
|
||
{
|
||
if (m_cached_absolutized_selectors.has_value())
|
||
return m_cached_absolutized_selectors.value();
|
||
|
||
m_cached_absolutized_selectors = absolutize_selectors_relative_to(selectors(), nesting_parent_rule());
|
||
return m_cached_absolutized_selectors.value();
|
||
}
|
||
|
||
void CSSStyleRule::clear_caches()
|
||
{
|
||
Base::clear_caches();
|
||
m_cached_absolutized_selectors.clear();
|
||
}
|
||
|
||
void CSSStyleRule::set_parent_style_sheet(CSSStyleSheet* parent_style_sheet)
|
||
{
|
||
Base::set_parent_style_sheet(parent_style_sheet);
|
||
|
||
// This is annoying: Style values that request resources need to know their CSSStyleSheet in order to fetch them.
|
||
for (auto const& property : m_declaration->properties()) {
|
||
const_cast<StyleValue&>(*property.value).set_style_sheet(parent_style_sheet);
|
||
}
|
||
}
|
||
|
||
GC::Ptr<CSSRule const> CSSStyleRule::nesting_parent_rule() const
|
||
{
|
||
for (auto const* parent = parent_rule(); parent; parent = parent->parent_rule()) {
|
||
if (parent->type() == Type::Style || parent->type() == Type::Scope)
|
||
return parent;
|
||
}
|
||
return nullptr;
|
||
}
|
||
|
||
void CSSStyleRule::dump(StringBuilder& builder, int indent_levels) const
|
||
{
|
||
Base::dump(builder, indent_levels);
|
||
|
||
for (auto& selector : selectors()) {
|
||
dump_selector(builder, selector, indent_levels + 1);
|
||
}
|
||
dump_indent(builder, indent_levels + 1);
|
||
builder.appendff("Absolutized selectors:\n");
|
||
for (auto& selector : absolutized_selectors()) {
|
||
dump_selector(builder, selector, indent_levels + 2);
|
||
}
|
||
dump_style_properties(builder, declaration(), indent_levels + 1);
|
||
|
||
dump_indent(builder, indent_levels + 1);
|
||
builder.appendff("Child rules ({}):\n", css_rules().length());
|
||
for (auto& child_rule : css_rules())
|
||
dump_rule(builder, child_rule, indent_levels + 2);
|
||
}
|
||
|
||
}
|