Support percentage border-radius values (Fix #1154)

This commit is contained in:
Niklas von Hertzen 2017-08-04 20:41:36 +08:00
parent e380e2c873
commit adb1f50f00
2 changed files with 17 additions and 18 deletions

View File

@ -194,40 +194,39 @@ export const parseBoundCurves = (
borders: Array<Border>, borders: Array<Border>,
borderRadius: Array<BorderRadius> borderRadius: Array<BorderRadius>
): BoundCurves => { ): BoundCurves => {
// TODO support percentage borderRadius
const HALF_WIDTH = bounds.width / 2; const HALF_WIDTH = bounds.width / 2;
const HALF_HEIGHT = bounds.height / 2; const HALF_HEIGHT = bounds.height / 2;
const tlh = const tlh =
borderRadius[CORNER.TOP_LEFT][H].value < HALF_WIDTH borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
? borderRadius[CORNER.TOP_LEFT][H].value ? borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width)
: HALF_WIDTH; : HALF_WIDTH;
const tlv = const tlv =
borderRadius[CORNER.TOP_LEFT][V].value < HALF_HEIGHT borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
? borderRadius[CORNER.TOP_LEFT][V].value ? borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height)
: HALF_HEIGHT; : HALF_HEIGHT;
const trh = const trh =
borderRadius[CORNER.TOP_RIGHT][H].value < HALF_WIDTH borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
? borderRadius[CORNER.TOP_RIGHT][H].value ? borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width)
: HALF_WIDTH; : HALF_WIDTH;
const trv = const trv =
borderRadius[CORNER.TOP_RIGHT][V].value < HALF_HEIGHT borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
? borderRadius[CORNER.TOP_RIGHT][V].value ? borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height)
: HALF_HEIGHT; : HALF_HEIGHT;
const brh = const brh =
borderRadius[CORNER.BOTTOM_RIGHT][H].value < HALF_WIDTH borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
? borderRadius[CORNER.BOTTOM_RIGHT][H].value ? borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width)
: HALF_WIDTH; : HALF_WIDTH;
const brv = const brv =
borderRadius[CORNER.BOTTOM_RIGHT][V].value < HALF_HEIGHT borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
? borderRadius[CORNER.BOTTOM_RIGHT][V].value ? borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height)
: HALF_HEIGHT; : HALF_HEIGHT;
const blh = const blh =
borderRadius[CORNER.BOTTOM_LEFT][H].value < HALF_WIDTH borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
? borderRadius[CORNER.BOTTOM_LEFT][H].value ? borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width)
: HALF_WIDTH; : HALF_WIDTH;
const blv = const blv =
borderRadius[CORNER.BOTTOM_LEFT][V].value < HALF_HEIGHT borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
? borderRadius[CORNER.BOTTOM_LEFT][V].value ? borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height)
: HALF_HEIGHT; : HALF_HEIGHT;
const topWidth = bounds.width - trh; const topWidth = bounds.width - trh;

View File

@ -4,7 +4,7 @@ import Length from '../Length';
const SIDES = ['top-left', 'top-right', 'bottom-right', 'bottom-left']; 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> => { export const parseBorderRadius = (style: CSSStyleDeclaration): Array<BorderRadius> => {
return SIDES.map(side => { return SIDES.map(side => {