layout/reftests/css-transitions/transition-and-animation-with-different-durations.html

   1 <!DOCTYPE html>
   2 <html class="reftest-wait">
   3 <title>
   4 Transform animation and opacity transition with different durations
   5 </title>
   6 <style>
   7 div {
   8   width: 100px; height: 100px;
   9   background: blue;
  10 }
  11 @keyframes translate {
  12   from { transform: translateY(0px); }
  13   to { transform: translateY(0px); }
  14 }
  15 </style>
  16 <div id="target"></div>
  17 <script>
  18 window.addEventListener("load", () => {
  19   var target = document.getElementById("target");
  20   target.style = "opacity: 0;";
  21
  22   getComputedStyle(target).transform;
  23
  24   target.style = "transition: opacity 0.2s; opacity: 1; " +
  25                  "animation: translate 0.1s;";
  26
  27   target.addEventListener("transitionend", () => {
  28     document.documentElement.classList.remove("reftest-wait");
  29   });
  30 });
  31 </script>