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

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