<!-- test for moving a region with the animate element -->
<smil>
  <head>
    <layout>
      <root-layout width="320" height="240" background-color="green"/>
      <region id="region1" left="5%" top="10%" right="30%" bottom="50%" z-index="2"/>
      <region id="region2" left="240" top="140" width="64" height="64" z-index="3" background-color="red"/>
      <region id="region3" z-index="1"/>
    </layout>
  </head>
  <body>
    <par>
      <text id="text1" src="data:,I'm%20a%20region" region="region1">
        <param name="fontColor" value="yellow"/>
        <param name="fontPtSize" value="10"/>
        <param name="backgroundColor" value="blue"/>
        <animate target="text1" attributeName="fontPtSize" calcMode="discrete" values="10;12;14;16;18;20;22;24;26;28;300" begin="5" dur="6"/>
      </text>
      <img id="image1" src="../icons/48-apps-kmplayer.png" region="region2" left="8">
        <animate target="region2" attributeName="background-color" values="red;white;blue" repeatCount="10" calcMode="discrete" dur="1.5"/>
      </img>
      <text src="data:,Move%20a%20region" region="region2" fill="freeze" top="48">
        <param name="fontPtSize" value="6"/>
      </text>
      <animate target="region2" attributeName="left" from="240" to="10" begin="5" dur="5"/>
    </par>
    <par>
      <set target="region2" attributeName="z-index" to="6" fill="freeze"/>
      <set target="region2" attributeName="left" to="20" fill="freeze"/>
      <set target="region2" attributeName="width" to="200" fill="freeze"/>
      <set target="region3" attributeName="background-color" to="black" fill="freeze"/>
      <set target="region3" attributeName="z-index" to="5" fill="freeze"/>
      <text src="data:,that's%20all%20folks" region="region2" dur="2">
        <param name="fontColor" value="green"/>
        <param name="fontSize" value="+2"/>
        <param name="backgroundColor" value="black"/>
      </text>
    </par>
  </body>
</smil>
