<!DOCTYPE>

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

    #cy {
      -webkit-transition-property: cy;
    }
    #cy.final {
      cy: 200px;
    }

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

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

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

    #x {
      -webkit-transition-property: x;
    }
    #x.final {
      x: 200px;
    }

    #y {
      -webkit-transition-property: y;
    }
    #y.final {
      y: 200px;
    }

    #width {
      -webkit-transition-property: width;
    }
    #width.final {
      width: 200px;
    }

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

    const expectedValues = [
      // [time, element-id, property, expected-value, tolerance]
      [0.5, 'cx', 'cx', 150, 20],
      [0.5, 'cy', 'cy', 150, 20],
      [0.5, 'r', 'r', 150, 20],
      [0.5, 'rx', 'rx', 150, 20],
      [0.5, 'ry', 'ry', 150, 20],
      [0.5, 'x', 'x', 150, 20],
      [0.5, 'y', 'y', 150, 20],
      [0.5, 'width', 'width', 150, 20],
      [0.5, 'height', 'height', 150, 20],
    ];
  
    function setupTest()
    {
      document.getElementById('cx').setAttribute('class', 'init final');
      document.getElementById('cy').setAttribute('class', 'init final');
      document.getElementById('r').setAttribute('class', 'init final');
      document.getElementById('rx').setAttribute('class', 'init final');
      document.getElementById('ry').setAttribute('class', 'init final');
      document.getElementById('x').setAttribute('class', 'init final');
      document.getElementById('y').setAttribute('class', 'init final');
      document.getElementById('width').setAttribute('class', 'init final');
      document.getElementById('height').setAttribute('class', 'init final');
    }
  
    runTransitionTest(expectedValues, setupTest, usePauseAPI);
  </script>
</head>
<body>
  <svg>
    <circle cx="100" cy="100" r="100" class="init" id="cx"/>
    <circle cx="100" cy="100" r="100" class="init" id="cy"/>
    <circle cx="100" cy="100" r="100" class="init" id="r"/>
    <ellipse cx="100" cy="100" rx="100" ry="100" class="init" id="rx"/>
    <ellipse cx="100" cy="100" rx="100" ry="100" class="init" id="ry"/>
    <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"/>
    <rect x="100" y="100" width="100" height="100" class="init" id="width"/>
    <rect x="100" y="100" width="100" height="100" class="init" id="height"/>
  </svg>

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

</body>
</html>