third_party/WebKit/LayoutTests/fast/css/object-position-with-fit-contain-expected.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4     <head>
   5         <title>object-position on images with object-fit:contain</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                 padding: 5px;
  15                 background-color: gray;
  16             }
  17
  18             .group > div > div { overflow: hidden; height:100%; }
  19             .group > div > div > * { display: block; width:72px; height:36px; }
  20
  21             .group > *:nth-child(1) > div > * { }
  22             .group > *:nth-child(2) > div > * { margin-top: 36px; }
  23             .group > *:nth-child(3) > div > * { margin-left: 10px; margin-top: 45px; }
  24             .group > *:nth-child(4) > div > * { margin-top: 18px; }
  25             .group > *:nth-child(5) > div > * { margin-top: 18px; }
  26             .group > *:nth-child(6) > div > * { margin-top: -10px; }
  27             .group > *:nth-child(7) > div > * { margin-top: 100px; }
  28             .group > *:nth-child(8) > div > * { margin-top: 100px; }
  29             .group > *:nth-child(9) > div > * { margin-top: 100px; }
  30             .group > *:nth-child(10) > div > * { margin-top: 100px; }
  31             .group > *:nth-child(11) > div > * { margin-left: 30px; margin-top: 30px; }
  32             .group > *:nth-child(12) > div > * { margin-top: 18px; }
  33         </style>
  34     </head>
  35     <body>
  36
  37         <div class="group">
  38             <div><div><img src="resources/circles-landscape.png"></div></div>
  39             <div><div><img src="resources/circles-landscape.png"></div></div>
  40             <div><div><img src="resources/circles-landscape.png"></div></div>
  41             <div><div><img src="resources/circles-landscape.png"></div></div>
  42             <div><div><img src="resources/circles-landscape.png"></div></div>
  43             <div><div><img src="resources/circles-landscape.png"></div></div>
  44             <div><div><img src="resources/circles-landscape.png"></div></div>
  45             <div><div><img src="resources/circles-landscape.png"></div></div>
  46             <div><div><img src="resources/circles-landscape.png"></div></div>
  47             <div><div><img src="resources/circles-landscape.png"></div></div>
  48             <div><div><img src="resources/circles-landscape.png"></div></div>
  49             <div><div><img src="resources/circles-landscape.png"></div></div>
  50         </div>
  51
  52     </body>
  53 </html>