background-cover-rounding.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <style>
    .covers {
      /*data URI of full green 97x43 PNG*/
      background: red url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGEAAAArCAIAAADnp3H+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AMREiYUszPbTwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABOSURBVGje7dAxAQAACAOgaXKj28DbAyJQmXBrBY4cOXLkyJEjHDly5MiRI0eOcOTIkSNHjhzhyJEjR44cOXKEI0eOHDly5AhHjhw5emMB9PAA1iv0hcsAAAAASUVORK5CYII=") no-repeat 0 0 / cover;
      border: 5px solid gray;
      margin: 10px;
    }
    .contains {
      /*data URI of full green 97x43 PNG*/
      background: white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGEAAAArCAIAAADnp3H+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AMREiYUszPbTwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABOSURBVGje7dAxAQAACAOgaXKj28DbAyJQmXBrBY4cOXLkyJEjHDly5MiRI0eOcOTIkSNHjhzhyJEjR44cOXKEI0eOHDly5AhHjhw5emMB9PAA1iv0hcsAAAAASUVORK5CYII=") no-repeat 0 0 / contain;
      border: 5px solid gray;
      margin: 10px;
    }
  </style>
</head>
<body>
<div class="covers" style="width: 120px; height: 50px;"></div>
<div class="covers" style="width: 50px; height: 120px;"></div>
<div class="contains" style="width: 150px; height: 49px;"></div>
<div class="contains" style="width: 50px; height: 50px;"></div>
</body>
chromium/third_party/blink/web_tests/fast/backgrounds/background-cover-rounding.html
