Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / css / object-fit-grow-landscape-expected.html
blob76c1e9e3793c090c680e10efab589e2817e22c11
1 <!DOCTYPE html>
3 <html>
4 <head>
5 <title>object-fit, landscape images smaller than content box</title>
6 <style type="text/css">
7 .group > div {
8 display: inline-block;
9 overflow: hidden;
10 width: 144px;
11 height: 144px;
12 margin: 10px;
13 border: 1px solid black;
14 background-color: gray;
17 .group > * > * { display: block; }
18 .group.landscape > *:nth-child(1) > * { width:100%; height:100%; }
19 .group.landscape > *:nth-child(2) > * { width:100%; margin-top:25%; }
20 .group.landscape > *:nth-child(3) > * { height:100%; margin-left:-50%; }
21 .group.landscape > *:nth-child(4) > * { margin-left: 36px; margin-top:54px; }
22 .group.landscape > *:nth-child(5) > * { margin-left: 36px; margin-top:54px; }
23 </style>
24 </head>
25 <body>
27 <!-- Small images, should be scaled up when allowed. -->
28 <div class="group landscape">
29 <div><img src="resources/circles-landscape-small.png"></div>
30 <div><img src="resources/circles-landscape-small.png"></div>
31 <div><img src="resources/circles-landscape-small.png"></div>
32 <div><img src="resources/circles-landscape-small.png"></div>
33 <div><img src="resources/circles-landscape-small.png"></div>
34 </div>
35 </body>
36 </html>