system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-10-15 12:23:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Add a few Animation property tests

Browse source
This commit is contained in:
Matthew Olsson 2024-03-07 09:48:26 -07:00 committed by Alexander Kalenik
parent d76c2d45c4
commit d7ad134ae5
8 changed files with 110 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
Tests/LibWeb/Text/expected/WebAnimations/animation-properties/currentTime.txt Normal file
View file

@ -0,0 +1,5 @@
Animation with no timeline has null currentTime: true
Animation that hasn't been played has null currentTime: true
Played animation has a currentTime of 0: true
New animation has not started animating: true
Animation with currentTime set to end is finished: true

4
Tests/LibWeb/Text/expected/WebAnimations/animation-properties/effect.txt Normal file
View file

@ -0,0 +1,4 @@
Element.animate creates Animation with effect: true
Setting effect to null clears the effect: true
Accessing effect property on animation with no effect produces null: true
Setting effect on animation with no effect works: true

4
Tests/LibWeb/Text/expected/WebAnimations/animation-properties/finished.txt Normal file
View file

@ -0,0 +1,4 @@
finished promise remains after finishing: true
finished promise updates after playing: true
cancel() updates finished promise: true
Expected finished promise cancellation

2
Tests/LibWeb/Text/expected/WebAnimations/animation-properties/timeline.txt Normal file
View file

@ -0,0 +1,2 @@
Animation's default timeline is the document's timeline: true
Animation created with null timeline has the document's timeline: true

29
Tests/LibWeb/Text/input/WebAnimations/animation-properties/currentTime.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<div id="foo"></div>
<script src="../../include.js"></script>
<script>
asyncTest(done => {
const foo = document.getElementById("foo");
let animation = new Animation(null, null);
println(`Animation with no timeline has null currentTime: ${animation.currentTime === null}`);
animation = new Animation(new KeyframeEffect(foo, []));
println(`Animation that hasn't been played has null currentTime: ${animation.currentTime === null}`);
animation = foo.animate({ color: "red" }, { duration: 1000 });
println(`Played animation has a currentTime of 0: ${animation.currentTime === 0}`);
setTimeout(() => {
// FIXME: Figure out how to consistently test timings
// if (animation.currentTime > 95 && animation.currentTime < 105)
// println("Animation time after 100ms is correct");
animation = foo.animate({ opacity: [0, 1] }, { duration: 1000 });
println(`New animation has not started animating: ${getComputedStyle(foo).opacity === "0"}`);
animation.currentTime = 1000;
println(`Animation with currentTime set to end is finished: ${getComputedStyle(foo).opacity === "1"}`);
done();
}, 100);
});
</script>

19
Tests/LibWeb/Text/input/WebAnimations/animation-properties/effect.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<div id="foo"></div>
<script src="../../include.js"></script>
<script>
test(() => {
const foo = document.getElementById("foo");
let animation = foo.animate({ color: ["red", "blue"] });
println(`Element.animate creates Animation with effect: ${animation.effect instanceof KeyframeEffect}`);
animation.effect = null;
println(`Setting effect to null clears the effect: ${animation.effect === null}`);
animation = new Animation(null, null);
println(`Accessing effect property on animation with no effect produces null: ${animation.effect === null}`);
animation.effect = new KeyframeEffect(foo, {});
println(`Setting effect on animation with no effect works: ${animation.effect instanceof KeyframeEffect}`);
});
</script>

34
Tests/LibWeb/Text/input/WebAnimations/animation-properties/finished.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<div id="foo"></div>
<script src="../../include.js"></script>
<script>
asyncTest(async done => {
const foo = document.getElementById("foo");
let animation = foo.animate({ opacity: [0, 1] }, { duration: 100 });
let finishedPromise = animation.finished;
// FIXME: Figure out how to consistently test timings
// const currentTime = performance.now();
await finishedPromise;
// const elapsedTime = performance.now() - currentTime;
// if (elapsedTime > 95 && elapsedTime < 105)
// println("Animation time after 100ms is correct")
println(`finished promise remains after finishing: ${Object.is(finishedPromise, animation.finished)}`);
animation.play();
println(`finished promise updates after playing: ${!Object.is(finishedPromise, animation.finished)}`);
finishedPromise = animation.finished;
// Upon cancellation, the finished promise should be rejected
finishedPromise.then(() => {
println("Unexpected finished promise resolution");
}).catch(() => {
println("Expected finished promise cancellation");
});
animation.cancel();
println(`cancel() updates finished promise: ${!Object.is(finishedPromise, animation.finished)}`);
done();
});
</script>

13
Tests/LibWeb/Text/input/WebAnimations/animation-properties/timeline.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<div id="foo"></div>
<script src="../../include.js"></script>
<script>
test(() => {
const foo = document.getElementById("foo");
let animation = foo.animate({ opacity: [0, 1] });
println(`Animation's default timeline is the document's timeline: ${animation.timeline === document.timeline}`);
animation = foo.animate({ opacity: [0, 1] }, { timeline: null });
println(`Animation created with null timeline has the document's timeline: ${animation.timeline === document.timeline}`);
});
</script>