LibWeb/DOM: Set the pseudo_element on created Animation/TransitionEvents

AtkinsSJ · awesomekling · commit ed7a86b8cc7e · 2025-12-03T13:29:51.000+01:00
Also import a couple of WPT tests that now pass.
diff --git a/Libraries/LibWeb/DOM/Document.cpp b/Libraries/LibWeb/DOM/Document.cpp
@@ -2696,10 +2696,12 @@ void Document::dispatch_events_for_transition(GC::Ref<CSS::CSSTransition> transi
                 type,
                 CSS::TransitionEventInit {
                     { .bubbles = true },
-                    // FIXME: Correctly set pseudo_element
                     MUST(String::from_utf8(transition->transition_property())),
                     elapsed_time,
-                    String {},
+                    transition->owning_element()->pseudo_element().map([](auto it) {
+                                                                      return MUST(String::formatted("::{}", CSS::pseudo_element_name(it)));
+                                                                  })
+                        .value_or({}),
                 }),
             .animation = transition,
             .target = transition->owning_element()->element(),
@@ -2791,6 +2793,10 @@ void Document::dispatch_events_for_animation_if_necessary(GC::Ref<Animations::An
                     { .bubbles = true },
                     css_animation.animation_name(),
                     elapsed_time_seconds,
+                    owning_element->pseudo_element().map([](auto it) {
+                                                        return MUST(String::formatted("::{}", CSS::pseudo_element_name(it)));
+                                                    })
+                        .value_or({}),
                 }),
             .animation = css_animation,
             .target = *target,
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-animations/animationevent-marker-pseudoelement.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-animations/animationevent-marker-pseudoelement.txt
@@ -0,0 +1,6 @@
+Harness status: OK
+
+Found 1 tests
+
+1 Pass
+Pass	AnimationEvent should have the correct pseudoElement memeber
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-animations/animationevent-pseudoelement.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-animations/animationevent-pseudoelement.txt
@@ -0,0 +1,6 @@
+Harness status: OK
+
+Found 1 tests
+
+1 Pass
+Pass	AnimationEvent should have the correct pseudoElement memeber
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-animations/animationevent-marker-pseudoelement.html b/Tests/LibWeb/Text/input/wpt-import/css/css-animations/animationevent-marker-pseudoelement.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Animations Test: AnimationEvent pseudoElement</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-animations/#interface-animationevent">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+  #target::marker {
+    content: "";
+    animation: move 1s;
+  }
+
+  @keyframes move {
+    to { transform: translate(100px); }
+  }
+
+  #target {
+    display: list-item;
+    list-style-position: inside;
+  }
+</style>
+<div id='target'></div>
+<script>
+  async_test(function(t) {
+    var target = document.getElementById('target');
+    target.addEventListener("animationstart", t.step_func(function(evt) {
+      assert_true(evt instanceof window.AnimationEvent);
+      assert_equals(evt.pseudoElement, "::marker");
+
+      t.done();
+    }), true);
+  }, "AnimationEvent should have the correct pseudoElement memeber");
+</script>
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-animations/animationevent-pseudoelement.html b/Tests/LibWeb/Text/input/wpt-import/css/css-animations/animationevent-pseudoelement.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Animations Test: AnimationEvent pseudoElement</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#interface-animationevent">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+  #target::before {
+    content: "";
+    animation: move 1s;
+  }
+
+  @keyframes move {
+    to { transform: translate(100px); }
+  }
+</style>
+<div id='target'></div>
+<script>
+  async_test(function(t) {
+    var target = document.getElementById('target');
+    target.addEventListener("animationstart", t.step_func(function(evt) {
+      assert_true(evt instanceof window.AnimationEvent);
+      assert_equals(evt.pseudoElement, "::before");
+
+      t.done();
+    }), true);
+  }, "AnimationEvent should have the correct pseudoElement memeber");
+</script>
+
