Bug 846144 - Don't optimize backgrounds to an ImageLayer if they have border-radius clipping. r=roc

This commit is contained in:
Matt Woodrow 2013-02-28 21:49:30 +13:00
parent f5a5389bec
commit 1afe9df9d0
4 changed files with 57 additions and 0 deletions

View File

@ -1792,6 +1792,14 @@ nsDisplayBackgroundImage::TryOptimizeToImageLayer(LayerManager* aManager,
nsRect borderArea = nsRect(ToReferenceFrame(), mFrame->GetSize()); nsRect borderArea = nsRect(ToReferenceFrame(), mFrame->GetSize());
const nsStyleBackground::Layer &layer = mBackgroundStyle->mLayers[mLayer]; const nsStyleBackground::Layer &layer = mBackgroundStyle->mLayers[mLayer];
if (layer.mClip != NS_STYLE_BG_CLIP_BORDER) {
return false;
}
nscoord radii[8];
if (mFrame->GetBorderRadii(radii)) {
return false;
}
nsBackgroundLayerState state = nsBackgroundLayerState state =
nsCSSRendering::PrepareBackgroundLayer(presContext, nsCSSRendering::PrepareBackgroundLayer(presContext,
mFrame, mFrame,

View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Border radius issue demo</title>
<style type="text/css">
.testClass {
width: 100px;
height: 100px;
margin: 20px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAADdJREFUWEftzTERACAMADH8VAH+hRUXz5K77Dl39gtxRpwRZ8QZcUacEWfEGXFGnBFnxBlxZPYBKVqrOft7R9EAAAAASUVORK5CYII=);
border-radius: 50px;
/* Adding compatibility attributes for cross-browser comparison
Issue repros fine with just transform set. */
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-webkit-transform: translate(0,0)
transform: translate(0,0);
}
</style>
</head>
<body>
<div class="testClass"></div>
</body></html>

View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Border radius issue demo</title>
<style type="text/css">
.testClass {
width: 100px;
height: 100px;
margin: 20px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAADdJREFUWEftzTERACAMADH8VAH+hRUXz5K77Dl39gtxRpwRZ8QZcUacEWfEGXFGnBFnxBlxZPYBKVqrOft7R9EAAAAASUVORK5CYII=);
border-radius: 50px;
background-size: contain;
/* Adding compatibility attributes for cross-browser comparison
Issue repros fine with just transform set. */
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-webkit-transform: translate(0,0)
transform: translate(0,0);
}
</style>
</head>
<body>
<div class="testClass"></div>
</body></html>

View File

@ -1747,3 +1747,4 @@ skip-if(B2G) == 818276-1.html 818276-1-ref.html
== 827577-1b.html 827577-1-ref.html == 827577-1b.html 827577-1-ref.html
== 827799-1.html about:blank == 827799-1.html about:blank
== 836844-1.html 836844-1-ref.html == 836844-1.html 836844-1-ref.html
== 846144-1.html 846144-1-ref.html