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

   1 <!DOCTYPE html>
   2
   3 <html>
   4     <head>
   5         <title>object-position on SVG images</title>
   6         <style type="text/css">
   7             .group > div {
   8                 display: inline-block;
   9                 overflow: hidden;
  10                 width: 72px;
  11                 height: 144px;
  12                 margin: 2px 10px;
  13                 border: 1px solid black;
  14                 padding: 5px;
  15                 background-color: gray;
  16             }
  17
  18             .group > div > div { position:relative; overflow: hidden; height:100%; }
  19             .group > div > div > * { position: absolute; width:36px; height:36px; }
  20
  21             .group > *:nth-child(1) > div > * { right: 0; }
  22             .group > *:nth-child(2) > div > * { left: 0; bottom: 0; }
  23             .group > *:nth-child(3) > div > * { left: 10px; bottom: -27px; }
  24             .group > *:nth-child(4) > div > * { left: 1000px; }
  25             .group > *:nth-child(5) > div > * { left: -1000px; }
  26             .group > *:nth-child(6) > div > * { left: -9px; top: -10px; }
  27             .group > *:nth-child(7) > div > * { left: 72px; }
  28             .group > *:nth-child(8) > div > * { top: 72px; }
  29             .group > *:nth-child(9) > div > * { left: -72px; }
  30             .group > *:nth-child(10) > div > * { top: -72px; }
  31             .group > *:nth-child(11) > div > * { left: 30px; top: 30px; }
  32             .group > *:nth-child(12) > div > * { left: 18px; top: 54px; }
  33         </style>
  34     </head>
  35     <body>
  36
  37         <div class="group">
  38             <div><div><img src="resources/circle-small.svg" type="image/svg+xml"></div></div>
  39             <div><div><img src="resources/circle-small.svg" type="image/svg+xml"></div></div>
  40             <div><div><img src="resources/circle-small.svg" type="image/svg+xml"></div></div>
  41             <div><div><img src="resources/circle-small.svg" type="image/svg+xml"></div></div>
  42             <div><div><img src="resources/circle-small.svg" type="image/svg+xml"></div></div>
  43             <div><div><img src="resources/circle-small.svg" type="image/svg+xml"></div></div>
  44             <div><div><img src="resources/circle-small.svg" type="image/svg+xml"></div></div>
  45             <div><div><img src="resources/circle-small.svg" type="image/svg+xml"></div></div>
  46             <div><div><img src="resources/circle-small.svg" type="image/svg+xml"></div></div>
  47             <div><div><img src="resources/circle-small.svg" type="image/svg+xml"></div></div>
  48             <div><div><img src="resources/circle-small.svg" type="image/svg+xml"></div></div>
  49             <div><div><img src="resources/circle-small.svg" type="image/svg+xml"></div></div>
  50         </div>
  51
  52   </body>
  53 </html>