Share common code between calendar picker and color suggestion picker
[WebKit-https.git] / ManualTests / svg-css-animate-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>Animation of rotate property</title>
8 <style type="text/css" media="screen">
9   div {
10     -webkit-box-sizing: border-box;
11   }
12   
13   .column {
14     margin: 10px;
15     display: inline-block;
16     vertical-align: top;
17   }
18   .container {
19     position: relative;
20     height: 200px;
21     width: 200px;
22     margin: 10px;
23     background-color: silver;
24     border: 1px solid black;
25   }
26   
27   .box {
28     position: absolute;
29     top: 0;
30     left: 0;
31     height: 60px;
32     width: 60px;
33     border: 1px dotted black;
34     -webkit-transform-origin: top left; /* to match SVG */
35   }
36
37   .final {
38     border: 1px solid blue;
39   }
40   
41   #target, #ref {
42     -webkit-animation-name: bounce;
43     -webkit-animation-duration: 2s;
44     -webkit-animation-iteration-count: infinite;
45     -webkit-animation-direction: alternate;
46     -webkit-animation-timing-function: ease-in-out;
47   }
48        
49   @-webkit-keyframes bounce {
50     from {
51       -webkit-transform: translate(0px, 0px) scale(1) rotate(0deg);
52     }
53     to {
54       -webkit-transform: translate(75px, 25px) scale(2) rotate(45deg);
55     }
56   }    
57 </style>
58 </head>
59 <body>
60   <h1>CSS Animation of 'webkit-transform:' property for SVG</h1>
61
62   <p>The SVG animation should be identical with the CSS one</p>
63
64   <div class="column">
65     <h2>SVG compound</h2>
66     <div class="container">
67       <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  
68            viewBox="0 0 200 200" style="width:200px; height:200px;">
69         <rect id="target" x="0" y="0" width="60" height="60" stroke="blue" fill="none">
70         </rect>
71       </svg>
72     </div>
73
74     <h2>CSS compound</h2>
75     <div class="container">
76       <div class="final box" id="ref">
77       </div>
78     </div>
79   </div>
80
81 </body>
82 </html>