system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-09-06 17:06:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Add tests for the rest of the Animation properties

Browse source
This commit is contained in:
Matthew Olsson 2024-03-08 08:47:49 -07:00 committed by Andreas Kling
parent e91f4dcd79
commit dc47210360
10 changed files with 164 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Tests/LibWeb/Text/expected/WebAnimations/animation-properties/pending-and-ready.txt Normal file
View file

@ -0,0 +1,4 @@
Animation is pending after a call to play(): true
Animation is not pending after ready promise resolves: true
Animation is pending after a call to pause(): true
Animation is not pending after ready promise resolves: true

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

@ -0,0 +1,5 @@
Animation's playState is idle after cancel(): true
Animation's playState is idle immediately after play(): true
Animation's playState is paused after pause(): true
Animation's playState is finished after finish(): true
Animation's playState is finished after animation runs to completion: true

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

@ -0,0 +1,4 @@
Animation has expected currentTime value after 100ms
Animation has expected currentTime value after 200ms
Animation has expected currentTime value after 300ms
Animation has expected currentTime value after 400ms

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

@ -0,0 +1,4 @@
Animation's replaceState is active initially: true
Animation's replaceState is active after finishing: true
Animation's replaceState is not removed after creating new animation: true
Animation's replaceState is removed after new animation finishes: true

7
Tests/LibWeb/Text/expected/WebAnimations/animation-properties/startTime.txt Normal file
View file

@ -0,0 +1,7 @@
Animation's startTime is initially null: true
Animation's startTime is 100 after setting the value: true
Animation's startTime is non-null after ready promise resolved: true
Animation's startTime is null after calling cancel(): true
Animation's startTime is null after calling pause() and setting currentTime: true
Animation's startTime updates after reversing playbackRate: true
Animation's startTime updates after calling finish(): true

23
Tests/LibWeb/Text/input/WebAnimations/animation-properties/pending-and-ready.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<div id="foo"></div>
<script src="../../include.js"></script>
<script>
asyncTest(async done => {
const foo = document.getElementById("foo");
const animation = foo.animate({}, { duration: 100 });
animation.play();
println(`Animation is pending after a call to play(): ${animation.pending}`);
await animation.ready;
println(`Animation is not pending after ready promise resolves: ${!animation.pending}`);
animation.pause();
println(`Animation is pending after a call to pause(): ${animation.pending}`);
await animation.ready;
println(`Animation is not pending after ready promise resolves: ${!animation.pending}`);
done();
});
</script>

25
Tests/LibWeb/Text/input/WebAnimations/animation-properties/playState.html Normal file
View file

@ -0,0 +1,25 @@
<!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] }, { duration: 1000 });
animation.cancel();
println(`Animation's playState is idle after cancel(): ${animation.playState === "idle"}`);
animation.play();
println(`Animation's playState is idle immediately after play(): ${animation.playState === "running"}`);
animation.pause();
println(`Animation's playState is paused after pause(): ${animation.playState === "paused"}`);
animation.finish();
println(`Animation's playState is finished after finish(): ${animation.playState === "finished"}`);
animation = foo.animate({ opacity: [0, 1] }, { duration: 1000 });
animation.currentTime = 1500;
println(`Animation's playState is finished after animation runs to completion: ${animation.playState === "finished"}`);
});
</script>

35
Tests/LibWeb/Text/input/WebAnimations/animation-properties/playbackRate.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<div id="foo"></div>
<script src="../../include.js"></script>
<script>
asyncTest(async done => {
const wait = async (ms) => new Promise(resolve => setTimeout(resolve, ms));
const foo = document.getElementById("foo");
const animation = foo.animate({ opacity: [0, 1] }, { duration: 1000 });
animation.playbackRate = 2;
// Allow 50ms of error for each test
await wait(100);
if (animation.currentTime >= 150 && animation.currentTime <= 250)
println("Animation has expected currentTime value after 100ms");
animation.playbackRate = 0.5;
await wait(100);
if (animation.currentTime >= 200 && animation.currentTime <= 300)
println("Animation has expected currentTime value after 200ms");
animation.playbackRate = -1;
await wait(100);
if (animation.currentTime >= 100 && animation.currentTime <= 200)
println("Animation has expected currentTime value after 300ms");
animation.playbackRate = 0;
const originalTime = animation.currentTime;
await wait(100);
if (animation.currentTime === originalTime)
println("Animation has expected currentTime value after 400ms");
done();
});
</script>

23
Tests/LibWeb/Text/input/WebAnimations/animation-properties/replaceState.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<div id="foo"></div>
<script src="../../include.js"></script>
<script>
// Note: The "persisted" state will be tested in the Animation.persist() test
asyncTest(async done => {
const foo = document.getElementById("foo");
const animation1 = foo.animate({ opacity: [0, 1] }, { duration: 10, fill: "forwards" });
println(`Animation's replaceState is active initially: ${animation1.replaceState === "active"}`);
await animation1.finished;
println(`Animation's replaceState is active after finishing: ${animation1.replaceState === "active"}`);
const animation2 = foo.animate({ opacity: [1, 0] }, { duration: 10, fill: "forwards" });
println(`Animation's replaceState is not removed after creating new animation: ${animation1.replaceState === "active"}`);
await animation2.finished;
println(`Animation's replaceState is removed after new animation finishes: ${animation1.replaceState === "removed"}`);
done();
});
</script>

34
Tests/LibWeb/Text/input/WebAnimations/animation-properties/startTime.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: 1000 });
println(`Animation's startTime is initially null: ${animation.startTime === null}`);
animation.startTime = 100;
println(`Animation's startTime is 100 after setting the value: ${animation.startTime === 100}`);
animation = foo.animate({ opacity: [0, 1] }, { duration: 1000 });
await animation.ready;
println(`Animation's startTime is non-null after ready promise resolved: ${animation.startTime !== null}`);
animation.cancel();
println(`Animation's startTime is null after calling cancel(): ${animation.startTime === null}`);
animation = foo.animate({ opacity: [0, 1] }, { duration: 1000 });
animation.pause();
animation.currentTime = 100;
println(`Animation's startTime is null after calling pause() and setting currentTime: ${animation.startTime === null}`);
animation = foo.animate({ opacity: [0, 1] }, { duration: 1000 });
animation.startTime = 100;
animation.playbackRate = -1;
println(`Animation's startTime updates after reversing playbackRate: ${animation.startTime > -150 && animation.startTime < -50}`);
animation = foo.animate({ opacity: [0, 1] }, { duration: 1000 });
animation.finish();
println(`Animation's startTime updates after calling finish(): ${animation.startTime > -1050 && animation.startTime < -950}`);
done();
});
</script>