d9724ee4646d699f7b41f08f81b4af3a6e623a04
[WebKit-https.git] / 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="resources/transition-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 -> 20
137   [1, "rect1", "stroke-dashoffset", 5, 1], // 0 -> 10
138   [1, "rect2", "stroke-dasharray", [15, 15], 1], // 10 -> 20
139   [1, "rect4", "stroke-width", 8, 1],  // 1px to 4mm
140   [1, "rect5", "stroke-width", 5, 1],  // 0 to 10px
141   [1, "rect5", "stroke-dasharray", [20], 1], // 20 at half time
142   [1, "rect6", "stroke-width", 15, 2],  // 10% to 20%
143   [1, "rect6", "stroke-dasharray", [15, 15, 20, 12.5, 17.5, 17.5], 1], // 20 -> 10, 15 -> 15, 20 -> 20, 15 -> 10, 20 -> 15, 15 -> 20
144   [1, "rect7", "stroke-dasharray", "none", 1], // none at half time
145   [1, "stop1", "stop-color", [127, 127, 0], 20], // rgb(255,0,0) -> rgb(0, 255, 0)
146   [1, "stop1", "stop-opacity", 0.75, 0.1], // 1 -> 0.5
147   [1, "polyline1", "stroke-miterlimit", 11, 0.5], // 12 -> 10 (this is an abrupt change in rendering even though the property animation is smooth)
148   [1, "text1", "kerning", 5, 1], // 0 -> 10px
149   [1, "text1", "baseline-shift", 5, 1], // 0 -> 10px
150   [1, "flood1", "flood-opacity", 0.5, 0.1], // 1 -> 0
151   [1, "flood1", "flood-color", [127, 127, 0], 20], // rgb(0, 255, 0) -> rgb(255, 0, 0)
152   [1, "light1", "lighting-color", [127, 127, 0], 20], // rgb(255, 0, 0) -> rgb(0, 255, 0)
153   ];
154     
155   function setupTest()
156   {
157       document.getElementById('container').className = 'animating';
158   }
159
160   runTransitionTest(expectedValues, setupTest, usePauseAPI);
161   </script>
162 </head>
163 <body>
164
165 <div id="container">
166   <svg viewBox="0 0 160 120" width="400px" height="300px">
167     <defs>
168       <linearGradient id="gradient1">
169         <stop id="stop1" offset="5%"/>
170         <stop offset="95%" stop-color="rgb(0,0,255)" />
171       </linearGradient>
172       <linearGradient id="gradient2">
173         <stop offset="10%" stop-color="rgb(0,255,255)" />
174         <stop offset="95%" stop-color="rgb(255, 0,255)" />
175       </linearGradient>
176       <filter id="filter1">
177         <feFlood id="flood1"/>
178         <feDiffuseLighting id="light1"/>
179       </filter>
180     </defs>
181     <rect id="rect1" x="10" y="10" width="30" height="30"/>
182     <rect id="rect2" x="90" y="10" width="30" height="30"/>
183     <rect id="rect3" x="90" y="60" width="30" height="20"/>
184     <rect id="rect4" x="10" y="100" width="10" height="10"/>
185     <rect id="rect5" x="50" y="100" width="10" height="10"/>
186     <rect id="rect6" x="90" y="100" width="10" height="10"/>
187     <rect id="rect7" x="130" y="100" width="10" height="10"/>
188     <polyline id="polyline1" points="10,70 60,75 10,80"/>
189     <text id="text1" x="100" y="60">Example</text>
190   </svg>
191 </div>
192
193 <div id="result"></div>
194
195 </body>
196 </html>