<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>
