third_party/WebKit/LayoutTests/fast/css-intrinsic-dimensions/height-expected.html

   1 <!DOCTYPE html>
   2 <style>
   3     body * {
   4         border: 2px solid red;
   5         padding: 5px;
   6         clear: both;
   7     }
   8
   9     .container {
  10         height: 300px;
  11         border-color: blue;
  12
  13         display: inline-block;
  14         width: 100px;
  15     }
  16
  17     .fill-available {
  18       height: 100%;
  19       box-sizing: border-box;
  20     }
  21 </style>
  22 <div class="container">
  23   <div>
  24     height: min-content<br>on this box.
  25   </div>
  26
  27   <div>
  28     height: max-content<br>on this box.
  29   </div>
  30
  31   <div>
  32     height: fit-content<br>on this box.
  33   </div>
  34 </div>
  35
  36 <div class="container">
  37   <div class="fill-available">
  38     height: fill-available<br> on this box.
  39   </div>
  40 </div>
  41
  42 <div class="container">
  43   <div>
  44     min-height: min-content<br>on this box.
  45   </div>
  46
  47   <div>
  48     min-height: max-content<br>on this box.
  49   </div>
  50
  51   <div>
  52     min-height: fit-content<br>on this box.
  53   </div>
  54 </div>
  55
  56 <div class="container">
  57   <div class="fill-available">
  58     min-height: fill-available<br> on this box.
  59   </div>
  60 </div>
  61
  62 <div class="container">
  63   <div>
  64     max-height: min-content<br>on this box.
  65   </div>
  66
  67   <div>
  68     max-height: max-content<br>on this box.
  69   </div>
  70
  71   <div>
  72     max-height: fit-content<br>on this box.
  73   </div>
  74 </div>
  75
  76 <div class="container">
  77   <div class="fill-available">
  78     max-height: fill-available<br> on this box.
  79   </div>
  80 </div>