| <!DOCTYPE html> |
| <html> |
| <head> |
| <style id="stylesheet"> |
| .container { |
| width: 50px; |
| height: 50px; |
| } |
| .bottom-margin { |
| margin-bottom: 50px; |
| } |
| .ahem { |
| font: 10px/1 Ahem, sans-serif; |
| color: green; |
| } |
| .parent { |
| background-color: red; |
| border: 1px solid red; |
| } |
| .child { |
| background-color: green; |
| } |
| .vertical { -webkit-writing-mode: vertical-lr; } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| <script> |
| window.onload = function () { |
| checkLayout(".parent"); |
| } |
| </script> |
| </head> |
| <body> |
| <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> |
| <h1>Tests to make sure a child with percentage height is computed properly when the parent has a max or min height set.</h1> |
| <h2>Each of the following tests should display a green rectangle with a 1 pixel red border on all sides.</h2> |
| <h3>Parent with fixed height and min set</h2> |
| <div id="simple-min" class="parent" style="width: 50px; height: 50px; min-height: 75px"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div> |
| </div> |
| <h3>Parent with fixed height and max set</h2> |
| <div id="simple-max" class="parent" style="max-height: 25px; width: 50px; height: 50px"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="25"></div> |
| </div> |
| <h3>Parent with fixed height and min greater than max</h2> |
| <div id="min-greater-max" class="parent" style="width: 50px; height: 50px; min-height: 75px; max-height: 25px"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div> |
| </div> |
| <h3>Vertical parent with fixed width and max set</h2> |
| <div id="vertical-max" class="parent" style="width: 50px; max-width: 25px; height: 50px"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="25" data-expected-height="50"></div> |
| </div> |
| <h3>Vertical parent with fixed width and min set</h2> |
| <div id="vertical-min" class="parent" style="width: 50px; min-width: 75px; height: 50px"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="75" data-expected-height="50"></div> |
| </div> |
| <h3>Parent with percent height and a max set</h3> |
| <div class="container bottom-margin"> |
| <div id="parent-percent-max" class="parent" style="max-height: 25px; width: 50px; height: 100%"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="25"></div> |
| </div> |
| </div> |
| <h3>Parent with percent height and a min set</h3> |
| <div class="container bottom-margin"> |
| <div id="parent-percent-min" class="parent" style="width: 50px; height: 100%; min-height: 75px"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div> |
| </div> |
| </div> |
| <h3>Parent with fixed height and percentage max</h3> |
| <div class="container"> |
| <div id="percent-max" class="parent" style="max-height: 50%; width: 50px; height: 50px"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="25"></div> |
| </div> |
| </div> |
| <h3>Parent with fixed height and percentage min</h3> |
| <div class="container bottom-margin"> |
| <div id="percent-min" class="parent" style="width: 50px; height: 50px; min-height: 150%"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div> |
| </div> |
| </div> |
| <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> |
| <div id="auto-max" class="parent ahem bottom-margin" style="max-height: 25px; width: 50px"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="0"></div> |
| XXXXX |
| XXXXX |
| XXXXX |
| XXXXX |
| XXXXX |
| XXXXX |
| XXXXX |
| XXXXX |
| </div> |
| <h3>Parent with auto height and a min set</h3> |
| <div id="auto-min" class="parent ahem" style="width: 50px; min-height: 75px"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="0"></div> |
| XXXXX |
| XXXXX |
| XXXXX |
| XXXXX |
| XXXXX |
| XXXXX |
| XXXXX |
| XXXXX |
| </div> |
| <h2>The following two tests will have a 6 pixel red border.</h2> |
| <h3>Parent with fixed height and padding and max set</h2> |
| <div id="parent-padding-max" class="parent" style="max-height: 25px; width: 50px; padding: 5px; height: 50px"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="25"></div> |
| </div> |
| <h3>Parent with fixed height and padding and min set</h2> |
| <div id="parent-padding-min" class="parent" style="width: 50px; padding: 5px; height: 50px; min-height: 75px"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="50" data-expected-height="75"></div> |
| </div> |
| <h3>Fixed height parent with scroll bar</h3> |
| <div id="overflow" class="parent ahem" style="overflow: scroll; min-height: 75px; width: 50px; height: 50px"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="35" data-expected-height="60"></div> |
| XXXXXXXXXX |
| XXXXXXXXXX |
| XXXXXXXXXX |
| XXXXXXXXXX |
| XXXXXXXXXX |
| XXXXXXXXXX |
| </div> |
| <h3>Parent with percent height and scroll bar</h3> |
| <div class="container bottom-margin"> |
| <div id="overflow-percent" class="parent ahem" style="overflow: scroll; min-height: 75px; width: 50px; height: 100%"> |
| <div class="child" style="width: 100%; height: 100%" data-expected-width="35" data-expected-height="60"></div> |
| XXXXXXXXXX |
| XXXXXXXXXX |
| XXXXXXXXXX |
| XXXXXXXXXX |
| XXXXXXXXXX |
| XXXXXXXXXX |
| </div> |
| </div> |
| </body> |
| </html> |
