Skip to content

W
webkit
Commit 4affaa08 authored by commit-queue@webkit.org's avatar commit-queue@webkit.org
Browse files
Options

[CSS Regions] Fix positioning composited layers when the region has overflow:hidden 

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

Patch by Mihai Maerean <mmaerean@adobe.com> on 2014-01-23
Reviewed by Mihnea Ovidenie.

Source/WebCore:

If there's a clipping GraphicsLayer on the hierarchy, substract its offset, since it's its
parent that positions us.

Tests: compositing/regions/position-layer-inside-region-overflow-hidden.html
       compositing/regions/position-layer-inside-overflow-hidden.html
       compositing/regions/position-layers-inside-region-overflow-hidden.html
       compositing/regions/position-layers-inside-regions-overflow-hidden.html

* rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::adjustAncestorCompositingBoundsForFlowThread): The position
must also be correct when the region has box-shadow that inflates the region's layer. The
composited layers from the flow thread should be rendered in the same position whether the
associated region has clipping or not.
Using the position of the clipping layer instead of the location of the clipbox makes it
also work with box-shadow that inflates the region's graphics layer.

LayoutTests:

* compositing/regions/position-layer-inside-region-overflow-hidden.html: Added.
* compositing/regions/position-layer-inside-region-overflow-hidden-expected.html: Added.
* compositing/regions/position-layer-inside-overflow-hidden.html: Added.
* compositing/regions/position-layer-inside-overflow-hidden-expected.html: Added.
* compositing/regions/position-layers-inside-region-overflow-hidden.html: Added.
* compositing/regions/position-layers-inside-region-overflow-hidden-expected.html: Added.
* compositing/regions/position-layers-inside-regions-overflow-hidden.html: Added.
* compositing/regions/position-layers-inside-regions-overflow-hidden-expected.html: Added.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162605 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent a18f28e1
Hide whitespace changes
Inline Side-by-side
Showing with 407 additions and 15 deletions
LayoutTests/ChangeLog
View file @ 4affaa08
2014-01-23 Mihai Maerean <mmaerean@adobe.com>
[CSS Regions] Fix positioning composited layers when the region has overflow:hidden
https://bugs.webkit.org/show_bug.cgi?id=124042
Reviewed by Mihnea Ovidenie.
* compositing/regions/position-layer-inside-region-overflow-hidden.html: Added.
* compositing/regions/position-layer-inside-region-overflow-hidden-expected.html: Added.
* compositing/regions/position-layer-inside-overflow-hidden.html: Added.
* compositing/regions/position-layer-inside-overflow-hidden-expected.html: Added.
* compositing/regions/position-layers-inside-region-overflow-hidden.html: Added.
* compositing/regions/position-layers-inside-region-overflow-hidden-expected.html: Added.
* compositing/regions/position-layers-inside-regions-overflow-hidden.html: Added.
* compositing/regions/position-layers-inside-regions-overflow-hidden-expected.html: Added.
2014-01-23 Csaba Osztrogonác <ossy@webkit.org>
Unreviewed gardening.
LayoutTests/compositing/regions/position-layer-inside-overflow-hidden-expected.html 0 → 100644
View file @ 4affaa08
<html>
<head>
<title>Expected result - Bug #124042: [CSS Regions] Fix positioning composited layers when the region has overflow:hidden</title>
<style>
html {
-webkit-font-smoothing: none;
font-size: 16px;
}
.content {
-webkit-flow-into: theFlow;
}
.transformed {
-webkit-transform: translateZ(1px);
}
.region {
-webkit-flow-from: theFlow;
width: 600px;
height: 300px;
}
.region, .content, .clipping, .transformed {
border: solid 4px #888;
padding: 5px 10px 15px 20px;
margin: 10px 15px 20px 25px;
}
</style>
</head>
<body>
<span class="content">some text 1.</span>
<div class="content"><div class="clipping transformed"><div class="transformed">composited</div></div></div>
<span class="content">some text 2.</span>
<div class="region"></div>
<p>Test passes if the composited layer is positioned at the same location whether the overflow:hidden is set or not.</p>
<p>The clipping layer is not the region itself. There are nested composited layers inside the region where the parent one is clipping.</p>
</body>
</html>
\ No newline at end of file
LayoutTests/compositing/regions/position-layer-inside-overflow-hidden.html 0 → 100644
View file @ 4affaa08
<html>
<head>
<title>Test - Bug #124042: [CSS Regions] Fix positioning composited layers when the region has overflow:hidden</title>
<style>
html {
-webkit-font-smoothing: none;
font-size: 16px;
}
.content {
-webkit-flow-into: theFlow;
}
.transformed {
-webkit-transform: translateZ(1px);
}
.clipping {
overflow: hidden;
}
.region {
-webkit-flow-from: theFlow;
width: 600px;
height: 300px;
}
.region, .content, .clipping, .transformed {
border: solid 4px #888;
padding: 5px 10px 15px 20px;
margin: 10px 15px 20px 25px;
}
</style>
</head>
<body>
<span class="content">some text 1.</span>
<div class="content"><div class="clipping transformed"><div class="transformed">composited</div></div></div>
<span class="content">some text 2.</span>
<div class="region"></div>
<p>Test passes if the composited layer is positioned at the same location whether the overflow:hidden is set or not.</p>
<p>The clipping layer is not the region itself. There are nested composited layers inside the region where the parent one is clipping.</p>
</body>
</html>
\ No newline at end of file
LayoutTests/compositing/regions/position-layer-inside-region-overflow-hidden-expected.html 0 → 100644
View file @ 4affaa08
<html>
<head>
<title>Expected Result - Bug #124042: [CSS Regions] Fix positioning composited layers when the region has overflow:hidden</title>
<style>
html {
-webkit-font-smoothing: none;
font-size: 16px;
}
.content {
-webkit-flow-into: theFlow;
}
.transformed {
-webkit-transform: translateZ(1px);
}
.region {
-webkit-flow-from: theFlow;
width: 600px;
height: 150px;
box-shadow: 0px 0px 0px 10px Green;
}
.region, .content {
border: solid 5px #888;
padding: 5px 10px 15px 20px;
margin: 10px 15px 20px 25px;
}
</style>
</head>
<body>
<span class="content">some text 1.</span>
<div class="content transformed">composited</div>
<span class="content">some text 2.</span>
<div class="region"></div>
<p>Test passes if the composited layer is positioned at the same place (in the region with overflow:hidden) as in the region that doesn't have overflow:hidden .</p>
</body>
</html>
\ No newline at end of file
LayoutTests/compositing/regions/position-layer-inside-region-overflow-hidden.html 0 → 100644
View file @ 4affaa08
<html>
<head>
<title>Test - Bug #124042: [CSS Regions] Fix positioning composited layers when the region has overflow:hidden</title>
<style>
html {
-webkit-font-smoothing: none;
font-size: 16px;
}
.content {
-webkit-flow-into: theFlow;
}
.transformed {
-webkit-transform: translateZ(1px);
}
.region {
-webkit-flow-from: theFlow;
width: 600px;
height: 150px;
overflow: hidden;
box-shadow: 0px 0px 0px 10px Green;
}
.region, .content {
border: solid 5px #888;
padding: 5px 10px 15px 20px;
margin: 10px 15px 20px 25px;
}
</style>
</head>
<body>
<span class="content">some text 1.</span>
<div class="content transformed">composited</div>
<span class="content">some text 2.</span>
<div class="region"></div>
<p>Test passes if the composited layer is positioned at the same place (in the region with overflow:hidden) as in the region that doesn't have overflow:hidden .</p>
</body>
</html>
\ No newline at end of file
LayoutTests/compositing/regions/position-layers-inside-region-overflow-hidden-expected.html 0 → 100644
View file @ 4affaa08
<html>
<head>
<title>Expected Result - Bug #124042: [CSS Regions] Fix positioning composited layers when the region has overflow:hidden</title>
<style>
html {
-webkit-font-smoothing: none;
font-size: 16px;
}
.content {
-webkit-flow-into: theFlow;
}
.transformed {
-webkit-transform: translateZ(1px);
}
.transformedChild {
-webkit-transform: rotateY(180deg);
}
.region {
-webkit-flow-from: theFlow;
width: 600px;
height: 150px;
box-shadow: 0px 0px 0px 10px Green;
}
.region, .content {
border: solid 5px #888;
padding: 5px 10px 15px 20px;
margin: 10px 15px 20px 25px;
}
</style>
</head>
<body>
<span class="content">some text 1.</span>
<div class="content transformed">
<div>composited</div>
<div class="transformedChild">transformed child</div>
</div>
<span class="content">some text 2.</span>
<div class="region"></div>
<p>Test passes if the composited layers are positioned at the same place (in the region with overflow:hidden) as in the region that doesn't have overflow:hidden .</p>
</body>
</html>
\ No newline at end of file
LayoutTests/compositing/regions/position-layers-inside-region-overflow-hidden.html 0 → 100644
View file @ 4affaa08
<html>
<head>
<title>Test - Bug #124042: [CSS Regions] Fix positioning composited layers when the region has overflow:hidden</title>
<style>
html {
-webkit-font-smoothing: none;
font-size: 16px;
}
.content {
-webkit-flow-into: theFlow;
}
.transformed {
-webkit-transform: translateZ(1px);
overflow: hidden;
}
.transformedChild {
-webkit-transform: rotateY(180deg);
}
.region {
-webkit-flow-from: theFlow;
width: 600px;
height: 150px;
overflow: hidden;
box-shadow: 0px 0px 0px 10px Green;
}
.region, .content {
border: solid 5px #888;
padding: 5px 10px 15px 20px;
margin: 10px 15px 20px 25px;
}
</style>
</head>
<body>
<span class="content">some text 1.</span>
<div class="content transformed">
<div>composited</div>
<div class="transformedChild">transformed child</div>
</div>
<span class="content">some text 2.</span>
<div class="region"></div>
<p>Test passes if the composited layers are positioned at the same place (in the region with overflow:hidden) as in the region that doesn't have overflow:hidden .</p>
</body>
</html>
\ No newline at end of file
LayoutTests/compositing/regions/position-layers-inside-regions-overflow-hidden-expected.html 0 → 100644
View file @ 4affaa08
<html>
<head>
<title>Expected Result - Bug #124042: [CSS Regions] Fix positioning composited layers when the region has overflow:hidden</title>
<style>
html {
-webkit-font-smoothing: none;
font-size: 16px;
}
.content {
-webkit-flow-into: theFlow;
}
.content:nth-child(2) {
-webkit-region-break-after: always;
}
.transformed {
-webkit-transform: translateZ(1px);
}
.transformedChild {
-webkit-transform: rotateY(180deg);
}
.region {
-webkit-flow-from: theFlow;
width: 600px;
height: 150px;
box-shadow: 0px 0px 0px 10px Green;
}
body, .region, .content {
border: solid 5px #888;
padding: 5px 10px 15px 20px;
margin: 10px 15px 20px 25px;
}
</style>
</head>
<body>
<div class="content">some text 1.</div>
<div class="content transformed">
<div>composited</div>
<div class="transformedChild">transformed child</div>
</div>
<div class="content transformed">
<div>composited</div>
<div class="transformedChild">transformed child</div>
</div>
<div class="content">some text 2.</div>
<div class="region"></div>
<div class="region"></div>
<p>Test passes if the composited layers are positioned at the same place (in the region with overflow:hidden) as in the region that doesn't have overflow:hidden .</p>
</body>
</html>
\ No newline at end of file
LayoutTests/compositing/regions/position-layers-inside-regions-overflow-hidden.html 0 → 100644
View file @ 4affaa08
<html>
<head>
<title>Test - Bug #124042: [CSS Regions] Fix positioning composited layers when the region has overflow:hidden</title>
<style>
html {
-webkit-font-smoothing: none;
font-size: 16px;
}
.content {
-webkit-flow-into: theFlow;
}
.content:nth-child(2) {
-webkit-region-break-after: always;
}
.transformed {
-webkit-transform: translateZ(1px);
overflow: hidden;
}
.transformedChild {
-webkit-transform: rotateY(180deg);
}
.region {
-webkit-flow-from: theFlow;
width: 600px;
height: 150px;
overflow: hidden;
box-shadow: 0px 0px 0px 10px Green;
}
body, .region, .content {
border: solid 5px #888;
padding: 5px 10px 15px 20px;
margin: 10px 15px 20px 25px;
}
</style>
</head>
<body>
<div class="content">some text 1.</div>
<div class="content transformed">
<div>composited</div>
<div class="transformedChild">transformed child</div>
</div>
<div class="content transformed">
<div>composited</div>
<div class="transformedChild">transformed child</div>
</div>
<div class="content">some text 2.</div>
<div class="region"></div>
<div class="region"></div>
<p>Test passes if the composited layers are positioned at the same place (in the region with overflow:hidden) as in the region that doesn't have overflow:hidden .</p>
</body>
</html>
\ No newline at end of file
Source/WebCore/ChangeLog
View file @ 4affaa08
2014-01-23 Mihai Maerean <mmaerean@adobe.com>
[CSS Regions] Fix positioning composited layers when the region has overflow:hidden
https://bugs.webkit.org/show_bug.cgi?id=124042
Reviewed by Mihnea Ovidenie.
If there's a clipping GraphicsLayer on the hierarchy, substract its offset, since it's its
parent that positions us.
Tests: compositing/regions/position-layer-inside-region-overflow-hidden.html
compositing/regions/position-layer-inside-overflow-hidden.html
compositing/regions/position-layers-inside-region-overflow-hidden.html
compositing/regions/position-layers-inside-regions-overflow-hidden.html
* rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::adjustAncestorCompositingBoundsForFlowThread): The position
must also be correct when the region has box-shadow that inflates the region's layer. The
composited layers from the flow thread should be rendered in the same position whether the
associated region has clipping or not.
Using the position of the clipping layer instead of the location of the clipbox makes it
also work with box-shadow that inflates the region's graphics layer.
2014-01-23 Andrei Bucur <abucur@adobe.com>
[CSS Regions] Convert regions iterator loops to range-based loops
Source/WebCore/rendering/RenderLayerBacking.cpp
View file @ 4affaa08
......@@ -985,7 +985,6 @@ void RenderLayerBacking::adjustAncestorCompositingBoundsForFlowThread(IntRect& a
RenderLayer* flowThreadLayer = m_owningLayer.isInsideOutOfFlowThread() ? m_owningLayer.stackingContainer() : m_owningLayer.enclosingFlowThreadAncestor();
if (flowThreadLayer && flowThreadLayer->isRenderFlowThread()) {
RenderFlowThread& flowThread = toRenderFlowThread(flowThreadLayer->renderer());
if (m_owningLayer.isFlowThreadCollectingGraphicsLayersUnderRegions()) {
// The RenderNamedFlowThread is not composited, as we need it to paint the
// background layer of the regions. We need to compensate for that by manually
......@@ -996,21 +995,31 @@ void RenderLayerBacking::adjustAncestorCompositingBoundsForFlowThread(IntRect& a
}
// Move the ancestor position at the top of the region where the composited layer is going to display.
RenderFlowThread& flowThread = toRenderFlowThread(flowThreadLayer->renderer());
RenderNamedFlowFragment* parentRegion = flowThread.cachedRegionForCompositedLayer(m_owningLayer);
if (parentRegion) {
IntPoint flowDelta;
m_owningLayer.convertToPixelSnappedLayerCoords(flowThreadLayer, flowDelta);
parentRegion->adjustRegionBoundsFromFlowThreadPortionRect(flowDelta, ancestorCompositingBounds);
RenderBoxModelObject& layerOwner = toRenderBoxModelObject(parentRegion->layerOwner());
if (layerOwner.layer()->backing()) {
// Make sure that the region propagates its borders, paddings, outlines or box-shadows to layers inside it.
// Note that the composited bounds of the RenderRegion are already calculated
// because RenderLayerCompositor::rebuildCompositingLayerTree will only
// iterate on the content of the region after the region itself is computed.
ancestorCompositingBounds.moveBy(roundedIntPoint(layerOwner.layer()->backing()->compositedBounds().location()));
ancestorCompositingBounds.move(-layerOwner.borderAndPaddingStart(), -layerOwner.borderAndPaddingBefore());
}
}
if (!parentRegion)
return;
IntPoint flowDelta;
m_owningLayer.convertToPixelSnappedLayerCoords(flowThreadLayer, flowDelta);
parentRegion->adjustRegionBoundsFromFlowThreadPortionRect(flowDelta, ancestorCompositingBounds);
RenderBoxModelObject& layerOwner = toRenderBoxModelObject(parentRegion->layerOwner());
RenderLayerBacking* layerOwnerBacking = layerOwner.layer()->backing();
if (!layerOwnerBacking)
return;
// Make sure that the region propagates its borders, paddings, outlines or box-shadows to layers inside it.
// Note that the composited bounds of the RenderRegion are already calculated because
// RenderLayerCompositor::rebuildCompositingLayerTree will only iterate on the content of the region after the
// region itself is computed.
ancestorCompositingBounds.moveBy(roundedIntPoint(layerOwnerBacking->compositedBounds().location()));
ancestorCompositingBounds.move(-layerOwner.borderAndPaddingStart(), -layerOwner.borderAndPaddingBefore());
// If there's a clipping GraphicsLayer on the hierarchy (region graphics layer -> clipping graphics layer ->
// composited content graphics layer), substract the offset of the clipping layer, since it's its parent
// that positions us (the graphics layer of the region).
if (layerOwnerBacking->clippingLayer())
ancestorCompositingBounds.moveBy(roundedIntPoint(layerOwnerBacking->clippingLayer()->position()));
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment