Support percentage border-radius values (Fix #1154)

niklasvh · Aug 4, 2017 · adb1f50 · adb1f50
1 parent e380e2c
commit adb1f50
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 18 deletions.
diff --git a/src/Bounds.js b/src/Bounds.js
@@ -194,40 +194,39 @@ export const parseBoundCurves = (
     borders: Array<Border>,
     borderRadius: Array<BorderRadius>
 ): BoundCurves => {
-    // TODO support percentage borderRadius
     const HALF_WIDTH = bounds.width / 2;
     const HALF_HEIGHT = bounds.height / 2;
     const tlh =
-        borderRadius[CORNER.TOP_LEFT][H].value < HALF_WIDTH
-            ? borderRadius[CORNER.TOP_LEFT][H].value
+        borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
+            ? borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width)
             : HALF_WIDTH;
     const tlv =
-        borderRadius[CORNER.TOP_LEFT][V].value < HALF_HEIGHT
-            ? borderRadius[CORNER.TOP_LEFT][V].value
+        borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
+            ? borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height)
             : HALF_HEIGHT;
     const trh =
-        borderRadius[CORNER.TOP_RIGHT][H].value < HALF_WIDTH
-            ? borderRadius[CORNER.TOP_RIGHT][H].value
+        borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
+            ? borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width)
             : HALF_WIDTH;
     const trv =
-        borderRadius[CORNER.TOP_RIGHT][V].value < HALF_HEIGHT
-            ? borderRadius[CORNER.TOP_RIGHT][V].value
+        borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
+            ? borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height)
             : HALF_HEIGHT;
     const brh =
-        borderRadius[CORNER.BOTTOM_RIGHT][H].value < HALF_WIDTH
-            ? borderRadius[CORNER.BOTTOM_RIGHT][H].value
+        borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
+            ? borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width)
             : HALF_WIDTH;
     const brv =
-        borderRadius[CORNER.BOTTOM_RIGHT][V].value < HALF_HEIGHT
-            ? borderRadius[CORNER.BOTTOM_RIGHT][V].value
+        borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
+            ? borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height)
             : HALF_HEIGHT;
     const blh =
-        borderRadius[CORNER.BOTTOM_LEFT][H].value < HALF_WIDTH
-            ? borderRadius[CORNER.BOTTOM_LEFT][H].value
+        borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
+            ? borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width)
             : HALF_WIDTH;
     const blv =
-        borderRadius[CORNER.BOTTOM_LEFT][V].value < HALF_HEIGHT
-            ? borderRadius[CORNER.BOTTOM_LEFT][V].value
+        borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
+            ? borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height)
             : HALF_HEIGHT;
 
     const topWidth = bounds.width - trh;

diff --git a/src/parsing/borderRadius.js b/src/parsing/borderRadius.js
@@ -4,7 +4,7 @@ import Length from '../Length';
 
 const SIDES = ['top-left', 'top-right', 'bottom-right', 'bottom-left'];
 
-export type BorderRadius = Array<Length>;
+export type BorderRadius = [Length, Length];
 
 export const parseBorderRadius = (style: CSSStyleDeclaration): Array<BorderRadius> => {
     return SIDES.map(side => {