<!DOCTYPE html>
<!--
 | These two properties allow authors to constrain content widths to a certain
 | range. However, for replaced elements with an intrinsic ratio and both
 | 'width' and 'height' specified as 'auto', the algorithm is as follows:
 |   https://www.w3.org/TR/CSS21/visudet.html#min-max-widths
 -->
<html>
<head>
  <style>
    body {
      font-family: Roboto;
      font-size: 8px;
    }
    .light-blue {
      background-color: #03a9f4;
    }
    .dark-sea-green {
      background-color: #8FBC8F;
    }
    .dark-olive-green {
      background-color: #556B2F;
    }
    .constraint-1 {
      /* Constraint: none */
      max-height: 2048px;
      max-width: 2048px;
      min-height: 0px;
      min-width: 0px;
    }
    .constraint-2 {
      /* Constraint: w > max-width */
      max-height: 2048px;
      max-width: 32px;
      min-height: 0px;
      min-width: 0px;
    }
    .constraint-3 {
      /* Constraint: w < min-width */
      max-height: 2048px;
      max-width: 2048px;
      min-height: 0px;
      min-width: 320px;
    }
    .constraint-4 {
      /* Constraint: h > max-height */
      max-height: 32px;
      max-width: 2048px;
      min-height: 0px;
      min-width: 0px;
    }
    .constraint-5 {
      /* Constraint: h < min-height */
      max-height: 2048px;
      max-width: 2048px;
      min-height: 160px;
      min-width: 0px;
    }
    .constraint-6 {
      /* Constraint: (w > max-width) and (h > max-height), where
         (max-width/w ≤ max-height/h) */
      max-height: 40px;
      max-width: 15px;
      min-height: 0px;
      min-width: 0px;
    }
    .constraint-7 {
      /* Constraint: (w > max-width) and (h > max-height), where
         (max-width/w > max-height/h) */
      max-height: 30px;
      max-width: 20px;
      min-height: 0px;
      min-width: 0px;
    }
    .constraint-8 {
      /* Constraint: (w < min-width) and (h < min-height), where
         (min-width/w ≤ min-height/h) */
      max-height: 2048px;
      max-width: 2048px;
      min-height: 160px;
      min-width: 310px;
    }
    .constraint-9 {
      /* Constraint: (w < min-width) and (h < min-height), where
         (min-width/w > min-height/h) */
      max-height: 2048px;
      max-width: 2048px;
      min-height: 150px;
      min-width: 320px;
    }
    .constraint-10 {
      /* Constraint: (w < min-width) and (h > max-height) */
      max-height: 32px;
      max-width: 2048px;
      min-height: 0px;
      min-width: 320px;
    }
    .constraint-11 {
      /* Constraint: (w > max-width) and (h < min-height) */
      max-height: 2048px;
      max-width: 32px;
      min-height: 160px;
      min-width: 0px;
    }
  </style>
</head>
<body>
  <div class="dark-sea-green">
    <video class="light-blue constraint-1"></video>
  </div>
  <div class="dark-olive-green">
    <video class="light-blue constraint-2"></video>
  </div>
  <div class="dark-sea-green">
    <video class="light-blue constraint-3"></video>
  </div>
  <div class="dark-olive-green">
    <video class="light-blue constraint-4"></video>
  </div>
  <div class="dark-sea-green">
    <video class="light-blue constraint-5"></video>
  </div>
  <div class="dark-olive-green">
    <video class="light-blue constraint-6"></video>
  </div>
  <div class="dark-sea-green">
    <video class="light-blue constraint-7"></video>
  </div>
  <div class="dark-olive-green">
    <video class="light-blue constraint-8"></video>
  </div>
  <div class="dark-sea-green">
    <video class="light-blue constraint-9"></video>
  </div>
  <div class="dark-olive-green">
    <video class="light-blue constraint-10"></video>
  </div>
  <div class="dark-sea-green">
    <video class="light-blue constraint-11"></video>
  </div>
</body>
</html>