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