An SVG element without intrinsic size inherits the container size as its viewport...
[WebKit-https.git] / LayoutTests / svg / css / svg-css-different-intrinsic-sizes.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <style>
5     div {
6       background: yellow;
7       width: 75px;
8       height: 75px;
9     }
10     svg {
11       background: lime;
12     }
13     svg.intrinsic-size {
14       width: 50px;
15       height: 50px;
16     }
17     rect {
18       fill: red;
19     }
20   </style>
21 </head>
22 <body>
23   <div>
24     <svg class='intrinsic-size' width='100' height='100'>
25           <rect width='50%' height='50%'/>
26     </svg>
27   </div>
28   <div>
29     <svg width='100' height='100'>
30       <style>
31         svg {
32           width: 50px;
33           height: 50px;
34         }
35       </style>
36           <rect width='50%' height='50%'/>
37     </svg>
38   </div>
39   <div>
40     <svg class='intrinsic-size' width='100' height='100'>
41           <svg viewbox='0 0 100 100'>
42             <rect width='50%' height='50%'/>
43           </svg>
44     </svg>
45   </div>
46   <div>
47     <svg class='intrinsic-size' width='100' height='100'>
48           <svg class='intrinsic-size' viewbox='0 0 100 100'>
49             <rect width='50' height='50'/>
50           </svg>
51     </svg>
52   </div>
53   <div>
54     <svg class='intrinsic-size' width='100' height='100'>
55           <svg class='intrinsic-size' width='50%' height='50%' viewbox='0 0 100 100'>
56             <rect width='100%' height='100%'/>
57           </svg>
58     </svg>
59   </div>
60   <div>
61     <svg class='intrinsic-size' width='100' height='100'>
62           <svg width='50%' height='50%' viewbox='0 0 100 100'>
63             <rect width='100' height='100'/>
64           </svg>
65     </svg>
66   </div>
67   <div>
68     <svg width='100' height='100'>
69       <style>
70         svg {
71           width: 50px;
72           height: 50px;
73         }
74       </style>
75           <svg width='50%' height='50%' viewbox='0 0 100 100'>
76             <rect width='100' height='100'/>
77           </svg>
78     </svg>
79   </div>
80 </body>
81 </html>