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

   1 <!DOCTYPE html>
   2
   3 <html>
   4     <head>
   5         <title>object-position 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                 padding: 5px;
  15                 background-color: gray;
  16             }
  17
  18             .group > div > div { overflow: hidden; height:100%; }
  19             .group > div > div > * { display: block; width:100%; height:100%; }
  20
  21             .group > *:nth-child(1) > div > * { }
  22             .group > *:nth-child(2) > div > * { }
  23             .group > *:nth-child(3) > div > * { margin-left: 10px; }
  24             .group > *:nth-child(4) > div > * { }
  25             .group > *:nth-child(5) > div > * { }
  26             .group > *:nth-child(6) > div > * { margin-top: -10px; }
  27             .group > *:nth-child(7) > div > * { margin-left: 200%; }
  28             .group > *:nth-child(8) > div > * { margin-left: 200%; }
  29             .group > *:nth-child(9) > div > * { margin-left: 200%; }
  30             .group > *:nth-child(10) > div > * { margin-left: 200%; }
  31             .group > *:nth-child(11) > div > * { margin-left: 30px; margin-top: 30px; }
  32             .group > *:nth-child(12) > div > * { margin-left: 20px; }
  33             .group > *:nth-child(13) > div > * { }
  34             .group > *:nth-child(14) > div > * { margin-left: -12px; margin-top: -20px; }
  35             .group > *:nth-child(15) > div > * { }
  36         </style>
  37     </head>
  38     <body>
  39
  40         <div class="group">
  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><div><img src="resources/circles-landscape.png"></div></div>
  51             <div><div><img src="resources/circles-landscape.png"></div></div>
  52             <div><div><img src="resources/circles-landscape.png"></div></div>
  53             <div><div><img src="resources/circles-landscape.png"></div></div>
  54             <div><div><img src="resources/circles-landscape.png"></div></div>
  55             <div><div><img src="resources/circles-landscape.png"></div></div>
  56         </div>
  57
  58   </body>
  59 </html>