Bug 456219. Fix clipping to padding-rect with rounded corners. r+sr=roc

--HG--
extra : rebase_source : ec710fd6f83332fcecaa926b1f0ec07e4d2e3635

layout/base/nsCSSRendering.cpp

@@ -278,14 +278,6 @@ static void DrawBorderImageSide(gfxContext *aThebesContext,
                                 PRUint8 aHFillType,
                                 PRUint8 aVFillType);
 
-static void PaintBackgroundColor(nsPresContext* aPresContext,
-                                 nsIRenderingContext& aRenderingContext,
-                                 nsIFrame* aForFrame,
-                                 const nsRect& aBgClipArea,
-                                 const nsStyleBackground& aColor,
-                                 const nsStyleBorder& aBorder,
-                                 PRBool aCanPaintNonWhite);
-
 static nscolor MakeBevelColor(PRIntn whichSide, PRUint8 style,
                               nscolor aBackgroundColor,
                               nscolor aBorderColor);
@@ -1247,8 +1239,7 @@ IsSolidBorderEdge(const nsStyleBorder& aBorder, PRUint32 aSide)
 static PRBool
 IsSolidBorder(const nsStyleBorder& aBorder)
 {
-  if (aBorder.mBorderColors ||
-      nsLayoutUtils::HasNonZeroCorner(aBorder.mBorderRadius))
+  if (aBorder.mBorderColors)
     return PR_FALSE;
   for (PRUint32 i = 0; i < 4; ++i) {
     if (!IsSolidBorderEdge(aBorder, i))
@@ -1271,20 +1262,14 @@ nsCSSRendering::PaintBackgroundWithSC(nsPresContext* aPresContext,
   NS_PRECONDITION(aForFrame,
                   "Frame is expected to be provided to PaintBackground");
 
-  PRBool canDrawBackgroundImage = PR_TRUE;
-  PRBool canDrawBackgroundColor = PR_TRUE;
-
-  if (aUsePrintSettings) {
-    canDrawBackgroundImage = aPresContext->GetBackgroundImageDraw();
-    canDrawBackgroundColor = aPresContext->GetBackgroundColorDraw();
-  }
-
   // Check to see if we have an appearance defined.  If so, we let the theme
   // renderer draw the background and bail out.
+  // XXXzw this ignores aBGClipRect.
   const nsStyleDisplay* displayData = aForFrame->GetStyleDisplay();
   if (displayData->mAppearance) {
     nsITheme *theme = aPresContext->GetTheme();
-    if (theme && theme->ThemeSupportsWidget(aPresContext, aForFrame, displayData->mAppearance)) {
+    if (theme && theme->ThemeSupportsWidget(aPresContext, aForFrame,
+                                            displayData->mAppearance)) {
       nsRect dirty;
       dirty.IntersectRect(aDirtyRect, aBorderArea);
       theme->DrawWidgetBackground(&aRenderingContext, aForFrame, 
@@ -1293,42 +1278,153 @@ nsCSSRendering::PaintBackgroundWithSC(nsPresContext* aPresContext,
     }
   }
 
-  // Same coordinate space as aBorderArea
-  nsRect bgClipArea;
-  if (aBGClipRect) {
-    bgClipArea = *aBGClipRect;
+  // Determine whether we are drawing background images and/or
+  // background colors.
+  PRBool drawBackgroundImage = PR_TRUE;
+  PRBool drawBackgroundColor = PR_TRUE;
+
+  if (aUsePrintSettings) {
+    drawBackgroundImage = aPresContext->GetBackgroundImageDraw();
+    drawBackgroundColor = aPresContext->GetBackgroundColorDraw();
   }
-  else {
-    // The background is rendered over the 'background-clip' area.
-    bgClipArea = aBorderArea;
-    // If the border is solid, then clip the background to the padding-box
-    // so that we don't draw unnecessary tiles.
-    if (aColor.mBackgroundClip != NS_STYLE_BG_CLIP_BORDER ||
-        IsSolidBorder(aBorder)) {
-      nsMargin border = aForFrame->GetUsedBorder();
-      aForFrame->ApplySkipSides(border);
-      bgClipArea.Deflate(border);
+
+  if ((aColor.mBackgroundFlags & NS_STYLE_BG_IMAGE_NONE) ||
+      !aColor.mBackgroundImage) {
+    NS_ASSERTION((aColor.mBackgroundFlags & NS_STYLE_BG_IMAGE_NONE) &&
+                 !aColor.mBackgroundImage, "background flags/image mismatch");
+    drawBackgroundImage = PR_FALSE;
+  }
+
+  // If GetBackgroundColorDraw() is false, we are still expected to
+  // draw color in the background of any frame that's not completely
+  // transparent, but we are expected to use white instead of whatever
+  // color was specified.
+  nscolor bgColor;
+  if (drawBackgroundColor) {
+    bgColor = aColor.mBackgroundColor;
+    if (NS_GET_A(bgColor) == 0)
+      drawBackgroundColor = PR_FALSE;
+  } else {
+    bgColor = NS_RGB(255, 255, 255);
+    if (drawBackgroundImage || NS_GET_A(aColor.mBackgroundColor) > 0)
+      drawBackgroundColor = PR_TRUE;
+  }
+
+  // At this point, drawBackgroundImage and drawBackgroundColor are
+  // true if and only if we are actually supposed to paint an image or
+  // color into aDirtyRect, respectively.
+  if (!drawBackgroundImage && !drawBackgroundColor)
+    return;
+
+  // Compute the outermost boundary of the area that might be painted.
+  gfxContext *ctx = aRenderingContext.ThebesContext();
+  nscoord appUnitsPerPixel = aPresContext->AppUnitsPerDevPixel();
+
+  // Same coordinate space as aBorderArea & aBGClipRect
+  nsRect bgArea;
+  gfxCornerSizes bgRadii;
+  PRBool haveRoundedCorners;
+  PRBool radiiAreOuter = PR_TRUE;
+  {
+    nscoord radii[8];
+    haveRoundedCorners =
+      GetBorderRadiusTwips(aBorder.mBorderRadius, aForFrame->GetSize().width,
+                           radii);
+    if (haveRoundedCorners)
+      ComputePixelRadii(radii, aBorderArea, aForFrame->GetSkipSides(),
+                        appUnitsPerPixel, &bgRadii);
+  }
+  
+  // The background is rendered over the 'background-clip' area,
+  // which is normally equal to the border area but may be reduced
+  // to the padding area by CSS.  Also, if the border is solid, we
+  // don't need to draw outside the padding area.  In either case,
+  // if the borders are rounded, make sure we use the same inner
+  // radii as the border code will.
+  bgArea = aBorderArea;
+  if (aColor.mBackgroundClip != NS_STYLE_BG_CLIP_BORDER ||
+      IsSolidBorder(aBorder)) {
+    nsMargin border = aForFrame->GetUsedBorder();
+    aForFrame->ApplySkipSides(border);
+    bgArea.Deflate(border);
+    if (haveRoundedCorners) {
+      gfxCornerSizes outerRadii = bgRadii;
+      gfxFloat borderSizes[4] = {
+        border.top / appUnitsPerPixel, border.right / appUnitsPerPixel,
+        border.bottom / appUnitsPerPixel, border.left / appUnitsPerPixel
+      };
+      nsCSSBorderRenderer::ComputeInnerRadii(outerRadii, borderSizes,
+                                             &bgRadii);
+      radiiAreOuter = PR_FALSE;
     }
   }
 
-  gfxContext *ctx = aRenderingContext.ThebesContext();
+  // The 'bgClipArea' (used only by the image tiling logic, far below)
+  // is the caller-provided aBGClipRect if any, or else the bgArea
+  // computed above.  (Arguably it should be the intersection, but
+  // that breaks the table painter -- in particular, honoring the
+  // bgArea when we have aBGClipRect breaks reftests/bugs/403429-1[ab].)
+  // The dirtyRect is the intersection of that rectangle with the
+  // caller-provided aDirtyRect.  If the dirtyRect is empty there is
+  // nothing to draw.
+
+  nsRect bgClipArea;
+  if (aBGClipRect)
+    bgClipArea = *aBGClipRect;
+  else
+    bgClipArea = bgArea;
 
-  // The actual dirty rect is the intersection of the 'background-clip'
-  // area and the dirty rect we were given
   nsRect dirtyRect;
-  if (!dirtyRect.IntersectRect(bgClipArea, aDirtyRect)) {
-    // Nothing to paint
+  dirtyRect.IntersectRect(bgClipArea, aDirtyRect);
+
+  if (dirtyRect.IsEmpty())
+    return;
+
+  // Compute the Thebes equivalent of the dirtyRect.
+  gfxRect dirtyRectGfx(RectToGfxRect(dirtyRect, appUnitsPerPixel));
+  dirtyRectGfx.Round();
+  dirtyRectGfx.Condition();
+  if (dirtyRectGfx.IsEmpty()) {
+    NS_WARNING("converted dirty rect should not be empty");
     return;
   }
 
-  // if there is no background image or background images are turned off, try a color.
-  if (!aColor.mBackgroundImage || !canDrawBackgroundImage) {
-    PaintBackgroundColor(aPresContext, aRenderingContext, aForFrame, bgClipArea,
-                         aColor, aBorder, canDrawBackgroundColor);
-    return;
+  // If we have rounded corners, clip all subsequent drawing to the
+  // rounded rectangle defined by bgArea and bgRadii (we don't know
+  // whether the rounded corners intrude on the dirtyRect or not).
+  // Do not do this if we have a caller-provided clip rect --
+  // as above with bgArea, arguably a bug, but table painting seems
+  // to depend on it.
+
+  gfxContextAutoSaveRestore autoSR;
+  if (haveRoundedCorners && !aBGClipRect) {
+    gfxRect bgAreaGfx(RectToGfxRect(bgArea, appUnitsPerPixel));
+    bgAreaGfx.Round();
+    bgAreaGfx.Condition();
+    if (bgAreaGfx.IsEmpty()) {
+      NS_WARNING("converted background area should not be empty");
+      return;
+    }
+
+    autoSR.SetContext(ctx);
+    ctx->NewPath();
+    ctx->RoundedRectangle(bgAreaGfx, bgRadii, radiiAreOuter);
+    ctx->Clip();
   }
 
-  // We have a background image
+  // If we might be using a background color, go ahead and set it now.
+  if (drawBackgroundColor)
+    ctx->SetColor(gfxRGBA(bgColor));
+
+  // If there is no background image, draw a color.  (If there is
+  // neither a background image nor a color, we wouldn't have gotten
+  // this far.)
+  if (!drawBackgroundImage) {
+    ctx->NewPath();
+    ctx->Rectangle(dirtyRectGfx);
+    ctx->Fill();
+    return;
+  }
 
   // Lookup the image
   imgIRequest *req = aPresContext->LoadImage(aColor.mBackgroundImage,
@@ -1338,9 +1434,15 @@ nsCSSRendering::PaintBackgroundWithSC(nsPresContext* aPresContext,
   if (req)
     req->GetImageStatus(&status);
 
-  if (!req || !(status & imgIRequest::STATUS_FRAME_COMPLETE) || !(status & imgIRequest::STATUS_SIZE_AVAILABLE)) {
-    PaintBackgroundColor(aPresContext, aRenderingContext, aForFrame, bgClipArea,
-                         aColor, aBorder, canDrawBackgroundColor);
+  // While waiting for the image, draw a color, if any.
+  if (!req ||
+      !(status & imgIRequest::STATUS_FRAME_COMPLETE) ||
+      !(status & imgIRequest::STATUS_SIZE_AVAILABLE)) {
+    if (drawBackgroundColor) {
+      ctx->NewPath();
+      ctx->Rectangle(dirtyRectGfx);
+      ctx->Fill();
+    }
     return;
   }
 
@@ -1403,46 +1505,50 @@ nsCSSRendering::PaintBackgroundWithSC(nsPresContext* aPresContext,
     }
   }
 
-  PRBool  needBackgroundColor = NS_GET_A(aColor.mBackgroundColor) > 0;
   PRIntn  repeat = aColor.mBackgroundRepeat;
-
   switch (repeat) {
     case NS_STYLE_BG_REPEAT_X:
       break;
     case NS_STYLE_BG_REPEAT_Y:
       break;
     case NS_STYLE_BG_REPEAT_XY:
-      if (needBackgroundColor) {
-        // If the image is completely opaque, we do not need to paint the
-        // background color
+      if (drawBackgroundColor) {
+        // If the image is completely opaque, we may not need to paint
+        // the background color.
         nsCOMPtr<gfxIImageFrame> gfxImgFrame;
         image->GetCurrentFrame(getter_AddRefs(gfxImgFrame));
         if (gfxImgFrame) {
-          gfxImgFrame->GetNeedsBackground(&needBackgroundColor);
-
-          /* check for tiling of a image where frame smaller than container */
-          nsSize iSize;
-          image->GetWidth(&iSize.width);
-          image->GetHeight(&iSize.height);
-          nsRect iframeRect;
-          gfxImgFrame->GetRect(iframeRect);
-          if (iSize.width != iframeRect.width ||
-              iSize.height != iframeRect.height) {
-            needBackgroundColor = PR_TRUE;
+          gfxImgFrame->GetNeedsBackground(&drawBackgroundColor);
+          if (!drawBackgroundColor) {
+            // If the current frame is smaller than its container, we
+            // need to paint the background color even if the frame
+            // itself is opaque.
+            nsSize iSize;
+            image->GetWidth(&iSize.width);
+            image->GetHeight(&iSize.height);
+            nsRect iframeRect;
+            gfxImgFrame->GetRect(iframeRect);
+            if (iSize.width != iframeRect.width ||
+                iSize.height != iframeRect.height) {
+              drawBackgroundColor = PR_TRUE;
+            }
           }
         }
       }
       break;
     case NS_STYLE_BG_REPEAT_OFF:
     default:
-      NS_ASSERTION(repeat == NS_STYLE_BG_REPEAT_OFF, "unknown background-repeat value");
+      NS_ASSERTION(repeat == NS_STYLE_BG_REPEAT_OFF,
+                   "unknown background-repeat value");
       break;
   }
 
-  // The background color is rendered over the 'background-clip' area
-  if (needBackgroundColor) {
-    PaintBackgroundColor(aPresContext, aRenderingContext, aForFrame, bgClipArea,
-                         aColor, aBorder, canDrawBackgroundColor);
+  // The background color is rendered over the entire dirty area,
+  // even if the image isn't.
+  if (drawBackgroundColor) {
+    ctx->NewPath();
+    ctx->Rectangle(dirtyRectGfx);
+    ctx->Fill();
   }
 
   // Compute the anchor point.
@@ -1499,28 +1605,6 @@ nsCSSRendering::PaintBackgroundWithSC(nsPresContext* aPresContext,
     anchor += bgOriginRect.TopLeft();
   }
 
-  ctx->Save();
-
-  nscoord borderRadii[8];
-  PRBool haveRadius = GetBorderRadiusTwips(aBorder.mBorderRadius,
-                                           aForFrame->GetSize().width,
-                                           borderRadii);
-  if (haveRadius) {
-    nscoord appUnitsPerPixel = aPresContext->DevPixelsToAppUnits(1);
-    gfxCornerSizes radii;
-    ComputePixelRadii(borderRadii, bgClipArea,
-                      aForFrame ? aForFrame->GetSkipSides() : 0,
-                      appUnitsPerPixel, &radii);
-
-    gfxRect oRect(RectToGfxRect(bgClipArea, appUnitsPerPixel));
-    oRect.Round();
-    oRect.Condition();
-
-    ctx->NewPath();
-    ctx->RoundedRectangle(oRect, radii);
-    ctx->Clip();
-  }
-
   nsRect destArea(imageTopLeft + aBorderArea.TopLeft(), imageSize);
   nsRect fillArea = destArea;
   if (repeat & NS_STYLE_BG_REPEAT_X) {
@@ -1535,8 +1619,6 @@ nsCSSRendering::PaintBackgroundWithSC(nsPresContext* aPresContext,
 
   nsLayoutUtils::DrawImage(&aRenderingContext, image,
       destArea, fillArea, anchor + aBorderArea.TopLeft(), dirtyRect);
-
-  ctx->Restore();
 }
 
 static void
@@ -1930,78 +2012,6 @@ DrawBorderImageSide(gfxContext *aThebesContext,
   aThebesContext->Restore();
 }
 
-static void
-PaintBackgroundColor(nsPresContext* aPresContext,
-                     nsIRenderingContext& aRenderingContext,
-                     nsIFrame* aForFrame,
-                     const nsRect& aBgClipArea,
-                     const nsStyleBackground& aColor,
-                     const nsStyleBorder& aBorder,
-                     PRBool aCanPaintNonWhite)
-{
-  // If we're only allowed to paint white, then don't bail out on transparent
-  // color if we're not completely transparent.  See the corresponding check
-  // for whether we're allowed to paint background images in
-  // PaintBackgroundWithSC before the first call to PaintBackgroundColor.
-  if (NS_GET_A(aColor.mBackgroundColor) == 0 &&
-      (aCanPaintNonWhite || aColor.IsTransparent())) {
-    // nothing to paint
-    return;
-  }
-
-  nscolor color = aColor.mBackgroundColor;
-  if (!aCanPaintNonWhite) {
-    color = NS_RGB(255, 255, 255);
-  }
-  aRenderingContext.SetColor(color);
-
-  if (!nsLayoutUtils::HasNonZeroCorner(aBorder.mBorderRadius)) {
-    aRenderingContext.FillRect(aBgClipArea);
-    return;
-  }
-
-  gfxContext *ctx = aRenderingContext.ThebesContext();
-
-  // needed for our border thickness
-  nscoord appUnitsPerPixel = aPresContext->AppUnitsPerDevPixel();
-
-  nscoord borderRadii[8];
-  GetBorderRadiusTwips(aBorder.mBorderRadius, aForFrame->GetSize().width,
-                       borderRadii);
-
-  // the bgClipArea is the outside
-  gfxRect oRect(RectToGfxRect(aBgClipArea, appUnitsPerPixel));
-  oRect.Round();
-  oRect.Condition();
-  if (oRect.IsEmpty())
-    return;
-
-  // convert the radii
-  gfxCornerSizes radii;
-  ComputePixelRadii(borderRadii, aBgClipArea,
-                    aForFrame ? aForFrame->GetSkipSides() : 0,
-                    appUnitsPerPixel, &radii);
-
-  // Add 1.0 to any border radii; if we don't, the border and background
-  // curves will combine to have fringing at the rounded corners.  Since
-  // alpha is used for coverage, we have problems because the border and
-  // background should have identical coverage, and the border should
-  // overlay the background exactly.  The way to avoid this is by using
-  // a supersampling scheme, but we don't have the mechanism in place to do
-  // this.  So, this will do for now.
-  for (int i = 0; i < 4; i++) {
-    if (radii[i].width > 0.0)
-      radii[i].width += 1.0;
-    if (radii[i].height > 0.0)
-      radii[i].height += 1.0;
-  }
-
-  ctx->NewPath();
-  ctx->RoundedRectangle(oRect, radii);
-  ctx->Fill();
-}
-
-
 // Begin table border-collapsing section
 // These functions were written to not disrupt the normal ones and yet satisfy some additional requirements
 // At some point, all functions should be unified to include the additional functionality that these provide

layout/base/nsCSSRenderingBorders.cpp

@@ -100,10 +100,6 @@ static void ComputeBorderCornerDimensions(const gfxRect& aOuterRect,
                                           const gfxCornerSizes& aRadii,
                                           gfxCornerSizes *aDimsResult);
 
-static void ComputeInnerRadii(const gfxCornerSizes& radii,
-                              const gfxFloat *borderSizes,
-                              gfxCornerSizes *innerRadii);
-
 // given a side index, get the previous and next side index
 #define NEXT_SIDE(_s) (((_s) + 1) & 3)
 #define PREV_SIDE(_s) (((_s) + 3) & 3)
@@ -201,10 +197,10 @@ nsCSSBorderRenderer::nsCSSBorderRenderer(PRInt32 aAppUnitsPerPixel,
   mNoBorderRadius = AllCornersZeroSize(mBorderRadii);
 }
 
-void
-ComputeInnerRadii(const gfxCornerSizes& aRadii,
-                  const gfxFloat *aBorderSizes,
-                  gfxCornerSizes *aInnerRadiiRet)
+/* static */ void
+nsCSSBorderRenderer::ComputeInnerRadii(const gfxCornerSizes& aRadii,
+                                       const gfxFloat *aBorderSizes,
+                                       gfxCornerSizes *aInnerRadiiRet)
 {
   gfxCornerSizes& iRadii = *aInnerRadiiRet;
 

layout/base/nsCSSRenderingBorders.h

@@ -200,6 +200,11 @@ struct nsCSSBorderRenderer {
 
   // draw the entire border
   void DrawBorders ();
+
+  // utility function used for background painting as well as borders
+  static void ComputeInnerRadii(const gfxCornerSizes& aRadii,
+                                const gfxFloat *aBorderSizes,
+                                gfxCornerSizes *aInnerRadiiRet);
 };
 
 #ifdef DEBUG_NEW_BORDERS

layout/reftests/bugs/456219-1-ref.html

@@ -0,0 +1,80 @@
+<!doctype html>
+<html><head>
+<title>background-clip interaction with border-radius</title>
+<style>
+/* If you fix bug #466572, you can substantially simplify this test
+   case. */
+
+table { table-layout: fixed; width: 550px }
+td { width: 110px; height: 110px; text-align: center }
+div.i {
+   z-index: 0;
+   width: 70px;
+   height: 70px;
+   border-style: solid;
+   border-color: transparent;
+   background-color: green;
+}
+.rA div.i { -moz-border-radius: 10px; }
+.rB div.i { -moz-border-radius: 20px; }
+.rC div.i { -moz-border-radius: 30px; }
+.rD div.i { -moz-border-radius: 40px; }
+.rE div.i { -moz-border-radius: 50px; }
+
+.wA div.i { border-width: 10px 10px 10px 10px; }
+.wB div.i { border-width: 20px 20px 20px 20px; }
+.wC div.i { border-width: 5px 20px 5px 20px; }
+.wD div.i { border-width: 20px 20px 5px 5px; }
+.wE div.i { border-width: 5px 10px 15px 20px; }
+
+div.o {
+  display: inline-block;
+  position: relative;
+}
+img {
+  position: absolute; top: 0; left: 0;
+  z-index: 1;
+}
+</style>
+</head><body>
+<table>
+<tr class="wA">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wArA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wArB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wArC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wArD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wArE.png"></div></td>
+</tr>
+<tr class="wB">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrE.png"></div></td>
+</tr>
+<tr class="wC">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrE.png"></div></td>
+</tr>
+<tr class="wD">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrE.png"></div></td>
+</tr>
+<tr class="wE">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wErA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wErB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wErC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wErD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wErE.png"></div></td>
+</tr>
+</table>
+
+<p>Inside each green shape, there should be no white.</p>
+
+</body></html>

layout/reftests/bugs/456219-1a.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html><head>
+<title>background-clip interaction with border-radius</title>
+<style>
+/* If you fix bug #466572, you can substantially simplify this test
+   case. */
+
+table { table-layout: fixed; width: 550px }
+td { width: 110px; height: 110px; text-align: center }
+div.i {
+   z-index: 0;
+   width: 70px;
+   height: 70px;
+   border-style: solid;
+   border-color: green;
+   -moz-background-clip: padding;
+   background-color: green;
+}
+.rA div.i { -moz-border-radius: 10px; }
+.rB div.i { -moz-border-radius: 20px; }
+.rC div.i { -moz-border-radius: 30px; }
+.rD div.i { -moz-border-radius: 40px; }
+.rE div.i { -moz-border-radius: 50px; }
+
+.wA div.i { border-width: 10px 10px 10px 10px; }
+.wB div.i { border-width: 20px 20px 20px 20px; }
+.wC div.i { border-width: 5px 20px 5px 20px; }
+.wD div.i { border-width: 20px 20px 5px 5px; }
+.wE div.i { border-width: 5px 10px 15px 20px; }
+
+div.o {
+  display: inline-block;
+  position: relative;
+}
+img {
+  position: absolute; top: 0; left: 0;
+  z-index: 1;
+}
+</style>
+</head><body>
+<table>
+<tr class="wA">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wArA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wArB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wArC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wArD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wArE.png"></div></td>
+</tr>
+<tr class="wB">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrE.png"></div></td>
+</tr>
+<tr class="wC">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrE.png"></div></td>
+</tr>
+<tr class="wD">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrE.png"></div></td>
+</tr>
+<tr class="wE">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wErA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wErB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wErC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wErD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wErE.png"></div></td>
+</tr>
+</table>
+
+<p>Inside each green shape, there should be no white.</p>
+
+</body></html>

layout/reftests/bugs/456219-1b.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html><head>
+<title>background-clip interaction with border-radius</title>
+<style>
+/* If you fix bug #466572, you can substantially simplify this test
+   case. */
+
+table { table-layout: fixed; width: 550px }
+td { width: 110px; height: 110px; text-align: center }
+div.i {
+   z-index: 0;
+   width: 70px;
+   height: 70px;
+   border-style: solid;
+   border-color: green;
+   -moz-background-clip: padding;
+   background-image: url("data:image/gif;base64,R0lGODdhAQABAPAAAACAAAAAACwAAAAAAQABAAACAkQBADs=");
+}
+.rA div.i { -moz-border-radius: 10px; }
+.rB div.i { -moz-border-radius: 20px; }
+.rC div.i { -moz-border-radius: 30px; }
+.rD div.i { -moz-border-radius: 40px; }
+.rE div.i { -moz-border-radius: 50px; }
+
+.wA div.i { border-width: 10px 10px 10px 10px; }
+.wB div.i { border-width: 20px 20px 20px 20px; }
+.wC div.i { border-width: 5px 20px 5px 20px; }
+.wD div.i { border-width: 20px 20px 5px 5px; }
+.wE div.i { border-width: 5px 10px 15px 20px; }
+
+div.o {
+  display: inline-block;
+  position: relative;
+}
+img {
+  position: absolute; top: 0; left: 0;
+  z-index: 1;
+}
+</style>
+</head><body>
+<table>
+<tr class="wA">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wArA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wArB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wArC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wArD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wArE.png"></div></td>
+</tr>
+<tr class="wB">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrE.png"></div></td>
+</tr>
+<tr class="wC">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrE.png"></div></td>
+</tr>
+<tr class="wD">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrE.png"></div></td>
+</tr>
+<tr class="wE">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wErA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wErB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wErC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wErD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wErE.png"></div></td>
+</tr>
+</table>
+
+<p>Inside each green shape, there should be no white.</p>
+
+</body></html>

layout/reftests/bugs/456219-1c.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html><head>
+<title>background-clip interaction with border-radius</title>
+<style>
+/* If you fix bug #466572, you can substantially simplify this test
+   case. */
+
+table { table-layout: fixed; width: 550px }
+td { width: 110px; height: 110px; text-align: center }
+div.i {
+   z-index: 0;
+   width: 70px;
+   height: 70px;
+   border-style: solid;
+   border-color: green;
+   -moz-background-clip: padding;
+   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaAQMAAAACZtNBAAAAA1BMVEUAgACc+aWRAAAAEklEQVQYGWNgGAWjYBSMgsECAASSAAFZGYSDAAAAAElFTkSuQmCC");
+}
+.rA div.i { -moz-border-radius: 10px; }
+.rB div.i { -moz-border-radius: 20px; }
+.rC div.i { -moz-border-radius: 30px; }
+.rD div.i { -moz-border-radius: 40px; }
+.rE div.i { -moz-border-radius: 50px; }
+
+.wA div.i { border-width: 10px 10px 10px 10px; }
+.wB div.i { border-width: 20px 20px 20px 20px; }
+.wC div.i { border-width: 5px 20px 5px 20px; }
+.wD div.i { border-width: 20px 20px 5px 5px; }
+.wE div.i { border-width: 5px 10px 15px 20px; }
+
+div.o {
+  display: inline-block;
+  position: relative;
+}
+img {
+  position: absolute; top: 0; left: 0;
+  z-index: 1;
+}
+
+</style>
+</head><body>
+<table>
+<tr class="wA">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wArA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wArB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wArC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wArD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wArE.png"></div></td>
+</tr>
+<tr class="wB">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wBrE.png"></div></td>
+</tr>
+<tr class="wC">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wCrE.png"></div></td>
+</tr>
+<tr class="wD">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wDrE.png"></div></td>
+</tr>
+<tr class="wE">
+  <td class="rA"><div class="o"><div class="i"></div><img src="456219-1-mask-wErA.png"></div></td>
+  <td class="rB"><div class="o"><div class="i"></div><img src="456219-1-mask-wErB.png"></div></td>
+  <td class="rC"><div class="o"><div class="i"></div><img src="456219-1-mask-wErC.png"></div></td>
+  <td class="rD"><div class="o"><div class="i"></div><img src="456219-1-mask-wErD.png"></div></td>
+  <td class="rE"><div class="o"><div class="i"></div><img src="456219-1-mask-wErE.png"></div></td>
+</tr>
+</table>
+
+<p>Inside each green shape, there should be no white.</p>
+</body></html>

layout/reftests/bugs/456219-2-ref.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title></title>
+<style type="text/css">
+/* If you fix bug #466572, you can remove the IMG
+   and related styling from this test case.  */
+body { background: white; color: black; margin: 0 }
+div {
+  background: aqua;
+  color: black;
+  height: 75px;
+  width: 75px;
+  padding: 15px;
+  border: 20px solid;
+  -moz-border-radius: 25px;
+  border-color: transparent;
+  -moz-background-clip: padding;
+}
+img {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+</style>
+</head>
+<body>
+<div></div>
+<img src="456219-2-mask.png">
+</body>
+</html>

layout/reftests/bugs/456219-2.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title></title>
+<style type="text/css">
+/* If you fix bug #466572, you can remove the IMG
+   and related styling from this test case.  */
+body { background: white; color: black; margin: 0 }
+div {
+  background: aqua;
+  color: black;
+  height: 75px;
+  width: 75px;
+  padding: 15px;
+  border: 20px solid;
+  -moz-border-radius: 25px;
+  border-color: white;
+}
+img {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+</style>
+</head>
+<body>
+<div></div>
+<img src="456219-2-mask.png">
+</body>
+</html>

layout/reftests/bugs/reftest.list

@@ -968,7 +968,11 @@ random == 445004-1.html 445004-1-ref.html # bug 472268
 == 455171-5.html 455171-5-ref.html
 == 455280-1.xhtml 455280-1-ref.xhtml
 == 455826-1.html 455826-1-ref.html
-fails-if(MOZ_WIDGET_TOOLKIT=="cocoa") == 456147.xul 456147-ref.html # bug 456147, but not caused by it
+fails-if(MOZ_WIDGET_TOOLKIT=="cocoa") == 456147.xul 456147-ref.html # bug 458047
+== 456219-1a.html 456219-1-ref.html
+== 456219-1b.html 456219-1-ref.html
+== 456219-1c.html 456219-1-ref.html
+== 456219-2.html 456219-2-ref.html
 == 456330-1.gif 456330-1-ref.png
 == 456484-1.html 456484-1-ref.html
 == 457398-1.html 457398-1-ref.html