@nativescript/core 9.0.0-alpha.21 → 9.0.0-alpha.23

package/ui/styling/background.ios.js

@@ -0,0 +1,1096 @@
+import { LinearGradient } from './linear-gradient';
+import { Screen } from '../../platform';
+import { isDataURI, isFileOrResourcePath, layout } from '../../utils';
+import { ios as iosViewUtils } from '../utils';
+import { ImageSource } from '../../image-source';
+import { parse as cssParse } from '../../css-value/reworkcss-value';
+import { ClipPathFunction } from './clip-path-function';
+export * from './background-common';
+const clearCGColor = UIColor.clearColor.CGColor;
+const uriPattern = /url\(('|")(.*?)\1\)/;
+const symbolUrl = Symbol('backgroundImageUrl');
+export var CacheMode;
+(function (CacheMode) {
+    CacheMode[CacheMode["none"] = 0] = "none";
+})(CacheMode || (CacheMode = {}));
+export var ios;
+(function (ios) {
+    function createBackgroundUIColor(view, callback, flip) {
+        const background = view.style.backgroundInternal;
+        const nativeView = view.nativeViewProtected;
+        if (!nativeView) {
+            return;
+        }
+        // Unset this in case another layer handles background color (e.g. gradient)
+        nativeView.layer.backgroundColor = null;
+        // Cleanup of previous values
+        clearBackgroundVisualEffects(view);
+        // Borders, shadows, etc
+        drawBackgroundVisualEffects(view);
+        if (!background.image) {
+            callback(background?.color?.ios);
+        }
+        else {
+            if (!(background.image instanceof LinearGradient)) {
+                createUIImageFromURI(view, background.image, flip, (image) => {
+                    callback(image ? UIColor.alloc().initWithPatternImage(image) : background?.color?.ios);
+                });
+            }
+        }
+    }
+    ios.createBackgroundUIColor = createBackgroundUIColor;
+    function drawBackgroundVisualEffects(view) {
+        const background = view.style.backgroundInternal;
+        const nativeView = view.nativeViewProtected;
+        const layer = nativeView.layer;
+        let needsLayerAdjustmentOnScroll = false;
+        // Add new gradient layer or update existing one
+        if (background.image instanceof LinearGradient) {
+            if (!nativeView.gradientLayer) {
+                nativeView.gradientLayer = CAGradientLayer.new();
+                layer.insertSublayerAtIndex(nativeView.gradientLayer, 0);
+            }
+            iosViewUtils.drawGradient(nativeView, nativeView.gradientLayer, background.image);
+            needsLayerAdjustmentOnScroll = true;
+        }
+        // Initialize clipping mask (usually for clip-path and non-uniform rounded borders)
+        maskLayerIfNeeded(nativeView, background);
+        if (background.hasUniformBorder()) {
+            const borderColor = background.getUniformBorderColor();
+            layer.borderColor = borderColor?.ios?.CGColor;
+            layer.borderWidth = layout.toDeviceIndependentPixels(background.getUniformBorderWidth());
+            layer.cornerRadius = getUniformBorderRadius(view, layer.bounds);
+        }
+        else {
+            drawNonUniformBorders(nativeView, background);
+            needsLayerAdjustmentOnScroll = true;
+        }
+        // Clip-path should be called after borders are applied
+        if (nativeView.maskType === iosViewUtils.LayerMask.CLIP_PATH && layer.mask instanceof CAShapeLayer) {
+            layer.mask.path = generateClipPath(view, layer.bounds);
+        }
+        if (background.hasBoxShadow()) {
+            drawBoxShadow(view);
+            needsLayerAdjustmentOnScroll = true;
+        }
+        if (needsLayerAdjustmentOnScroll) {
+            registerAdjustLayersOnScrollListener(view);
+        }
+    }
+    ios.drawBackgroundVisualEffects = drawBackgroundVisualEffects;
+    function clearBackgroundVisualEffects(view) {
+        const nativeView = view.nativeViewProtected;
+        if (!nativeView) {
+            return;
+        }
+        const background = view.style.backgroundInternal;
+        const hasGradientBackground = background.image && background.image instanceof LinearGradient;
+        // Remove mask if there is no clip path or non-uniform border with radius
+        let needsMask;
+        switch (nativeView.maskType) {
+            case iosViewUtils.LayerMask.BORDER:
+                needsMask = !background.hasUniformBorder() && background.hasBorderRadius();
+                break;
+            case iosViewUtils.LayerMask.CLIP_PATH:
+                needsMask = !!background.clipPath;
+                break;
+            default:
+                needsMask = false;
+                break;
+        }
+        if (!needsMask) {
+            clearLayerMask(nativeView);
+        }
+        // Clear box shadow if it's no longer needed
+        if (background.clearFlags & 2 /* BackgroundClearFlags.CLEAR_BOX_SHADOW */) {
+            clearBoxShadow(nativeView);
+        }
+        // Non-uniform borders cleanup
+        if (nativeView.hasNonUniformBorder) {
+            if (nativeView.hasNonUniformBorderColor && background.hasUniformBorderColor()) {
+                clearNonUniformColorBorders(nativeView);
+            }
+            if (background.hasUniformBorder()) {
+                clearNonUniformBorders(nativeView);
+            }
+        }
+        if (nativeView.gradientLayer && !hasGradientBackground) {
+            nativeView.gradientLayer.removeFromSuperlayer();
+            nativeView.gradientLayer = null;
+        }
+        // Force unset scroll listener
+        unregisterAdjustLayersOnScrollListener(view);
+        // Reset clear flags
+        background.clearFlags = 0 /* BackgroundClearFlags.NONE */;
+    }
+    ios.clearBackgroundVisualEffects = clearBackgroundVisualEffects;
+    function createUIImageFromURI(view, imageURI, flip, callback) {
+        const nativeView = view.nativeViewProtected;
+        if (!nativeView) {
+            return;
+        }
+        const frame = nativeView.frame;
+        const boundsWidth = view.scaleX ? frame.size.width / view.scaleX : frame.size.width;
+        const boundsHeight = view.scaleY ? frame.size.height / view.scaleY : frame.size.height;
+        if (!boundsWidth || !boundsHeight) {
+            return undefined;
+        }
+        const style = view.style;
+        if (imageURI) {
+            const match = imageURI.match(uriPattern);
+            if (match && match[2]) {
+                imageURI = match[2];
+            }
+        }
+        let bitmap;
+        if (isDataURI(imageURI)) {
+            const base64Data = imageURI.split(',')[1];
+            if (base64Data !== undefined) {
+                const imageSource = ImageSource.fromBase64Sync(base64Data);
+                bitmap = imageSource && imageSource.ios;
+            }
+        }
+        else if (isFileOrResourcePath(imageURI)) {
+            const imageSource = ImageSource.fromFileOrResourceSync(imageURI);
+            bitmap = imageSource && imageSource.ios;
+        }
+        else if (imageURI.indexOf('http') !== -1) {
+            style[symbolUrl] = imageURI;
+            ImageSource.fromUrl(imageURI)
+                .then((r) => {
+                if (style && style[symbolUrl] === imageURI) {
+                    callback(generatePatternImage(r.ios, view, flip));
+                }
+            })
+                .catch(() => { });
+        }
+        callback(generatePatternImage(bitmap, view, flip));
+    }
+    ios.createUIImageFromURI = createUIImageFromURI;
+    function generateShadowLayerPaths(view, bounds) {
+        const background = view.style.backgroundInternal;
+        const nativeView = view.nativeViewProtected;
+        const layer = nativeView.layer;
+        const boxShadow = background.getBoxShadow();
+        const spreadRadius = layout.toDeviceIndependentPixels(boxShadow.spreadRadius);
+        const { width, height } = bounds.size;
+        let innerPath, shadowPath;
+        // Generate more detailed paths if view has border radius
+        if (background.hasBorderRadius()) {
+            if (background.hasUniformBorder()) {
+                const cornerRadius = layer.cornerRadius;
+                const cappedRadius = getBorderCapRadius(cornerRadius, width / 2, height / 2);
+                const cappedOuterRadii = {
+                    topLeft: cappedRadius,
+                    topRight: cappedRadius,
+                    bottomLeft: cappedRadius,
+                    bottomRight: cappedRadius,
+                };
+                const cappedOuterRadiiWithSpread = {
+                    topLeft: cappedRadius + spreadRadius,
+                    topRight: cappedRadius + spreadRadius,
+                    bottomLeft: cappedRadius + spreadRadius,
+                    bottomRight: cappedRadius + spreadRadius,
+                };
+                innerPath = generateNonUniformBorderOuterClipPath(bounds, cappedOuterRadii);
+                shadowPath = generateNonUniformBorderOuterClipPath(bounds, cappedOuterRadiiWithSpread, spreadRadius);
+            }
+            else {
+                const outerTopLeftRadius = layout.toDeviceIndependentPixels(background.borderTopLeftRadius);
+                const outerTopRightRadius = layout.toDeviceIndependentPixels(background.borderTopRightRadius);
+                const outerBottomRightRadius = layout.toDeviceIndependentPixels(background.borderBottomRightRadius);
+                const outerBottomLeftRadius = layout.toDeviceIndependentPixels(background.borderBottomLeftRadius);
+                const topRadii = outerTopLeftRadius + outerTopRightRadius;
+                const rightRadii = outerTopRightRadius + outerBottomRightRadius;
+                const bottomRadii = outerBottomRightRadius + outerBottomLeftRadius;
+                const leftRadii = outerBottomLeftRadius + outerTopLeftRadius;
+                const cappedOuterRadii = {
+                    topLeft: getBorderCapRadius(outerTopLeftRadius, (outerTopLeftRadius / topRadii) * width, (outerTopLeftRadius / leftRadii) * height),
+                    topRight: getBorderCapRadius(outerTopRightRadius, (outerTopRightRadius / topRadii) * width, (outerTopRightRadius / rightRadii) * height),
+                    bottomLeft: getBorderCapRadius(outerBottomLeftRadius, (outerBottomLeftRadius / bottomRadii) * width, (outerBottomLeftRadius / leftRadii) * height),
+                    bottomRight: getBorderCapRadius(outerBottomRightRadius, (outerBottomRightRadius / bottomRadii) * width, (outerBottomRightRadius / rightRadii) * height),
+                };
+                // Add spread radius to corners that actually have radius as shadow has grown larger
+                // than view itself and needs to be rounded accordingly
+                const cappedOuterRadiiWithSpread = {
+                    topLeft: cappedOuterRadii.topLeft > 0 ? cappedOuterRadii.topLeft + spreadRadius : cappedOuterRadii.topLeft,
+                    topRight: cappedOuterRadii.topRight > 0 ? cappedOuterRadii.topRight + spreadRadius : cappedOuterRadii.topRight,
+                    bottomLeft: cappedOuterRadii.bottomLeft > 0 ? cappedOuterRadii.bottomLeft + spreadRadius : cappedOuterRadii.bottomLeft,
+                    bottomRight: cappedOuterRadii.bottomRight > 0 ? cappedOuterRadii.bottomRight + spreadRadius : cappedOuterRadii.bottomRight,
+                };
+                innerPath = generateNonUniformBorderOuterClipPath(bounds, cappedOuterRadii);
+                shadowPath = generateNonUniformBorderOuterClipPath(bounds, cappedOuterRadiiWithSpread, spreadRadius);
+            }
+        }
+        else {
+            innerPath = CGPathCreateWithRect(bounds, null);
+            shadowPath = CGPathCreateWithRect(CGRectInset(bounds, -spreadRadius, -spreadRadius), null);
+        }
+        return {
+            maskPath: generateShadowMaskPath(bounds, boxShadow, innerPath),
+            shadowPath,
+        };
+    }
+    ios.generateShadowLayerPaths = generateShadowLayerPaths;
+    function generateClipPath(view, bounds) {
+        const background = view.style.backgroundInternal;
+        const { origin, size } = bounds;
+        const position = {
+            left: origin.x,
+            top: origin.y,
+            bottom: size.height,
+            right: size.width,
+        };
+        if (position.right === 0 || position.bottom === 0) {
+            return;
+        }
+        let path;
+        const clipPath = background.clipPath;
+        if (clipPath instanceof ClipPathFunction) {
+            switch (clipPath.shape) {
+                case 'rect':
+                    path = rectPath(clipPath.rule, position);
+                    break;
+                case 'inset':
+                    path = insetPath(clipPath.rule, position);
+                    break;
+                case 'circle':
+                    path = circlePath(clipPath.rule, position);
+                    break;
+                case 'ellipse':
+                    path = ellipsePath(clipPath.rule, position);
+                    break;
+                case 'polygon':
+                    path = polygonPath(clipPath.rule, position);
+                    break;
+            }
+        }
+        else {
+            path = null;
+        }
+        return path;
+    }
+    ios.generateClipPath = generateClipPath;
+    function getUniformBorderRadius(view, bounds) {
+        const background = view.style.backgroundInternal;
+        const { width, height } = bounds.size;
+        const cornerRadius = layout.toDeviceIndependentPixels(background.getUniformBorderRadius());
+        return Math.min(Math.min(width / 2, height / 2), cornerRadius);
+    }
+    ios.getUniformBorderRadius = getUniformBorderRadius;
+    function generateNonUniformBorderInnerClipRoundedPath(view, bounds) {
+        const background = view.style.backgroundInternal;
+        const cappedOuterRadii = calculateNonUniformBorderCappedRadii(bounds, background);
+        return generateNonUniformBorderInnerClipPath(bounds, background, cappedOuterRadii);
+    }
+    ios.generateNonUniformBorderInnerClipRoundedPath = generateNonUniformBorderInnerClipRoundedPath;
+    function generateNonUniformBorderOuterClipRoundedPath(view, bounds) {
+        const background = view.style.backgroundInternal;
+        const cappedOuterRadii = calculateNonUniformBorderCappedRadii(bounds, background);
+        return generateNonUniformBorderOuterClipPath(bounds, cappedOuterRadii);
+    }
+    ios.generateNonUniformBorderOuterClipRoundedPath = generateNonUniformBorderOuterClipRoundedPath;
+    function generateNonUniformMultiColorBorderRoundedPaths(view, bounds) {
+        const background = view.style.backgroundInternal;
+        return generateNonUniformMultiColorBorderPaths(bounds, background);
+    }
+    ios.generateNonUniformMultiColorBorderRoundedPaths = generateNonUniformMultiColorBorderRoundedPaths;
+})(ios || (ios = {}));
+function maskLayerIfNeeded(nativeView, background) {
+    const layer = nativeView.layer;
+    // Check if layer should be masked
+    if (!(layer.mask instanceof CAShapeLayer)) {
+        // Since layers can only accept up to a single mask at a time, clip path is given more priority
+        if (background.clipPath) {
+            nativeView.maskType = iosViewUtils.LayerMask.CLIP_PATH;
+        }
+        else if (!background.hasUniformBorder() && background.hasBorderRadius()) {
+            nativeView.maskType = iosViewUtils.LayerMask.BORDER;
+        }
+        else {
+            nativeView.maskType = null;
+        }
+        if (nativeView.maskType != null) {
+            nativeView.originalMask = layer.mask;
+            layer.mask = CAShapeLayer.new();
+        }
+    }
+}
+function clearLayerMask(nativeView) {
+    if (nativeView.outerShadowContainerLayer) {
+        nativeView.outerShadowContainerLayer.mask = null;
+    }
+    nativeView.layer.mask = nativeView.originalMask;
+    nativeView.originalMask = null;
+    nativeView.maskType = null;
+}
+function onBackgroundViewScroll(args) {
+    const view = args.object;
+    const nativeView = view.nativeViewProtected;
+    if (nativeView instanceof UIScrollView) {
+        adjustLayersForScrollView(nativeView);
+    }
+}
+function adjustLayersForScrollView(nativeView) {
+    // Compensates with transition for the background layers for scrolling in ScrollView based controls.
+    CATransaction.begin();
+    CATransaction.setDisableActions(true);
+    const offset = nativeView.contentOffset;
+    const transform = {
+        a: 1,
+        b: 0,
+        c: 0,
+        d: 1,
+        tx: offset.x,
+        ty: offset.y,
+    };
+    if (nativeView.layer.mask) {
+        nativeView.layer.mask.setAffineTransform(transform);
+    }
+    // Nested layers
+    if (nativeView.gradientLayer) {
+        nativeView.gradientLayer.setAffineTransform(transform);
+    }
+    if (nativeView.borderLayer) {
+        nativeView.borderLayer.setAffineTransform(transform);
+    }
+    if (nativeView.outerShadowContainerLayer) {
+        // Update bounds of shadow layer as it belongs to parent view
+        nativeView.outerShadowContainerLayer.bounds = nativeView.bounds;
+        nativeView.outerShadowContainerLayer.setAffineTransform(transform);
+    }
+    CATransaction.setDisableActions(false);
+    CATransaction.commit();
+}
+function unregisterAdjustLayersOnScrollListener(view) {
+    if (view.nativeViewProtected instanceof UIScrollView) {
+        view.off('scroll', onBackgroundViewScroll);
+    }
+}
+function registerAdjustLayersOnScrollListener(view) {
+    if (view.nativeViewProtected instanceof UIScrollView) {
+        view.off('scroll', onBackgroundViewScroll);
+        view.on('scroll', onBackgroundViewScroll);
+        adjustLayersForScrollView(view.nativeViewProtected);
+    }
+}
+function clearNonUniformColorBorders(nativeView) {
+    if (nativeView.borderLayer) {
+        nativeView.borderLayer.mask = null;
+        nativeView.borderLayer.sublayers = null;
+    }
+    nativeView.hasNonUniformBorderColor = false;
+}
+function clearNonUniformBorders(nativeView) {
+    if (nativeView.borderLayer) {
+        nativeView.borderLayer.removeFromSuperlayer();
+        nativeView.borderLayer = null;
+    }
+    nativeView.hasNonUniformBorder = false;
+}
+function parsePosition(pos) {
+    const values = cssParse(pos);
+    if (values.length === 2) {
+        // @ts-ignore
+        return { x: values[0], y: values[1] };
+    }
+    if (values.length === 1) {
+        const center = { type: 'ident', string: 'center' };
+        if (values[0].type === 'ident') {
+            const val = values[0].string.toLocaleLowerCase();
+            // If you only one keyword is specified, the other value is "center"
+            if (val === 'left' || val === 'right') {
+                return { x: values[0], y: center };
+            }
+            else if (val === 'top' || val === 'bottom') {
+                return { x: center, y: values[0] };
+            }
+            else if (val === 'center') {
+                return { x: center, y: center };
+            }
+        }
+        else if (values[0].type === 'number') {
+            return { x: values[0], y: center };
+        }
+    }
+    return null;
+}
+function getDrawParams(image, background, width, height) {
+    if (!image) {
+        return null;
+    }
+    const res = {
+        repeatX: true,
+        repeatY: true,
+        posX: 0,
+        posY: 0,
+    };
+    // repeat
+    if (background.repeat) {
+        switch (background.repeat.toLowerCase()) {
+            case 'no-repeat':
+                res.repeatX = false;
+                res.repeatY = false;
+                break;
+            case 'repeat-x':
+                res.repeatY = false;
+                break;
+            case 'repeat-y':
+                res.repeatX = false;
+                break;
+        }
+    }
+    const imageSize = image.size;
+    let imageWidth = imageSize.width;
+    let imageHeight = imageSize.height;
+    // size
+    const size = background.size;
+    if (size) {
+        const values = cssParse(size);
+        if (values.length === 2) {
+            const vx = values[0];
+            const vy = values[1];
+            if (vx.unit === '%' && vy.unit === '%') {
+                imageWidth = (width * vx.value) / 100;
+                imageHeight = (height * vy.value) / 100;
+                res.sizeX = imageWidth;
+                res.sizeY = imageHeight;
+            }
+            else if (vx.type === 'number' && vy.type === 'number' && ((vx.unit === 'px' && vy.unit === 'px') || (vx.unit === '' && vy.unit === ''))) {
+                imageWidth = vx.value;
+                imageHeight = vy.value;
+                res.sizeX = imageWidth;
+                res.sizeY = imageHeight;
+            }
+        }
+        else if (values.length === 1 && values[0].type === 'ident') {
+            let scale = 0;
+            if (values[0].string === 'cover') {
+                scale = Math.max(width / imageWidth, height / imageHeight);
+            }
+            else if (values[0].string === 'contain') {
+                scale = Math.min(width / imageWidth, height / imageHeight);
+            }
+            if (scale > 0) {
+                imageWidth *= scale;
+                imageHeight *= scale;
+                res.sizeX = imageWidth;
+                res.sizeY = imageHeight;
+            }
+        }
+    }
+    // position
+    const position = background.position;
+    if (position) {
+        const v = parsePosition(position);
+        if (v) {
+            const spaceX = width - imageWidth;
+            const spaceY = height - imageHeight;
+            if (v.x.unit === '%' && v.y.unit === '%') {
+                res.posX = (spaceX * v.x.value) / 100;
+                res.posY = (spaceY * v.y.value) / 100;
+            }
+            else if (v.x.type === 'number' && v.y.type === 'number' && ((v.x.unit === 'px' && v.y.unit === 'px') || (v.x.unit === '' && v.y.unit === ''))) {
+                res.posX = v.x.value;
+                res.posY = v.y.value;
+            }
+            else if (v.x.type === 'ident' && v.y.type === 'ident') {
+                if (v.x.string.toLowerCase() === 'center') {
+                    res.posX = spaceX / 2;
+                }
+                else if (v.x.string.toLowerCase() === 'right') {
+                    res.posX = spaceX;
+                }
+                if (v.y.string.toLowerCase() === 'center') {
+                    res.posY = spaceY / 2;
+                }
+                else if (v.y.string.toLowerCase() === 'bottom') {
+                    res.posY = spaceY;
+                }
+            }
+            else if (v.x.type === 'number' && v.y.type === 'ident') {
+                if (v.x.unit === '%') {
+                    res.posX = (spaceX * v.x.value) / 100;
+                }
+                else if (v.x.unit === 'px' || v.x.unit === '') {
+                    res.posX = v.x.value;
+                }
+                if (v.y.string.toLowerCase() === 'center') {
+                    res.posY = spaceY / 2;
+                }
+                else if (v.y.string.toLowerCase() === 'bottom') {
+                    res.posY = spaceY;
+                }
+            }
+        }
+    }
+    return res;
+}
+function generatePatternImage(img, view, flip) {
+    const background = view.style.backgroundInternal;
+    const nativeView = view.nativeViewProtected;
+    if (!img || !nativeView) {
+        return null;
+    }
+    const frame = nativeView.frame;
+    const boundsWidth = view.scaleX ? frame.size.width / view.scaleX : frame.size.width;
+    const boundsHeight = view.scaleY ? frame.size.height / view.scaleY : frame.size.height;
+    const params = getDrawParams(img, background, boundsWidth, boundsHeight);
+    if (params.sizeX > 0 && params.sizeY > 0) {
+        const resizeRect = CGRectMake(0, 0, params.sizeX, params.sizeY);
+        UIGraphicsBeginImageContextWithOptions(resizeRect.size, false, 0.0);
+        img.drawInRect(resizeRect);
+        img = UIGraphicsGetImageFromCurrentImageContext();
+        UIGraphicsEndImageContext();
+    }
+    UIGraphicsBeginImageContextWithOptions(CGSizeFromString(`{${boundsWidth},${boundsHeight}}`), false, 0.0);
+    const context = UIGraphicsGetCurrentContext();
+    if (background.color && background.color.ios) {
+        CGContextSetFillColorWithColor(context, background.color.ios.CGColor);
+        CGContextFillRect(context, CGRectMake(0, 0, boundsWidth, boundsHeight));
+    }
+    if (!params.repeatX && !params.repeatY) {
+        img.drawAtPoint(CGPointMake(params.posX, params.posY));
+    }
+    else {
+        const w = params.repeatX ? boundsWidth : img.size.width;
+        const h = params.repeatY ? boundsHeight : img.size.height;
+        CGContextSetPatternPhase(context, CGSizeMake(params.posX, params.posY));
+        params.posX = params.repeatX ? 0 : params.posX;
+        params.posY = params.repeatY ? 0 : params.posY;
+        const patternRect = CGRectMake(params.posX, params.posY, w, h);
+        img.drawAsPatternInRect(patternRect);
+    }
+    const bgImage = UIGraphicsGetImageFromCurrentImageContext();
+    UIGraphicsEndImageContext();
+    return flip ? _flipImage(bgImage) : bgImage;
+}
+// Flipping the default coordinate system
+// https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html
+function _flipImage(originalImage) {
+    UIGraphicsBeginImageContextWithOptions(originalImage.size, false, 0.0);
+    const context = UIGraphicsGetCurrentContext();
+    CGContextSaveGState(context);
+    CGContextTranslateCTM(context, 0.0, originalImage.size.height);
+    CGContextScaleCTM(context, 1.0, -1.0);
+    originalImage.drawInRect(CGRectMake(0, 0, originalImage.size.width, originalImage.size.height));
+    CGContextRestoreGState(context);
+    const flippedImage = UIGraphicsGetImageFromCurrentImageContext();
+    UIGraphicsEndImageContext();
+    return flippedImage;
+}
+function cssValueToDeviceIndependentPixels(source, total) {
+    source = source.trim();
+    if (source.indexOf('px') !== -1) {
+        return layout.toDeviceIndependentPixels(parseFloat(source.replace('px', '')));
+    }
+    else if (source.indexOf('%') !== -1 && total > 0) {
+        return (parseFloat(source.replace('%', '')) / 100) * total;
+    }
+    else {
+        return parseFloat(source);
+    }
+}
+function getBorderCapRadius(a, b, c) {
+    return a && Math.min(a, Math.min(b, c));
+}
+function calculateNonUniformBorderCappedRadii(bounds, background) {
+    const { width, height } = bounds.size;
+    const { x, y } = bounds.origin;
+    const outerTopLeftRadius = layout.toDeviceIndependentPixels(background.borderTopLeftRadius);
+    const outerTopRightRadius = layout.toDeviceIndependentPixels(background.borderTopRightRadius);
+    const outerBottomRightRadius = layout.toDeviceIndependentPixels(background.borderBottomRightRadius);
+    const outerBottomLeftRadius = layout.toDeviceIndependentPixels(background.borderBottomLeftRadius);
+    const topRadii = outerTopLeftRadius + outerTopRightRadius;
+    const rightRadii = outerTopRightRadius + outerBottomRightRadius;
+    const bottomRadii = outerBottomRightRadius + outerBottomLeftRadius;
+    const leftRadii = outerBottomLeftRadius + outerTopLeftRadius;
+    const cappedOuterRadii = {
+        topLeft: getBorderCapRadius(outerTopLeftRadius, (outerTopLeftRadius / topRadii) * width, (outerTopLeftRadius / leftRadii) * height),
+        topRight: getBorderCapRadius(outerTopRightRadius, (outerTopRightRadius / topRadii) * width, (outerTopRightRadius / rightRadii) * height),
+        bottomLeft: getBorderCapRadius(outerBottomLeftRadius, (outerBottomLeftRadius / bottomRadii) * width, (outerBottomLeftRadius / leftRadii) * height),
+        bottomRight: getBorderCapRadius(outerBottomRightRadius, (outerBottomRightRadius / bottomRadii) * width, (outerBottomRightRadius / rightRadii) * height),
+    };
+    return cappedOuterRadii;
+}
+function drawNonUniformBorders(nativeView, background) {
+    const layer = nativeView.layer;
+    const layerBounds = layer.bounds;
+    layer.borderColor = null;
+    layer.borderWidth = 0;
+    layer.cornerRadius = 0;
+    const cappedOuterRadii = calculateNonUniformBorderCappedRadii(layerBounds, background);
+    if (nativeView.maskType === iosViewUtils.LayerMask.BORDER && layer.mask instanceof CAShapeLayer) {
+        layer.mask.path = generateNonUniformBorderOuterClipPath(layerBounds, cappedOuterRadii);
+    }
+    if (background.hasBorderWidth()) {
+        if (!nativeView.hasNonUniformBorder) {
+            nativeView.borderLayer = CAShapeLayer.new();
+            nativeView.borderLayer.fillRule = kCAFillRuleEvenOdd;
+            layer.addSublayer(nativeView.borderLayer);
+            nativeView.hasNonUniformBorder = true;
+        }
+        if (background.hasUniformBorderColor()) {
+            // Use anti-aliasing or borders will draw incorrectly at times
+            nativeView.borderLayer.shouldRasterize = true;
+            nativeView.borderLayer.rasterizationScale = Screen.mainScreen.scale;
+            nativeView.borderLayer.fillColor = background.borderTopColor?.ios?.CGColor || UIColor.blackColor.CGColor;
+            nativeView.borderLayer.path = generateNonUniformBorderInnerClipPath(layerBounds, background, cappedOuterRadii);
+        }
+        else {
+            // Non-uniform borders need more layers in order to display multiple colors at the same time
+            let borderTopLayer, borderRightLayer, borderBottomLayer, borderLeftLayer;
+            if (!nativeView.hasNonUniformBorderColor) {
+                const maskLayer = CAShapeLayer.new();
+                maskLayer.fillRule = kCAFillRuleEvenOdd;
+                // Use anti-aliasing or borders will draw incorrectly at times
+                maskLayer.shouldRasterize = true;
+                maskLayer.rasterizationScale = Screen.mainScreen.scale;
+                nativeView.borderLayer.mask = maskLayer;
+                borderTopLayer = CAShapeLayer.new();
+                borderRightLayer = CAShapeLayer.new();
+                borderBottomLayer = CAShapeLayer.new();
+                borderLeftLayer = CAShapeLayer.new();
+                nativeView.borderLayer.addSublayer(borderTopLayer);
+                nativeView.borderLayer.addSublayer(borderRightLayer);
+                nativeView.borderLayer.addSublayer(borderBottomLayer);
+                nativeView.borderLayer.addSublayer(borderLeftLayer);
+                nativeView.hasNonUniformBorderColor = true;
+            }
+            else {
+                borderTopLayer = nativeView.borderLayer.sublayers[0];
+                borderRightLayer = nativeView.borderLayer.sublayers[1];
+                borderBottomLayer = nativeView.borderLayer.sublayers[2];
+                borderLeftLayer = nativeView.borderLayer.sublayers[3];
+            }
+            const paths = generateNonUniformMultiColorBorderPaths(layerBounds, background);
+            borderTopLayer.fillColor = background.borderTopColor?.ios?.CGColor || UIColor.blackColor.CGColor;
+            borderTopLayer.path = paths[0];
+            borderRightLayer.fillColor = background.borderRightColor?.ios?.CGColor || UIColor.blackColor.CGColor;
+            borderRightLayer.path = paths[1];
+            borderBottomLayer.fillColor = background.borderBottomColor?.ios?.CGColor || UIColor.blackColor.CGColor;
+            borderBottomLayer.path = paths[2];
+            borderLeftLayer.fillColor = background.borderLeftColor?.ios?.CGColor || UIColor.blackColor.CGColor;
+            borderLeftLayer.path = paths[3];
+            // Clip inner area to create borders
+            if (nativeView.borderLayer.mask instanceof CAShapeLayer) {
+                nativeView.borderLayer.mask.path = generateNonUniformBorderInnerClipPath(layerBounds, background, cappedOuterRadii);
+            }
+        }
+    }
+}
+function calculateInnerBorderClipRadius(radius, insetX, insetY) {
+    const innerXRadius = Math.max(0, radius - insetX);
+    const innerYRadius = Math.max(0, radius - insetY);
+    const innerMaxRadius = Math.max(innerXRadius, innerYRadius);
+    return {
+        xRadius: innerXRadius,
+        yRadius: innerYRadius,
+        maxRadius: innerMaxRadius,
+    };
+}
+/**
+ * Generates a path that represents the rounded view area.
+ *
+ * @param bounds
+ * @param cappedRadii
+ * @param offset
+ * @returns
+ */
+function generateNonUniformBorderOuterClipPath(bounds, cappedRadii, offset = 0) {
+    const { width, height } = bounds.size;
+    const { x, y } = bounds.origin;
+    const left = x - offset;
+    const top = y - offset;
+    const right = x + width + offset;
+    const bottom = y + height + offset;
+    const clipPath = CGPathCreateMutable();
+    CGPathMoveToPoint(clipPath, null, left + cappedRadii.topLeft, top);
+    CGPathAddArcToPoint(clipPath, null, right, top, right, top + cappedRadii.topRight, cappedRadii.topRight);
+    CGPathAddArcToPoint(clipPath, null, right, bottom, right - cappedRadii.bottomRight, bottom, cappedRadii.bottomRight);
+    CGPathAddArcToPoint(clipPath, null, left, bottom, left, bottom - cappedRadii.bottomLeft, cappedRadii.bottomLeft);
+    CGPathAddArcToPoint(clipPath, null, left, top, left + cappedRadii.topLeft, top, cappedRadii.topLeft);
+    CGPathCloseSubpath(clipPath);
+    return clipPath;
+}
+/**
+ * Generates a path that represents the area inside borders.
+ *
+ * @param bounds
+ * @param background
+ * @param cappedOuterRadii
+ * @returns
+ */
+function generateNonUniformBorderInnerClipPath(bounds, background, cappedOuterRadii) {
+    const { width, height } = bounds.size;
+    const { x, y } = bounds.origin;
+    const position = {
+        left: x,
+        top: y,
+        bottom: y + height,
+        right: x + width,
+    };
+    const borderTopWidth = Math.max(0, layout.toDeviceIndependentPixels(background.borderTopWidth));
+    const borderRightWidth = Math.max(0, layout.toDeviceIndependentPixels(background.borderRightWidth));
+    const borderBottomWidth = Math.max(0, layout.toDeviceIndependentPixels(background.borderBottomWidth));
+    const borderLeftWidth = Math.max(0, layout.toDeviceIndependentPixels(background.borderLeftWidth));
+    const borderVWidth = borderTopWidth + borderBottomWidth;
+    const borderHWidth = borderLeftWidth + borderRightWidth;
+    const cappedBorderTopWidth = borderTopWidth && borderTopWidth * Math.min(1, height / borderVWidth);
+    const cappedBorderRightWidth = borderRightWidth && borderRightWidth * Math.min(1, width / borderHWidth);
+    const cappedBorderBottomWidth = borderBottomWidth && borderBottomWidth * Math.min(1, height / borderVWidth);
+    const cappedBorderLeftWidth = borderLeftWidth && borderLeftWidth * Math.min(1, width / borderHWidth);
+    const clipPath = CGPathCreateMutable();
+    CGPathAddRect(clipPath, null, CGRectMake(x, y, width, height));
+    // Inner clip paths
+    if (cappedBorderTopWidth > 0 || cappedBorderLeftWidth > 0) {
+        CGPathMoveToPoint(clipPath, null, position.left + cappedOuterRadii.topLeft, position.top + cappedBorderTopWidth);
+    }
+    else {
+        CGPathMoveToPoint(clipPath, null, position.left, position.top);
+    }
+    if (cappedBorderTopWidth > 0 || cappedBorderRightWidth > 0) {
+        const { xRadius, yRadius, maxRadius } = calculateInnerBorderClipRadius(cappedOuterRadii.topRight, cappedBorderRightWidth, cappedBorderTopWidth);
+        const innerTopRightTransform = CGAffineTransformMake(maxRadius && xRadius / maxRadius, 0, 0, maxRadius && yRadius / maxRadius, position.right - cappedBorderRightWidth - xRadius, position.top + cappedBorderTopWidth + yRadius);
+        CGPathAddArc(clipPath, innerTopRightTransform, 0, 0, maxRadius, (Math.PI * 3) / 2, 0, false);
+    }
+    else {
+        CGPathAddLineToPoint(clipPath, null, position.right, position.top);
+    }
+    if (cappedBorderBottomWidth > 0 || cappedBorderRightWidth > 0) {
+        const { xRadius, yRadius, maxRadius } = calculateInnerBorderClipRadius(cappedOuterRadii.bottomRight, cappedBorderRightWidth, cappedBorderBottomWidth);
+        const innerBottomRightTransform = CGAffineTransformMake(maxRadius && xRadius / maxRadius, 0, 0, maxRadius && yRadius / maxRadius, position.right - cappedBorderRightWidth - xRadius, position.bottom - cappedBorderBottomWidth - yRadius);
+        CGPathAddArc(clipPath, innerBottomRightTransform, 0, 0, maxRadius, 0, Math.PI / 2, false);
+    }
+    else {
+        CGPathAddLineToPoint(clipPath, null, position.right, position.bottom);
+    }
+    if (cappedBorderBottomWidth > 0 || cappedBorderLeftWidth > 0) {
+        const { xRadius, yRadius, maxRadius } = calculateInnerBorderClipRadius(cappedOuterRadii.bottomLeft, cappedBorderLeftWidth, cappedBorderBottomWidth);
+        const innerBottomLeftTransform = CGAffineTransformMake(maxRadius && xRadius / maxRadius, 0, 0, maxRadius && yRadius / maxRadius, position.left + cappedBorderLeftWidth + xRadius, position.bottom - cappedBorderBottomWidth - yRadius);
+        CGPathAddArc(clipPath, innerBottomLeftTransform, 0, 0, maxRadius, Math.PI / 2, Math.PI, false);
+    }
+    else {
+        CGPathAddLineToPoint(clipPath, null, position.left, position.bottom);
+    }
+    if (cappedBorderTopWidth > 0 || cappedBorderLeftWidth > 0) {
+        const { xRadius, yRadius, maxRadius } = calculateInnerBorderClipRadius(cappedOuterRadii.topLeft, cappedBorderLeftWidth, cappedBorderTopWidth);
+        const innerTopLeftTransform = CGAffineTransformMake(maxRadius && xRadius / maxRadius, 0, 0, maxRadius && yRadius / maxRadius, position.left + cappedBorderLeftWidth + xRadius, position.top + cappedBorderTopWidth + yRadius);
+        CGPathAddArc(clipPath, innerTopLeftTransform, 0, 0, maxRadius, Math.PI, (Math.PI * 3) / 2, false);
+    }
+    else {
+        CGPathAddLineToPoint(clipPath, null, position.left, position.top);
+    }
+    CGPathCloseSubpath(clipPath);
+    return clipPath;
+}
+/**
+ * Calculates the needed widths for creating triangular shapes for each border.
+ * To achieve this, all border widths are scaled according to view bounds.
+ *
+ * @param bounds
+ * @param background
+ * @returns
+ */
+function getBorderTriangleWidths(bounds, background) {
+    const width = bounds.origin.x + bounds.size.width;
+    const height = bounds.origin.y + bounds.size.height;
+    const borderTopWidth = Math.max(0, layout.toDeviceIndependentPixels(background.borderTopWidth));
+    const borderRightWidth = Math.max(0, layout.toDeviceIndependentPixels(background.borderRightWidth));
+    const borderBottomWidth = Math.max(0, layout.toDeviceIndependentPixels(background.borderBottomWidth));
+    const borderLeftWidth = Math.max(0, layout.toDeviceIndependentPixels(background.borderLeftWidth));
+    const verticalBorderWidth = borderTopWidth + borderBottomWidth;
+    const horizontalBorderWidth = borderLeftWidth + borderRightWidth;
+    let verticalBorderMultiplier = verticalBorderWidth > 0 ? height / verticalBorderWidth : 0;
+    let horizontalBorderMultiplier = horizontalBorderWidth > 0 ? width / horizontalBorderWidth : 0;
+    // Both directions should consider each other in order to scale widths properly, as a view might have different width and height
+    if (verticalBorderMultiplier > 0 && verticalBorderMultiplier < horizontalBorderMultiplier) {
+        horizontalBorderMultiplier -= horizontalBorderMultiplier - verticalBorderMultiplier;
+    }
+    if (horizontalBorderMultiplier > 0 && horizontalBorderMultiplier < verticalBorderMultiplier) {
+        verticalBorderMultiplier -= verticalBorderMultiplier - horizontalBorderMultiplier;
+    }
+    return {
+        top: borderTopWidth * verticalBorderMultiplier,
+        right: borderRightWidth * horizontalBorderMultiplier,
+        bottom: borderBottomWidth * verticalBorderMultiplier,
+        left: borderLeftWidth * horizontalBorderMultiplier,
+    };
+}
+/**
+ * Generates paths for visualizing borders with different colors per side.
+ * This is achieved by extending all borders enough to consume entire view size,
+ * then using an even-odd inner mask to clip and eventually render borders according to their corresponding width.
+ *
+ * @param bounds
+ * @param background
+ * @returns
+ */
+function generateNonUniformMultiColorBorderPaths(bounds, background) {
+    const { width, height } = bounds.size;
+    const { x, y } = bounds.origin;
+    const position = {
+        left: x,
+        top: y,
+        bottom: y + height,
+        right: x + width,
+    };
+    const borderWidths = getBorderTriangleWidths(bounds, background);
+    const paths = new Array(4);
+    const lto = {
+        x: position.left,
+        y: position.top,
+    }; // left-top-outside
+    const lti = {
+        x: position.left + borderWidths.left,
+        y: position.top + borderWidths.top,
+    }; // left-top-inside
+    const rto = {
+        x: position.right,
+        y: position.top,
+    }; // right-top-outside
+    const rti = {
+        x: position.right - borderWidths.right,
+        y: position.top + borderWidths.top,
+    }; // right-top-inside
+    const rbo = {
+        x: position.right,
+        y: position.bottom,
+    }; // right-bottom-outside
+    const rbi = {
+        x: position.right - borderWidths.right,
+        y: position.bottom - borderWidths.bottom,
+    }; // right-bottom-inside
+    const lbo = {
+        x: position.left,
+        y: position.bottom,
+    }; // left-bottom-outside
+    const lbi = {
+        x: position.left + borderWidths.left,
+        y: position.bottom - borderWidths.bottom,
+    }; // left-bottom-inside
+    const borderTopColor = background.borderTopColor;
+    const borderRightColor = background.borderRightColor;
+    const borderBottomColor = background.borderBottomColor;
+    const borderLeftColor = background.borderLeftColor;
+    if (borderWidths.top > 0 && borderTopColor?.ios) {
+        const topBorderPath = CGPathCreateMutable();
+        CGPathMoveToPoint(topBorderPath, null, lto.x, lto.y);
+        CGPathAddLineToPoint(topBorderPath, null, rto.x, rto.y);
+        CGPathAddLineToPoint(topBorderPath, null, rti.x, rti.y);
+        if (rti.x !== lti.x) {
+            CGPathAddLineToPoint(topBorderPath, null, lti.x, lti.y);
+        }
+        CGPathAddLineToPoint(topBorderPath, null, lto.x, lto.y);
+        paths[0] = topBorderPath;
+    }
+    if (borderWidths.right > 0 && borderRightColor?.ios) {
+        const rightBorderPath = CGPathCreateMutable();
+        CGPathMoveToPoint(rightBorderPath, null, rto.x, rto.y);
+        CGPathAddLineToPoint(rightBorderPath, null, rbo.x, rbo.y);
+        CGPathAddLineToPoint(rightBorderPath, null, rbi.x, rbi.y);
+        if (rbi.y !== rti.y) {
+            CGPathAddLineToPoint(rightBorderPath, null, rti.x, rti.y);
+        }
+        CGPathAddLineToPoint(rightBorderPath, null, rto.x, rto.y);
+        paths[1] = rightBorderPath;
+    }
+    if (borderWidths.bottom > 0 && borderBottomColor?.ios) {
+        const bottomBorderPath = CGPathCreateMutable();
+        CGPathMoveToPoint(bottomBorderPath, null, rbo.x, rbo.y);
+        CGPathAddLineToPoint(bottomBorderPath, null, lbo.x, lbo.y);
+        CGPathAddLineToPoint(bottomBorderPath, null, lbi.x, lbi.y);
+        if (lbi.x !== rbi.x) {
+            CGPathAddLineToPoint(bottomBorderPath, null, rbi.x, rbi.y);
+        }
+        CGPathAddLineToPoint(bottomBorderPath, null, rbo.x, rbo.y);
+        paths[2] = bottomBorderPath;
+    }
+    if (borderWidths.left > 0 && borderLeftColor?.ios) {
+        const leftBorderPath = CGPathCreateMutable();
+        CGPathMoveToPoint(leftBorderPath, null, lbo.x, lbo.y);
+        CGPathAddLineToPoint(leftBorderPath, null, lto.x, lto.y);
+        CGPathAddLineToPoint(leftBorderPath, null, lti.x, lti.y);
+        if (lti.y !== lbi.y) {
+            CGPathAddLineToPoint(leftBorderPath, null, lbi.x, lbi.y);
+        }
+        CGPathAddLineToPoint(leftBorderPath, null, lbo.x, lbo.y);
+        paths[3] = leftBorderPath;
+    }
+    return paths;
+}
+function drawBoxShadow(view) {
+    const background = view.style.backgroundInternal;
+    const nativeView = view.nativeViewProtected;
+    const layer = nativeView.layer;
+    // There is no parent to add shadow to
+    if (!layer.superlayer) {
+        return;
+    }
+    const bounds = nativeView.bounds;
+    const boxShadow = background.getBoxShadow();
+    // Initialize outer shadows
+    let outerShadowContainerLayer;
+    if (nativeView.outerShadowContainerLayer) {
+        outerShadowContainerLayer = nativeView.outerShadowContainerLayer;
+    }
+    else {
+        outerShadowContainerLayer = CALayer.new();
+        // TODO: Make this dynamic when views get support for multiple shadows
+        const shadowLayer = CALayer.new();
+        // This mask is necessary to maintain transparent background
+        const maskLayer = CAShapeLayer.new();
+        maskLayer.fillRule = kCAFillRuleEvenOdd;
+        shadowLayer.mask = maskLayer;
+        outerShadowContainerLayer.addSublayer(shadowLayer);
+        // Instead of nesting it, add shadow container layer underneath view so that it's not affected by border masking
+        layer.superlayer.insertSublayerBelow(outerShadowContainerLayer, layer);
+        nativeView.outerShadowContainerLayer = outerShadowContainerLayer;
+    }
+    // Apply clip path to shadow
+    if (nativeView.maskType === iosViewUtils.LayerMask.CLIP_PATH && layer.mask instanceof CAShapeLayer) {
+        if (!outerShadowContainerLayer.mask) {
+            outerShadowContainerLayer.mask = CAShapeLayer.new();
+        }
+        if (outerShadowContainerLayer.mask instanceof CAShapeLayer) {
+            outerShadowContainerLayer.mask.path = layer.mask.path;
+        }
+    }
+    outerShadowContainerLayer.bounds = bounds;
+    outerShadowContainerLayer.transform = layer.transform;
+    outerShadowContainerLayer.anchorPoint = layer.anchorPoint;
+    outerShadowContainerLayer.position = nativeView.center;
+    outerShadowContainerLayer.zPosition = layer.zPosition;
+    // Inherit view visibility values
+    outerShadowContainerLayer.opacity = layer.opacity;
+    outerShadowContainerLayer.hidden = layer.hidden;
+    const outerShadowLayers = outerShadowContainerLayer.sublayers;
+    if (outerShadowLayers?.count) {
+        for (let i = 0, count = outerShadowLayers.count; i < count; i++) {
+            const shadowLayer = outerShadowLayers[i];
+            const shadowRadius = layout.toDeviceIndependentPixels(boxShadow.blurRadius);
+            const spreadRadius = layout.toDeviceIndependentPixels(boxShadow.spreadRadius);
+            const offsetX = layout.toDeviceIndependentPixels(boxShadow.offsetX);
+            const offsetY = layout.toDeviceIndependentPixels(boxShadow.offsetY);
+            const { maskPath, shadowPath } = ios.generateShadowLayerPaths(view, bounds);
+            shadowLayer.allowsEdgeAntialiasing = true;
+            shadowLayer.contentsScale = Screen.mainScreen.scale;
+            // Shadow opacity is handled on the shadow's color instance
+            shadowLayer.shadowOpacity = boxShadow.color?.a ? boxShadow.color.a / 255 : 1;
+            shadowLayer.shadowRadius = shadowRadius;
+            shadowLayer.shadowColor = boxShadow.color?.ios?.CGColor;
+            shadowLayer.shadowOffset = CGSizeMake(offsetX, offsetY);
+            // Apply spread radius by expanding shadow layer bounds (this has a nice glow with radii set to 0)
+            shadowLayer.shadowPath = shadowPath;
+            // A mask that ensures that view maintains transparent background
+            if (shadowLayer.mask instanceof CAShapeLayer) {
+                shadowLayer.mask.path = maskPath;
+            }
+        }
+    }
+}
+function clearBoxShadow(nativeView) {
+    if (nativeView.outerShadowContainerLayer) {
+        nativeView.outerShadowContainerLayer.removeFromSuperlayer();
+        nativeView.outerShadowContainerLayer = null;
+    }
+}
+/**
+ * Creates a mask that ensures no shadow will be displayed underneath transparent backgrounds.
+ *
+ * @param bounds
+ * @param boxShadow
+ * @param bordersClipPath
+ * @returns
+ */
+function generateShadowMaskPath(bounds, boxShadow, innerClipPath) {
+    const shadowRadius = layout.toDeviceIndependentPixels(boxShadow.blurRadius);
+    const spreadRadius = layout.toDeviceIndependentPixels(boxShadow.spreadRadius);
+    const offsetX = layout.toDeviceIndependentPixels(boxShadow.offsetX);
+    const offsetY = layout.toDeviceIndependentPixels(boxShadow.offsetY);
+    // This value has to be large enough to avoid clipping shadow halo effect
+    const outerRectRadius = shadowRadius * 3 + spreadRadius;
+    const maskPath = CGPathCreateMutable();
+    // Proper clip position and size
+    const outerRect = CGRectOffset(CGRectInset(bounds, -outerRectRadius, -outerRectRadius), offsetX, offsetY);
+    CGPathAddPath(maskPath, null, innerClipPath);
+    CGPathAddRect(maskPath, null, outerRect);
+    return maskPath;
+}
+function rectPath(value, position) {
+    const arr = value.split(/[\s]+/);
+    const top = cssValueToDeviceIndependentPixels(arr[0], position.top);
+    const right = cssValueToDeviceIndependentPixels(arr[1], position.right);
+    const bottom = cssValueToDeviceIndependentPixels(arr[2], position.bottom);
+    const left = cssValueToDeviceIndependentPixels(arr[3], position.left);
+    return UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right - left, bottom - top)).CGPath;
+}
+function insetPath(value, position) {
+    const arr = value.split(/[\s]+/);
+    let topString;
+    let rightString;
+    let bottomString;
+    let leftString;
+    if (arr.length === 1) {
+        topString = rightString = bottomString = leftString = arr[0];
+    }
+    else if (arr.length === 2) {
+        topString = bottomString = arr[0];
+        rightString = leftString = arr[1];
+    }
+    else if (arr.length === 3) {
+        topString = arr[0];
+        rightString = leftString = arr[1];
+        bottomString = arr[2];
+    }
+    else if (arr.length === 4) {
+        topString = arr[0];
+        rightString = arr[1];
+        bottomString = arr[2];
+        leftString = arr[3];
+    }
+    const top = cssValueToDeviceIndependentPixels(topString, position.bottom);
+    const right = cssValueToDeviceIndependentPixels('100%', position.right) - cssValueToDeviceIndependentPixels(rightString, position.right);
+    const bottom = cssValueToDeviceIndependentPixels('100%', position.bottom) - cssValueToDeviceIndependentPixels(bottomString, position.bottom);
+    const left = cssValueToDeviceIndependentPixels(leftString, position.right);
+    return UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right - left, bottom - top)).CGPath;
+}
+function circlePath(value, position) {
+    const arr = value.split(/[\s]+/);
+    const radius = cssValueToDeviceIndependentPixels(arr[0], (position.right > position.bottom ? position.bottom : position.right) / 2);
+    const y = cssValueToDeviceIndependentPixels(arr[2], position.bottom);
+    const x = cssValueToDeviceIndependentPixels(arr[3], position.right);
+    return UIBezierPath.bezierPathWithArcCenterRadiusStartAngleEndAngleClockwise(CGPointMake(x, y), radius, 0, 360, true).CGPath;
+}
+function ellipsePath(value, position) {
+    const arr = value.split(/[\s]+/);
+    const rX = cssValueToDeviceIndependentPixels(arr[0], position.right);
+    const rY = cssValueToDeviceIndependentPixels(arr[1], position.bottom);
+    const cX = cssValueToDeviceIndependentPixels(arr[3], position.right);
+    const cY = cssValueToDeviceIndependentPixels(arr[4], position.bottom);
+    const left = cX - rX;
+    const top = cY - rY;
+    const width = rX * 2;
+    const height = rY * 2;
+    return UIBezierPath.bezierPathWithOvalInRect(CGRectMake(left, top, width, height)).CGPath;
+}
+function polygonPath(value, position) {
+    const path = CGPathCreateMutable();
+    let firstPoint;
+    const arr = value.split(/[,]+/);
+    for (let i = 0; i < arr.length; i++) {
+        const xy = arr[i].trim().split(/[\s]+/);
+        const point = {
+            x: cssValueToDeviceIndependentPixels(xy[0], position.right),
+            y: cssValueToDeviceIndependentPixels(xy[1], position.bottom),
+        };
+        if (!firstPoint) {
+            firstPoint = point;
+            CGPathMoveToPoint(path, null, point.x, point.y);
+        }
+        CGPathAddLineToPoint(path, null, point.x, point.y);
+    }
+    CGPathAddLineToPoint(path, null, firstPoint.x, firstPoint.y);
+    return path;
+}
+//# sourceMappingURL=background.ios.js.map