Adding corner shaping behavior for marin box as border-radius approaches 0

Author: betravis

shapes-polyfill.js

@@ -1453,24 +1453,34 @@ function adjustBounds(bounds, sign, offsets) {
     bounds.height += sign * (top + bottom);
 }
 
+// See http://dev.w3.org/csswg/css-shapes/#margin-box
+function adjustRadius(radius, sign, offset) {
+    if (sign < 0)
+        return Math.max(radius + sign * offset, 0);
+    var ratio = Math.abs(radius / offset);
+    if (ratio < 1)
+        return Math.max(radius + offset * (1 + Math.pow(ratio - 1, 3)), 0);
+    return radius + offset;
+}
+
 function adjustRadii(radii, sign, offsets) {
     var top = offsets.reduce(function(prev, curr) { return prev + curr[0]; }, 0);
     var right = offsets.reduce(function(prev, curr) { return prev + curr[1]; }, 0);
     var bottom = offsets.reduce(function(prev, curr) { return prev + curr[2]; }, 0);
     var left = offsets.reduce(function(prev, curr) { return prev + curr[3]; }, 0);
 
     // Still need to max these with 0
-    radii[0][0] = Math.max(radii[0][0] + sign * left, 0);
-    radii[0][1] = Math.max(radii[0][1] + sign * top, 0);
+    radii[0][0] = adjustRadius(radii[0][0], sign, left);
+    radii[0][1] = adjustRadius(radii[0][1], sign, top);
 
-    radii[1][0] = Math.max(radii[1][0] + sign * right, 0);
-    radii[1][1] = Math.max(radii[1][1] + sign * top, 0);
+    radii[1][0] = adjustRadius(radii[1][0], sign, right);
+    radii[1][1] = adjustRadius(radii[1][1], sign, top);
 
-    radii[2][0] = Math.max(radii[2][0] + sign * right, 0);
-    radii[2][1] = Math.max(radii[2][1] + sign * bottom, 0);
+    radii[2][0] = adjustRadius(radii[2][0], sign, right);
+    radii[2][1] = adjustRadius(radii[2][1], sign, bottom);
 
-    radii[3][0] = Math.max(radii[3][0] + sign * left, 0);
-    radii[3][1] = Math.max(radii[3][1] + sign * bottom, 0);
+    radii[3][0] = adjustRadius(radii[3][0], sign, left);
+    radii[3][1] = adjustRadius(radii[3][1], sign, bottom);
 }
 
 ShapeValue.prototype.parseBox = function(text, metrics) {

shapes-polyfill.min.js

@@ -69,24 +69,34 @@ function adjustBounds(bounds, sign, offsets) {
     bounds.height += sign * (top + bottom);
 }
 
+// See http://dev.w3.org/csswg/css-shapes/#margin-box
+function adjustRadius(radius, sign, offset) {
+    if (sign < 0)
+        return Math.max(radius + sign * offset, 0);
+    var ratio = Math.abs(radius / offset);
+    if (ratio < 1)
+        return Math.max(radius + offset * (1 + Math.pow(ratio - 1, 3)), 0);
+    return radius + offset;
+}
+
 function adjustRadii(radii, sign, offsets) {
     var top = offsets.reduce(function(prev, curr) { return prev + curr[0]; }, 0);
     var right = offsets.reduce(function(prev, curr) { return prev + curr[1]; }, 0);
     var bottom = offsets.reduce(function(prev, curr) { return prev + curr[2]; }, 0);
     var left = offsets.reduce(function(prev, curr) { return prev + curr[3]; }, 0);
 
     // Still need to max these with 0
-    radii[0][0] = Math.max(radii[0][0] + sign * left, 0);
-    radii[0][1] = Math.max(radii[0][1] + sign * top, 0);
+    radii[0][0] = adjustRadius(radii[0][0], sign, left);
+    radii[0][1] = adjustRadius(radii[0][1], sign, top);
 
-    radii[1][0] = Math.max(radii[1][0] + sign * right, 0);
-    radii[1][1] = Math.max(radii[1][1] + sign * top, 0);
+    radii[1][0] = adjustRadius(radii[1][0], sign, right);
+    radii[1][1] = adjustRadius(radii[1][1], sign, top);
 
-    radii[2][0] = Math.max(radii[2][0] + sign * right, 0);
-    radii[2][1] = Math.max(radii[2][1] + sign * bottom, 0);
+    radii[2][0] = adjustRadius(radii[2][0], sign, right);
+    radii[2][1] = adjustRadius(radii[2][1], sign, bottom);
 
-    radii[3][0] = Math.max(radii[3][0] + sign * left, 0);
-    radii[3][1] = Math.max(radii[3][1] + sign * bottom, 0);
+    radii[3][0] = adjustRadius(radii[3][0], sign, left);
+    radii[3][1] = adjustRadius(radii[3][1], sign, bottom);
 }
 
 ShapeValue.prototype.parseBox = function(text, metrics) {

src/shape-value.js

@@ -79,7 +79,7 @@ function register(mocha, expect) {
                 { top: 160, bottom: 180, offset: 246, cssFloat: 'left' },
                 { top: 180, bottom: 200, offset: 246, cssFloat: 'left' },
                 { top: 200, bottom: 220, offset: 246, cssFloat: 'left' },
-                { top: 220, bottom: 240, offset: 246, cssFloat: 'left' }
+                { top: 220, bottom: 224, offset: 246, cssFloat: 'left' }
             ]
         },
         {

tests/shape-info-tests.js

@@ -150,7 +150,7 @@ function register(mocha, expect) {
         {
             name: 'margin-box',
             input: 'margin-box',
-            output: 'margin-box { x: -20, y: -5, width: 130, height: 120, radii: 30 30 40 60 / 15 25 45 55 }'
+            output: 'margin-box { x: -20, y: -5, width: 130, height: 120, radii: 27.5 30 40 60 / 15 25 45 55 }'
         },
         {
             name: 'border-box',
@@ -199,7 +199,7 @@ function register(mocha, expect) {
             name: 'circle() margin-box',
             input: 'circle() margin-box',
             shape: 'circle(60 at 65 60)',
-            box: 'margin-box { x: -20, y: -5, width: 130, height: 120, radii: 30 30 40 60 / 15 25 45 55 }'
+            box: 'margin-box { x: -20, y: -5, width: 130, height: 120, radii: 27.5 30 40 60 / 15 25 45 55 }'
         },
         {
             name: 'circle() border-box',