| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| p { height: 100px; width: 100px; margin: 0px; } |
| p.red { background-color: red; } |
| p.green { background-color: green; } |
| div { height: 100px; width: 100px; } |
| div.relative { position: relative } |
| div.composited |
| { |
| transform: translateZ(0); |
| } |
| div.translated |
| { |
| transform: translate(0); |
| } |
| </style> |
| </head> |
| <body> |
| <!-- This test should be a ref-test but small scrollbars difference between platforms makes it fail. --> |
| <span>http://webkit.org/b/67100: REGRESSION (r93614): Safari Reader doesn't repaint correctly when scrolling</span><br/> |
| <span>All the boxes should only contain green content.</span> |
| <!-- Use a translation. --> |
| <div class="scrollMe composited" style="overflow: hidden;"> |
| <div class="relative"> |
| <p class="red"></p> |
| <p class="green"></p> |
| <p class="red"></p> |
| </div> |
| </div> |
| <br> |
| <div class="scrollMe composited" style="overflow: scroll;"> |
| <div class="relative"> |
| <p class="red"></p> |
| <p class="green"></p> |
| <p class="red"></p> |
| </div> |
| </div> |
| <br> |
| <!-- Nest composited and non-composited. --> |
| <div class="scrollMe composited" style="overflow: hidden;"> |
| <div class="relative translated"> |
| <p class="red"></p> |
| <p class="green"></p> |
| <p class="red"></p> |
| </div> |
| </div> |
| <br> |
| <div class="scrollMe translated" style="overflow: scroll;"> |
| <div class="relative composited"> |
| <p class="red"></p> |
| <p class="green"></p> |
| <p class="red"></p> |
| </div> |
| </div> |
| <br> |
| <script> |
| var scrollMes = document.getElementsByClassName("scrollMe"); |
| for (var i = 0; i < scrollMes.length; ++i) |
| scrollMes[i].scrollTop = 100; |
| </script> |
| </body> |
| </html> |
