зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1026450 - Don't let clipped animated transforms trigger layerization of elements outside the clip. r=roc
--HG-- extra : rebase_source : 2e260272a4d6aa4271d4e3231d7da3dd224b838c
This commit is contained in:
Родитель
9cc4d44872
Коммит
32deb51be9
|
@ -2573,14 +2573,24 @@ ContainerState::ProcessDisplayItems(const nsDisplayList& aList,
|
|||
ThebesLayerData* data = GetTopThebesLayerData();
|
||||
if (data) {
|
||||
// Prerendered transform items can be updated without layer building
|
||||
// (async animations or an empty transaction), so we treat all other
|
||||
// content as being above this so that the transformed layer can correctly
|
||||
// move behind other content.
|
||||
// (async animations or an empty transaction), so we need to put items
|
||||
// that the transform item can potentially move under into a layer
|
||||
// above this item.
|
||||
if (item->GetType() == nsDisplayItem::TYPE_TRANSFORM &&
|
||||
nsDisplayTransform::ShouldPrerenderTransformedContent(mBuilder,
|
||||
item->Frame(),
|
||||
false)) {
|
||||
if (!itemClip.HasClip()) {
|
||||
// The transform item can move anywhere, treat all other content
|
||||
// as being above this item.
|
||||
data->SetAllDrawingAbove();
|
||||
} else {
|
||||
// The transform can't escape from the clip rect, and the clip
|
||||
// rect can't change without new layer building. Treat all content
|
||||
// that intersects the clip rect as being above this item.
|
||||
data->AddVisibleAboveRegion(clipRect);
|
||||
data->AddDrawAboveRegion(clipRect);
|
||||
}
|
||||
} else {
|
||||
data->AddVisibleAboveRegion(itemVisibleRect);
|
||||
|
||||
|
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>The green box shouldn't be invalidated when the blue box starts to move.</title>
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#clip {
|
||||
border: 1px solid black;
|
||||
margin: 50px;
|
||||
overflow: hidden;
|
||||
height: 200px;
|
||||
width: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#animatedTransform {
|
||||
border: 1px solid blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
transition: transform ease-in-out .4s;
|
||||
}
|
||||
|
||||
#clip:hover > #animatedTransform,
|
||||
#animatedTransform.animate {
|
||||
transform: translateX(200px);
|
||||
}
|
||||
|
||||
#aboveTransform {
|
||||
position: relative;
|
||||
margin: 50px 100px;
|
||||
border: 1px solid lime;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="clip">
|
||||
<div id="animatedTransform"></div>
|
||||
</div>
|
||||
|
||||
<div id="aboveTransform" class="reftest-no-paint"></div>
|
||||
|
||||
<script>
|
||||
|
||||
function doTest() {
|
||||
document.getElementById("animatedTransform").className = "animate";
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
document.addEventListener("MozReftestInvalidate", doTest, false);
|
||||
|
||||
</script>
|
|
@ -46,3 +46,4 @@ pref(layout.animated-image-layers.enabled,true) == test-animated-image-layers-ba
|
|||
!= transform-floating-point-invalidation.html?reverse about:blank
|
||||
!= nudge-to-integer-invalidation.html about:blank
|
||||
!= nudge-to-integer-invalidation.html?reverse about:blank
|
||||
!= clipped-animated-transform-1.html about:blank
|
||||
|
|
Загрузка…
Ссылка в новой задаче