Bug 471643: Evaluate vertical percentages in border-radius relative to box height. r=dbaron a2.0=blocking:beta6+
authorZack Weinberg <zweinberg@mozilla.com>
Tue, 31 Aug 2010 12:05:11 -0400
changeset 51770 3d42ac41a283aeb27cc9e00c693a1d3fe9e851bc
parent 51769 79e0084b914abdc039b771404f4dca7f120bfeeb
child 51771 39dbc0948d546c94d3c244dc30b62199bb85542a
push id15424
push userdbaron@mozilla.com
push dateTue, 31 Aug 2010 16:05:34 +0000
treeherdermozilla-central@4edcf6c4cd03 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs471643
milestone2.0b6pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 471643: Evaluate vertical percentages in border-radius relative to box height. r=dbaron a2.0=blocking:beta6+
layout/base/nsCSSRendering.cpp
layout/base/nsCSSRendering.h
layout/base/nsDisplayList.cpp
layout/reftests/border-radius/percent-1-ref.html
layout/reftests/border-radius/percent-1.html
layout/reftests/border-radius/percent-2-ref.html
layout/reftests/border-radius/percent-2.html
layout/reftests/border-radius/percent-3-ref.html
layout/reftests/border-radius/percent-3.html
layout/reftests/border-radius/reftest.list
layout/reftests/box-properties/outline-radius-percent-1-ref.html
layout/reftests/bugs/364861-1-ref.html
--- a/layout/base/nsCSSRendering.cpp
+++ b/layout/base/nsCSSRendering.cpp
@@ -623,18 +623,19 @@ nsCSSRendering::PaintBorderWithStyleBord
 
   border = aStyleBorder.GetComputedBorder();
   if ((0 == border.left) && (0 == border.right) &&
       (0 == border.top) && (0 == border.bottom)) {
     // Empty border area
     return;
   }
 
-  GetBorderRadiusTwips(aStyleBorder.mBorderRadius, aForFrame->GetSize().width,
-                       twipsRadii);
+  nsSize frameSize = aForFrame->GetSize();
+  GetBorderRadiusTwips(aStyleBorder.mBorderRadius, frameSize.width,
+                       frameSize.height, twipsRadii);
 
   // Turn off rendering for all of the zero sized sides
   if (aSkipSides & SIDE_BIT_TOP) border.top = 0;
   if (aSkipSides & SIDE_BIT_RIGHT) border.right = 0;
   if (aSkipSides & SIDE_BIT_BOTTOM) border.bottom = 0;
   if (aSkipSides & SIDE_BIT_LEFT) border.left = 0;
 
   // get the inside and outside parts of the border
@@ -745,17 +746,17 @@ nsCSSRendering::PaintOutline(nsPresConte
   nsIFrame* bgFrame = nsCSSRendering::FindNonTransparentBackgroundFrame
     (aForFrame, PR_FALSE);
   nsStyleContext* bgContext = bgFrame->GetStyleContext();
   nscolor bgColor =
     bgContext->GetVisitedDependentColor(eCSSProperty_background_color);
 
   // get the radius for our outline
   GetBorderRadiusTwips(ourOutline->mOutlineRadius, aBorderArea.width,
-                       twipsRadii);
+                       aBorderArea.height, twipsRadii);
 
   // When the outline property is set on :-moz-anonymous-block or
   // :-moz-anonyomus-positioned-block pseudo-elements, it inherited that
   // outline from the inline that was broken because it contained a
   // block.  In that case, we don't want a really wide outline if the
   // block inside the inline is narrow, so union the actual contents of
   // the anonymous blocks.
   nsIFrame *frameForArea = aForFrame;
@@ -1134,28 +1135,30 @@ nsCSSRendering::FindBackground(nsPresCon
 void
 nsCSSRendering::DidPaint()
 {
   gInlineBGData->Reset();
 }
 
 PRBool
 nsCSSRendering::GetBorderRadiusTwips(const nsStyleCorners& aBorderRadius,
-                                     const nscoord& aFrameWidth,
+                                     const nscoord aFrameWidth,
+                                     const nscoord aFrameHeight,
                                      nscoord aRadii[8])
 {
   PRBool result = PR_FALSE;
 
-  // Convert percentage values
+  // Percentages are relative to whichever side they're on.
   NS_FOR_CSS_HALF_CORNERS(i) {
     const nsStyleCoord c = aBorderRadius.Get(i);
+    nscoord axis = NS_HALF_CORNER_IS_X(i) ? aFrameWidth : aFrameHeight;
 
     switch (c.GetUnit()) {
       case eStyleUnit_Percent:
-        aRadii[i] = (nscoord)(c.GetPercentValue() * aFrameWidth);
+        aRadii[i] = (nscoord)(c.GetPercentValue() * axis);
         break;
 
       case eStyleUnit_Coord:
         aRadii[i] = c.GetCoordValue();
         break;
 
       default:
         NS_NOTREACHED("GetBorderRadiusTwips: bad unit");
@@ -1195,17 +1198,19 @@ nsCSSRendering::PaintBoxShadowOuter(nsPr
     // For opaque (rectangular) theme widgets we can take the generic
     // border-box path with border-radius disabled.
     nativeTheme = transparency != nsITheme::eOpaque;
   } else {
     nativeTheme = PR_FALSE;
     nscoord twipsRadii[8];
     hasBorderRadius =
       GetBorderRadiusTwips(styleBorder->mBorderRadius,
-                           aFrameArea.width, twipsRadii);
+                           aFrameArea.width,
+                           aFrameArea.height,
+                           twipsRadii);
     if (hasBorderRadius) {
       PRIntn sidesToSkip = aForFrame->GetSkipSides();
       ComputePixelRadii(twipsRadii, aFrameArea, sidesToSkip, twipsPerPixel,
                         &borderRadii);
     }
   }
 
   nsRect frameRect =
@@ -1375,17 +1380,19 @@ nsCSSRendering::PaintBoxShadowInner(nsPr
     // inner box-shadows for them. But we allow chrome to paint inner
     // box shadows since chrome can be aware of the platform theme.
     return;
   }
 
   // Get any border radius, since box-shadow must also have rounded corners if the frame does
   nscoord twipsRadii[8];
   PRBool hasBorderRadius = GetBorderRadiusTwips(styleBorder->mBorderRadius,
-                                                aFrameArea.width, twipsRadii);
+                                                aFrameArea.width,
+                                                aFrameArea.height,
+                                                twipsRadii);
   nscoord twipsPerPixel = aPresContext->DevPixelsToAppUnits(1);
 
   nsRect paddingRect = aFrameArea;
   nsMargin border = aForFrame->GetUsedBorder();
   aForFrame->ApplySkipSides(border);
   paddingRect.Deflate(border);
 
   gfxCornerSizes innerRadii;
@@ -2266,19 +2273,20 @@ nsCSSRendering::PaintBackgroundWithSC(ns
   gfxContext *ctx = aRenderingContext.ThebesContext();
   nscoord appUnitsPerPixel = aPresContext->AppUnitsPerDevPixel();
 
   // Same coordinate space as aBorderArea & aBGClipRect
   gfxCornerSizes bgRadii;
   PRBool haveRoundedCorners;
   {
     nscoord radii[8];
+    nsSize frameSize = aForFrame->GetSize();
     haveRoundedCorners =
-      GetBorderRadiusTwips(aBorder.mBorderRadius, aForFrame->GetSize().width,
-                           radii);
+      GetBorderRadiusTwips(aBorder.mBorderRadius, frameSize.width,
+                           frameSize.height, radii);
     if (haveRoundedCorners)
       ComputePixelRadii(radii, aBorderArea, aForFrame->GetSkipSides(),
                         appUnitsPerPixel, &bgRadii);
   }
 
   // The 'bgClipArea' (used only by the image tiling logic, far below)
   // is the caller-provided aBGClipRect if any, or else the area
   // determined by the value of 'background-clip' in
--- a/layout/base/nsCSSRendering.h
+++ b/layout/base/nsCSSRendering.h
@@ -74,17 +74,18 @@ struct nsCSSRendering {
                                   const nsRect& aDirtyRect);
 
   /**
    * Get the size, in app units, of the border radii. It returns FALSE iff all
    * returned radii == 0 (so no border radii), TRUE otherwise.
    * For the aRadii indexes, use the NS_CORNER_* constants in nsStyleConsts.h
    */
   static PRBool GetBorderRadiusTwips(const nsStyleCorners& aBorderRadius,
-                                     const nscoord& aFrameWidth,
+                                     const nscoord aFrameWidth,
+                                     const nscoord aFrameHeight,
                                      nscoord aRadii[8]);
 
   /**
    * Render the border for an element using css rendering rules
    * for borders. aSkipSides is a bitmask of the sides to skip
    * when rendering. If 0 then no sides are skipped.
    */
   static void PaintBorder(nsPresContext* aPresContext,
--- a/layout/base/nsDisplayList.cpp
+++ b/layout/base/nsDisplayList.cpp
@@ -997,18 +997,19 @@ nsDisplayBoxShadowOuter::ComputeVisibili
   nsRect frameRect(origin, mFrame->GetSize());
   if (!frameRect.Contains(visibleBounds))
     return PR_TRUE;
 
   // the visible region is entirely inside the border-rect, and box shadows
   // never render within the border-rect (unless there's a border radius).
   nscoord twipsRadii[8];
   PRBool hasBorderRadii =
-     nsCSSRendering::GetBorderRadiusTwips(mFrame->GetStyleBorder()->mBorderRadius,
-                                          frameRect.width,
+     nsCSSRendering::GetBorderRadiusTwips(mFrame->GetStyleBorder()->
+                                          mBorderRadius,
+                                          frameRect.width, frameRect.height,
                                           twipsRadii);
   if (!hasBorderRadii)
     return PR_FALSE;
 
   return !RoundedRectContainsRect(frameRect, twipsRadii, visibleBounds);
 }
 
 void
new file mode 100644
--- /dev/null
+++ b/layout/reftests/border-radius/percent-1-ref.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html><head><title>Border radius with percent units &mdash; reference</title>
+<style>
+div { background: green; }
+.r1 { height: 20px; } .c1 { width: 20px; }
+.r2 { height: 40px; } .c2 { width: 40px; }
+.r3 { height: 60px; } .c3 { width: 60px; }
+.r4 { height: 80px; } .c4 { width: 80px; }
+
+.r1.c1 { -moz-border-radius:  5px /  5px; }
+.r1.c2 { -moz-border-radius: 10px /  5px; }
+.r1.c3 { -moz-border-radius: 15px /  5px; }
+.r1.c4 { -moz-border-radius: 20px /  5px; }
+.r2.c1 { -moz-border-radius:  5px / 10px; }
+.r2.c2 { -moz-border-radius: 10px / 10px; }
+.r2.c3 { -moz-border-radius: 15px / 10px; }
+.r2.c4 { -moz-border-radius: 20px / 10px; }
+.r3.c1 { -moz-border-radius:  5px / 15px; }
+.r3.c2 { -moz-border-radius: 10px / 15px; }
+.r3.c3 { -moz-border-radius: 15px / 15px; }
+.r3.c4 { -moz-border-radius: 20px / 15px; }
+.r4.c1 { -moz-border-radius:  5px / 20px; }
+.r4.c2 { -moz-border-radius: 10px / 20px; }
+.r4.c3 { -moz-border-radius: 15px / 20px; }
+.r4.c4 { -moz-border-radius: 20px / 20px; }
+
+</style>
+</head><body>
+<table>
+  <tr>
+    <td><div class="r1 c1"></div></td>
+    <td><div class="r1 c2"></div></td>
+    <td><div class="r1 c3"></div></td>
+    <td><div class="r1 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r2 c1"></div></td>
+    <td><div class="r2 c2"></div></td>
+    <td><div class="r2 c3"></div></td>
+    <td><div class="r2 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r3 c1"></div></td>
+    <td><div class="r3 c2"></div></td>
+    <td><div class="r3 c3"></div></td>
+    <td><div class="r3 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r4 c1"></div></td>
+    <td><div class="r4 c2"></div></td>
+    <td><div class="r4 c3"></div></td>
+    <td><div class="r4 c4"></div></td>
+  </tr>
+</table>
+</body></html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/border-radius/percent-1.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html><head><title>Border radius with percent units &mdash; test</title>
+<style>
+div { -moz-border-radius: 25%; background: green; }
+.r1 { height: 20px; } .c1 { width: 20px; }
+.r2 { height: 40px; } .c2 { width: 40px; }
+.r3 { height: 60px; } .c3 { width: 60px; }
+.r4 { height: 80px; } .c4 { width: 80px; }
+</style>
+</head><body>
+<table>
+  <tr>
+    <td><div class="r1 c1"></div></td>
+    <td><div class="r1 c2"></div></td>
+    <td><div class="r1 c3"></div></td>
+    <td><div class="r1 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r2 c1"></div></td>
+    <td><div class="r2 c2"></div></td>
+    <td><div class="r2 c3"></div></td>
+    <td><div class="r2 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r3 c1"></div></td>
+    <td><div class="r3 c2"></div></td>
+    <td><div class="r3 c3"></div></td>
+    <td><div class="r3 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r4 c1"></div></td>
+    <td><div class="r4 c2"></div></td>
+    <td><div class="r4 c3"></div></td>
+    <td><div class="r4 c4"></div></td>
+  </tr>
+</table>
+</body></html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/border-radius/percent-2-ref.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html><head><title>Border radius with percent units &mdash; reference</title>
+<style>
+div { background: green; }
+.r1 { height: 20px; } .c1 { width: 20px; }
+.r2 { height: 40px; } .c2 { width: 40px; }
+.r3 { height: 60px; } .c3 { width: 60px; }
+.r4 { height: 80px; } .c4 { width: 80px; }
+
+.r1.c1 { -moz-border-radius:  5px 2px /  5px 2px; }
+.r1.c2 { -moz-border-radius: 10px 4px /  5px 2px; }
+.r1.c3 { -moz-border-radius: 15px 6px /  5px 2px; }
+.r1.c4 { -moz-border-radius: 20px 8px /  5px 2px; }
+.r2.c1 { -moz-border-radius:  5px 2px / 10px 4px; }
+.r2.c2 { -moz-border-radius: 10px 4px / 10px 4px; }
+.r2.c3 { -moz-border-radius: 15px 6px / 10px 4px; }
+.r2.c4 { -moz-border-radius: 20px 8px / 10px 4px; }
+.r3.c1 { -moz-border-radius:  5px 2px / 15px 6px; }
+.r3.c2 { -moz-border-radius: 10px 4px / 15px 6px; }
+.r3.c3 { -moz-border-radius: 15px 6px / 15px 6px; }
+.r3.c4 { -moz-border-radius: 20px 8px / 15px 6px; }
+.r4.c1 { -moz-border-radius:  5px 2px / 20px 8px; }
+.r4.c2 { -moz-border-radius: 10px 4px / 20px 8px; }
+.r4.c3 { -moz-border-radius: 15px 6px / 20px 8px; }
+.r4.c4 { -moz-border-radius: 20px 8px / 20px 8px; }
+
+</style>
+</head><body>
+<table>
+  <tr>
+    <td><div class="r1 c1"></div></td>
+    <td><div class="r1 c2"></div></td>
+    <td><div class="r1 c3"></div></td>
+    <td><div class="r1 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r2 c1"></div></td>
+    <td><div class="r2 c2"></div></td>
+    <td><div class="r2 c3"></div></td>
+    <td><div class="r2 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r3 c1"></div></td>
+    <td><div class="r3 c2"></div></td>
+    <td><div class="r3 c3"></div></td>
+    <td><div class="r3 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r4 c1"></div></td>
+    <td><div class="r4 c2"></div></td>
+    <td><div class="r4 c3"></div></td>
+    <td><div class="r4 c4"></div></td>
+  </tr>
+</table>
+</body></html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/border-radius/percent-2.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html><head><title>Border radius with percent units &mdash; test</title>
+<style>
+div { -moz-border-radius: 25% 10%; background: green; }
+.r1 { height: 20px; } .c1 { width: 20px; }
+.r2 { height: 40px; } .c2 { width: 40px; }
+.r3 { height: 60px; } .c3 { width: 60px; }
+.r4 { height: 80px; } .c4 { width: 80px; }
+</style>
+</head><body>
+<table>
+  <tr>
+    <td><div class="r1 c1"></div></td>
+    <td><div class="r1 c2"></div></td>
+    <td><div class="r1 c3"></div></td>
+    <td><div class="r1 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r2 c1"></div></td>
+    <td><div class="r2 c2"></div></td>
+    <td><div class="r2 c3"></div></td>
+    <td><div class="r2 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r3 c1"></div></td>
+    <td><div class="r3 c2"></div></td>
+    <td><div class="r3 c3"></div></td>
+    <td><div class="r3 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r4 c1"></div></td>
+    <td><div class="r4 c2"></div></td>
+    <td><div class="r4 c3"></div></td>
+    <td><div class="r4 c4"></div></td>
+  </tr>
+</table>
+</body></html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/border-radius/percent-3-ref.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html><head><title>Border radius with percent units &mdash; reference</title>
+<style>
+div { background: green; }
+.r1 { height: 20px; } .c1 { width: 20px; }
+.r2 { height: 40px; } .c2 { width: 40px; }
+.r3 { height: 60px; } .c3 { width: 60px; }
+.r4 { height: 80px; } .c4 { width: 80px; }
+
+.r1.c1 { -moz-border-radius:  5px / 2px; }
+.r1.c2 { -moz-border-radius: 10px / 2px; }
+.r1.c3 { -moz-border-radius: 15px / 2px; }
+.r1.c4 { -moz-border-radius: 20px / 2px; }
+.r2.c1 { -moz-border-radius:  5px / 4px; }
+.r2.c2 { -moz-border-radius: 10px / 4px; }
+.r2.c3 { -moz-border-radius: 15px / 4px; }
+.r2.c4 { -moz-border-radius: 20px / 4px; }
+.r3.c1 { -moz-border-radius:  5px / 6px; }
+.r3.c2 { -moz-border-radius: 10px / 6px; }
+.r3.c3 { -moz-border-radius: 15px / 6px; }
+.r3.c4 { -moz-border-radius: 20px / 6px; }
+.r4.c1 { -moz-border-radius:  5px / 8px; }
+.r4.c2 { -moz-border-radius: 10px / 8px; }
+.r4.c3 { -moz-border-radius: 15px / 8px; }
+.r4.c4 { -moz-border-radius: 20px / 8px; }
+
+</style>
+</head><body>
+<table>
+  <tr>
+    <td><div class="r1 c1"></div></td>
+    <td><div class="r1 c2"></div></td>
+    <td><div class="r1 c3"></div></td>
+    <td><div class="r1 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r2 c1"></div></td>
+    <td><div class="r2 c2"></div></td>
+    <td><div class="r2 c3"></div></td>
+    <td><div class="r2 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r3 c1"></div></td>
+    <td><div class="r3 c2"></div></td>
+    <td><div class="r3 c3"></div></td>
+    <td><div class="r3 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r4 c1"></div></td>
+    <td><div class="r4 c2"></div></td>
+    <td><div class="r4 c3"></div></td>
+    <td><div class="r4 c4"></div></td>
+  </tr>
+</table>
+</body></html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/border-radius/percent-3.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html><head><title>Border radius with percent units &mdash; test</title>
+<style>
+div { -moz-border-radius: 25% / 10%; background: green; }
+.r1 { height: 20px; } .c1 { width: 20px; }
+.r2 { height: 40px; } .c2 { width: 40px; }
+.r3 { height: 60px; } .c3 { width: 60px; }
+.r4 { height: 80px; } .c4 { width: 80px; }
+</style>
+</head><body>
+<table>
+  <tr>
+    <td><div class="r1 c1"></div></td>
+    <td><div class="r1 c2"></div></td>
+    <td><div class="r1 c3"></div></td>
+    <td><div class="r1 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r2 c1"></div></td>
+    <td><div class="r2 c2"></div></td>
+    <td><div class="r2 c3"></div></td>
+    <td><div class="r2 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r3 c1"></div></td>
+    <td><div class="r3 c2"></div></td>
+    <td><div class="r3 c3"></div></td>
+    <td><div class="r3 c4"></div></td>
+  </tr>
+  <tr>
+    <td><div class="r4 c1"></div></td>
+    <td><div class="r4 c2"></div></td>
+    <td><div class="r4 c3"></div></td>
+    <td><div class="r4 c4"></div></td>
+  </tr>
+</table>
+</body></html>
--- a/layout/reftests/border-radius/reftest.list
+++ b/layout/reftests/border-radius/reftest.list
@@ -12,16 +12,21 @@
 != outline-ellips.html about:blank
 != outline-square.html outline-circle.html
 != outline-square.html outline-ellips.html
 != outline-circle.html outline-ellips.html
 == border-value-interpret.html border-value-interpret-ref.html
 != curved-borders-all-styles.html about:blank # no way to generate reference for dotted/dashed/inset/outset
 # ridge/groove borders
 
+# percent units
+== percent-1.html percent-1-ref.html
+== percent-2.html percent-2-ref.html
+== percent-3.html percent-3-ref.html
+
 # more serious tests, using SVG reference
 == border-circle-2.html border-circle-2-ref.xhtml
 fails == curved-stripe-border.html curved-stripe-border-ref.svg # bug 459945
 
 # Corners
 == corner-1.html corner-1-ref.svg # bottom corners different radius than top corners
 random == corner-2.html corner-2-ref.svg # right corners different radius than left corners; see bug 500804
 
--- a/layout/reftests/box-properties/outline-radius-percent-1-ref.html
+++ b/layout/reftests/box-properties/outline-radius-percent-1-ref.html
@@ -7,21 +7,21 @@
         width: 400px; height: 50px;
         margin: 20px 0;
         border-style: solid; border-color: transparent; border-width: 0;
         padding: 0;
       }
     </style>
   </head>
   <body>
-    <div style="-moz-outline-radius: 20px;"></div>
-    <div style="-moz-outline-radius: 40px;"></div>
-    <div style="-moz-outline-radius: 80px;"></div>
-    <div style="padding: 0 100px; -moz-outline-radius: 60px;"></div>
-    <div style="padding: 0 100px 0 0; -moz-outline-radius: 50px;"></div>
-    <div style="padding: 0 0 0 100px; -moz-outline-radius: 50px;"></div>
-    <div style="border-width: 0 100px; -moz-outline-radius: 60px;"></div>
-    <div style="border-width: 0 100px 0 0; -moz-outline-radius: 50px;"></div>
-    <div style="border-width: 0 0 0 100px; -moz-outline-radius: 50px;"></div>
+    <div style="-moz-outline-radius: 20px / 2.5px;"></div>
+    <div style="-moz-outline-radius: 40px / 5px;"></div>
+    <div style="-moz-outline-radius: 80px / 10px;"></div>
+    <div style="padding: 0 100px; -moz-outline-radius: 60px / 5px;"></div>
+    <div style="padding: 0 100px 0 0; -moz-outline-radius: 50px / 5px;"></div>
+    <div style="padding: 0 0 0 100px; -moz-outline-radius: 50px / 5px;"></div>
+    <div style="border-width: 0 100px; -moz-outline-radius: 60px / 5px;"></div>
+    <div style="border-width: 0 100px 0 0; -moz-outline-radius: 50px / 5px;"></div>
+    <div style="border-width: 0 0 0 100px; -moz-outline-radius: 50px / 5px;"></div>
     <div style="border-width: 0 100px; padding: 0 100px;
-                -moz-outline-radius: 80px;"></div>
+                -moz-outline-radius: 80px / 5px;"></div>
   </body>
 </html>
--- a/layout/reftests/bugs/364861-1-ref.html
+++ b/layout/reftests/bugs/364861-1-ref.html
@@ -2,12 +2,12 @@
 <html>
   <body>
     <div style="background: black;
                 background-clip: padding-box;
                 width: 400px;
                 padding: 0;
                 height: 300px;
                 border: 100px solid rgba(255, 255, 0, 0.5);
-                -moz-border-radius: 240px">
+                -moz-border-radius: 240px / 200px">
     </div>
   </body>
 </html>