layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1.html

   1 <!DOCTYPE html>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html>
   7 <head>
   8   <title>CSS Test: Testing a vertical flex container with keywords on min-height</title>
   9   <meta charset="utf-8">
  10   <style>
  11     .container {
  12       display: flex;
  13       width: -moz-fit-content;
  14       width: fit-content;
  15       flex-direction: column;
  16     }
  17     .container > * {
  18       border: 1px solid black;
  19       flex-basis: 0;
  20     }
  21     .itemA {
  22       background: purple;
  23       min-height: -moz-max-content;
  24       min-height: max-content;
  25     }
  26     .itemB {
  27       background: teal;
  28       min-height: -moz-min-content;
  29       min-height: min-content;
  30     }
  31     .itemC {
  32       background: blue;
  33       min-height: -moz-fit-content;
  34       min-height: fit-content;
  35     }
  36     .itemD {
  37       background: yellow;
  38       min-height: -moz-available;
  39       min-height: -webkit-fill-available;
  40     }
  41   </style>
  42 </head>
  43 <body>
  44   <div class="container">
  45     <div class="itemA">itemA</div>
  46     <div class="itemB">itemB</div>
  47     <div class="itemC">itemC</div>
  48     <div class="itemD">itemD</div>
  49   </div>
  50 </body>
  51 </html>