cubic-bezier-overflow-svg-length.html

<!doctype html>
<html>
  <head>
    <title>cubic-bezier value overflow: SVG Lengths</title>
    <style>
      .box {
        transition: stroke-dashoffset 1s linear;
        stroke-dashoffset: 1;
        stroke-dasharray: 15, 15;
        stroke-width: 10;
        stroke: black;
        fill: blue;
      }
      #box1 {
        transition-timing-function: cubic-bezier(0.3, 1.5, 0.8, 1.5);
      }
      #box2 {
        transition-timing-function: cubic-bezier(0.4, -0.8, 0.7, 1.7);
      }
      #box3 {
        transition-timing-function: cubic-bezier(0.7, -2, 1, -1.5);
      }
      #box4 {
        transition-timing-function: cubic-bezier(0, 4, 1, -3);
      }
      .animating > .box {
        stroke-dashoffset: 50;
      }
    </style>
    <script src="../animations/resources/animation-test-helpers.js"></script>
    <script>
      const expectedValues = [
        // [time, element-id, property, expected-value, tolerance]
        [0.50, "box1", "stroke-dashoffset", 61, 4],
        [0.95, "box1", "stroke-dashoffset", 55, 4],
        [0.10, "box2", "stroke-dashoffset", -6, 4],
        [0.50, "box2", "stroke-dashoffset", 19, 4],
        [0.95, "box2", "stroke-dashoffset", 54, 4],
        [0.10, "box3", "stroke-dashoffset", -12, 4],
        [0.50, "box3", "stroke-dashoffset", -53, 4],
        [0.15, "box4", "stroke-dashoffset", 64, 4],
        [0.50, "box4", "stroke-dashoffset", 26, 4],
        [0.80, "box4", "stroke-dashoffset", -11, 4],
      ];

      function setupTest() {
        document.getElementById('container').setAttribute('class', 'animating');
      }

      runTransitionTest(expectedValues, setupTest);
    </script>
  </head>
  <body>
    <svg id="container">
      <path class="box" id="box1" d="M5,10  l0,100 l100,0 l0,-100 l-100,0" />
      <path class="box" id="box2" d="M5,130 l0,100 l100,0 l0,-100 l-100,0" />
      <path class="box" id="box3" d="M5,250 l0,100 l100,0 l0,-100 l-100,0" />
      <path class="box" id="box4" d="M5,370 l0,100 l100,0 l0,-100 l-100,0" />
    </svg>
    <div id="result"></div>
  </body>
</html>
chromium/third_party/blink/web_tests/transitions/cubic-bezier-overflow-svg-length.html
