<!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;
    }

    .r {
      transition-property: r;
    }
    .r.final {
      r: 200px;
    }

    .rx {
      transition-property: rx;
    }
    .rx.final {
      rx: 200px;
    }

    .ry {
      transition-property: ry;
    }
    .ry.final {
      ry: 200px;
    }

    .cx {
      transition-property: cx;
    }
    .cx.final {
      cx: 200px;
    }

    .cy {
      transition-property: cy;
    }
    .cy.final {
      cy: 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],
      [0.5, 'sx', 'x', 150, 20],
      [0.5, 'sy', 'y', 150, 20],
      [0.5, 'mx', 'x', 150, 20],
      [0.5, 'my', 'y', 150, 20],
      [0.5, 'ix', 'x', 150, 20],
      [0.5, 'iy', 'y', 150, 20],
      [0.5, 'fx', 'x', 150, 20],
      [0.5, 'fy', 'y', 150, 20],
      [0.5, 'rx', 'rx', 150, 20],
      [0.5, 'ry', 'ry', 150, 20],
      [0.5, 'erx', 'rx', 150, 20],
      [0.5, 'ery', 'ry', 150, 20],
      [0.5, 'cr', 'r', 150, 20],
      [0.5, 'cx', 'cx', 150, 20],
      [0.5, 'cy', 'cy', 150, 20],
    ];
    function setupTest()
    {
      for (var i = 0; i < expectedValues.length; i++)
        document.getElementById(expectedValues[i][1]).classList.add("final");
    }
  
    runTransitionTest(expectedValues, setupTest);
  </script>
</head>
<body>
  <svg>
    <rect x="100" y="100" width="100" height="100" class="init x" id="x"/>
    <rect x="100" y="100" width="100" height="100" class="init y" id="y"/>
    <svg id="sx" class="init x" x="100"/>
    <svg id="sy" class="init y" y="100"/>
    <mask id="mx" class="init x" x="100"/>
    <mask id="my" class="init y" y="100"/>
    <image id="ix" class="init x" x="100" y="100" width="100" height="100"/>
    <image id="iy" class="init y" x="100" y="100" width="100" height="100"/>
    <foreignObject id="fx" class="init x" x="100" y="100" width="100" height="100"/>
    <foreignObject id="fy" class="init y" x="100" y="100" width="100" height="100"/>
    <rect x="100" y="100" width="100" height="100" rx="100" ry="100" class="init rx" id="rx"/>
    <rect x="100" y="100" width="100" height="100" rx="100" ry="100" class="init ry" id="ry"/>
    <ellipse class="init rx" rx="100" ry="100" id="erx"/>
    <ellipse class="init ry" rx="100" ry="100" id="ery"/>
    <circle class="init r" cx="100" cy="100" r="100" id="cr"/>
    <circle class="init cx" cx="100" cy="100" r="100" id="cx"/>
    <circle class="init cy" cx="100" cy="100" r="100" id="cy"/>
  </svg>

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