svg-layout-transition-zoom.html | Explore in Territory

<!DOCTYPE>
<html>
<head>
  <style>
    .init {
      transition-duration: 1s;
      transition-timing-function: linear;
    }
    
    #x {
      transition-property: x;
    }
    #x.final {
      x: 200px;
    }

    #y {
      transition-property: y;
    }
    #y.final {
      y: 200px;
    }
  </style>
  <script src="../animations/resources/animation-test-helpers.js"></script>
  <script type="text/javascript">

    const expectedValues = [
      // [time, element-id, property, expected-value, tolerance]
      [0.5, 'x', 'x', 150, 20],
      [0.5, 'y', 'y', 150, 20],
    ];

    function setupTest()
    {
      document.getElementById('x').setAttribute('class', 'init final');
      document.getElementById('y').setAttribute('class', 'init final');
    }

    runTransitionTest(expectedValues, setupTest);
  </script>
</head>
<body>
  <svg style="zoom: 2">
    <rect x="100" y="100" width="100" height="100" class="init" id="x"/>
    <rect x="100" y="100" width="100" height="100" class="init" id="y"/>
  </svg>

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

</body>
</html>

chromium/third_party/blink/web_tests/transitions/svg-layout-transition-zoom.html