Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / ManualTests / svg-css-animate-compound.html
blob254e54186ef6dd72d7c31c808aeed4e70d836f07
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
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;
13 .column {
14 margin: 10px;
15 display: inline-block;
16 vertical-align: top;
18 .container {
19 position: relative;
20 height: 200px;
21 width: 200px;
22 margin: 10px;
23 background-color: silver;
24 border: 1px solid black;
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 */
37 .final {
38 border: 1px solid blue;
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;
49 @-webkit-keyframes bounce {
50 from {
51 transform: translate(0px, 0px) scale(1) rotate(0deg);
53 to {
54 transform: translate(75px, 25px) scale(2) rotate(45deg);
57 </style>
58 </head>
59 <body>
60 <h1>CSS Animation of 'webkit-transform:' property for SVG</h1>
62 <p>The SVG animation should be identical with the CSS one</p>
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>
74 <h2>CSS compound</h2>
75 <div class="container">
76 <div class="final box" id="ref">
77 </div>
78 </div>
79 </div>
81 </body>
82 </html>