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