<?xml version="1.0" encoding="iso-8859-1" ?>
<svg viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="loaded()">
<title>Animation of tspan dx and dy</title> 
<desc>
    dx and dy attributes change with from-to, from-by and by animations for blue texts
    with explicitly given absolute text positions x and y.

    The same effect is gained using values animations for x and y of red texts below.
    Therefore the blue texts cover always the red texts. If something red gets
    visible, an error is occured.
</desc> 

<rect x="0" y="0" height="1000" width="1000" fill="#ffc" />


<text font-size="180" font-family="monospace">

<tspan id="compare1" x="100,200,300,400" y="200,190,180,170" fill="#f00">text
<animate
    attributeName="x" 
    attributeType="XML"
    values="110,200,300,400;140,200,300,400"
    dur="5s"
    fill="freeze" />
<animate
    attributeName="y" 
    attributeType="XML"
    values="210,190,180,170;240,190,180,170"
    dur="5s"
    fill="freeze" />
</tspan>

<tspan id="compare2" x="100,200,300,400" y="400,390,380,370" fill="#f00">text
<animate
    attributeName="x" 
    attributeType="XML"
    values="100,210,320,430;140,260,380,500"
    dur="5s"
    fill="freeze" />
<animate
    attributeName="y" 
    attributeType="XML"
    values="400,400,400,400;440,450,460,470"
    dur="5s"
    fill="freeze" />
</tspan>

<tspan id="compare3" x="100,200,300,400" y="600,580,560,540" fill="#f00">text
<animate
    attributeName="x" 
    attributeType="XML"
    values="100,200,300,400;140,260,380,500"
    dur="10s"
    fill="freeze" />
<animate
    attributeName="y" 
    attributeType="XML"
    values="600,580,560,540;640,640,640,640"
    dur="10s"
    fill="freeze" />
</tspan>


<tspan id="text1" x="100,200,300,400" y="200,190,180,170" fill="blue">text
<animate
    attributeName="dx" 
    attributeType="XML"
    from="10"
    to="40"
    dur="5s"
    fill="freeze" />
<animate
    attributeName="dy" 
    attributeType="XML"
    from="10"
    to="40"
    dur="5s"
    fill="freeze" />
</tspan> 
<tspan id="text2" x="100,200,300,400" y="400,390,380,370" fill="blue">text
<animate
    attributeName="dx" 
    attributeType="XML"
    from="0,10,20,30"
    by="40 50 60 70"
    dur="5s"
    fill="freeze" />
<animate
    attributeName="dy" 
    attributeType="XML"
    from="0,10,20,30"
    by="40 50 60 70"
    dur="5s"
    fill="freeze" />
</tspan>

<tspan id="text3" x="100,200,300,400" y="600,580,560,540" fill="blue">text
<animate
    attributeName="dx" 
    attributeType="XML"
    by="40 60 80 100"
    dur="10s"
    fill="freeze" />
<animate
    attributeName="dy" 
    attributeType="XML"
    by="40 60 80 100"
    dur="10s"
    fill="freeze" />
</tspan>
</text>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

function loaded() {
    document.documentElement.setCurrentTime(11);
    if (window.testRunner)
        testRunner.notifyDone();
}
</script>
</svg>