LibWeb: Implement CSSKeyframesRule.cssRuleList

To make this straightforward, CSSKeyframesRule now uses a CSSRuleList
for internal storage.

(cherry picked from commit 7f2c833a39e150c7372299dcfe4d2d5590ae779f)

Tests/LibWeb/Text/expected/css/keyframes-css-rules.txt

@@ -0,0 +1,5 @@
+fooRule: [object CSSKeyframesRule] ~ @keyframes "foo" { 0% { color: rgb(0, 0, 0); } 100% { color: rgb(255, 255, 255); } }
+fooRule.cssRules: [object CSSRuleList]
+fooRule.cssRules[0]: [object CSSKeyframeRule] ~ 0% { color: rgb(0, 0, 0); }
+fooRule.cssRules[0].style.parentRule: [object CSSKeyframeRule] ~ 0% { color: rgb(0, 0, 0); }
+fooRule.cssRules[0].style.parentRule === fooRule.cssRules[0]: true

Tests/LibWeb/Text/input/css/keyframes-css-rules.html

@@ -0,0 +1,17 @@
+<style>
+@keyframes foo {
+    from { color: black; }
+    to { color: white; }
+}
+</style>
+<script src="../include.js"></script>
+<script>
+    test(() => {
+        const fooRule = document.styleSheets[0].cssRules[0];
+        println("fooRule: " + fooRule + " ~ " + fooRule.cssText);
+        println("fooRule.cssRules: " + fooRule.cssRules);
+        println("fooRule.cssRules[0]: " + fooRule.cssRules[0] + " ~ " + fooRule.cssRules[0].cssText);
+        println("fooRule.cssRules[0].style.parentRule: " + fooRule.cssRules[0].style.parentRule + " ~ " + fooRule.cssRules[0].style.parentRule.cssText);
+        println("fooRule.cssRules[0].style.parentRule === fooRule.cssRules[0]: " + (fooRule.cssRules[0].style.parentRule === fooRule.cssRules[0]));
+    });
+</script>

Userland/Libraries/LibWeb/CSS/CSSKeyframeRule.h

@@ -29,6 +29,7 @@ public:
 
     CSS::Percentage key() const { return m_key; }
     JS::NonnullGCPtr<CSSStyleDeclaration> style() const { return m_declarations; }
+    JS::NonnullGCPtr<PropertyOwningCSSStyleDeclaration> style_as_property_owning_style_declaration() const { return m_declarations; }
 
     String key_text() const
     {

Userland/Libraries/LibWeb/CSS/CSSKeyframesRule.cpp

@@ -1,26 +1,28 @@
 /*
  * Copyright (c) 2023, Ali Mohammad Pur <mpfard@serenityos.org>
+ * Copyright (c) 2024, Andreas Kling <andreas@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
-#include "CSSKeyframesRule.h"
 #include <LibWeb/Bindings/CSSKeyframesRulePrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
+#include <LibWeb/CSS/CSSKeyframesRule.h>
+#include <LibWeb/CSS/CSSRuleList.h>
 
 namespace Web::CSS {
 
 JS_DEFINE_ALLOCATOR(CSSKeyframesRule);
 
-JS::NonnullGCPtr<CSSKeyframesRule> CSSKeyframesRule::create(JS::Realm& realm, FlyString name, JS::MarkedVector<JS::NonnullGCPtr<CSSKeyframeRule>> keyframes)
+JS::NonnullGCPtr<CSSKeyframesRule> CSSKeyframesRule::create(JS::Realm& realm, FlyString name, JS::NonnullGCPtr<CSSRuleList> css_rules)
 {
-    return realm.heap().allocate<CSSKeyframesRule>(realm, realm, move(name), move(keyframes));
+    return realm.heap().allocate<CSSKeyframesRule>(realm, realm, move(name), move(css_rules));
 }
 
 void CSSKeyframesRule::visit_edges(Visitor& visitor)
 {
     Base::visit_edges(visitor);
-    visitor.visit(m_keyframes);
+    visitor.visit(m_rules);
 }
 
 void CSSKeyframesRule::initialize(JS::Realm& realm)
@@ -34,7 +36,7 @@ String CSSKeyframesRule::serialized() const
     StringBuilder builder;
     builder.appendff("@keyframes \"{}\"", name());
     builder.append(" { "sv);
-    for (auto const& keyframe : keyframes()) {
+    for (auto const& keyframe : *m_rules) {
         builder.append(keyframe->css_text());
         builder.append(' ');
     }
@@ -42,4 +44,9 @@ String CSSKeyframesRule::serialized() const
     return MUST(builder.to_string());
 }
 
+WebIDL::UnsignedLong CSSKeyframesRule::length() const
+{
+    return m_rules->length();
+}
+
 }

Userland/Libraries/LibWeb/CSS/CSSKeyframesRule.h

@@ -1,5 +1,6 @@
 /*
  * Copyright (c) 2023, Ali Mohammad Pur <mpfard@serenityos.org>
+ * Copyright (c) 2024, Andreas Kling <andreas@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -13,6 +14,7 @@
 #include <LibWeb/CSS/CSSRule.h>
 #include <LibWeb/Forward.h>
 #include <LibWeb/WebIDL/ExceptionOr.h>
+#include <LibWeb/WebIDL/Types.h>
 
 namespace Web::CSS {
 
@@ -22,23 +24,23 @@ class CSSKeyframesRule final : public CSSRule {
     JS_DECLARE_ALLOCATOR(CSSKeyframesRule);
 
 public:
-    [[nodiscard]] static JS::NonnullGCPtr<CSSKeyframesRule> create(JS::Realm&, FlyString name, JS::MarkedVector<JS::NonnullGCPtr<CSSKeyframeRule>>);
+    [[nodiscard]] static JS::NonnullGCPtr<CSSKeyframesRule> create(JS::Realm&, FlyString name, JS::NonnullGCPtr<CSSRuleList>);
 
     virtual ~CSSKeyframesRule() = default;
 
     virtual Type type() const override { return Type::Keyframes; }
 
-    Vector<JS::NonnullGCPtr<CSSKeyframeRule>> const& keyframes() const { return m_keyframes; }
+    auto const& css_rules() const { return m_rules; }
     FlyString const& name() const { return m_name; }
-    size_t length() { return m_keyframes.size(); }
+    [[nodiscard]] WebIDL::UnsignedLong length() const;
 
     void set_name(String const& name) { m_name = name; }
 
 private:
-    CSSKeyframesRule(JS::Realm& realm, FlyString name, JS::MarkedVector<JS::NonnullGCPtr<CSSKeyframeRule>> keyframes)
+    CSSKeyframesRule(JS::Realm& realm, FlyString name, JS::NonnullGCPtr<CSSRuleList> keyframes)
         : CSSRule(realm)
         , m_name(move(name))
-        , m_keyframes(move(keyframes))
+        , m_rules(move(keyframes))
     {
     }
 
@@ -48,7 +50,7 @@ private:
     virtual String serialized() const override;
 
     FlyString m_name;
-    Vector<JS::NonnullGCPtr<CSSKeyframeRule>> m_keyframes;
+    JS::NonnullGCPtr<CSSRuleList> m_rules;
 };
 
 template<>

Userland/Libraries/LibWeb/CSS/CSSKeyframesRule.idl

@@ -5,7 +5,7 @@
 [Exposed=Window]
 interface CSSKeyframesRule : CSSRule {
     attribute CSSOMString name;
-    [FIXME] readonly attribute CSSRuleList cssRules;
+    readonly attribute CSSRuleList cssRules;
     readonly attribute unsigned long length;
 
     getter CSSKeyframeRule (unsigned long index);

Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp

@@ -1349,7 +1349,7 @@ CSSRule* Parser::convert_to_rule(NonnullRefPtr<Rule> rule)
 
             auto child_tokens = TokenStream { rule->block()->values() };
 
-            JS::MarkedVector<JS::NonnullGCPtr<CSSKeyframeRule>> keyframes(m_context.realm().heap());
+            JS::MarkedVector<CSSRule*> keyframes(m_context.realm().heap());
             while (child_tokens.has_next_token()) {
                 child_tokens.skip_whitespace();
                 // keyframe-selector = <keyframe-keyword> | <percentage>
@@ -1415,7 +1415,7 @@ CSSRule* Parser::convert_to_rule(NonnullRefPtr<Rule> rule)
                 }
             }
 
-            return CSSKeyframesRule::create(m_context.realm(), name, move(keyframes));
+            return CSSKeyframesRule::create(m_context.realm(), name, CSSRuleList::create(m_context.realm(), move(keyframes)));
         }
         if (rule->at_rule_name().equals_ignoring_ascii_case("namespace"sv)) {
             // https://drafts.csswg.org/css-namespaces/#syntax

Userland/Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -2553,16 +2553,12 @@ NonnullOwnPtr<StyleComputer::RuleCache> StyleComputer::make_rule_cache_for_casca
             HashTable<PropertyID> animated_properties;
 
             // Forwards pass, resolve all the user-specified keyframe properties.
-            for (auto const& keyframe : rule.keyframes()) {
+            for (auto const& keyframe_rule : *rule.css_rules()) {
+                auto const& keyframe = verify_cast<CSSKeyframeRule>(*keyframe_rule);
                 Animations::KeyframeEffect::KeyFrameSet::ResolvedKeyFrame resolved_keyframe;
 
-                auto key = static_cast<u64>(keyframe->key().value() * Animations::KeyframeEffect::AnimationKeyFrameKeyScaleFactor);
-                auto keyframe_rule = keyframe->style();
-
-                if (!is<PropertyOwningCSSStyleDeclaration>(*keyframe_rule))
-                    continue;
-
-                auto const& keyframe_style = static_cast<PropertyOwningCSSStyleDeclaration const&>(*keyframe_rule);
+                auto key = static_cast<u64>(keyframe.key().value() * Animations::KeyframeEffect::AnimationKeyFrameKeyScaleFactor);
+                auto const& keyframe_style = *keyframe.style_as_property_owning_style_declaration();
                 for (auto const& it : keyframe_style.properties()) {
                     // Unresolved properties will be resolved in collect_animation_into()
                     for_each_property_expanding_shorthands(it.property_id, it.value, AllowUnresolved::Yes, [&](PropertyID shorthand_id, StyleValue const& shorthand_value) {