Fix compositing layers in columns

https://bugs.webkit.org/show_bug.cgi?id=120436

Source/WebCore:

Reviewed by Dave Hyatt.

Remove the old hack in RenderLayer::updateLayerPosition() for placing
layers in columns, which changed the layer position for composited
layers; this broke hit-testing.

Fix a better way by moving compositing layers to the correct
positions that take column offsets into account, by fixing
RenderLayer::convertToLayerCoords() to optionally apply column
adjustment, and using this in the code which positions compositing layers.

Tests: compositing/columns/ancestor-clipped-in-paginated.html
       compositing/columns/clipped-in-paginated.html
       compositing/columns/composited-columns-vertical-rl.html
       compositing/columns/composited-columns.html
       compositing/columns/composited-in-paginated-rl.html
       compositing/columns/composited-in-paginated-writing-mode-rl.html
       compositing/columns/composited-lr-paginated-repaint.html
       compositing/columns/composited-rl-paginated-repaint.html
       compositing/columns/hittest-composited-in-paginated.html
       compositing/columns/rotated-in-paginated.html
       compositing/columns/untransformed-composited-in-paginated.html

* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::updateLayerPosition):
(WebCore::RenderLayer::convertToPixelSnappedLayerCoords):
(WebCore::accumulateOffsetTowardsAncestor):
(WebCore::RenderLayer::convertToLayerCoords):
* rendering/RenderLayer.h:
* rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::updateCompositedBounds):
(WebCore::RenderLayerBacking::updateGraphicsLayerGeometry):

LayoutTests:

Reviewed by Dave Hyatt.

Various testcases for compositing in columns.

* compositing/columns/ancestor-clipped-in-paginated-expected.txt: Added.
* compositing/columns/ancestor-clipped-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
* compositing/columns/clipped-in-paginated-expected.txt: Added.
* compositing/columns/clipped-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
* compositing/columns/composited-columns-expected.txt: Added.
* compositing/columns/composited-columns-vertical-rl-expected.txt: Added.
* compositing/columns/composited-columns-vertical-rl.html: Added.
* compositing/columns/composited-columns.html: Added.
* compositing/columns/composited-in-paginated-rl-expected.txt: Added.
* compositing/columns/composited-in-paginated-rl.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
* compositing/columns/composited-in-paginated-writing-mode-rl-expected.txt: Added.
* compositing/columns/composited-in-paginated-writing-mode-rl.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
* compositing/columns/composited-in-paginated.html:
* compositing/columns/composited-lr-paginated-repaint-expected.txt: Added.
* compositing/columns/composited-lr-paginated-repaint.html: Added.
* compositing/columns/composited-nested-columns-expected.txt: Added.
* compositing/columns/composited-nested-columns.html: Added.
* compositing/columns/composited-rl-paginated-repaint-expected.txt: Added.
* compositing/columns/composited-rl-paginated-repaint.html: Added.
* compositing/columns/hittest-composited-in-paginated-expected.txt: Added.
* compositing/columns/hittest-composited-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
* compositing/columns/rotated-in-paginated-expected.txt: Added.
* compositing/columns/rotated-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
* compositing/columns/untransformed-composited-in-paginated-expected.txt: Added.
* compositing/columns/untransformed-composited-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@154785 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent a39dd5c6
2013-08-28 Simon Fraser <simon.fraser@apple.com>
Fix compositing layers in columns
https://bugs.webkit.org/show_bug.cgi?id=120436
Reviewed by Dave Hyatt.
Various testcases for compositing in columns.
* compositing/columns/ancestor-clipped-in-paginated-expected.txt: Added.
* compositing/columns/ancestor-clipped-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
* compositing/columns/clipped-in-paginated-expected.txt: Added.
* compositing/columns/clipped-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
* compositing/columns/composited-columns-expected.txt: Added.
* compositing/columns/composited-columns-vertical-rl-expected.txt: Added.
* compositing/columns/composited-columns-vertical-rl.html: Added.
* compositing/columns/composited-columns.html: Added.
* compositing/columns/composited-in-paginated-rl-expected.txt: Added.
* compositing/columns/composited-in-paginated-rl.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
* compositing/columns/composited-in-paginated-writing-mode-rl-expected.txt: Added.
* compositing/columns/composited-in-paginated-writing-mode-rl.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
* compositing/columns/composited-in-paginated.html:
* compositing/columns/composited-lr-paginated-repaint-expected.txt: Added.
* compositing/columns/composited-lr-paginated-repaint.html: Added.
* compositing/columns/composited-nested-columns-expected.txt: Added.
* compositing/columns/composited-nested-columns.html: Added.
* compositing/columns/composited-rl-paginated-repaint-expected.txt: Added.
* compositing/columns/composited-rl-paginated-repaint.html: Added.
* compositing/columns/hittest-composited-in-paginated-expected.txt: Added.
* compositing/columns/hittest-composited-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
* compositing/columns/rotated-in-paginated-expected.txt: Added.
* compositing/columns/rotated-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
* compositing/columns/untransformed-composited-in-paginated-expected.txt: Added.
* compositing/columns/untransformed-composited-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
2013-08-28 Denis Nomiyama <d.nomiyama@samsung.com>
[GTK] accessibility/menu-list-sends-change-notification.html has incorrect expected results
(GraphicsLayer
(bounds 1600.00 585.00)
(children 1
(GraphicsLayer
(bounds 1600.00 585.00)
(contentsOpaque 1)
(children 1
(GraphicsLayer
(position 809.00 146.00)
(bounds 100.00 100.00)
(children 1
(GraphicsLayer
(bounds 240.00 240.00)
(contentsOpaque 1)
(drawsContent 1)
)
)
)
)
)
)
)
<html>
<head>
<script>
if (window.testRunner)
testRunner.dumpAsText();
if (window.internals)
internals.setPagination(document, "LeftToRightPaginated", 0);
function dumpLayers()
{
if (window.testRunner)
document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
}
window.addEventListener('load', dumpLayers, false);
</script>
<style>
.spacer {
height: 350px;
width: 100%;
margin: 10px;
background-color: silver;
}
.clipping {
height: 100px;
width: 100px;
border: 1px solid black;
overflow: hidden;
z-index: 0;
}
.box {
height: 200px;
width: 200px;
background-color: blue;
border: 20px solid darkblue;
}
.composited {
-webkit-transform: translateZ(0)
}
</style>
</head>
<body>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="clipping">
<div class="composited box"></div>
</div>
<pre id="layers">Layer tree goes here in DRT</pre>
</body>
</html>
(GraphicsLayer
(bounds 1600.00 585.00)
(children 1
(GraphicsLayer
(bounds 1600.00 585.00)
(contentsOpaque 1)
(children 1
(GraphicsLayer
(position 809.00 146.00)
(bounds 100.00 100.00)
(children 1
(GraphicsLayer
(bounds 240.00 240.00)
(contentsOpaque 1)
(drawsContent 1)
)
)
)
)
)
)
)
<html>
<head>
<script>
if (window.testRunner)
testRunner.dumpAsText();
if (window.internals)
internals.setPagination(document, "LeftToRightPaginated", 0);
function dumpLayers()
{
if (window.testRunner)
document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
}
window.addEventListener('load', dumpLayers, false);
</script>
<style>
.spacer {
height: 350px;
width: 100%;
margin: 10px;
background-color: silver;
}
.clipping {
height: 100px;
width: 100px;
border: 1px solid black;
overflow: hidden;
}
.box {
height: 200px;
width: 200px;
background-color: blue;
border: 20px solid darkblue;
}
.composited {
-webkit-transform: translateZ(0)
}
</style>
</head>
<body>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="clipping">
<div class="composited box"></div>
</div>
<pre id="layers">Layer tree goes here in DRT</pre>
</body>
</html>
(GraphicsLayer
(bounds 785.00 889.00)
(children 1
(GraphicsLayer
(bounds 785.00 889.00)
(contentsOpaque 1)
(children 1
(GraphicsLayer
(position 8.00 8.00)
(bounds 769.00 840.00)
(drawsContent 1)
(children 1
(GraphicsLayer
(position 10.00 730.00)
(bounds 100.00 100.00)
(contentsOpaque 1)
)
)
)
)
)
)
)
(GraphicsLayer
(bounds 800.00 600.00)
(children 1
(GraphicsLayer
(bounds 800.00 600.00)
(contentsOpaque 1)
(children 1
(GraphicsLayer
(position 8.00 8.00)
(bounds 760.00 220.00)
(drawsContent 1)
(children 1
(GraphicsLayer
(position 10.00 10.00)
(bounds 100.00 100.00)
(contentsOpaque 1)
)
)
)
)
)
)
)
<!DOCTYPE html>
<html>
<head>
<style>
.columns {
-webkit-column-count: 400px;
-webkit-writing-mode: vertical-rl;
}
.spacer {
height: 200px;
width: 150px;
margin: 10px;
background-color: silver;
}
.box {
height: 100px;
width: 100px;
margin: 10px;
background-color: blue;
}
.composited {
-webkit-transform: translateZ(0);
}
</style>
<script>
if (window.testRunner)
testRunner.dumpAsText();
if (window.internals)
internals.setPagination(document, "LeftToRightPaginated", 0);
function dumpLayers()
{
if (window.testRunner)
document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
}
window.addEventListener('load', dumpLayers, false);
</script>
</head>
<body>
<div class="composited columns">
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="composited box"></div>
</div>
<pre id="layers">Layer tree goes here in DRT</pre>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.columns {
-webkit-column-width: 400px;
}
.spacer {
height: 350px;
width: 100%;
margin: 10px;
background-color: silver;
}
.box {
height: 100px;
width: 100px;
margin: 10px;
background-color: blue;
}
.composited {
-webkit-transform: translateZ(0);
}
</style>
<script>
if (window.testRunner)
testRunner.dumpAsText();
function dumpLayers()
{
if (window.testRunner)
document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
}
window.addEventListener('load', dumpLayers, false);
</script>
</head>
<body>
<div class="composited columns">
<div class="spacer"></div>
<div class="spacer"></div>
<div class="composited box"></div>
</div>
<pre id="layers">Layer tree goes here in DRT</pre>
</body>
</html>
(GraphicsLayer
(position -800.00 0.00)
(bounds 1600.00 585.00)
(children 1
(GraphicsLayer
(bounds 1600.00 585.00)
(contentsOpaque 1)
(children 1
(GraphicsLayer
(position 18.00 145.00)
(bounds 100.00 100.00)
(contentsOpaque 1)
)
)
)
)
)
<html>
<head>
<script>
if (window.testRunner)
testRunner.dumpAsText();
if (window.internals)
internals.setPagination(document, "RightToLeftPaginated", 0);
function dumpLayers()
{
if (window.testRunner)
document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
}
window.addEventListener('load', dumpLayers, false);
</script>
<style>
.spacer {
height: 350px;
width: 100%;
margin: 10px;
background-color: silver;
}
.box {
height: 100px;
width: 100px;
margin: 10px;
background-color: blue;
}
.composited {
-webkit-transform: translateZ(0);
}
</style>
</head>
<body>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="composited box"></div>
<pre id="layers">Layer tree goes here in DRT</pre>
</body>
</html>
(GraphicsLayer
(bounds 1600.00 585.00)
(children 1
(GraphicsLayer
(bounds 1600.00 585.00)
(contentsOpaque 1)
(children 1
(GraphicsLayer
(position -550.00 18.00)
(bounds 100.00 100.00)
(contentsOpaque 1)
)
)
)
)
)
<html>
<head>
<script>
if (window.testRunner)
testRunner.dumpAsText();
if (window.internals)
internals.setPagination(document, "LeftToRightPaginated", 0);
function dumpLayers()
{
if (window.testRunner)
document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
}
window.addEventListener('load', dumpLayers, false);
</script>
<style>
.spacer {
height: 350px;
width: 300px;
margin: 10px;
background-color: silver;
}
.box {
height: 100px;
width: 100px;
margin: 10px;
background-color: blue;
}
.composited {
-webkit-transform: translateZ(0);
}
</style>
</head>
<body style="-webkit-writing-mode: vertical-rl;">
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="composited box"></div>
<pre id="layers">Layer tree goes here in DRT</pre>
</body>
</html>
......@@ -28,6 +28,9 @@
margin: 10px;
background-color: blue;
}
.box:hover {
background-color: orange;
}
.composited {
-webkit-transform: translateZ(0);
}
......
(GraphicsLayer
(bounds 1600.00 585.00)
(children 1
(GraphicsLayer
(bounds 1600.00 585.00)
(contentsOpaque 1)
(children 1
(GraphicsLayer
(position 804.00 131.00)
(bounds 130.00 130.00)
(drawsContent 1)
(repaint rects
(rect 27.00 25.00 52.00 77.00)
)
)
)
)
)
)
<!DOCTYPE html>
<html>
<head>
<style>
.spacer {
height: 350px;
width: 100%;
margin: 10px;
background-color: silver;
}
.box {
height: 100px;
width: 100px;
margin: 10px;
border: 1px solid black;
background-color: blue;
}
.composited {
-webkit-transform: translateZ(0);
box-shadow: 0 0 10px black;
}
.inner {
height: 75px;
width: 50px;
margin: 10px 12px;
background-color: green;
}
.inner.changed {
background-color: orange;
}
</style>
<script>
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
if (window.internals)
internals.setPagination(document, "LeftToRightPaginated", 0);
function dumpLayers()
{
window.setTimeout(function() {
if (window.internals)
internals.startTrackingRepaints(document);
document.getElementById('inner').classList.add('changed');
if (window.testRunner) {
document.getElementById('layers').innerText = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
testRunner.notifyDone();
}
}, 10);
}
window.addEventListener('load', dumpLayers, false);
</script>
</head>
<body>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="composited box">
<div id="inner" class="inner box"></div>
</div>
<pre id="layers">Layer tree goes here in DRT</pre>
</body>
</html>
(GraphicsLayer
(bounds 800.00 600.00)
(children 1
(GraphicsLayer
(bounds 800.00 600.00)
(contentsOpaque 1)
(children 1
(GraphicsLayer
(position 8.00 8.00)
(bounds 784.00 416.00)
(drawsContent 1)
(children 1
(GraphicsLayer
(position 610.00 305.00)
(bounds 100.00 100.00)
(contentsOpaque 1)
)
)
)
)
)
)
)
<!DOCTYPE html>
<html>
<head>
<style>
.columns {
-webkit-column-width: 300px;