Adapt inline SVG sizing behavior to Firefox and Blink
[WebKit-https.git] / LayoutTests / svg / transforms / svg-css-transforms-clip-path.xhtml
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4 <head>
5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6   <title>SVG clip-path CSS transform</title>
7   <style type="text/css" media="screen">
8     div {
9       -webkit-box-sizing: border-box;
10     }
11     
12     .column {
13       margin: 10px;
14       display: inline-block;
15       vertical-align: top;
16     }
17     .container {
18       position: relative;
19       height: 200px;
20       width: 200px;
21       margin: 10px;
22       background-color: silver;
23       border: 1px solid black;
24     }
25     
26     .box {
27       position: absolute;
28       top: 0;
29       left: 0;
30       height: 60px;
31       width: 60px;
32       border: 1px dotted black;
33       -webkit-transform-origin: top left; /* to match SVG */
34     }
35
36     svg { width: 100%; height: 100% }
37     
38     .final {
39       border: 1px solid blue;
40     }
41   </style>
42 </head>
43
44 <body>
45
46 <div class="column">
47   <h2>SVG CSS scale</h2>
48   <div class="container">
49     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
50     <defs>
51       <circle id="circle1" cx="10" cy="10" r="20" style="-webkit-transform:scale(5)"/>
52       <clipPath id="clip-circle1">
53         <use xlink:href="#circle1"/>
54       </clipPath>
55     </defs>
56     <rect id="rect" x="10" y="10" width="200" height="200" fill="green" clip-path="url(#clip-circle1)"/>
57     </svg>
58   </div>
59
60   <h2>SVG scale</h2>
61   <div class="container">
62     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
63     <defs>
64       <circle id="circle2" cx="10" cy="10" r="20" transform="scale(5)"/>
65       <clipPath id="clip-circle2">
66         <use xlink:href="#circle2"/>
67       </clipPath>
68     </defs>
69     <rect id="rect" x="10" y="10" width="200" height="200" fill="green" clip-path="url(#clip-circle2)"/>
70     </svg>
71   </div>
72 </div>
73
74 <div class="column">
75   <h2>SVG CSS compound</h2>
76   <div class="container">
77     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
78     <defs>
79       <rect id="rect1" x="1" y="1" width="40" height="40" style="-webkit-transform:rotate(45deg) scale(5)"/>
80       <clipPath id="clip-rect1">
81         <use xlink:href="#rect1"/>
82       </clipPath>
83     </defs>
84     <rect id="rect" x="10" y="10" width="200" height="200" fill="green" clip-path="url(#clip-rect1)"/>
85     </svg>
86   </div>
87
88   <h2>SVG compound</h2>
89   <div class="container">
90     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
91       <defs>
92         <rect id="rect2" x="1" y="1" width="40" height="40" transform="rotate(45) scale(5)"/>
93         <clipPath id="clip-rect2">
94           <use xlink:href="#rect2"/>
95         </clipPath>
96       </defs>
97       <rect id="rect" x="10" y="10" width="200" height="200" fill="green" clip-path="url(#clip-rect2)"/>
98     </svg>
99   </div>
100 </div>
101
102 </body>
103 </html>