LibWeb/CSS: Add CSSOM types for @layer rules

Depending on usage, `@layer` has two forms, with two different CSSOM
types. One simply lists layer names and the other defines a layer with
its contained rules.
This commit is contained in:
Sam Atkins 2024-09-02 16:45:25 +01:00 committed by Andreas Kling
parent bf9d05d97a
commit 1c6133aa52
Notes: github-actions[bot] 2024-09-06 05:51:10 +00:00
17 changed files with 346 additions and 27 deletions

View file

@ -17,6 +17,8 @@ source_set("CSS") {
"CSSImportRule.cpp",
"CSSKeyframeRule.cpp",
"CSSKeyframesRule.cpp",
"CSSLayerBlockRule.cpp",
"CSSLayerStatementRule.cpp",
"CSSMediaRule.cpp",
"CSSNamespaceRule.cpp",
"CSSNumericType.cpp",

View file

@ -37,6 +37,8 @@ standard_idl_files = [
"//Userland/Libraries/LibWeb/CSS/CSSImportRule.idl",
"//Userland/Libraries/LibWeb/CSS/CSSKeyframeRule.idl",
"//Userland/Libraries/LibWeb/CSS/CSSKeyframesRule.idl",
"//Userland/Libraries/LibWeb/CSS/CSSLayerBlockRule.idl",
"//Userland/Libraries/LibWeb/CSS/CSSLayerStatementRule.idl",
"//Userland/Libraries/LibWeb/CSS/CSSMediaRule.idl",
"//Userland/Libraries/LibWeb/CSS/CSSNamespaceRule.idl",
"//Userland/Libraries/LibWeb/CSS/CSSRule.idl",

View file

@ -37,6 +37,8 @@ CSSGroupingRule
CSSImportRule
CSSKeyframeRule
CSSKeyframesRule
CSSLayerBlockRule
CSSLayerStatementRule
CSSMediaRule
CSSNamespaceRule
CSSRule

View file

@ -44,6 +44,8 @@ set(SOURCES
CSS/CSSKeyframeRule.cpp
CSS/CSSKeyframesRule.cpp
CSS/CSSFontFaceRule.cpp
CSS/CSSLayerBlockRule.cpp
CSS/CSSLayerStatementRule.cpp
CSS/CSSMediaRule.cpp
CSS/CSSNumericType.cpp
CSS/CSSNamespaceRule.cpp

View file

@ -0,0 +1,81 @@
/*
* Copyright (c) 2024, Sam Atkins <sam@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include "CSSLayerBlockRule.h"
#include <LibWeb/Bindings/CSSLayerBlockRulePrototype.h>
#include <LibWeb/Bindings/Intrinsics.h>
#include <LibWeb/CSS/Serialize.h>
namespace Web::CSS {
JS_DEFINE_ALLOCATOR(CSSLayerBlockRule);
JS::NonnullGCPtr<CSSLayerBlockRule> CSSLayerBlockRule::create(JS::Realm& realm, FlyString name, CSSRuleList& rules)
{
return realm.heap().allocate<CSSLayerBlockRule>(realm, realm, move(name), rules);
}
FlyString CSSLayerBlockRule::next_unique_anonymous_layer_name()
{
static u64 s_anonymous_layer_id = 0;
return MUST(String::formatted("#{}", ++s_anonymous_layer_id));
}
CSSLayerBlockRule::CSSLayerBlockRule(JS::Realm& realm, FlyString name, CSSRuleList& rules)
: CSSGroupingRule(realm, rules)
, m_name(move(name))
{
if (m_name.is_empty()) {
m_name_internal = next_unique_anonymous_layer_name();
} else {
m_name_internal = m_name;
}
}
void CSSLayerBlockRule::initialize(JS::Realm& realm)
{
Base::initialize(realm);
WEB_SET_PROTOTYPE_FOR_INTERFACE(CSSLayerBlockRule);
}
String CSSLayerBlockRule::serialized() const
{
// AD-HOC: No spec yet, so this is based on the @media serialization algorithm.
StringBuilder builder;
builder.append("@layer"sv);
if (!m_name.is_empty())
builder.appendff(" {}", m_name);
builder.append(" {\n"sv);
// AD-HOC: All modern browsers omit the ending newline if there are no CSS rules, so let's do the same.
if (css_rules().length() == 0) {
builder.append('}');
return builder.to_string_without_validation();
}
for (size_t i = 0; i < css_rules().length(); i++) {
auto rule = css_rules().item(i);
if (i != 0)
builder.append("\n"sv);
builder.append(" "sv);
builder.append(rule->css_text());
}
builder.append("\n}"sv);
return builder.to_string_without_validation();
}
FlyString CSSLayerBlockRule::internal_qualified_name(Badge<StyleComputer>) const
{
// TODO: Cache this?
auto parent_name = parent_layer_internal_qualified_name();
if (parent_name.is_empty())
return m_name_internal;
return MUST(String::formatted("{}.{}", parent_name, m_name_internal));
}
}

View file

@ -0,0 +1,41 @@
/*
* Copyright (c) 2024, Sam Atkins <sam@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <LibWeb/CSS/CSSGroupingRule.h>
namespace Web::CSS {
// https://drafts.csswg.org/css-cascade-5/#the-csslayerblockrule-interface
class CSSLayerBlockRule final : public CSSGroupingRule {
WEB_PLATFORM_OBJECT(CSSLayerBlockRule, CSSGroupingRule);
JS_DECLARE_ALLOCATOR(CSSLayerBlockRule);
public:
[[nodiscard]] static JS::NonnullGCPtr<CSSLayerBlockRule> create(JS::Realm&, FlyString name, CSSRuleList&);
static FlyString next_unique_anonymous_layer_name();
virtual ~CSSLayerBlockRule() = default;
virtual Type type() const override { return Type::LayerBlock; }
FlyString const& name() const { return m_name; }
FlyString const& internal_name() const { return m_name_internal; }
FlyString internal_qualified_name(Badge<StyleComputer>) const;
private:
CSSLayerBlockRule(JS::Realm&, FlyString name, CSSRuleList&);
virtual void initialize(JS::Realm&) override;
virtual String serialized() const override;
FlyString m_name;
FlyString m_name_internal;
};
}

View file

@ -0,0 +1,7 @@
#import <CSS/CSSGroupingRule.idl>
// https://drafts.csswg.org/css-cascade-5/#the-csslayerblockrule-interface
[Exposed=Window]
interface CSSLayerBlockRule : CSSGroupingRule {
readonly attribute CSSOMString name;
};

View file

@ -0,0 +1,58 @@
/*
* Copyright (c) 2024, Sam Atkins <sam@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include "CSSLayerStatementRule.h"
#include <LibWeb/Bindings/CSSLayerStatementRulePrototype.h>
#include <LibWeb/Bindings/Intrinsics.h>
#include <LibWeb/CSS/CSSLayerBlockRule.h>
namespace Web::CSS {
JS_DEFINE_ALLOCATOR(CSSLayerStatementRule);
JS::NonnullGCPtr<CSSLayerStatementRule> CSSLayerStatementRule::create(JS::Realm& realm, Vector<FlyString> name_list)
{
return realm.heap().allocate<CSSLayerStatementRule>(realm, realm, move(name_list));
}
CSSLayerStatementRule::CSSLayerStatementRule(JS::Realm& realm, Vector<FlyString> name_list)
: CSSRule(realm)
, m_name_list(move(name_list))
{
}
void CSSLayerStatementRule::initialize(JS::Realm& realm)
{
Base::initialize(realm);
WEB_SET_PROTOTYPE_FOR_INTERFACE(CSSLayerStatementRule);
}
String CSSLayerStatementRule::serialized() const
{
// AD-HOC: No spec yet.
StringBuilder builder;
builder.append("@layer "sv);
builder.join(", "sv, m_name_list);
builder.append(';');
return builder.to_string_without_validation();
}
Vector<FlyString> CSSLayerStatementRule::internal_qualified_name_list(Badge<StyleComputer>) const
{
// TODO: Cache these?
Vector<FlyString> qualified_layer_names;
auto qualified_parent_layer_name = parent_layer_internal_qualified_name();
if (qualified_parent_layer_name.is_empty())
return m_name_list;
for (auto const& name : m_name_list)
qualified_layer_names.append(MUST(String::formatted("{}.{}", qualified_parent_layer_name, name)));
return qualified_layer_names;
}
}

View file

@ -0,0 +1,38 @@
/*
* Copyright (c) 2024, Sam Atkins <sam@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <LibWeb/CSS/CSSRule.h>
namespace Web::CSS {
// https://drafts.csswg.org/css-cascade-5/#the-csslayerstatementrule-interface
class CSSLayerStatementRule final : public CSSRule {
WEB_PLATFORM_OBJECT(CSSLayerStatementRule, CSSRule);
JS_DECLARE_ALLOCATOR(CSSLayerStatementRule);
public:
[[nodiscard]] static JS::NonnullGCPtr<CSSLayerStatementRule> create(JS::Realm&, Vector<FlyString> name_list);
virtual ~CSSLayerStatementRule() = default;
virtual Type type() const override { return Type::LayerStatement; }
// FIXME: Should be FrozenArray
ReadonlySpan<FlyString> name_list() const { return m_name_list; }
Vector<FlyString> internal_qualified_name_list(Badge<StyleComputer>) const;
private:
CSSLayerStatementRule(JS::Realm&, Vector<FlyString> name_list);
virtual void initialize(JS::Realm&) override;
virtual String serialized() const override;
Vector<FlyString> m_name_list;
};
}

View file

@ -0,0 +1,8 @@
#import <CSS/CSSRule.idl>
// https://drafts.csswg.org/css-cascade-5/#the-csslayerstatementrule-interface
[Exposed=Window]
interface CSSLayerStatementRule : CSSRule {
// FIXME: Should be a FrozenArray<CSSOMString>
readonly attribute sequence<CSSOMString> nameList;
};

View file

@ -1,12 +1,13 @@
/*
* Copyright (c) 2021, the SerenityOS developers.
* Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
* Copyright (c) 2022-2024, Sam Atkins <sam@ladybird.org>
* Copyright (c) 2022, Andreas Kling <kling@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <LibWeb/Bindings/CSSRulePrototype.h>
#include <LibWeb/CSS/CSSLayerBlockRule.h>
#include <LibWeb/CSS/CSSRule.h>
#include <LibWeb/CSS/CSSStyleSheet.h>
@ -47,4 +48,37 @@ void CSSRule::set_parent_style_sheet(CSSStyleSheet* parent_style_sheet)
m_parent_style_sheet = parent_style_sheet;
}
String CSSRule::parent_layer_internal_qualified_name() const
{
// TODO: Cache this?
Vector<FlyString> layer_names;
for (auto* rule = parent_rule(); rule; rule = rule->parent_rule()) {
switch (rule->type()) {
case CSSRule::Type::Import:
// TODO: Handle `layer(foo)` in import rules once we implement that.
break;
case CSSRule::Type::LayerBlock: {
auto& layer_block = static_cast<CSSLayerBlockRule const&>(*rule);
layer_names.append(layer_block.internal_name());
break;
}
// Ignore everything else
// Note that LayerStatement cannot have child rules so we still ignore it here.
case CSSRule::Type::LayerStatement:
case CSSRule::Type::Style:
case CSSRule::Type::Media:
case CSSRule::Type::FontFace:
case CSSRule::Type::Keyframes:
case CSSRule::Type::Keyframe:
case CSSRule::Type::Namespace:
case CSSRule::Type::Supports:
break;
}
}
return MUST(String::join("."sv, layer_names.in_reverse()));
}
}

View file

@ -31,6 +31,9 @@ public:
Keyframe = 8,
Namespace = 10,
Supports = 12,
// AD-HOC: These are not included in the spec, but we need them internally. So, their numbers are arbitrary.
LayerBlock = 100,
LayerStatement = 101,
};
virtual Type type() const = 0;
@ -39,6 +42,7 @@ public:
void set_css_text(StringView);
CSSRule* parent_rule() { return m_parent_rule.ptr(); }
CSSRule const* parent_rule() const { return m_parent_rule.ptr(); }
void set_parent_rule(CSSRule*);
CSSStyleSheet* parent_style_sheet() { return m_parent_style_sheet.ptr(); }
@ -54,6 +58,8 @@ protected:
virtual void visit_edges(Cell::Visitor&) override;
String parent_layer_internal_qualified_name() const;
JS::GCPtr<CSSRule> m_parent_rule;
JS::GCPtr<CSSStyleSheet> m_parent_style_sheet;
};

View file

@ -1,5 +1,5 @@
/*
* Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
* Copyright (c) 2021-2024, Sam Atkins <sam@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
@ -9,6 +9,7 @@
#include <LibWeb/Bindings/Intrinsics.h>
#include <LibWeb/CSS/CSSImportRule.h>
#include <LibWeb/CSS/CSSKeyframesRule.h>
#include <LibWeb/CSS/CSSLayerBlockRule.h>
#include <LibWeb/CSS/CSSMediaRule.h>
#include <LibWeb/CSS/CSSRule.h>
#include <LibWeb/CSS/CSSRuleList.h>
@ -122,25 +123,27 @@ void CSSRuleList::for_each_effective_style_rule(Function<void(CSSStyleRule const
{
for (auto const& rule : m_rules) {
switch (rule->type()) {
case CSSRule::Type::FontFace:
break;
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_style_rule(callback);
break;
}
case CSSRule::Type::LayerBlock:
case CSSRule::Type::Media:
static_cast<CSSMediaRule const&>(*rule).for_each_effective_style_rule(callback);
case CSSRule::Type::Supports:
static_cast<CSSGroupingRule const&>(*rule).for_each_effective_style_rule(callback);
break;
case CSSRule::Type::Style:
callback(static_cast<CSSStyleRule const&>(*rule));
break;
case CSSRule::Type::Supports:
static_cast<CSSSupportsRule const&>(*rule).for_each_effective_style_rule(callback);
break;
case CSSRule::Type::FontFace:
case CSSRule::Type::Keyframe:
case CSSRule::Type::Keyframes:
case CSSRule::Type::LayerStatement:
case CSSRule::Type::Namespace:
break;
}
@ -151,28 +154,27 @@ void CSSRuleList::for_each_effective_keyframes_at_rule(Function<void(CSSKeyframe
{
for (auto const& rule : m_rules) {
switch (rule->type()) {
case CSSRule::Type::FontFace:
break;
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_keyframes_at_rule(callback);
break;
}
case CSSRule::Type::LayerBlock:
case CSSRule::Type::Media:
static_cast<CSSMediaRule const&>(*rule).for_each_effective_keyframes_at_rule(callback);
break;
case CSSRule::Type::Style:
break;
case CSSRule::Type::Supports:
static_cast<CSSSupportsRule const&>(*rule).for_each_effective_keyframes_at_rule(callback);
break;
case CSSRule::Type::Keyframe:
static_cast<CSSGroupingRule const&>(*rule).for_each_effective_keyframes_at_rule(callback);
break;
case CSSRule::Type::Keyframes:
callback(static_cast<CSSKeyframesRule const&>(*rule));
break;
case CSSRule::Type::FontFace:
case CSSRule::Type::Keyframe:
case CSSRule::Type::LayerStatement:
case CSSRule::Type::Namespace:
case CSSRule::Type::Style:
break;
}
}
@ -184,14 +186,18 @@ bool CSSRuleList::evaluate_media_queries(HTML::Window const& window)
for (auto& rule : m_rules) {
switch (rule->type()) {
case CSSRule::Type::FontFace:
break;
case CSSRule::Type::Import: {
auto& import_rule = verify_cast<CSSImportRule>(*rule);
if (import_rule.loaded_style_sheet() && import_rule.loaded_style_sheet()->evaluate_media_queries(window))
any_media_queries_changed_match_state = true;
break;
}
case CSSRule::Type::LayerBlock: {
auto& layer_rule = verify_cast<CSSLayerBlockRule>(*rule);
if (layer_rule.css_rules().evaluate_media_queries(window))
any_media_queries_changed_match_state = true;
break;
}
case CSSRule::Type::Media: {
auto& media_rule = verify_cast<CSSMediaRule>(*rule);
bool did_match = media_rule.condition_matches();
@ -202,17 +208,18 @@ bool CSSRuleList::evaluate_media_queries(HTML::Window const& window)
any_media_queries_changed_match_state = true;
break;
}
case CSSRule::Type::Style:
break;
case CSSRule::Type::Supports: {
auto& supports_rule = verify_cast<CSSSupportsRule>(*rule);
if (supports_rule.condition_matches() && supports_rule.css_rules().evaluate_media_queries(window))
any_media_queries_changed_match_state = true;
break;
}
case CSSRule::Type::FontFace:
case CSSRule::Type::Keyframe:
case CSSRule::Type::Keyframes:
case CSSRule::Type::LayerStatement:
case CSSRule::Type::Namespace:
case CSSRule::Type::Style:
break;
}
}

View file

@ -1,6 +1,7 @@
/*
* Copyright (c) 2018-2023, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2021, the SerenityOS developers.
* Copyright (c) 2021-2024, Sam Atkins <sam@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
@ -10,6 +11,8 @@
#include <AK/Utf8View.h>
#include <LibWeb/CSS/CSSFontFaceRule.h>
#include <LibWeb/CSS/CSSImportRule.h>
#include <LibWeb/CSS/CSSLayerBlockRule.h>
#include <LibWeb/CSS/CSSLayerStatementRule.h>
#include <LibWeb/CSS/CSSMediaRule.h>
#include <LibWeb/CSS/CSSRule.h>
#include <LibWeb/CSS/CSSStyleRule.h>
@ -617,21 +620,28 @@ ErrorOr<void> dump_rule(StringBuilder& builder, CSS::CSSRule const& rule, int in
case CSS::CSSRule::Type::Import:
dump_import_rule(builder, verify_cast<CSS::CSSImportRule const>(rule), indent_levels);
break;
case CSS::CSSRule::Type::Keyframe:
case CSS::CSSRule::Type::Keyframes:
// TODO: Dump them!
break;
case CSS::CSSRule::Type::LayerBlock:
dump_layer_block_rule(builder, verify_cast<CSS::CSSLayerBlockRule const>(rule), indent_levels);
break;
case CSS::CSSRule::Type::LayerStatement:
dump_layer_statement_rule(builder, verify_cast<CSS::CSSLayerStatementRule const>(rule), indent_levels);
break;
case CSS::CSSRule::Type::Media:
TRY(dump_media_rule(builder, verify_cast<CSS::CSSMediaRule const>(rule), indent_levels));
break;
case CSS::CSSRule::Type::Namespace:
TRY(dump_namespace_rule(builder, verify_cast<CSS::CSSNamespaceRule const>(rule), indent_levels));
break;
case CSS::CSSRule::Type::Style:
TRY(dump_style_rule(builder, verify_cast<CSS::CSSStyleRule const>(rule), indent_levels));
break;
case CSS::CSSRule::Type::Supports:
TRY(dump_supports_rule(builder, verify_cast<CSS::CSSSupportsRule const>(rule), indent_levels));
break;
case CSS::CSSRule::Type::Keyframe:
case CSS::CSSRule::Type::Keyframes:
break;
case CSS::CSSRule::Type::Namespace:
TRY(dump_namespace_rule(builder, verify_cast<CSS::CSSNamespaceRule const>(rule), indent_levels));
break;
}
return {};
}
@ -676,6 +686,21 @@ void dump_import_rule(StringBuilder& builder, CSS::CSSImportRule const& rule, in
builder.appendff(" Document URL: {}\n", rule.url());
}
void dump_layer_block_rule(StringBuilder& builder, CSS::CSSLayerBlockRule const& layer_block, int indent_levels)
{
indent(builder, indent_levels);
builder.appendff(" Layer Block: `{}`\n Rules ({}):\n", layer_block.internal_name(), layer_block.css_rules().length());
for (auto& rule : layer_block.css_rules())
MUST(dump_rule(builder, rule, indent_levels + 1));
}
void dump_layer_statement_rule(StringBuilder& builder, CSS::CSSLayerStatementRule const& layer_statement, int indent_levels)
{
indent(builder, indent_levels);
builder.append(" Layer Statement: "sv);
builder.join(", "sv, layer_statement.name_list());
}
ErrorOr<void> dump_media_rule(StringBuilder& builder, CSS::CSSMediaRule const& media, int indent_levels)
{
indent(builder, indent_levels);

View file

@ -30,6 +30,8 @@ ErrorOr<void> dump_media_rule(StringBuilder&, CSS::CSSMediaRule const&, int inde
ErrorOr<void> dump_style_rule(StringBuilder&, CSS::CSSStyleRule const&, int indent_levels = 0);
ErrorOr<void> dump_supports_rule(StringBuilder&, CSS::CSSSupportsRule const&, int indent_levels = 0);
ErrorOr<void> dump_namespace_rule(StringBuilder&, CSS::CSSNamespaceRule const&, int indent_levels = 0);
void dump_layer_block_rule(StringBuilder&, CSS::CSSLayerBlockRule const&, int indent_levels = 0);
void dump_layer_statement_rule(StringBuilder&, CSS::CSSLayerStatementRule const&, int indent_levels = 0);
void dump_selector(StringBuilder&, CSS::Selector const&);
void dump_selector(CSS::Selector const&);

View file

@ -113,6 +113,8 @@ class CSSImportRule;
class CSSKeyframeRule;
class CSSKeyframesRule;
class CSSKeywordValue;
class CSSLayerBlockRule;
class CSSLayerStatementRule;
class CSSMediaRule;
class CSSOKLab;
class CSSOKLCH;

View file

@ -20,6 +20,8 @@ libweb_js_bindings(CSS/CSSGroupingRule)
libweb_js_bindings(CSS/CSSImportRule)
libweb_js_bindings(CSS/CSSKeyframeRule)
libweb_js_bindings(CSS/CSSKeyframesRule)
libweb_js_bindings(CSS/CSSLayerBlockRule)
libweb_js_bindings(CSS/CSSLayerStatementRule)
libweb_js_bindings(CSS/CSSMediaRule)
libweb_js_bindings(CSS/CSS NAMESPACE)
libweb_js_bindings(CSS/CSSNamespaceRule)