third_party/WebKit/LayoutTests/svg/animations/animateMotion-additive-2c.svg

   1 <?xml version="1.0" encoding="iso-8859-1" ?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Tiny 1.1//EN"
   3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
   4 <svg viewBox="0 0 500 350" onload="loaded()"
   5   xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
   6   xmlns:xlink="http://www.w3.org/1999/xlink">
   7
   8 <title>additive animateMotion: from-to, from-by, by and values</title>
   9 <desc>
  10 Compare from-to, from-by and by animateMotion with values animateMotion.
  11
  12 SMIL specifies, how from-to, from-by and by animations have to be converted into
  13 values animation. Therefore they have to be the same as the related values animation.
  14 The conversion is as follows:
  15
  16 from="a" to="b" ... values="a;b"
  17 from="a" by="b" ... values="a;a+b"
  18 by="a" ... values="0;a" additive="sum"
  19
  20       (by and from-by animations have only a meaning, if values can be added somehow.
  21       '0' is used as a general symbol for the neutral element of addition for the related attribute,
  22       this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the
  23       related attribute, '0' is a predecessor of '1' in the related attribute space. For animateMotion
  24       the '0' is no motion or is related to a translation given in coordinates: 0,0.)
  25
  26      The from-to, from-by and by are applied to animateMotion of different blue stroked
  27       paths and are compared with the related values animations including additive and
  28       cumulative behaviour for underlying red paths. Additionally underlying dark red
  29       paths simulate the same behaviour using always the defaults additive replace and
  30       accumulate  none. The blue paths cover all red paths. Therefore if something
  31       red gets visible, the test is failed.
  32 </desc>
  33 <metadata>
  34 <rdf:RDF
  35   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  36   xmlns:dc="http://purl.org/dc/elements/1.1/"
  37   xmlns:cc="http://creativecommons.org/ns#" >
  38  <rdf:Description rdf:about="">
  39    <dc:title>additive animateMotion: from-to, from-by, by and values</dc:title>
  40    <dc:creator>Dr. Olaf Hoffmann</dc:creator>
  41    <dc:created>2007-06-13</dc:created>
  42    <dc:language>en</dc:language>
  43    <dc:description>
  44 SVG animation test:
  45 Compare from-to, from-by and by animateMotion with values animateMotion.
  46    </dc:description>
  47    <dc:relation>http://hoffmann.bplaced.net/svgtest/</dc:relation>
  48    <dc:rights>
  49       <cc:License
  50          rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
  51         <cc:permits
  52            rdf:resource="http://creativecommons.org/ns#Reproduction" />
  53         <cc:permits
  54            rdf:resource="http://creativecommons.org/ns#Distribution" />
  55         <cc:requires
  56            rdf:resource="http://creativecommons.org/ns#Notice" />
  57         <cc:requires
  58            rdf:resource="http://creativecommons.org/ns#Attribution" />
  59         <cc:permits
  60            rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
  61         <cc:requires
  62            rdf:resource="http://creativecommons.org/ns#ShareAlike" />
  63       </cc:License>
  64    </dc:rights>
  65  </rdf:Description>
  66 </rdf:RDF>
  67 </metadata>
  68
  69
  70  <defs>
  71
  72   <path id="fromto" d="M-15,-20L-20,20 20,20C-10,-10 30,-20 -15,-20Z"/>
  73   <path id="fromby" d="M-20,-15L-20,15 20,20C20,0 -10,-20 -20,-15Z"/>
  74   <path id="by" d="M-20,-20C100,80 40,-60 20,20Z"/>
  75
  76  </defs>
  77
  78
  79   <rect x="0" y="0" width="500" height="350" fill="#fff" />
  80
  81
  82  <g fill="none" stroke="#f00" stroke-width="10" stroke-linejoin="bevel">
  83
  84
  85 <g>
  86 <title>from-to animateMotion</title>
  87 <use xlink:href="#fromto" x="40" y="80" stroke="#800">
  88 <title>dark red values comparsion for from-to animations - if visible fail</title>
  89 <animateMotion values="20,20" begin="2s" />
  90
  91 <animateMotion values="30,90;50,60" begin="4s" dur="5s"/>
  92 <animateMotion values="60,130;80,100" begin="9s" dur="5s"/>
  93 <animateMotion values="90,170;110,140" begin="14s" dur="5s"/>
  94
  95 <animateMotion values="10,70;30,40" begin="20s" dur="5s"/>
  96 <animateMotion values="40,110;60,80" begin="25s" dur="5s"/>
  97 <animateMotion values="70,150;90,120" begin="30s" dur="5s"/>
  98
  99 <animateMotion values="30,90;50,60" begin="36s" dur="5s"/>
 100 <animateMotion values="30,90;50,60" begin="41s" dur="5s"/>
 101 <animateMotion values="30,90;50,60" begin="46s" dur="5s" fill="freeze"/>
 102 </use>
 103
 104 <use xlink:href="#fromto" x="40" y="80" stroke="#f00">
 105 <title>red values comparsion for from-to animations - if visible fail</title>
 106 <animateMotion values="20,20" begin="2s" />
 107 <animateMotion values="10,70;30,40" begin="4s"
 108                  dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
 109 <animateMotion values="10,70;30,40" begin="20s"
 110                  dur="5s" repeatCount="3" additive="replace" accumulate="sum"/>
 111 <animateMotion values="10,70;30,40" begin="36s"
 112                  dur="5s" repeatCount="3" additive="sum" accumulate="none" fill="freeze"/>
 113 </use>
 114
 115
 116 <use xlink:href="#fromto" x="40" y="80"  stroke="#88f">
 117 <title>blue from-to animations</title>
 118 <animateMotion values="20,20" begin="2s" />
 119 <animateMotion from="10,70"  to="30,40" begin="4s"
 120                  dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
 121 <animateMotion from="10,70"  to="30,40" begin="20s"
 122                  dur="5s" repeatCount="3" additive="replace" accumulate="sum"/>
 123 <animateMotion from="10,70"  to="30,40" begin="36s"
 124                  dur="5s" repeatCount="3" additive="sum" accumulate="none" fill="freeze"/>
 125 <set attributeName="stroke" to="#00f" begin="20s" />
 126 <set attributeName="stroke" to="#00a" begin="36s" />
 127 </use>
 128
 129 </g>
 130
 131
 132
 133 <g>
 134 <title>from-by animateMotion</title>
 135 <use xlink:href="#fromby" x="160" y="80" stroke="#800">
 136 <title>dark red values comparsion for from-by animations - if visible fail</title>
 137 <animateMotion values="20,20" begin="2s" />
 138
 139 <animateMotion values="30,90;50,60" begin="4s" dur="5s"/>
 140 <animateMotion values="60,130;80,100" begin="9s" dur="5s"/>
 141 <animateMotion values="90,170;110,140" begin="14s" dur="5s"/>
 142
 143 <animateMotion values="10,70;30,40" begin="20s" dur="5s"/>
 144 <animateMotion values="40,110;60,80" begin="25s" dur="5s"/>
 145 <animateMotion values="70,150;90,120" begin="30s" dur="5s"/>
 146
 147 <animateMotion values="30,90;50,60" begin="36s" dur="5s"/>
 148 <animateMotion values="30,90;50,60" begin="41s" dur="5s"/>
 149 <animateMotion values="30,90;50,60" begin="46s" dur="5s" fill="freeze"/>
 150 </use>
 151
 152 <use xlink:href="#fromby" x="160" y="80" stroke="#f00">
 153 <title>red values comparsion for from-by animations - if visible fail</title>
 154 <animateMotion values="20,20" begin="2s" />
 155 <animateMotion values="10,70;30,40" begin="4s"
 156                  dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
 157 <animateMotion values="10,70;30,40" begin="20s"
 158                  dur="5s" repeatCount="3" additive="replace" accumulate="sum"/>
 159 <animateMotion values="10,70;30,40" begin="36s"
 160                  dur="5s" repeatCount="3" additive="sum" accumulate="none" fill="freeze"/>
 161 </use>
 162
 163
 164 <use xlink:href="#fromby" x="160" y="80"  stroke="#88f">
 165 <title>blue from-by animations</title>
 166 <animateMotion values="20,20" begin="2s" />
 167 <animateMotion from="10,70"  by="20,-30" begin="4s"
 168                  dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
 169 <animateMotion from="10,70"  by="20,-30" begin="20s"
 170                  dur="5s" repeatCount="3" additive="replace" accumulate="sum"/>
 171 <animateMotion from="10,70"  by="20,-30" begin="36s"
 172                  dur="5s" repeatCount="3" additive="sum" accumulate="none" fill="freeze"/>
 173 <set attributeName="stroke" to="#00f" begin="20s" />
 174 <set attributeName="stroke" to="#00a" begin="36s" />
 175 </use>
 176
 177 </g>
 178
 179
 180 <g>
 181 <title>by animateMotion</title>
 182 <use xlink:href="#by" x="300" y="200" stroke="#800">
 183 <title>dark red values comparsion for by animations - if visible fail</title>
 184 <animateMotion values="20,20" begin="2s" />
 185
 186 <animateMotion values="20,20;40,-10" begin="4s" dur="5s"/>
 187 <animateMotion values="40,-10;60,-40" begin="9s" dur="5s"/>
 188 <animateMotion values="60,-40;80,-70" begin="14s" dur="5s"/>
 189
 190 <animateMotion values="20,20;40,-10" begin="20s" dur="5s"/>
 191 <animateMotion values="40,-10;60,-40" begin="25s" dur="5s"/>
 192 <animateMotion values="60,-40;80,-70" begin="30s" dur="5s"/>
 193
 194 <animateMotion values="20,20;40,-10" begin="36s" dur="5s"/>
 195 <animateMotion values="20,20;40,-10" begin="41s" dur="5s"/>
 196 <animateMotion values="20,20;40,-10" begin="46s" dur="5s" fill="freeze"/>
 197 </use>
 198
 199 <use xlink:href="#by" x="300" y="200" stroke="#f00">
 200 <title>red values comparsion for by animations - if visible fail</title>
 201 <animateMotion values="20,20" begin="2s" />
 202 <animateMotion values="0,0;20,-30" begin="4s"
 203                  dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
 204 <animateMotion values="0,0;20,-30" begin="20s"
 205                  dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
 206 <animateMotion values="0,0;20,-30" begin="36s"
 207                  dur="5s" repeatCount="3" additive="sum" accumulate="none" fill="freeze"/>
 208 </use>
 209
 210
 211 <use xlink:href="#by" x="300" y="200"  stroke="#88f">
 212 <title>blue by animations</title>
 213 <animateMotion values="20,20" begin="2s" />
 214 <animateMotion by="20,-30" begin="4s"
 215                  dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
 216 <animateMotion by="20,-30" begin="20s"
 217                  dur="5s" repeatCount="3" additive="replace" accumulate="sum"/>
 218 <animateMotion by="20,-30" begin="36s"
 219                  dur="5s" repeatCount="3" additive="sum" accumulate="none" fill="freeze"/>
 220
 221 <set attributeName="stroke" to="#00f" begin="20s" />
 222 <set attributeName="stroke" to="#00a" begin="36s" />
 223 </use>
 224
 225 </g>
 226 </g>
 227
 228 <script>
 229 if (window.testRunner)
 230     testRunner.waitUntilDone();
 231
 232 function loaded() {
 233     document.documentElement.setCurrentTime(52);
 234
 235     if (window.testRunner)
 236         testRunner.notifyDone();
 237 }
 238 </script>
 239 </svg>