Fix border-radius computed style code to reflect clamping adjustments that we make to border radius. (Bug 595651) r=bzbarsky a2.0=blocking2.0:betaN

layout/style/nsComputedDOMStyle.cpp

@@ -2083,28 +2083,28 @@ nsresult
 nsComputedDOMStyle::DoGetBorderBottomLeftRadius(nsIDOMCSSValue** aValue)
 {
   return GetEllipseRadii(GetStyleBorder()->mBorderRadius,
-                         NS_CORNER_BOTTOM_LEFT, aValue);
+                         NS_CORNER_BOTTOM_LEFT, PR_TRUE, aValue);
 }
 
 nsresult
 nsComputedDOMStyle::DoGetBorderBottomRightRadius(nsIDOMCSSValue** aValue)
 {
   return GetEllipseRadii(GetStyleBorder()->mBorderRadius,
-                         NS_CORNER_BOTTOM_RIGHT, aValue);
+                         NS_CORNER_BOTTOM_RIGHT, PR_TRUE, aValue);
 }
 
 nsresult
 nsComputedDOMStyle::DoGetBorderTopLeftRadius(nsIDOMCSSValue** aValue)
 {
   return GetEllipseRadii(GetStyleBorder()->mBorderRadius,
-                         NS_CORNER_TOP_LEFT, aValue);
+                         NS_CORNER_TOP_LEFT, PR_TRUE, aValue);
 }
 
 nsresult
 nsComputedDOMStyle::DoGetBorderTopRightRadius(nsIDOMCSSValue** aValue)
 {
   return GetEllipseRadii(GetStyleBorder()->mBorderRadius,
-                         NS_CORNER_TOP_RIGHT, aValue);
+                         NS_CORNER_TOP_RIGHT, PR_TRUE, aValue);
 }
 
 nsresult
@@ -2274,28 +2274,28 @@ nsresult
 nsComputedDOMStyle::DoGetOutlineRadiusBottomLeft(nsIDOMCSSValue** aValue)
 {
   return GetEllipseRadii(GetStyleOutline()->mOutlineRadius,
-                         NS_CORNER_BOTTOM_LEFT, aValue);
+                         NS_CORNER_BOTTOM_LEFT, PR_FALSE, aValue);
 }
 
 nsresult
 nsComputedDOMStyle::DoGetOutlineRadiusBottomRight(nsIDOMCSSValue** aValue)
 {
   return GetEllipseRadii(GetStyleOutline()->mOutlineRadius,
-                         NS_CORNER_BOTTOM_RIGHT, aValue);
+                         NS_CORNER_BOTTOM_RIGHT, PR_FALSE, aValue);
 }
 
 nsresult
 nsComputedDOMStyle::DoGetOutlineRadiusTopLeft(nsIDOMCSSValue** aValue)
 {
   return GetEllipseRadii(GetStyleOutline()->mOutlineRadius,
-                         NS_CORNER_TOP_LEFT, aValue);
+                         NS_CORNER_TOP_LEFT, PR_FALSE, aValue);
 }
 
 nsresult
 nsComputedDOMStyle::DoGetOutlineRadiusTopRight(nsIDOMCSSValue** aValue)
 {
   return GetEllipseRadii(GetStyleOutline()->mOutlineRadius,
-                         NS_CORNER_TOP_RIGHT, aValue);
+                         NS_CORNER_TOP_RIGHT, PR_FALSE, aValue);
 }
 
 nsresult
@@ -2325,27 +2325,34 @@ nsComputedDOMStyle::DoGetOutlineColor(nsIDOMCSSValue** aValue)
 nsresult
 nsComputedDOMStyle::GetEllipseRadii(const nsStyleCorners& aRadius,
                                     PRUint8 aFullCorner,
+                                    PRBool aIsBorder, // else outline
                                     nsIDOMCSSValue** aValue)
 {
-  nsStyleCoord radiusX
-    = aRadius.Get(NS_FULL_TO_HALF_CORNER(aFullCorner, PR_FALSE));
-  nsStyleCoord radiusY
-    = aRadius.Get(NS_FULL_TO_HALF_CORNER(aFullCorner, PR_TRUE));
+  nsStyleCoord radiusX, radiusY;
+  if (mInnerFrame && aIsBorder) {
+    nscoord radii[8];
+    mInnerFrame->GetBorderRadii(radii);
+    radiusX.SetCoordValue(radii[NS_FULL_TO_HALF_CORNER(aFullCorner, PR_FALSE)]);
+    radiusY.SetCoordValue(radii[NS_FULL_TO_HALF_CORNER(aFullCorner, PR_TRUE)]);
+  } else {
+    radiusX = aRadius.Get(NS_FULL_TO_HALF_CORNER(aFullCorner, PR_FALSE));
+    radiusY = aRadius.Get(NS_FULL_TO_HALF_CORNER(aFullCorner, PR_TRUE));
 
-  if (mInnerFrame) {
-    // We need to convert to absolute coordinates before doing the
-    // equality check below.
-    nscoord v;
+    if (mInnerFrame) {
+      // We need to convert to absolute coordinates before doing the
+      // equality check below.
+      nscoord v;
 
-    v = StyleCoordToNSCoord(radiusX,
-                            &nsComputedDOMStyle::GetFrameBorderRectWidth,
-                            0, PR_TRUE);
-    radiusX.SetCoordValue(v);
+      v = StyleCoordToNSCoord(radiusX,
+                              &nsComputedDOMStyle::GetFrameBorderRectWidth,
+                              0, PR_TRUE);
+      radiusX.SetCoordValue(v);
 
-    v = StyleCoordToNSCoord(radiusY,
-                            &nsComputedDOMStyle::GetFrameBorderRectHeight,
-                            0, PR_TRUE);
-    radiusY.SetCoordValue(v);
+      v = StyleCoordToNSCoord(radiusY,
+                              &nsComputedDOMStyle::GetFrameBorderRectHeight,
+                              0, PR_TRUE);
+      radiusY.SetCoordValue(v);
+    }
   }
 
   // for compatibility, return a single value if X and Y are equal

layout/style/nsComputedDOMStyle.h

@@ -125,6 +125,7 @@ private:
 
   nsresult GetEllipseRadii(const nsStyleCorners& aRadius,
                            PRUint8 aFullCorner,
+                           PRBool aIsBorder, // else outline
                            nsIDOMCSSValue** aValue);
 
   nsresult GetOffsetWidthFor(mozilla::css::Side aSide, nsIDOMCSSValue** aValue);

layout/style/test/test_computed_style.html

@@ -74,6 +74,47 @@ var noframe_container = document.getElementById("content");
   p.parentNode.removeChild(p);
 })();
 
+(function test_bug_595651() {
+  // Test that clamping of border-radius is reflected in computed style.
+  var p = document.createElement("p");
+  p.setAttribute("style", "width: 190px; height: 90px; border: 5px solid;");
+  p.style.borderRadius = "1000px";
+  var cs = getComputedStyle(p, "");
+
+  frame_container.appendChild(p);
+  is(cs.borderTopLeftRadius, "50px",
+     "computed value of clamped border radius (top left)");
+  is(cs.borderTopRightRadius, "50px",
+     "computed value of clamped border radius (top right)");
+  is(cs.borderBottomRightRadius, "50px",
+     "computed value of clamped border radius (bottom right)");
+  is(cs.borderBottomLeftRadius, "50px",
+     "computed value of clamped border radius (bottom left)");
+
+  p.style.overflowY = "scroll";
+  is(cs.borderTopLeftRadius, "50px",
+     "computed value of clamped border radius (top left, overflow-y)");
+  is(cs.borderTopRightRadius, "5px",
+     "computed value of clamped border radius (top right, overflow-y)");
+  is(cs.borderBottomRightRadius, "5px",
+     "computed value of clamped border radius (bottom right, overflow-y)");
+  is(cs.borderBottomLeftRadius, "50px",
+     "computed value of clamped border radius (bottom left, overflow-y)");
+
+  p.style.overflowY = "hidden";
+  p.style.overflowX = "scroll";
+  is(cs.borderTopLeftRadius, "50px",
+     "computed value of clamped border radius (top left, overflow-x)");
+  is(cs.borderTopRightRadius, "50px",
+     "computed value of clamped border radius (top right, overflow-x)");
+  is(cs.borderBottomRightRadius, "5px",
+     "computed value of clamped border radius (bottom right, overflow-x)");
+  is(cs.borderBottomLeftRadius, "5px",
+     "computed value of clamped border radius (bottom left, overflow-x)");
+
+  p.parentNode.removeChild(p);
+})();
+
 </script>
 </pre>
 </body>

layout/style/test/test_transitions_per_property.html

@@ -357,26 +357,26 @@ function test_length_percent_calc_transition(prop) {
      + v2v + "'");
 
   div.style.setProperty("-moz-transition-property", "none", "");
-  div.style.setProperty(prop, "-moz-calc(100% + 200px)", "");
+  div.style.setProperty(prop, "-moz-calc(25% + 100px)", "");
   v1v = cs.getPropertyValue(prop);
-  is(any_unit_to_num(v1v), b + 2*c,
+  is(any_unit_to_num(v1v) * 4, b + 4*c,
      "computed value before transition for " + prop + ": '" + v1v + "'");
   div.style.setProperty("-moz-transition-property", prop, "");
-  div.style.setProperty(prop, "300%", "");
+  div.style.setProperty(prop, "75%", "");
   v2v = cs.getPropertyValue(prop);
-  is(any_unit_to_num(v2v) * 2, -1*a + 3*b + 3*c,
+  is(any_unit_to_num(v2v) * 8, 5*a + 3*b + 6*c,
      "interpolation between calc() and percent for " + prop + ": '" +
      v2v + "'");
 
   div.style.setProperty("-moz-transition-property", "none", "");
-  div.style.setProperty(prop, "400px", "");
+  div.style.setProperty(prop, "150px", "");
   v1v = cs.getPropertyValue(prop);
-  is(any_unit_to_num(v1v), 4*c,
+  is(any_unit_to_num(v1v) * 2, c * 3,
      "computed value before transition for " + prop + ": '" + v1v + "'");
   div.style.setProperty("-moz-transition-property", prop, "");
-  div.style.setProperty(prop, "-moz-calc(200% + 200px)", "");
+  div.style.setProperty(prop, "-moz-calc(50% + 50px)", "");
   v2v = cs.getPropertyValue(prop);
-  is(any_unit_to_num(v2v) * 2, a + b + 7*c,
+  is(any_unit_to_num(v2v) * 8, 7 * a + b + 10*c,
      "interpolation between length and calc() for " + prop + ": '" +
      v2v + "'");
 }