| <!DOCTYPE html> |
| <html> |
| <body> |
| You should see the text 'after' in the inner box, no mangled pixels. |
| <div id="parent1" style="position:absolute; width:300px; height:300px; overflow:hidden; border: solid 1px yellow"> |
| <div id="parent2" style="position:absolute; width:300px; height:300px; overflow:hidden; border: solid 1px red"> |
| <div style="position:absolute; width:100px; height:100px; left:100px; top:100px; border:solid 1px green; overflow:hidden"> |
| <div id="target" style="width:50px; height:50px">before</div> |
| </div> |
| <div style="width:1000px; height:1000px;"></div> |
| </div> |
| </div> |
| </body> |
| <script> |
| parent1 = document.getElementById('parent1'); |
| parent1.scrollTop = 7; |
| parent1.scrollLeft = 7; |
| |
| parent2 = document.getElementById('parent2'); |
| parent2.scrollTop = 7; |
| parent2.scrollLeft = 7; |
| |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| window.setTimeout(function() { |
| if (window.testRunner) |
| testRunner.display(); |
| |
| document.getElementById('target').innerText = 'after' |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }, 50); |
| </script> |
| </html> |
