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