third_party/WebKit/LayoutTests/fast/block/min-max-height-percent-height-child.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style id="stylesheet">
   5             .container {
   6                 width: 50px;
   7                 height: 50px;
   8             }
   9             .bottom-margin {
  10                 margin-bottom: 50px;
  11             }
  12             .ahem {
  13                 font: 10px/1 Ahem, sans-serif;
  14                 color: green;
  15             }
  16             .parent {
  17                 background-color: red;
  18                 border: 1px solid red;
  19             }
  20             .child {
  21                 background-color: green;
  22             }
  23             .vertical { -webkit-writing-mode: vertical-lr; }
  24         </style>
  25         <script src="../../resources/check-layout.js"></script>
  26         <script>
  27             window.onload = function () {
  28                 checkLayout(".parent");
  29             }
  30         </script>
  31     </head>
  32     <body>
  33         <h1><a href="https://bugs.webkit.org/show_bug.cgi?id=26559">Bug 26559</a>: When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly</h1>
  34         <h1>Tests to make sure a child with percentage height is computed properly when the parent has a max or min height set.</h1>
  35         <h2>Each of the following tests should display a green rectangle with a 1 pixel red border on all sides.</h2>
  36         <h3>Parent with fixed height and min set</h2>
  37         <div id="simple-min" class="parent" style="width: 50px; height: 50px; min-height: 75px">
  38             <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div>
  39         </div>
  40         <h3>Parent with fixed height and max set</h2>
  41         <div id="simple-max" class="parent" style="max-height: 25px; width: 50px; height: 50px">
  42             <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="25"></div>
  43         </div>
  44         <h3>Parent with fixed height and min greater than max</h2>
  45         <div id="min-greater-max" class="parent" style="width: 50px; height: 50px; min-height: 75px; max-height: 25px">
  46             <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div>
  47         </div>
  48         <h3>Vertical parent with fixed width and max set</h2>
  49         <div id="vertical-max" class="parent" style="width: 50px; max-width: 25px; height: 50px">
  50             <div class="child" style="width: 100%; height: 100%" data-expected-width="25" data-expected-height="50"></div>
  51         </div>
  52         <h3>Vertical parent with fixed width and min set</h2>
  53         <div id="vertical-min" class="parent" style="width: 50px; min-width: 75px; height: 50px">
  54             <div class="child" style="width: 100%; height: 100%" data-expected-width="75" data-expected-height="50"></div>
  55         </div>
  56         <h3>Parent with percent height and a max set</h3>
  57         <div class="container bottom-margin">
  58             <div id="parent-percent-max" class="parent" style="max-height: 25px; width: 50px; height: 100%">
  59                 <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="25"></div>
  60             </div>
  61         </div>
  62         <h3>Parent with percent height and a min set</h3>
  63         <div class="container bottom-margin">
  64             <div id="parent-percent-min" class="parent" style="width: 50px; height: 100%; min-height: 75px">
  65                 <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div>
  66             </div>
  67         </div>
  68         <h3>Parent with fixed height and percentage max</h3>
  69         <div class="container">
  70             <div id="percent-max" class="parent" style="max-height: 50%; width: 50px; height: 50px">
  71                 <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="25"></div>
  72             </div>
  73         </div>
  74         <h3>Parent with fixed height and percentage min</h3>
  75         <div class="container bottom-margin">
  76             <div id="percent-min" class="parent" style="width: 50px; height: 50px; min-height: 150%">
  77                 <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div>
  78             </div>
  79         </div>
  80         <h3>Parent with auto height and a max set. This test will not have the border all around, it will only be on the top portion.</h3>
  81         <div id="auto-max" class="parent ahem bottom-margin" style="max-height: 25px; width: 50px">
  82             <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="0"></div>
  83             XXXXX
  84             XXXXX
  85             XXXXX
  86             XXXXX
  87             XXXXX
  88             XXXXX
  89             XXXXX
  90             XXXXX
  91         </div>
  92         <h3>Parent with auto height and a min set</h3>
  93         <div id="auto-min" class="parent ahem" style="width: 50px; min-height: 75px">
  94             <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="0"></div>
  95             XXXXX
  96             XXXXX
  97             XXXXX
  98             XXXXX
  99             XXXXX
 100             XXXXX
 101             XXXXX
 102             XXXXX
 103         </div>
 104         <h2>The following two tests will have a 6 pixel red border.</h2>
 105         <h3>Parent with fixed height and padding and max set</h2>
 106         <div id="parent-padding-max" class="parent" style="max-height: 25px; width: 50px; padding: 5px; height: 50px">
 107             <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="25"></div>
 108         </div>
 109         <h3>Parent with fixed height and padding and min set</h2>
 110         <div id="parent-padding-min" class="parent" style="width: 50px; padding: 5px; height: 50px; min-height: 75px">
 111             <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div>
 112         </div>
 113         <h3>Fixed height parent with scroll bar</h3>
 114         <div id="overflow" class="parent ahem" style="overflow: scroll; min-height: 75px; width: 50px; height: 50px">
 115             <div class="child" style="width: 100%; height: 100%" data-expected-width="35" data-expected-height="60"></div>
 116             XXXXXXXXXX
 117             XXXXXXXXXX
 118             XXXXXXXXXX
 119             XXXXXXXXXX
 120             XXXXXXXXXX
 121             XXXXXXXXXX
 122         </div>
 123         <h3>Parent with percent height and scroll bar</h3>
 124         <div class="container bottom-margin">
 125             <div id="overflow-percent" class="parent ahem" style="overflow: scroll; min-height: 75px; width: 50px; height: 100%">
 126                 <div class="child" style="width: 100%; height: 100%" data-expected-width="35" data-expected-height="60"></div>
 127                 XXXXXXXXXX
 128                 XXXXXXXXXX
 129                 XXXXXXXXXX
 130                 XXXXXXXXXX
 131                 XXXXXXXXXX
 132                 XXXXXXXXXX
 133             </div>
 134         </div>
 135     </body>
 136 </html>