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

   1 <!DOCTYPE html>
   2 <!--
   3 iframes have an intrinsic size of 300x150
   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: 600px;
  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: 180px;
  26     }
  27
  28     .position-container > * {
  29       position: absolute;
  30       border: 5px solid pink;
  31       width: 50px;
  32     }
  33
  34     .f-a-container {
  35       height: 100%;
  36       box-sizing: border-box;
  37     }
  38
  39     .small {
  40       height: 1px;
  41     }
  42
  43     .big {
  44       height: 300px;
  45     }
  46
  47     .really-big {
  48       height: 1000px;
  49     }
  50 </style>
  51 <div class="container">
  52   <div class="position-container">
  53     <iframe class="min-content">
  54     </iframe>
  55   </div>
  56   <div class="position-container">
  57     <iframe class="max-content">
  58     </iframe>
  59   </div>
  60   <div class="position-container">
  61     <iframe class="fit-content">
  62     </iframe>
  63   </div>
  64 </div>
  65
  66 <div class="container">
  67   <div class="position-container f-a-container">
  68     <iframe class="fill-available">
  69     </iframe>
  70   </div>
  71 </div>
  72
  73 <div class="container">
  74   <div class="position-container">
  75     <iframe class="small min-height-min-content">
  76     </iframe>
  77
  78   </div>
  79   <div class="position-container">
  80     <iframe class="small min-height-max-content">
  81     </iframe>
  82
  83   </div>
  84   <div class="position-container">
  85     <iframe class="small min-height-fit-content">
  86     </iframe>
  87   </div>
  88 </div>
  89
  90 <div class="container">
  91   <div class="position-container f-a-container">
  92     <iframe class="small min-height-fill-available">
  93     </iframe>
  94   </div>
  95 </div>
  96
  97 <div class="container">
  98   <div class="position-container">
  99     <iframe class="big max-height-min-content">
 100     </iframe>
 101
 102   </div>
 103   <div class="position-container">
 104     <iframe class="big max-height-max-content">
 105     </iframe>
 106
 107   </div>
 108   <div class="position-container">
 109     <iframe class="big max-height-fit-content">
 110     </iframe>
 111   </div>
 112 </div>
 113
 114 <div class="container">
 115   <div class="position-container f-a-container">
 116     <iframe class="really-big max-height-fill-available">
 117     </iframe>
 118   </div>
 119 </div>