mirror of
https://github.com/fergalmoran/ladybird.git
synced 2025-12-29 12:49:08 +00:00
667e313731
The values aren't that complex, so it doesn't make much sense to have a dedicated generator for them. Parsing them manually also allows us to have much more control over the produced values, so as a result of this change, EasingStyleValue becomes much more ergonomic.
75 lines
2.0 KiB
HTML
75 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<div id="foo"></div>
|
|
<script src="../../include.js"></script>
|
|
<script>
|
|
test(() => {
|
|
const div = document.getElementById("foo");
|
|
|
|
const validEasings = [
|
|
"linear",
|
|
"linear(0, 1)",
|
|
"linear(0, 0.5, 1)",
|
|
"linear(0 5%, 0.5 10%, 1 100%)",
|
|
"linear(5% 0, 10% 0.5, 100% 1)",
|
|
"linear(5% 0, 1 100%)",
|
|
"linear(-14, 27 210%)",
|
|
"ease",
|
|
"ease-in",
|
|
"ease-out",
|
|
"ease-in-out",
|
|
"cubic-bezier(0, 0, 0, 0)",
|
|
"cubic-bezier(1, 1, 1, 1)",
|
|
"cubic-bezier(1, 1000, 1, 1000)",
|
|
"step-start",
|
|
"step-end",
|
|
"steps(1000)",
|
|
"steps(10, jump-start)",
|
|
"steps(10, jump-end)",
|
|
"steps(10, jump-none)",
|
|
"steps(10, jump-both)",
|
|
"steps(10, start)",
|
|
"steps(10, end)",
|
|
];
|
|
|
|
const invalidEasings = [
|
|
"abc",
|
|
"foo()",
|
|
"linear()",
|
|
"linear(a, b, c)",
|
|
"linear(5 10)",
|
|
"linear(5% 10%)",
|
|
"linear(0.5 5% 10)",
|
|
"linear(0.5 5% 10%)",
|
|
"cubic-bezier(0, 0, 0)",
|
|
"cubic-bezier(2, 0, 0, 0)",
|
|
"cubic-bezier(0, 0, 2, 0)",
|
|
"steps(1.5)",
|
|
"steps(-1)",
|
|
"steps(0, jump-none)",
|
|
];
|
|
|
|
let numFailed = 0;
|
|
|
|
for (const easing of validEasings) {
|
|
try {
|
|
div.animate(null, { duration: 1, easing });
|
|
} catch {
|
|
println(`Failed to parse valid easing ${easing}`);
|
|
numFailed++;
|
|
}
|
|
}
|
|
|
|
for (const easing of invalidEasings) {
|
|
try {
|
|
div.animate(null, { duration: 1, easing });
|
|
println(`Successfully parsed invalid easing ${easing}`);
|
|
numFailed++;
|
|
} catch {
|
|
}
|
|
}
|
|
|
|
if (numFailed === 0)
|
|
println(`PASS`);
|
|
});
|
|
</script>
|