easing-parsing.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!DOCTYPE html>
  2. <div id="foo"></div>
  3. <script src="../../include.js"></script>
  4. <script>
  5. test(() => {
  6. const div = document.getElementById("foo");
  7. const validEasings = [
  8. "linear",
  9. "linear(0, 1)",
  10. "linear(0, 0.5, 1)",
  11. "linear(0 5%, 0.5 10%, 1 100%)",
  12. "linear(5% 0, 10% 0.5, 100% 1)",
  13. "linear(5% 0, 1 100%)",
  14. "linear(-14, 27 210%)",
  15. "linear(0.5 5% 10%)",
  16. "ease",
  17. "ease-in",
  18. "ease-out",
  19. "ease-in-out",
  20. "cubic-bezier(0, 0, 0, 0)",
  21. "cubic-bezier(1, 1, 1, 1)",
  22. "cubic-bezier(1, 1000, 1, 1000)",
  23. "step-start",
  24. "step-end",
  25. "steps(1000)",
  26. "steps(10, jump-start)",
  27. "steps(10, jump-end)",
  28. "steps(10, jump-none)",
  29. "steps(10, jump-both)",
  30. "steps(10, start)",
  31. "steps(10, end)",
  32. ];
  33. const invalidEasings = [
  34. "abc",
  35. "foo()",
  36. "linear()",
  37. "linear(a, b, c)",
  38. "linear(5 10)",
  39. "linear(5% 10%)",
  40. "linear(0.5 5% 10)",
  41. "cubic-bezier(0, 0, 0)",
  42. "cubic-bezier(2, 0, 0, 0)",
  43. "cubic-bezier(0, 0, 2, 0)",
  44. "steps(1.5)",
  45. "steps(-1)",
  46. "steps(0, jump-none)",
  47. ];
  48. let numFailed = 0;
  49. for (const easing of validEasings) {
  50. try {
  51. div.animate(null, { duration: 1, easing });
  52. } catch {
  53. println(`Failed to parse valid easing ${easing}`);
  54. numFailed++;
  55. }
  56. }
  57. for (const easing of invalidEasings) {
  58. try {
  59. div.animate(null, { duration: 1, easing });
  60. println(`Successfully parsed invalid easing ${easing}`);
  61. numFailed++;
  62. } catch {
  63. }
  64. }
  65. if (numFailed === 0)
  66. println(`PASS`);
  67. });
  68. </script>