LibWeb: Separate CSSAnimation::animationName from Animation::id

Calme1709 · kalenikaliaksandr · commit a95cde366012 · 2025-11-02T23:54:00.000+01:00
diff --git a/Libraries/LibWeb/CSS/CSSAnimation.h b/Libraries/LibWeb/CSS/CSSAnimation.h
@@ -19,7 +19,8 @@ class CSSAnimation : public Animations::Animation {
 public:
     static GC::Ref<CSSAnimation> create(JS::Realm&);
 
-    FlyString const& animation_name() const { return id(); }
+    FlyString const& animation_name() const { return m_animation_name; }
+    void set_animation_name(FlyString const& animation_name) { m_animation_name = animation_name; }
 
     virtual Animations::AnimationClass animation_class() const override;
     virtual Optional<int> class_specific_composite_order(GC::Ref<Animations::Animation> other) const override;
@@ -30,6 +31,9 @@ class CSSAnimation : public Animations::Animation {
     virtual void initialize(JS::Realm&) override;
 
     virtual bool is_css_animation() const override { return true; }
+
+    // https://drafts.csswg.org/css-animations-2/#dom-cssanimation-animationname
+    FlyString m_animation_name;
 };
 
 }
diff --git a/Libraries/LibWeb/CSS/StyleComputer.cpp b/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -1235,7 +1235,7 @@ void StyleComputer::process_animation_definitions(ComputedProperties const& comp
         // An animation applies to an element if its name appears as one of the identifiers in the computed value of the
         // animation-name property and the animation uses a valid @keyframes rule
         auto animation = CSSAnimation::create(document.realm());
-        animation->set_id(animation_properties.name);
+        animation->set_animation_name(animation_properties.name);
         animation->set_timeline(document.timeline());
         animation->set_owning_element(element);
 
diff --git a/Libraries/LibWeb/DOM/Document.cpp b/Libraries/LibWeb/DOM/Document.cpp
@@ -2816,7 +2816,7 @@ void Document::dispatch_events_for_animation_if_necessary(GC::Ref<Animations::An
                 name,
                 {
                     { .bubbles = true },
-                    css_animation.id(),
+                    css_animation.animation_name(),
                     elapsed_time_seconds,
                 }),
             .animation = css_animation,
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-animations/CSSAnimation-id.tentative.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-animations/CSSAnimation-id.tentative.txt
@@ -0,0 +1,6 @@
+Harness status: OK
+
+Found 1 tests
+
+1 Pass
+Pass	Animation.id for CSS Animations
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-animations/CSSAnimation-id.tentative.html b/Tests/LibWeb/Text/input/wpt-import/css/css-animations/CSSAnimation-id.tentative.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSSAnimation.id</title>
+<!-- TODO: Add a more specific link for this once it is specified. -->
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="support/testcommon.js"></script>
+<style>
+@keyframes abc { }
+</style>
+<div id="log"></div>
+<script>
+'use strict';
+
+test(t => {
+  const div = addDiv(t);
+  div.style.animation = 'abc 100s';
+  const animation = div.getAnimations()[0];
+  assert_equals(animation.id, '', 'id for CSS Animation is initially empty');
+
+  animation.id = 'anim'
+  assert_equals(animation.id, 'anim', 'animation.id reflects the value set');
+}, 'Animation.id for CSS Animations');
+
+</script>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -2816,7 +2816,7 @@ void Document::dispatch_events_for_animation_if_necessary(GC::Ref<Animations::An`
`2816`	`2816`	`name,`
`2817`	`2817`	`{`
`2818`	`2818`	`{ .bubbles = true },`
`2819`		`- css_animation.id(),`
	`2819`	`+ css_animation.animation_name(),`
`2820`	`2820`	`elapsed_time_seconds,`
`2821`	`2821`	`}),`
`2822`	`2822`	`.animation = css_animation,`