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

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