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