<!DOCTYPE HTML>
<html>
<head>
<title>Test for http://bugs.webkit.org/show_bug.cgi?id=10983</title>
<style type="text/css">
div.test { position: relative; height: 100px; margin-bottom: 25px; }
div.demo { position: absolute; width: 100px; height: 50px; }
div.red { background-color: red; }
div.green { background-color: green; }
</style>
</head>
<body>
<div class="test" style="top: -51px;">
<div class="demo red" style="top: 51px;"></div>
<div class="demo green" style="top: 101px;"></div>
<div style="margin-bottom: 50px; height: 1px;"></div>
<div class="demo green" id="target2"></div>
</div>
<div class="test">
<div style="height: 100px;">
<div class="demo green" style="top: 0;"></div>
<div class="demo red" style="top: 50px;"></div>
<div id="target3" style="height: 0;"></div>
<div class="demo green"></div>
</div>
</div>
<div class="test">
<div style="position: relative; height: 50px;">
<div class="demo green" style="top: 0;"></div>
<div class="demo red" style="top: 50px;"></div>
<div id="target4" style="height: 0;"></div>
<div class="demo green"></div>
</div>
</div>
<div class="test">
<div style="position: relative; height: 100px;">
<div class="demo green" style="top: 0;"></div>
<div class="demo red" style="top: 50px;"></div>
<div id="target5" style="height: 0;"></div>
<div class="demo green"></div>
</div>
</div>
<script>
var t2 = document.getElementById("target2");
var t3 = document.getElementById("target3");
var t4 = document.getElementById("target4");
var t5 = document.getElementById("target5");
document.body.offsetTop;
t3.style.height = "50px";
t4.style.height = "50px";
t5.style.height = "50px";
</script>
</body>
</html>
Codebase Browser
chromium