Import new tests from the CSS Text 3 WPT test suite
[WebKit-https.git] / ManualTests / svg-css-transition-compound.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2    "http://www.w3.org/TR/html4/loose.dtd">
3
4 <html lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 <title>CSS Transition of SVG elements</title>
8
9 <style type="text/css" media="screen">
10   div {
11     -webkit-box-sizing: border-box;
12   }
13   
14   .column {
15     margin: 10px;
16     display: inline-block;
17     vertical-align: top;
18   }
19   .container {
20     position: relative;
21     height: 200px;
22     width: 200px;
23     margin: 10px;
24     background-color: silver;
25     border: 1px solid black;
26   }
27   
28   .box {
29     position: absolute;
30     top: 0;
31     left: 0;
32     height: 60px;
33     width: 60px;
34     border: 1px dotted black;
35     -webkit-transform-origin: top left; /* to match SVG */
36   }
37
38   .final {
39     border: 1px solid blue;
40   }
41   
42   #target, #ref {
43     -webkit-transition-property: -webkit-transform;
44     -webkit-transition-duration: 1s;
45   }   
46 </style>
47
48 <script type="text/javascript" charset="utf-8">
49   var flag = true;
50   
51   function transition() {
52     var svgElm = document.getElementById("target");
53     var divElm = document.getElementById("ref");
54
55     if (flag) {
56       svgElm.style.webkitTransform = "translate(75px, 25px) scale(2) rotate(45deg)";
57       divElm.style.webkitTransform = "translate(75px, 25px) scale(2) rotate(45deg)";
58     }
59     else {
60       svgElm.style.webkitTransform = "translate(0px, 0px) scale(1) rotate(0deg)";
61       divElm.style.webkitTransform = "translate(0px, 0px) scale(1) rotate(0deg)";
62     }
63     flag = !flag;
64   }
65 </script>
66 </head>
67 <body>
68   <h1>CSS Transition of "-webkit-trasform" property for SVG elements</h1>
69
70   <p>The element below should transition when button is clicked</p> 
71   <p>The SVG transition should be identical with the CSS one</p>
72
73   <input type="button" value="Transition" onclick="transition()" />
74
75   <div class="column">
76     <h2>SVG compound</h2>
77     <div class="container">
78       <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  
79           viewBox="0 0 200 200" style="width:200px; height:200px;">
80         <rect id="target" x="0" y="0" width="60" height="60" stroke="blue" fill="none">
81         </rect>
82       </svg>
83     </div>
84
85     <h2>CSS compound</h2>
86     <div class="container">
87       <div class="final box" id="ref">
88       </div>
89     </div>
90   </div>
91
92 </body>
93 </html>