| <html> |
| <head> |
| <title>Reduction</title> |
| <style> |
| #content-container { |
| position:absolute; |
| top:48px; |
| bottom:0; |
| left:0; |
| right:0; |
| margin-left:225px; |
| } |
| |
| #composited { |
| height: 38px; |
| transform:translate3d(0px, 0px, 0px); |
| } |
| |
| #positioned-2 { |
| position:absolute; |
| top:40px; |
| bottom:0; |
| left:0; |
| right:0; |
| } |
| |
| .positioned-3 { |
| position:absolute; |
| top:0; |
| bottom:0; |
| left:0; |
| right:0; |
| } |
| |
| #transformed-container { |
| transform: translateX(0); |
| height:300px; |
| width:600px; |
| } |
| |
| #overflow { |
| overflow:auto; |
| border: 2px solid black; |
| } |
| |
| .positioned-4 { |
| position:absolute; |
| top:20px; |
| height:80px; |
| right:20px; |
| width:80px; |
| } |
| </style> |
| </head> |
| |
| <script src="../../../resources/run-after-layout-and-paint.js"></script> |
| |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function repaintTest() { |
| runAfterLayoutAndPaint(function() { |
| document.getElementById('overflow').scrollTop = 30; |
| runAfterLayoutAndPaint(function() { |
| document.getElementById('overflow').scrollTop = 50; |
| testRunner.notifyDone(); |
| }); |
| }); |
| } |
| |
| </script> |
| |
| <body onload="repaintTest()"> |
| <div id="content-container"> |
| <div id="composited"></div> |
| <div id="positioned-2"> |
| <div id="transformed-container" class="positioned-3"> |
| <div id="overflow" class="positioned-3"> |
| <div class="positioned-4"></div> |
| |
| <div style="background-color:purple; width:50px; height:300px;"></div> |
| <br/> |
| <div style="width:500px; height:50px; background-color:green;"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
