[Web Animations] Turn Web Animations with CSS integration on
[WebKit-https.git] / LayoutTests / transitions / svg-layout-transition.html
1 <!DOCTYPE><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=true ] -->
2
3 <html>
4 <head>
5   <style>
6     .init {
7       -webkit-transition-duration: 1s;
8       -webkit-transition-timing-function: linear;
9     }
10     
11     #cx {
12       -webkit-transition-property: cx;
13     }
14     #cx.final {
15       cx: 200px;
16     }
17
18     #cy {
19       -webkit-transition-property: cy;
20     }
21     #cy.final {
22       cy: 200px;
23     }
24
25     #r {
26       -webkit-transition-property: r;
27     }
28     #r.final {
29       r: 200px;
30     }
31
32     #rx {
33       -webkit-transition-property: rx;
34     }
35     #rx.final {
36       rx: 200px;
37     }
38
39     #ry {
40       -webkit-transition-property: ry;
41     }
42     #ry.final {
43       ry: 200px;
44     }
45
46     #x {
47       -webkit-transition-property: x;
48     }
49     #x.final {
50       x: 200px;
51     }
52
53     #y {
54       -webkit-transition-property: y;
55     }
56     #y.final {
57       y: 200px;
58     }
59
60     #width {
61       -webkit-transition-property: width;
62     }
63     #width.final {
64       width: 200px;
65     }
66
67     #height {
68       -webkit-transition-property: height;
69     }
70     #height.final {
71       height: 200px;
72     }
73     
74   </style>
75   <script src="resources/transition-test-helpers.js"></script>
76   <script type="text/javascript">
77
78     const expectedValues = [
79       // [time, element-id, property, expected-value, tolerance]
80       [0.5, 'cx', 'cx', 150, 20],
81       [0.5, 'cy', 'cy', 150, 20],
82       [0.5, 'r', 'r', 150, 20],
83       [0.5, 'rx', 'rx', 150, 20],
84       [0.5, 'ry', 'ry', 150, 20],
85       [0.5, 'x', 'x', 150, 20],
86       [0.5, 'y', 'y', 150, 20],
87       [0.5, 'width', 'width', 150, 20],
88       [0.5, 'height', 'height', 150, 20],
89     ];
90   
91     function setupTest()
92     {
93       document.getElementById('cx').setAttribute('class', 'init final');
94       document.getElementById('cy').setAttribute('class', 'init final');
95       document.getElementById('r').setAttribute('class', 'init final');
96       document.getElementById('rx').setAttribute('class', 'init final');
97       document.getElementById('ry').setAttribute('class', 'init final');
98       document.getElementById('x').setAttribute('class', 'init final');
99       document.getElementById('y').setAttribute('class', 'init final');
100       document.getElementById('width').setAttribute('class', 'init final');
101       document.getElementById('height').setAttribute('class', 'init final');
102     }
103   
104     runTransitionTest(expectedValues, setupTest, usePauseAPI);
105   </script>
106 </head>
107 <body>
108   <svg>
109     <circle cx="100" cy="100" r="100" class="init" id="cx"/>
110     <circle cx="100" cy="100" r="100" class="init" id="cy"/>
111     <circle cx="100" cy="100" r="100" class="init" id="r"/>
112     <ellipse cx="100" cy="100" rx="100" ry="100" class="init" id="rx"/>
113     <ellipse cx="100" cy="100" rx="100" ry="100" class="init" id="ry"/>
114     <rect x="100" y="100" width="100" height="100" class="init" id="x"/>
115     <rect x="100" y="100" width="100" height="100" class="init" id="y"/>
116     <rect x="100" y="100" width="100" height="100" class="init" id="width"/>
117     <rect x="100" y="100" width="100" height="100" class="init" id="height"/>
118   </svg>
119
120   <div id="result">
121   </div>
122
123 </body>
124 </html>