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

   1 <!DOCTYPE html>
   2 <!--
   3 All divs here should shrinkwrap to fit their content, except for fill-available
   4 -->
   5 <style>
   6     body * {
   7       border: 2px solid red;
   8       padding: 5px;
   9       clear: both;
  10     }
  11
  12     .container {
  13       height: 400px;
  14       border-color: blue;
  15
  16       display: inline-block;
  17       width: 100px;
  18     }
  19
  20     .position-container {
  21       border-color: green;
  22       position: relative;
  23       height: 100px;
  24     }
  25
  26     .position-container > * {
  27       position: absolute;
  28     }
  29
  30     .f-a-container {
  31       height: 100%;
  32       box-sizing: border-box;
  33     }
  34
  35     .fill-available {
  36       height: 386px;
  37       box-sizing: border-box;
  38     }
  39 </style>
  40 <div class="container">
  41   <div class="position-container">
  42     <div>
  43       height: min-content<br>on this box.
  44     </div>
  45   </div>
  46   <div class="position-container">
  47     <div>
  48       height: max-content<br>on this box.
  49     </div>
  50   </div>
  51   <div class="position-container">
  52     <div>
  53       height: fit-content<br>on this box.
  54     </div>
  55   </div>
  56 </div>
  57
  58 <div class="container">
  59   <div class="position-container f-a-container">
  60     <div class="fill-available">
  61       height: fill-available<br> on this box.
  62     </div>
  63   </div>
  64 </div>
  65
  66 <div class="container">
  67   <div class="position-container">
  68     <div>
  69       min-height: min-content<br>on this box.
  70     </div>
  71
  72   </div>
  73   <div class="position-container">
  74     <div>
  75       min-height: max-content<br>on this box.
  76     </div>
  77
  78   </div>
  79   <div class="position-container">
  80     <div>
  81       min-height: fit-content<br>on this box.
  82     </div>
  83   </div>
  84 </div>
  85
  86 <div class="container">
  87   <div class="position-container f-a-container">
  88     <div class="fill-available">
  89       min-height: fill-available<br> on this box.
  90     </div>
  91   </div>
  92 </div>
  93
  94 <div class="container">
  95   <div class="position-container">
  96     <div>
  97       max-height: min-content<br>on this box.
  98     </div>
  99
 100   </div>
 101   <div class="position-container">
 102     <div>
 103       max-height: max-content<br>on this box.
 104     </div>
 105
 106   </div>
 107   <div class="position-container">
 108     <div>
 109       max-height: fit-content<br>on this box.
 110     </div>
 111   </div>
 112 </div>
 113
 114 <div class="container">
 115   <div class="position-container f-a-container">
 116     <div class="fill-available">
 117       max-height: fill-available<br> on this box.
 118     </div>
 119   </div>
 120 </div>