<!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>
Codebase Browser
chromium