third_party/WebKit/LayoutTests/transitions/svg-transitions.html

   1 <html>
   2 <head>
   3   <style>
   4
   5   svg * {
   6       -webkit-transition-property: fill, stroke, fill-opacity, stroke-opacity, stroke-width, stroke-dasharray, stroke-dashoffset, stroke-miterlimit, kerning, baseline-shift, flood-color, flood-opacity, stop-color, stop-opacity, lighting-color;
   7       -webkit-transition-duration: 2s;
   8       -webkit-transition-timing-function: linear;
   9   }
  10
  11   #rect1 {
  12       fill: rgb(0, 0, 255);
  13       stroke: red;
  14       fill-opacity: 1;
  15       stroke-opacity: 1;
  16       stroke-width: 2;
  17       stroke-dashoffset: 0;
  18       stroke-dasharray: 10 10;
  19   }
  20   .animating #rect1 {
  21       fill: rgb(0, 255, 0);
  22       stroke: black;
  23       fill-opacity: 0.2;
  24       stroke-opacity: 0.2;
  25       stroke-width: 4;
  26       stroke-dashoffset: 10;
  27       stroke-dasharray: 20 20;
  28   }
  29
  30   #rect2 {
  31       fill: rgb(0, 0, 255);
  32       stroke: rgb(255, 0, 0);
  33       stroke-dasharray: 10;
  34   }
  35   .animating #rect2 {
  36       fill: rgb(0, 255, 0);
  37       stroke: rgb(0, 0, 0);
  38       stroke-dasharray: 20 20;
  39   }
  40
  41   #rect3 {
  42       fill: url(#gradient1);
  43   }
  44   .animating #rect3 {
  45       fill: url(#gradient2);
  46   }
  47
  48   #stop1 {
  49       stop-color: rgb(255,0,0);
  50       stop-opacity: 1;
  51   }
  52   .animating #stop1 {
  53       stop-color: rgb(0,255,0);
  54       stop-opacity: 0.5;
  55   }
  56
  57   #rect4 {
  58       stroke: red;
  59       stroke-width: 1px;
  60   }
  61   .animating #rect4 {
  62       stroke-width: 4mm;
  63   }
  64
  65   #rect5 {
  66       stroke: black;
  67       stroke-width: 0;
  68       stroke-dasharray: none;
  69   }
  70   .animating #rect5 {
  71       stroke-width: 10px;
  72       stroke-dasharray: 20;
  73   }
  74
  75   #rect6 {
  76       stroke: black;
  77       stroke-width: 10%;
  78       stroke-dasharray: 20 15;
  79   }
  80   .animating #rect6 {
  81       stroke-width: 20%;
  82       stroke-dasharray: 10 15 20;
  83   }
  84
  85   #rect7 {
  86       fill: url(#invalid) black;
  87       stroke-dasharray: 20;
  88   }
  89   .animating #rect7 {
  90       fill: url(#invalid) blue;
  91       stroke-dasharray: none;
  92   }
  93
  94   #polyline1 {
  95       fill: none;
  96       stroke: black;
  97       stroke-width: 4;
  98       stroke-miterlimit: 12;
  99   }
 100   .animating #polyline1 {
 101       stroke-miterlimit: 10;
 102   }
 103
 104   #text1 {
 105       kerning: 0;
 106       baseline-shift: 0;
 107   }
 108   .animating #text1 {
 109       kerning: 10px;
 110       baseline-shift: 10px;
 111   }
 112
 113   #flood1 {
 114       flood-opacity: 1;
 115       flood-color: rgb(255, 0, 0);
 116   }
 117   .animating #flood1 {
 118       flood-opacity: 0;
 119       flood-color: rgb(0, 255, 0);
 120   }
 121
 122   #light1 {
 123       lighting-color: rgb(255, 0, 0);
 124   }
 125   .animating #light1 {
 126       lighting-color: rgb(0, 255, 0);
 127   }
 128   </style>
 129   <script src="../animations/resources/animation-test-helpers.js"></script>
 130   <script>
 131   const expectedValues = [
 132   // [time, element-id, property, expected-value, tolerance]
 133   [1, "rect1", "fill-opacity", 0.6, 0.1], // 1 -> 0.2
 134   [1, "rect1", "stroke-width", 3, 0.5],   // 2 -> 4
 135   [1, "rect1", "stroke-opacity", 0.6, 0.1], // 1 -> 0.2
 136   [1, "rect1", "stroke-dasharray", [15, 15], 1], // (10, 10) -> (20, 20)
 137   [1, "rect1", "stroke-dashoffset", 5, 1], // 0 -> 10
 138   [1, "rect2", "fill", [0, 127, 127], 20], // rgb(0, 0, 255) -> rgb(0, 255, 0)
 139   [1, "rect2", "stroke", [127, 0, 0], 20],  // rgb(255, 0, 0) -> rgb(0, 0, 0)
 140   [1, "rect2", "stroke-dasharray", [15, 15], 1], // (10, 10) -> (20, 20)
 141   [1, "rect4", "stroke-width", 8, 0.5],  // 1px to 4mm (~15.1px)
 142   [1, "rect5", "stroke-width", 5, 1],  // 0 to 10px
 143   [1, "rect5", "stroke-dasharray", [10, 10], 1], // (0, 0) -> (20, 20)
 144   [1, "rect6", "stroke-width", 15, 2],  // 10% to 20%
 145   [1, "rect6", "stroke-dasharray", [15, 15, 20, 12.5, 17.5, 17.5], 1], // (10, 15, 20, 15, 20, 15) -> (10, 15, 20, 10, 15, 20)
 146   [1, "rect7", "fill", [0, 0, 127], 20],  // url(#invalid) black -> url(#invalid) blue
 147   [1, "rect7", "stroke-dasharray", [10, 10], 1], // (20, 20) -> (0, 0)
 148   [1, "stop1", "stop-color", [127, 127, 0], 20], // rgb(255,0,0) -> rgb(0, 255, 0)
 149   [1, "stop1", "stop-opacity", 0.75, 0.1], // 1 -> 0.5
 150   [1, "polyline1", "stroke-miterlimit", 11, 0.5], // 12 -> 10 (this is an abrupt change in rendering even though the property animation is smooth)
 151   [1, "text1", "baseline-shift", 5, 1], // 0 -> 10px
 152   [1, "flood1", "flood-opacity", 0.5, 0.1], // 1 -> 0
 153   [1, "flood1", "flood-color", [127, 127, 0], 20], // rgb(0, 255, 0) -> rgb(255, 0, 0)
 154   [1, "light1", "lighting-color", [127, 127, 0], 20], // rgb(255, 0, 0) -> rgb(0, 255, 0)
 155   ];
 156
 157   function setupTest()
 158   {
 159       document.getElementById('container').className = 'animating';
 160   }
 161
 162   // Disable logging since this test contains known failures.
 163   log = function() {};
 164   runTransitionTest(expectedValues, setupTest);
 165   </script>
 166 </head>
 167 <body>
 168
 169 <div id="container">
 170   <svg viewBox="0 0 160 120" width="400px" height="300px">
 171     <defs>
 172       <linearGradient id="gradient1">
 173         <stop id="stop1" offset="5%"/>
 174         <stop offset="95%" stop-color="rgb(0,0,255)" />
 175       </linearGradient>
 176       <linearGradient id="gradient2">
 177         <stop offset="10%" stop-color="rgb(0,255,255)" />
 178         <stop offset="95%" stop-color="rgb(255, 0,255)" />
 179       </linearGradient>
 180       <filter id="filter1">
 181         <feFlood id="flood1"/>
 182         <feDiffuseLighting id="light1"/>
 183       </filter>
 184     </defs>
 185     <rect id="rect1" x="10" y="10" width="30" height="30"/>
 186     <rect id="rect2" x="90" y="10" width="30" height="30"/>
 187     <rect id="rect3" x="90" y="60" width="30" height="20"/>
 188     <rect id="rect4" x="10" y="100" width="10" height="10"/>
 189     <rect id="rect5" x="50" y="100" width="10" height="10"/>
 190     <rect id="rect6" x="90" y="100" width="10" height="10"/>
 191     <rect id="rect7" x="130" y="100" width="10" height="10"/>
 192     <polyline id="polyline1" points="10,70 60,75 10,80"/>
 193     <text id="text1" x="100" y="60">Example</text>
 194   </svg>
 195 </div>
 196
 197 <div id="result"></div>
 198
 199 </body>
 200 </html>