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

Also import a couple of WPT tests that now pass.
This commit is contained in:
Sam Atkins 2025-12-02 11:40:59 +00:00 committed by Andreas Kling
parent d717dd64b3
commit ed7a86b8cc
Notes: github-actions[bot] 2025-12-03 12:31:02 +00:00
5 changed files with 84 additions and 2 deletions

View file

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

View file

@ -0,0 +1,6 @@
Harness status: OK
Found 1 tests
1 Pass
Pass AnimationEvent should have the correct pseudoElement memeber

View file

@ -0,0 +1,6 @@
Harness status: OK
Found 1 tests
1 Pass
Pass AnimationEvent should have the correct pseudoElement memeber

View file

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

View file

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