third_party/WebKit/LayoutTests/fast/css/object-fit-shrink.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4   <head>
   5     <style type="text/css">
   6       img {
   7         display: inline-block;
   8         height: 72px;
   9         width: 72px;
  10         margin: 10px;
  11         border: 1px solid black;
  12         background-color: gray;
  13       }
  14     </style>
  15   </head>
  16   <body>
  17
  18     <!-- Large images, should be scaled down when allowed. -->
  19     <img style="object-fit: fill;" src="resources/circles-landscape.png">
  20     <img style="object-fit: contain;" src="resources/circles-landscape.png">
  21     <img style="object-fit: cover;" src="resources/circles-landscape.png">
  22     <img style="object-fit: none;" src="resources/circles-landscape.png">
  23     <img style="object-fit: scale-down;" src="resources/circles-landscape.png">
  24     <br>
  25     <br>
  26
  27     <img style="object-fit: fill;" src="resources/circles-portrait.png">
  28     <img style="object-fit: contain;" src="resources/circles-portrait.png">
  29     <img style="object-fit: cover;" src="resources/circles-portrait.png">
  30     <img style="object-fit: none;" src="resources/circles-portrait.png">
  31     <img style="object-fit: scale-down;" src="resources/circles-portrait.png">
  32     <br>
  33
  34   </body>
  35 </html>