<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
    div {
      background-color: lime;
      height: 100px;
      width: 100px;
    }

    .cssanimation-normal {
      animation: cssanimation 1000s;
    }

    .cssanimation-linear {
      animation: cssanimation 1000s linear;
    }

    @keyframes cssanimation {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    </style>
  </head>
  <body>
    <div class="cssanimation-normal"></div>
    <div class="cssanimation-linear"></div>
    <script>
    "use strict";

    const duration = 1000000;

    function createAnimation(keyframes, effect, className) {
      const div = document.createElement("div");
      div.classList.add(className);
      document.body.appendChild(div);
      effect.duration = duration;
      div.animate(keyframes, effect);
    }

    createAnimation({ opacity: [0, 1] },
                    { delay: 500000, id: "test-delay-animation" },
                    "delay-positive");

    createAnimation({ opacity: [0, 1] },
                    { delay: -500000, id: "test-negative-delay-animation" },
                    "delay-negative");

    createAnimation({ opacity: [0, 1] },
                    { easing: "steps(2)" },
                    "easing-step");

    createAnimation({ opacity: [0, 1] },
                    { endDelay: 500000 },
                    "enddelay-positive");

    createAnimation({ opacity: [0, 1] },
                    { endDelay: -500000 },
                    "enddelay-negative");

    createAnimation({ opacity: [0, 1] },
                    { endDelay: 500000, fill: "forwards" },
                    "enddelay-with-fill-forwards");

    createAnimation({ opacity: [0, 1] },
                    { endDelay: 500000, iterations: Infinity },
                    "enddelay-with-iterations-infinity");

    createAnimation({ opacity: [0, 1] },
                    { direction: "alternate", iterations: Infinity },
                    "direction-alternate-with-iterations-infinity");

    createAnimation({ opacity: [0, 1] },
                    { direction: "alternate-reverse", iterations: Infinity },
                    "direction-alternate-reverse-with-iterations-infinity");

    createAnimation({ opacity: [0, 1] },
                    { direction: "reverse", iterations: Infinity },
                    "direction-reverse-with-iterations-infinity");

    createAnimation({ opacity: [0, 1] },
                    { fill: "backwards" },
                    "fill-backwards");

    createAnimation({ opacity: [0, 1] },
                    { fill: "backwards", delay: 500000, iterationStart: 0.5 },
                     "fill-backwards-with-delay-iterationstart");

    createAnimation({ opacity: [0, 1] },
                    { fill: "both" },
                    "fill-both");

    createAnimation({ opacity: [0, 1] },
                    { fill: "both", delay: 500000, iterationStart: 0.5 },
                    "fill-both-width-delay-iterationstart");

    createAnimation({ opacity: [0, 1] },
                    { fill: "forwards" },
                    "fill-forwards");

    createAnimation({ opacity: [0, 1] },
                    { iterationStart: 0.5 },
                    "iterationstart");

    createAnimation({ width: ["100px", "150px"] },
                    {},
                    "no-compositor");

    createAnimation([{ opacity: 0, easing: "steps(2)" }, { opacity: 1 }],
                    {},
                    "keyframes-easing-step");

    createAnimation(
      [
        {
          opacity: 0,
          offset: 0,
        },
        {
          opacity: 1,
          offset: 0.1,
          easing: "steps(1)",
        },
        {
          opacity: 0,
          offset: 0.13,
        },
      ],
      {},
      "narrow-keyframes");

    createAnimation(
      [
        {
          offset: 0,
          opacity: 1,
        },
        {
          offset: 0.5,
          opacity: 1,
        },
        {
          offset: 0.5,
          easing: "steps(1)",
          opacity: 0,
        },
        {
          offset: 1,
          opacity: 1,
        },
      ],
      {},
      "duplicate-offsets");

    createAnimation({ opacity: [0, 1] },
                    { delay: -250000 },
                    "delay-negative-25");

    createAnimation({ opacity: [0, 1] },
                    { delay: -750000 },
                    "delay-negative-75");
    </script>
  </body>
</html>
