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