Bug 983084 - Correctly handle z-order only changes by removing opacity through a dynamic change; r=dbaron

This commit is contained in:
Ehsan Akhgari 2014-03-13 19:14:35 -04:00
parent 5e2b296e25
commit 52fc6d14cc
7 changed files with 89 additions and 1 deletions

View File

@ -0,0 +1,6 @@
<html>
<body>
<div id="one" style="width:50px; height:50px; background-color:blue; position:absolute"></div>
<div id="two" style="width:500px; height:500px; background-color:red"></div>
</body>
</html>

View File

@ -0,0 +1,17 @@
<html class="reftest-wait">
<head>
<script>
function showItem() {
var el = document.getElementById("two");
getComputedStyle(el).opacity; // flush styles
el.style.opacity = 1;
document.documentElement.removeAttribute("class");
}
window.addEventListener("MozReftestInvalidate", showItem, false);
</script>
</head>
<body>
<div id="one" style="width:50px; height:50px; background-color:blue; position:absolute"></div>
<div id="two" style="width:500px; height:500px; background-color:red; opacity:0.99"></div>
</body>
</html>

View File

@ -0,0 +1,6 @@
<html>
<body>
<div id="one" style="width:50px; height:50px; background-color:blue; position:absolute"></div>
<div id="two" style="width:500px; height:500px; background-color:red; opacity:0.99"></div>
</body>
</html>

View File

@ -0,0 +1,24 @@
<html class="reftest-wait">
<head>
<style>
div {
transition: opacity 0.1s;
}
</style>
<script>
function showItem() {
var el = document.getElementById("two");
getComputedStyle(el).opacity; // flush styles
el.style.opacity = 0.99;
document.addEventListener("transitionend", function() {
document.documentElement.removeAttribute("class");
}, false);
}
window.addEventListener("MozReftestInvalidate", showItem, false);
</script>
</head>
<body>
<div id="one" style="width:50px; height:50px; background-color:blue; position:absolute"></div>
<div id="two" style="width:500px; height:500px; background-color:red; opacity:0.5"></div>
</body>
</html>

View File

@ -0,0 +1,24 @@
<html class="reftest-wait">
<head>
<style>
div {
transition: opacity 0.1s;
}
</style>
<script>
function showItem() {
var el = document.getElementById("two");
getComputedStyle(el).opacity; // flush styles
el.style.opacity = 1;
document.addEventListener("transitionend", function() {
document.documentElement.removeAttribute("class");
}, false);
}
window.addEventListener("MozReftestInvalidate", showItem, false);
</script>
</head>
<body>
<div id="one" style="width:50px; height:50px; background-color:blue; position:absolute"></div>
<div id="two" style="width:500px; height:500px; background-color:red; opacity:0.5"></div>
</body>
</html>

View File

@ -1799,3 +1799,6 @@ pref(layout.css.overflow-clip-box.enabled,true) fuzzy(50,10) == 966992-1.html 96
skip-if(Android) == 966510-1.html 966510-1-ref.html # scrollable elements other than the root probably won't work well on android until bug 776030 is fixed
skip-if(Android) == 966510-2.html 966510-2-ref.html # same as above
== 978911-1.svg 978911-1-ref.svg
== 983084-1.html 983084-1-ref.html
== 983084-2.html 983084-2-ref.html
== 983084-3.html 983084-1-ref.html

View File

@ -2493,7 +2493,15 @@ nsChangeHint nsStyleDisplay::CalcDifference(const nsStyleDisplay& aOther) const
nsChangeHint_RepaintFrame));
if (mOpacity != aOther.mOpacity) {
NS_UpdateHint(hint, nsChangeHint_UpdateOpacityLayer);
// If we're going from the optimized >=0.99 opacity value to 1.0 or back, then
// repaint the frame because DLBI will not catch the invalidation. Otherwise,
// just update the opacity layer.
if ((mOpacity >= 0.99f && mOpacity < 1.0f && aOther.mOpacity == 1.0f) ||
(aOther.mOpacity >= 0.99f && aOther.mOpacity < 1.0f && mOpacity == 1.0f)) {
NS_UpdateHint(hint, nsChangeHint_RepaintFrame);
} else {
NS_UpdateHint(hint, nsChangeHint_UpdateOpacityLayer);
}
}
/* If we've added or removed the transform property, we need to reconstruct the frame to add