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