third_party/WebKit/LayoutTests/fast/css-intrinsic-dimensions/height-positioned.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: 400px;
  16       border-color: blue;
  17
  18       display: inline-block;
  19       width: 100px;
  20     }
  21
  22     .position-container {
  23       border-color: green;
  24       position: relative;
  25       height: 100px;
  26     }
  27
  28     .position-container > * {
  29       position: absolute;
  30     }
  31
  32     .f-a-container {
  33       height: 100%;
  34       box-sizing: border-box;
  35     }
  36
  37     .small {
  38       height: 1px;
  39     }
  40
  41     .big {
  42       height: 200px;
  43     }
  44
  45     .really-big {
  46       height: 1000px;
  47     }
  48 </style>
  49 <div class="container">
  50   <div class="position-container">
  51     <div class="min-content">
  52       height: min-content<br>on this box.
  53     </div>
  54   </div>
  55   <div class="position-container">
  56     <div class="max-content">
  57       height: max-content<br>on this box.
  58     </div>
  59   </div>
  60   <div class="position-container">
  61     <div class="fit-content">
  62       height: fit-content<br>on this box.
  63     </div>
  64   </div>
  65 </div>
  66
  67 <div class="container">
  68   <div class="position-container f-a-container">
  69     <div class="fill-available">
  70       height: fill-available<br> on this box.
  71     </div>
  72   </div>
  73 </div>
  74
  75 <div class="container">
  76   <div class="position-container">
  77     <div class="small min-height-min-content">
  78       min-height: min-content<br>on this box.
  79     </div>
  80
  81   </div>
  82   <div class="position-container">
  83     <div class="small min-height-max-content">
  84       min-height: max-content<br>on this box.
  85     </div>
  86
  87   </div>
  88   <div class="position-container">
  89     <div class="small min-height-fit-content">
  90       min-height: fit-content<br>on this box.
  91     </div>
  92   </div>
  93 </div>
  94
  95 <div class="container">
  96   <div class="position-container f-a-container">
  97     <div class="small min-height-fill-available">
  98       min-height: fill-available<br> on this box.
  99     </div>
 100   </div>
 101 </div>
 102
 103 <div class="container">
 104   <div class="position-container">
 105     <div class="big max-height-min-content">
 106       max-height: min-content<br>on this box.
 107     </div>
 108
 109   </div>
 110   <div class="position-container">
 111     <div class="big max-height-max-content">
 112       max-height: max-content<br>on this box.
 113     </div>
 114
 115   </div>
 116   <div class="position-container">
 117     <div class="big max-height-fit-content">
 118       max-height: fit-content<br>on this box.
 119     </div>
 120   </div>
 121 </div>
 122
 123 <div class="container">
 124   <div class="position-container f-a-container">
 125     <div class="really-big max-height-fill-available">
 126       max-height: fill-available<br> on this box.
 127     </div>
 128   </div>
 129 </div>