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