transition-in-delay-phase.html | Explore in Territory

<html>
<head>
  <style>
    div {
      position: relative;
      left: 100px;
      height: 50px;
      width: 50px;
      background-color: green;
      -webkit-transition: left 4s linear 1s;
    }
    
    .moved {
      left: 200px;
    }
   </style>
   <script src="../animations/resources/animation-test-helpers.js"></script>
   <script>
     const expectedValues = [
       // [time, element-id, property, expected-value, tolerance]
       [0.5, "target", "left", 100, 4],
     ];

     function setupTest()
     {
       document.getElementById("target").className = "moved";
     }

     runTransitionTest(expectedValues, setupTest);
   </script>
</head>
<body>
  <h1>Test for transition in delay phase</h1>

  <p>This test works only in DumpRenderTree. It uses an API exposed
    only there to jump to a particular time in a running transition.
    Tests bug <a href="https://bugs.webkit.org/show_bug.cgi?id=59475">59475</a>
  </p>

  <div id="target"></div>
  <div id="result"></div>

</body>
</html>

chromium/third_party/blink/web_tests/transitions/transition-in-delay-phase.html