Implement object-fit CSS property
[WebKit-https.git] / LayoutTests / fast / css / object-fit / object-fit-img-svg2-expected.html
1 <!DOCTYPE html>
2
3 <html>
4   <head>
5     <title>object-fit on SVG images, no forced aspect ratio retention</title>
6     <style type="text/css">
7       .group > div {
8         display: inline-block;
9         overflow: hidden;
10         height: 72px;
11         width: 144px;
12         margin: 2px 10px;
13         border: 1px solid black;
14         background-color: gray;
15       }
16
17       .group > * > * { display: block; }
18       .group > *:nth-child(1) * { height:100%; width:100%; }
19       .group > *:nth-child(2) * { height:100%; margin-left:36px; }
20       .group > *:nth-child(3) * { width:100%; margin-top:-36px; }
21       .group > *:nth-child(4) * { height:200px; margin-top:-64px; margin-left:-28px; }
22       .group > *:nth-child(5) * { height:100%; margin-left:36px; }
23       .group > *:nth-child(6) * { height:100%; margin-left:36px; }
24       .group > *:nth-child(7) * { height:100%; width:100%; }
25     </style>
26   </head>
27   <body>
28
29     <div class="group">
30       <div><img src="../resources/circle2.svg" type="image/svg+xml"></div>
31       <div><img src="../resources/circle2.svg" type="image/svg+xml"></div>
32       <div><img src="../resources/circle2.svg" type="image/svg+xml"></div>
33       <div><img src="../resources/circle2.svg" type="image/svg+xml"></div>
34       <div><img src="../resources/circle2.svg" type="image/svg+xml"></div>
35       <div><img src="../resources/circle2.svg" type="image/svg+xml"></div>
36       <div><img src="../resources/circle2.svg" type="image/svg+xml"></div>
37     </div>
38
39   </body>
40 </html>