<!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>
<script>
if (window.testRunner)
testRunner.dumpAsTextWithPixelResults();
</script>
</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>