0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

LibWeb/DOM: Convert elapsedTime to seconds when firing AnimationEvents

Browse source 
This makes all three subtests from this test to pass:
 - css/css-animations/animationevent-types.html
This commit is contained in:
Lucas CHOLLET 2024-12-23 13:39:34 -05:00 • committed by Andreas Kling
parent 61b444d538
commit abc0418710
Notes: github-actions[bot] 2024-12-30 10:08:56 +00:00
3 changed files with 101 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Libraries/LibWeb/DOM/Document.cpp
View file

@ -2362,7 +2362,9 @@ void Document::dispatch_events_for_animation_if_necessary(GC::Ref<Animations::An
auto owning_element = css_animation.owning_element();
auto dispatch_event = [&](FlyString const& name, double elapsed_time) {
auto dispatch_event = [&](FlyString const& name, double elapsed_time_ms) {
auto elapsed_time_seconds = elapsed_time_ms / 1000;
append_pending_animation_event({
.event = CSS::AnimationEvent::create(
owning_element->realm(),
@ -2370,7 +2372,7 @@ void Document::dispatch_events_for_animation_if_necessary(GC::Ref<Animations::An
{
{ .bubbles = true },
css_animation.id(),
elapsed_time,
elapsed_time_seconds,
}),
.animation = css_animation,
.target = *target,

8
Tests/LibWeb/Text/expected/wpt-import/css/css-animations/animationevent-types.txt Normal file
View file

@ -0,0 +1,8 @@
Harness status: OK
Found 3 tests
3 Pass
Pass animationstart event is instanceof AnimationEvent
Pass animationend event is instanceof AnimationEvent
Pass animationiteration event is instanceof AnimationEvent

89
Tests/LibWeb/Text/input/wpt-import/css/css-animations/animationevent-types.html Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="timeout" content="long">
<title>CSS Animations Test: AnimationEvnt types - animationstart, animationend,animationiteration</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#event-animationevent">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#test {
animation-name: sample;
animation-duration: 2s;
animation-delay: -1s;
animation-iteration-count: 2;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
<div id="test">Filler Text</div>
<div id="log"></div>
<script>
var testDiv = document.getElementById("test");
async_test(function(t) {
testDiv.addEventListener("animationstart", t.step_func(function(evt) {
console.log("animationstart")
assert_true(evt instanceof window.AnimationEvent);
assert_idl_attribute(evt, "animationName", "animationstart has animationName property");
assert_idl_attribute(evt, "elapsedTime", "animationstart has elapsedTime property");
assert_idl_attribute(evt, "pseudoElement", "animationstart has pseudoElement property");
assert_equals(evt.animationName, "sample", "animationstart has animationName value");
assert_equals(evt.elapsedTime, 1, "animationstart has elapsedTime value");
assert_equals(evt.pseudoElement, "", "animaitonstart has correct pseudoElement value");
t.done();
}), true);
}, "animationstart event is instanceof AnimationEvent");
async_test(function(t) {
testDiv.addEventListener("animationend", t.step_func(function(evt) {
console.log("animationend")
assert_true(evt instanceof window.AnimationEvent);
assert_idl_attribute(evt, "animationName", "animationend has animationName property");
assert_idl_attribute(evt, "elapsedTime", "animationend has elapsedTime property");
assert_idl_attribute(evt, "pseudoElement", "animationstart has pseudoElement property");
assert_equals(evt.animationName, "sample", "animationend has animationName value");
assert_equals(evt.elapsedTime, 4, "animationend has elapsedTime value");
assert_equals(evt.pseudoElement, "", "animaitonstart has correct pseudoElement value");
t.done();
}), true);
}, "animationend event is instanceof AnimationEvent");
async_test(function(t) {
testDiv.addEventListener("animationiteration", t.step_func(function(evt) {
console.log("animationiteration")
assert_true(evt instanceof window.AnimationEvent);
assert_idl_attribute(evt, "animationName", "animationiteration has animationName property");
assert_idl_attribute(evt, "elapsedTime", "animationiteration has elapsedTime property");
assert_idl_attribute(evt, "pseudoElement", "animationstart has pseudoElement property");
assert_equals(evt.animationName, "sample", "animationiteration has animationName value");
assert_equals(evt.elapsedTime, 2, "animationiteration has elapsedTime value");
assert_equals(evt.pseudoElement, "", "animaitonstart has correct pseudoElement value");
t.done();
}), true);
}, "animationiteration event is instanceof AnimationEvent");
</script>