blob: 63f16d3f987d89bd5bf1e814aea310799eeda8a0 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<!-- This test case reproduces a bug that is hopefully solved by https://bugs.webkit.org/show_bug.cgi?id=80641
In the bug, a div element begins as non-composited, and the repaintRect had a
correct non-zero offset because it paints into an ancestor container. Later, the
layer becomes composited (in this case, because the layer is moved to overlap
another composited layer). Because the layer is now composited, the repaintRect
should have been recomputed - in particular, the offset of the repaintRect should
become zero because it is now its own repaint container.
Therefore, after the layer became composited, it was using the wrong repaint rect,
which caused things not to repaint properly.
-->
<style type="text/css">
.composited {
-webkit-transform: translatez(0);
border: 2px solid black;
}
.box {
width: 200px;
height: 200px;
}
#scrolldiv {
position: absolute;
width: 100px;
height: 100px;
left: 250px;
top: 50px;
overflow-x: hidden;
overflow-y: scroll;
}
.shouldNotBeSeen {
background-color: red;
}
.shouldBeSeen {
background-color: green;
}
</style>
</head>
<script src="../../fast/repaint/resources/repaint.js"></script>
<script>
if (window.testRunner) {
testRunner.dumpAsText(true);
testRunner.waitUntilDone();
}
function changeDivPosition() {
document.getElementById("scrolldiv").style.left="50px";
}
function repaintTest() {
// Changing the position will cause the scrolldiv to become composited becuase it overlaps another compostied element.
changeDivPosition();
// Force DumpRenderTree to do a layout and repaint here, this is where the repaintRect
// goes wrong because it does not get updated for a newly composited element.
if (window.testRunner)
testRunner.displayAndTrackRepaints();
window.setTimeout(function() {
// Scrolling a little will demonstrate whether the repaint rect is correct or not.
document.getElementById('scrolldiv').scrollTop = 500;
testRunner.notifyDone();
}, 0);
}
</script>
<body onload="runRepaintTest()">
<div class="composited box"></div>
<div id="scrolldiv">
<div class="shouldNotBeSeen box"></div>
<div class="shouldBeSeen box"></div>
</div>
</body>
</html>