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
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

@ -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;
}
}