devtools/client/inspector/animation/test/doc_multi_keyframes.html
author Daisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 03 Jul 2018 16:22:46 +0900
changeset 477850 e5972354da953a684cda4885accf6539eb09eae6
parent 464978 6ef7e2cd46f5e5d033f823ad4d604112a5aaf832
child 498969 98cfc4f7de934502dbae28e733c03aaaa935d2d4
permissions -rw-r--r--
Bug 1472859 - Part 2: Add test for same colors and currentcolor. r=gl a=lizzard MozReview-Commit-ID: KRnajXPdwSq

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
    div {
      width: 50px;
      height: 50px;
    }
    </style>
  </head>
  <body>
    <script>
    "use strict";

    function createAnimation(name, keyframes, effectEasing) {
      const div = document.createElement("div");
      div.classList.add(name);
      document.body.appendChild(div);

      const effect = {
        duration: 100000,
        fill: "forwards"
      };

      if (effectEasing) {
        effect.easing = effectEasing;
      }

      div.animate(keyframes, effect);
    }

    createAnimation(
      "multi-types",
      [
        {
          backgroundColor: "red",
          backgroundRepeat: "space round",
          fontSize: "10px",
          marginLeft: "0px",
          opacity: 0,
          textAlign: "right",
          transform: "translate(0px)"
        },
        {
          backgroundColor: "lime",
          backgroundRepeat: "round space",
          fontSize: "20px",
          marginLeft: "100px",
          opacity: 1,
          textAlign: "center",
          transform: "translate(100px)"
        },
      ]
    );

    createAnimation(
      "multi-types-reverse",
      [
        {
          backgroundColor: "lime",
          backgroundRepeat: "space",
          fontSize: "20px",
          marginLeft: "100px",
          opacity: 1,
          textAlign: "center",
          transform: "translate(100px)"
        },
        {
          backgroundColor: "red",
          backgroundRepeat: "round",
          fontSize: "10px",
          marginLeft: "0px",
          opacity: 0,
          textAlign: "right",
          transform: "translate(0px)"
        },
      ]
    );

    createAnimation(
      "middle-keyframe",
      [
        {
          backgroundColor: "red",
          backgroundRepeat: "space",
          fontSize: "10px",
          marginLeft: "0px",
          opacity: 0,
          textAlign: "right",
          transform: "translate(0px)"
        },
        {
          backgroundColor: "blue",
          backgroundRepeat: "round",
          fontSize: "20px",
          marginLeft: "100px",
          opacity: 1,
          textAlign: "center",
          transform: "translate(100px)"
        },
        {
          backgroundColor: "lime",
          backgroundRepeat: "space",
          fontSize: "10px",
          marginLeft: "0px",
          opacity: 0,
          textAlign: "right",
          transform: "translate(0px)"
        },
      ]
    );

    createAnimation(
      "steps-keyframe",
      [
        {
          backgroundColor: "red",
          backgroundRepeat: "space",
          fontSize: "10px",
          marginLeft: "0px",
          opacity: 0,
          textAlign: "right",
          transform: "translate(0px)",
          easing: "steps(2)"
        },
        {
          backgroundColor: "lime",
          backgroundRepeat: "round",
          fontSize: "20px",
          marginLeft: "100px",
          opacity: 1,
          textAlign: "center",
          transform: "translate(100px)"
        },
      ]
    );

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

    createAnimation(
      "frames-keyframe",
      [
        {
          easing: "frames(5)",
          opacity: 0,
        },
        {
          opacity: 1
        },
      ]
    );

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

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

    createAnimation(
      "same-color",
      [
        {
          backgroundColor: "lime",
        },
        {
          backgroundColor: "lime",
        },
      ]
    );

    createAnimation(
      "currentcolor",
      [
        {
          backgroundColor: "currentColor",
        },
        {
          backgroundColor: "lime",
        },
      ]
    );
    </script>
  </body>
</html>