third_party/WebKit/ManualTests/animation/animateTransform-parser.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!--
   3
   4 animateTransform parsing code coverage for translate, rotate, skewX
   5
   6 TODO: does not test e/E exponent notation
   7
   8 -->
   9 <svg xmlns="http://www.w3.org/2000/svg" width="800px" height="600px">
  10         <g transform="translate(-90, -90)">
  11                 <circle fill="none" stroke="black" stroke-width="3" cx="200" cy="200" r="100" />
  12                 <line x1="200" y1="200" x2="300" y2="200" stroke="red" stroke-width="30" stroke-linecap="round">
  13                         <animateTransform attributeName="transform" type="rotate" from=" 0, 200, 200" to=" 360, 200, 200"
  14                                 dur="5s" />
  15                 </line>
  16                 <line x1="200" y1="200" x2="300" y2="200" stroke="green" stroke-width="20" stroke-linecap="round">
  17                         <animateTransform attributeName="transform" type="rotate" from=" 0 200 200" to=" 360 200 200"
  18                                 dur="5s" />
  19                 </line>
  20                 <line x1="200" y1="200" x2="300" y2="200" stroke="blue" stroke-width="10" stroke-linecap="round">
  21                         <animateTransform attributeName="transform" type="rotate" from=" 0,200,200" to=" 360,200,200"
  22                                 dur="5s" />
  23                 </line>
  24                 <line x1="200" y1="200" x2="300" y2="200" stroke="white" stroke-width="5" stroke-linecap="round">
  25                         <animateTransform attributeName="transform" type="rotate" from=" 0,+200 +200" to=" 360 +200 +200"
  26                                 dur="5s" />
  27                 </line>
  28         </g>
  29         <g transform="translate(300, 10)">
  30                 <rect fill="none" stroke="black" stroke-width="3" x="0" y="0" width="200" height="200" />
  31                 <circle fill="red" cx="0" cy="0" r="30">
  32                         <animateTransform attributeName="transform" type="translate" from="0, 0" to="200, 200" dur="5s" />
  33                 </circle>
  34                 <circle fill="green" cx="0" cy="0" r="20">
  35                         <animateTransform attributeName="transform" type="translate" from="0 0" to="200 200" dur="5s" />
  36                 </circle>
  37                 <circle fill="blue" cx="0" cy="0" r="10">
  38                         <animateTransform attributeName="transform" type="translate" from="0,0" to="200,200" dur="5s" />
  39                 </circle>
  40                 <circle fill="yellow" cx="0" cy="0" r="5">
  41                         <animateTransform attributeName="transform" type="translate" from=" +0,+0" to=" +200 +200" dur="5s" />
  42                 </circle>
  43         </g>
  44         <g transform="translate(10, 300)">
  45                 <rect fill="none" stroke="black" stroke-width="3" x="0" y="0" width="200" height="200" />
  46                 <rect fill="red" x="0" y="0" width="40" height="100">
  47                         <animateTransform attributeName="transform" type="scale" from="1,1" by="0,1" dur="5s" />
  48                 </rect>
  49                 <rect fill="green" x="0" y="0" width="30" height="100">
  50                         <animateTransform attributeName="transform" type="scale" from="1 1" by="0 1" dur="5s" />
  51                 </rect>
  52                 <rect fill="blue" x="0" y="0" width="20" height="100">
  53                         <animateTransform attributeName="transform" type="scale" from="1, 1" by="0, 1" dur="5s" />
  54                 </rect>
  55                 <rect fill="yellow" x="0" y="0" width="10" height="100">
  56                         <animateTransform attributeName="transform" type="scale" from="+1,+1" by=" +0, +1" dur="5s" />
  57                 </rect>
  58
  59                 <rect fill="red" x="0" y="0" width="100" height="40">
  60                         <animateTransform attributeName="transform" type="scale" from="1,1" by="1,0" dur="5s" />
  61                 </rect>
  62                 <rect fill="green" x="0" y="0" width="100" height="30">
  63                         <animateTransform attributeName="transform" type="scale" from="1 1" by="1 0" dur="5s" />
  64                 </rect>
  65                 <rect fill="blue" x="0" y="0" width="100" height="20">
  66                         <animateTransform attributeName="transform" type="scale" from="1, 1" by="1, 0" dur="5s" />
  67                 </rect>
  68                 <rect fill="yellow" x="0" y="0" width="100" height="10">
  69                         <animateTransform attributeName="transform" type="scale" from="+1,+1" by=" +1, +0" dur="5s" />
  70                 </rect>
  71         </g>
  72
  73         <g transform="translate(300, 300)">
  74                 <rect fill="none" stroke="black" stroke-width="3" x="0" y="0" width="200" height="200" />
  75                 <rect fill="red" x="0" y="0" width="100" height="100">
  76                         <animateTransform attributeName="transform" type="skewX" from="0" by="45" dur="5s" />
  77                 </rect>
  78                 <rect fill="green" x="0" y="0" width="50" height="100">
  79                         <animateTransform attributeName="transform" type="skewX" from="0" by=" 45" dur="5s" />
  80                 </rect>
  81                 <rect fill="blue" x="0" y="0" width="25" height="100">
  82                         <animateTransform attributeName="transform" type="skewX" from="0" by=" +45.0" dur="5s" />
  83                 </rect>
  84         </g>
  85 </svg>
  86