2018-09-27 09:49:52 +00:00
|
|
|
<!DOCTYPE html>
|
Element is displayed behind a composited layer when clipping is used on a previous element
https://bugs.webkit.org/show_bug.cgi?id=104981
Reviewed by Simon Fraser.
Source/WebCore:
RenderLayerCompositor::computeCompositingRequirements uses the local bounding box of the layers to optimize the number of composited
layers that are created. That's needed in order to make sure that composited layers that are displayed behind non-composited
layers are correctly promoting the layers in front to be composited. Otherwise the non-composited layers are rendered
in the parent composited layer, displaying behind the other composited layers. That might be wrong as the correct paint order might not be
preserved.
In order to make animations work, there's a flag that will disable that optimization. That's because the animations run in the platform
layer and the platform layer doesn't know about the layers that are not promoted to composited layers. When the overlapping of the layers
is computed it just uses the start or the stop state, but no intermediate states. For that reason, all the 'top' layers in front of animated
elements will become composited.
When an animation has a clipping rectangle, then we know for sure that the animation is going to be contained inside the clip area, so WebKit
uses the bounding box of the clipping area to detect the overlapping layers, so there's no need to disable the optimization in that case.
However, if there is a different animation displaying behind the clipping container, we cannot safely disable that optimization anymore. That's
because we still don't know what are the intermediate states of that particular animated layer. The bug was that the optimization was re-enabled
anyway, even in this particular case.
In order to fix it, I changed the logic, so that instead of re-enabling the optimization after a clipping container, it will just avoid to propagate
the internal state to the following layers when there's no need to so.
Note that 3D transforms behave like animations for now and disable the optimization. Because of that some of the existing tests ended up
creating more layers than needed. That's because the tests had an overflow area that recreated the issue that this patch fixes, but with
3D transforms instead of animations. 3D transforms will be treated in a separate patch.
Tests: compositing/layer-creation/overlap-animation-clipping.html
compositing/layer-creation/overlap-animation-container.html
* rendering/RenderLayerCompositor.cpp:
(WebCore::RenderLayerCompositor::computeCompositingRequirements):
LayoutTests:
Updated existing test results and added two new tests to check that animations respect the correct paint order,
even though they are painted with composited layers.
Note that there are side effects of this patch that will be corrected in a following bug. 3D layers are treated like animations, so they
disable the overlapping optimizations. Because of that, some of the test results were updated to include the layers that, previously,
were not created as a result of being in front of a "clipping container".
* compositing/geometry/foreground-layer-expected.txt:
* compositing/layer-creation/overlap-animation-clipping-expected.txt: Added.
* compositing/layer-creation/overlap-animation-clipping.html: Added. Checking that the animation inside a clipping container is not
affecting how we compute the animations outside the clipping container.
* compositing/layer-creation/overlap-animation-container-expected.txt: Added.
* compositing/layer-creation/overlap-animation-container.html: Added. Checking that we don't create unnecessary composited layers for layers inside
composited containers that draw in front of animated layers.
* compositing/overflow/clip-descendents-expected.txt:
* compositing/overflow/clip-descendents.html: Removed the text from the output, so that platforms can share the same expected result.
* platform/chromium-win/compositing/overflow/clip-descendents-expected.txt: Removed. Not needed anymore, all Chromium platforms can share the same results now.
* platform/chromium/compositing/geometry/foreground-layer-expected.txt:
* platform/chromium/compositing/layer-creation/overlap-animation-clipping-expected.txt: Added.
* platform/chromium/compositing/layer-creation/overlap-animation-container-expected.txt: Added.
* platform/chromium/compositing/layer-creation/overlap-transformed-3d-expected.txt: Added.
* platform/chromium/compositing/layer-creation/overlap-transforms-expected.txt:
* platform/chromium/compositing/overflow/clip-descendents-expected.txt: Renamed from LayoutTests/platform/chromium-mac/compositing/overflow/clip-descendents-expected.txt.
* platform/qt/compositing/overflow/clip-descendents-expected.txt:
Canonical link: https://commits.webkit.org/124908@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@139493 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2013-01-11 22:05:25 +00:00
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
.container {
|
|
|
|
|
height: 460px;
|
|
|
|
|
width: 120px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50px;
|
|
|
|
|
z-index: 0; /* create stacking context */
|
|
|
|
|
border: 1px solid black;
|
|
|
|
|
background-color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 100px;
|
|
|
|
|
margin: 10px;
|
|
|
|
|
background-color: blue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.force-layer {
|
|
|
|
|
-webkit-transform: translateZ(1px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.yellow {
|
|
|
|
|
background-color: yellow;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.gray {
|
|
|
|
|
background-color: gray;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.animating1 {
|
|
|
|
|
-webkit-animation: translate1 2s linear infinite alternate;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.animating2 {
|
|
|
|
|
-webkit-animation: translate2 2s linear infinite alternate;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes translate1 {
|
|
|
|
|
from { -webkit-transform: translate(0px, -110px); }
|
|
|
|
|
to { -webkit-transform: translate(0px, 590px); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes translate2 {
|
|
|
|
|
from { -webkit-transform: translate(0px, -220px); }
|
|
|
|
|
to { -webkit-transform: translate(0px, 110px); }
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
if (window.testRunner) {
|
|
|
|
|
testRunner.dumpAsText();
|
|
|
|
|
testRunner.waitUntilDone();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function queueBoxForAnimation(elementId, animationClass, callback) {
|
|
|
|
|
var box = document.getElementById(elementId);
|
|
|
|
|
if (callback)
|
|
|
|
|
box.addEventListener('webkitAnimationStart', callback, false);
|
|
|
|
|
box.classList.add(animationClass);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function runTest()
|
|
|
|
|
{
|
|
|
|
|
queueBoxForAnimation("to-animate1", "animating1");
|
|
|
|
|
queueBoxForAnimation("to-animate2", "animating2", animationStarted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function animationStarted()
|
|
|
|
|
{
|
|
|
|
|
if (window.testRunner) {
|
|
|
|
|
var layersElement = document.getElementById('layers');
|
|
|
|
|
// Make sure we don't include the #layers element in the tree. The text size
|
|
|
|
|
// might differ between platforms.
|
|
|
|
|
layersElement.style.display = "none";
|
|
|
|
|
layersElement.innerText = window.internals.layerTreeAsText(document);
|
|
|
|
|
layersElement.style.display = "block";
|
|
|
|
|
testRunner.notifyDone();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
window.addEventListener('load', runTest, false);
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<!-- The test checks that composited layers are created when needed to display elements in front of animated layers.
|
|
|
|
|
There are two animations going at the same time. The second animation is inside a clipping
|
|
|
|
|
container (white background with black border). The first animation should display behind the clipping container.
|
|
|
|
|
For both animations, the following should be true:
|
|
|
|
|
1. Yellow box should display in front of the blue box.
|
|
|
|
|
2. Gray boxes should display behind the blue box.
|
|
|
|
|
-->
|
|
|
|
|
<!-- This div will not get a layer -->
|
|
|
|
|
<div class="box gray"></div>
|
|
|
|
|
<div id="to-animate1" class="box"></div>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<!-- This div will be forced to get a layer -->
|
|
|
|
|
<div class="box gray force-layer"></div>
|
|
|
|
|
<!-- This div will not get a layer -->
|
|
|
|
|
<div class="box gray"></div>
|
|
|
|
|
<div id="to-animate2" class="box"></div>
|
|
|
|
|
<!-- This div will get a layer -->
|
|
|
|
|
<div class="box yellow"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- This div will also get a layer -->
|
|
|
|
|
<div class="box yellow"></div>
|
|
|
|
|
<pre id="layers">Layer tree goes here in DRT</pre>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|