third_party/WebKit/LayoutTests/fast/backgrounds/size/contain-and-cover.html

   1 <!DOCTYPE html>
   2 <style>
   3     body {
   4         margin: 0;
   5         overflow: hidden;
   6     }
   7
   8     div {
   9         background-image:
  10             url(resources/SquirrelFish.svg),
  11             url(../../block/positioning/resources/icon-gold.png),
  12             url(resources/flower.jpg),
  13             -webkit-gradient(linear, left top, right bottom, from(black), color-stop(50%, transparent), to(black));
  14         background-repeat: no-repeat;
  15         border: solid;
  16         margin: 2px;
  17         float: left;
  18         background-color: lightblue;
  19     }
  20
  21     div.landscape {
  22         width: 390px;
  23         height: 140px;
  24     }
  25
  26     div.portrait {
  27         width: 190px;
  28         height: 290px;
  29     }
  30
  31     div.contain {
  32         background-size: contain;
  33     }
  34
  35     div.cover {
  36         background-size: cover;
  37     }
  38
  39     div.contain-cover {
  40         background-size: contain, cover;
  41     }
  42
  43     div.cover-contain {
  44         background-size: cover, contain;
  45     }
  46
  47 </style>
  48 <div class="landscape contain"></div>
  49 <div class="landscape contain-cover"></div>
  50 <div class="landscape cover"></div>
  51 <div class="landscape cover-contain"></div>
  52 <div class="portrait contain"></div>
  53 <div class="portrait contain-cover"></div>
  54 <div class="portrait cover"></div>
  55 <div class="portrait cover-contain"></div>