<html>
<head>
<style type="text/css">
.articlefooter {
position: absolute;
bottom: 0;
width: 100px;
background-color: lightgreen;
height: 50px;
}
</style>
<title></title>
</head>
<body>
<p>
This tests for a regression against
<i><a href="https://bugs.webkit.org/show_bug.cgi?id=6881">http://bugzilla.opendarwin.org/show_bug.cgi?id=6881</a>
Block with position:absolute bottom:0 doesn't always move when height of containing block changes (affects Safari RSS)</i>.
</p>
<p>
The squares below should have blue tops and green bottoms, not the other way around.
</p>
<hr>
<div style="position: relative;">
<div class=articlefooter></div>
<div id="t" style="background: skyblue; height: 50px; width: 100px;"></div>
</div>
<br>
<div style="position: relative; display: -webkit-box;">
<div class=articlefooter></div>
<div id="u" style="background: skyblue; height: 50px; width: 100px;"></div>
</div>
<script type="text/javascript">
document.body.offsetTop; // force layout
t.style.height = '100px';
u.style.height = '100px';
</script>
</body>
Codebase Browser
chromium