<!DOCTYPE html>
<head>
<style>
body {
margin-left: 100px;
width: 400px;
}
#container {
position: relative;
top: 200px;
left: 100px;
height: 100px;
border: 1px solid black;
}
#inner, #marker {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background-color: green;
}
#marker {
background-color: red;
}
</style>
</head>
<body>
<p><a href="https://bugs.webkit.org/show_bug.cgi?id=26397">https://bugs.webkit.org/show_bug.cgi?id=26397</a></p>
<p>Changing position: relative to position: static results in mis-positioned descendant.</p>
<p>You should see no red on this page. There should be a green box in the top right-hand corner</p>
<div id="marker"></div>
<div id="container">
<div id="inner"></div>
</div>
<script>
var testEl = document.getElementById('container');
testEl.offsetHeight;
testEl.style.position = 'static';
</script>
</body>
</html>