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

   1 <!DOCTYPE html>
   2 <!--
   3 All divs here should shrinkwrap to fit their content, except for fill-available
   4 -->
   5 <style>
   6     @import "resources/height-keyword-classes.css";
   7
   8     body * {
   9         border: 2px solid red;
  10         padding: 5px;
  11         clear: both;
  12     }
  13
  14     .container {
  15         height: 300px;
  16         border-color: blue;
  17
  18         display: inline-block;
  19         width: 100px;
  20     }
  21
  22     .small {
  23       height: 1px;
  24     }
  25
  26     .big {
  27       height: 100px;
  28     }
  29
  30     .really-big {
  31       height: 1000px;
  32     }
  33 </style>
  34 <div class="container">
  35   <div class="min-content">
  36     height: min-content<br>on this box.
  37   </div>
  38
  39   <div class="max-content">
  40     height: max-content<br>on this box.
  41   </div>
  42
  43   <div class="fit-content">
  44     height: fit-content<br>on this box.
  45   </div>
  46 </div>
  47
  48 <div class="container">
  49   <div class="fill-available">
  50     height: fill-available<br> on this box.
  51   </div>
  52 </div>
  53
  54 <div class="container">
  55   <div class="small min-height-min-content">
  56     min-height: min-content<br>on this box.
  57   </div>
  58
  59   <div class="small min-height-max-content">
  60     min-height: max-content<br>on this box.
  61   </div>
  62
  63   <div class="small min-height-fit-content">
  64     min-height: fit-content<br>on this box.
  65   </div>
  66 </div>
  67
  68 <div class="container">
  69   <div class="small min-height-fill-available">
  70     min-height: fill-available<br> on this box.
  71   </div>
  72 </div>
  73
  74 <div class="container">
  75   <div class="big max-height-min-content">
  76     max-height: min-content<br>on this box.
  77   </div>
  78
  79   <div class="big max-height-max-content">
  80     max-height: max-content<br>on this box.
  81   </div>
  82
  83   <div class="big max-height-fit-content">
  84     max-height: fit-content<br>on this box.
  85   </div>
  86 </div>
  87
  88 <div class="container">
  89   <div class="really-big max-height-fill-available">
  90     max-height: fill-available<br> on this box.
  91   </div>
  92 </div>