From 7edf56197a179b13e1afe4c706aea4a99ac62aca Mon Sep 17 00:00:00 2001
From: Alexander Djenkov <a.djenkov90@gmail.com>
Date: Thu, 3 May 2018 18:17:07 +0300
Subject: [PATCH] Revert "Css gradients" (#5772)

This reverts commit 5a83a1c858e8095353aa50fe4ea080b07bf85813.
---
 .../ui-tests-app/button/border-playground.ts  |  5 --
 .../ui-tests-app/button/border-playground.xml |  1 -
 .../css/background-image-linear-gradient.ts   | 41 ----------
 .../css/background-image-linear-gradient.xml  |  7 --
 .../ui-tests-app/css/background-shorthand.ts  |  4 +-
 apps/app/ui-tests-app/css/gradient-border.css | 77 -------------------
 apps/app/ui-tests-app/css/gradient-border.xml | 22 ------
 apps/app/ui-tests-app/css/main-page.ts        |  2 -
 tns-core-modules/ui/core/view/view-common.ts  |  6 +-
 tns-core-modules/ui/core/view/view.d.ts       |  4 +-
 .../ui/styling/background-common.ts           | 15 +---
 .../ui/styling/background.android.ts          | 45 +----------
 tns-core-modules/ui/styling/background.d.ts   |  6 +-
 tns-core-modules/ui/styling/background.ios.ts | 67 +---------------
 .../ui/styling/linear-gradient.ts             | 64 ---------------
 .../ui/styling/style-properties.ts            | 34 +-------
 tns-core-modules/ui/styling/style/style.d.ts  |  3 +-
 tns-core-modules/ui/styling/style/style.ts    |  5 +-
 .../android/org.nativescript.widgets.d.ts     | 13 ----
 19 files changed, 24 insertions(+), 397 deletions(-)
 delete mode 100644 apps/app/ui-tests-app/css/background-image-linear-gradient.ts
 delete mode 100644 apps/app/ui-tests-app/css/background-image-linear-gradient.xml
 delete mode 100644 apps/app/ui-tests-app/css/gradient-border.css
 delete mode 100644 apps/app/ui-tests-app/css/gradient-border.xml
 delete mode 100644 tns-core-modules/ui/styling/linear-gradient.ts

diff --git a/apps/app/ui-tests-app/button/border-playground.ts b/apps/app/ui-tests-app/button/border-playground.ts
index b8a313dad..2d841bd90 100644
--- a/apps/app/ui-tests-app/button/border-playground.ts
+++ b/apps/app/ui-tests-app/button/border-playground.ts
@@ -34,11 +34,6 @@ export function onToggle(args: EventData) {
         target.backgroundImage = target.backgroundImage ? undefined : `~/ui-tests-app/resources/images/test2.png`; 
         debugConsole.text += `> background-image: ${target.backgroundImage}\n`;
     }
-    else if (button.text === "BGGradient") {
-        const gradient = "linear-gradient(to right, purple, red)";
-        target.backgroundImage = typeof target.backgroundImage === "object" ? undefined :  gradient;
-        debugConsole.text += `> background-image: ${gradient} \n`;
-    }
 
     scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, true);
 }
diff --git a/apps/app/ui-tests-app/button/border-playground.xml b/apps/app/ui-tests-app/button/border-playground.xml
index e3a0fb624..83d669808 100644
--- a/apps/app/ui-tests-app/button/border-playground.xml
+++ b/apps/app/ui-tests-app/button/border-playground.xml
@@ -17,7 +17,6 @@
         <StackLayout id="target" row="1" col="1">
             <Button text="BGColor" tap="onToggle"/>
             <Button text="BGImage" tap="onToggle"/>
-            <Button text="BGGradient" tap="onToggle"/>
         </StackLayout>
         <StackLayout id="right" class="button-container" row="1" col="2">
             <Button text="Color" id="borderRightColor" tap="onToggle"/>
diff --git a/apps/app/ui-tests-app/css/background-image-linear-gradient.ts b/apps/app/ui-tests-app/css/background-image-linear-gradient.ts
deleted file mode 100644
index dce615cf2..000000000
--- a/apps/app/ui-tests-app/css/background-image-linear-gradient.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as pages from "tns-core-modules/ui/page";
-import { EventData } from "tns-core-modules/data/observable";
-import * as button from "tns-core-modules/ui/button";
-
-import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
-
-let testIndex = 0;
-const tests = [
-    { name: "black-blue only", backgroundImage: "linear-gradient(to bottom, black, blue)"},
-    { name: "to bottom green-blue", backgroundImage: "linear-gradient(to bottom, green, blue)"},
-    { name: "to left yellow-blue", backgroundImage: "linear-gradient(to left, yellow, green)"},
-    { name: "to right yellow-blue", backgroundImage: "linear-gradient(to right, yellow, green)"},
-    { name: "-45deg green-blue", backgroundImage: "linear-gradient(-45deg, green, blue)"},
-    { name: "45deg green-blue", backgroundImage: "linear-gradient(45deg, green, blue)"},
-
-    { name: "black-blue-pink only", backgroundImage: "linear-gradient(to bottom, black, blue, pink)"},
-    { name: "to bottom green-blue-pink", backgroundImage: "linear-gradient(to bottom, green, blue, pink)"},
-    { name: "to left yellow-blue-pink", backgroundImage: "linear-gradient(to left, yellow, green, pink)"},
-    { name: "to right yellow-blue-pink", backgroundImage: "linear-gradient(to right, yellow, green, pink)"},
-    { name: "-45deg green-blue-pink", backgroundImage: "linear-gradient(-45deg, green, blue, pink)"},
-    { name: "45deg green-blue-pink", backgroundImage: "linear-gradient(45deg, green, blue, pink)"},
-]
-
-export function onLoaded(args) {
-    applyNextStyle(args);
-}
-
-export function onButtonTap(args) {
-    applyNextStyle(args);
-}
-
-function applyNextStyle(args) {
-    let page = <pages.Page>args.object.page;
-    let btn = <button.Button>args.object;
-    let gridElement = <GridLayout>page.getViewById("Container");
-
-    btn.text = tests[testIndex].name;
-    gridElement.backgroundImage = tests[testIndex].backgroundImage;
-
-    testIndex = testIndex < tests.length - 1 ? ++testIndex : 0;
-}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/background-image-linear-gradient.xml b/apps/app/ui-tests-app/css/background-image-linear-gradient.xml
deleted file mode 100644
index 9349e820b..000000000
--- a/apps/app/ui-tests-app/css/background-image-linear-gradient.xml
+++ /dev/null
@@ -1,7 +0,0 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded">
-  <GridLayout rows="*, 7*">
-     <Button row="0" text="a1" tap="onButtonTap"/>
-
-    <GridLayout id="Container" fontSize="12" borderColor="black" margin="5" borderWidth="1" row="1"/>
-  </GridLayout>
-</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/background-shorthand.ts b/apps/app/ui-tests-app/css/background-shorthand.ts
index 805192ee0..c3d21edfe 100644
--- a/apps/app/ui-tests-app/css/background-shorthand.ts
+++ b/apps/app/ui-tests-app/css/background-shorthand.ts
@@ -9,9 +9,7 @@ const tests = [
     { name: "black hex color only", background: "#000000" },
     { name: "yellow hex color only", background: "#ffff00" },
     { name: "blue color only", background: "blue" },
-
     { name: "repeat image only", background: "url(\"~/ui-tests-app/resources/images/icon.png\")" },
-    { name: "linear gradient red-blue only", background: "linear-gradient(to bottom, red, blue)"},
 
     { name: "[straight] image only, no-repeat ", background: "url(\"~/ui-tests-app/resources/images/icon.png\") no-repeat" },
     { name: "[straight] green color, image, no-repeat", background: "green url(\"~/ui-tests-app/resources/images/icon.png\") no-repeat" },
@@ -20,7 +18,7 @@ const tests = [
     { name: "[straight] orange hex color, image, no-repeat, position percents", background: "#F9791F url(\"~/ui-tests-app/resources/images/icon.png\") no-repeat 100% 100%" },
     { name: "[straight] green color, image, repeat-x, position percents", background: "green url(\"~/ui-tests-app/resources/images/icon.png\") repeat-x 100% 100%" },
     { name: "[straight] blue color, image, repeat-x, position", background: "blue url(\"~/ui-tests-app/resources/images/icon.png\") repeat-x 150 150" },
-
+    
     { name: "[shuffle] no-repeat, image only", background: "no-repeat url(\"~/ui-tests-app/resources/images/icon.png\")" },
     { name: "[shuffle] no-repeat, green color, image, ", background: "no-repeat green url(\"~/ui-tests-app/resources/images/icon.png\")" },
     { name: "[shuffle] yellow hex color, position pixels, image, no-repeat", background: "#ffff00 200px 200px url(\"~/ui-tests-app/resources/images/icon.png\") no-repeat" },
diff --git a/apps/app/ui-tests-app/css/gradient-border.css b/apps/app/ui-tests-app/css/gradient-border.css
deleted file mode 100644
index 3f8c9ff15..000000000
--- a/apps/app/ui-tests-app/css/gradient-border.css
+++ /dev/null
@@ -1,77 +0,0 @@
-StackLayout {
-    width: 80;
-    height: 80;
-    background: linear-gradient(to top, green, blue);
-}
-
-#s0 {
-    border-width: 5;
-}
-
-#s1 {
-    border-width: 5; border-color: red;
-}
-
-#s2 {
-    border-width: 5; border-color: red red red green;
-}
-
-#s3 {
-    border-width: 5; border-color: red; border-radius: 5;
-}
-
-#s4 {
-    border-width: 5; border-color: red; border-radius: 50;
-}
-
-#s5 {
-    border-width: 5 10 15 20; border-color: red;
-}
-
-#s6 {
-    border-width: 5; border-color: red green blue yellow;
-}
-
-#s7 {
-    border-width: 5 10 15 20; border-color: red green blue yellow;
-}
-
-#s8 {
-    border-width: 5 10; border-color: red green;
-}
-
-#s9 {
-    border-width: 15 10 5; border-color: red green blue;
-}
-
-#s10 {
-    border-width: 5 0; border-color: black;
-}
-
-#s11 {
-    background-color: magenta;
-}
-
-#s12 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
-}
-
-#s13 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
-}
-
-#s14 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
-}
-
-#s15 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/resources/images/test2.png');
-}
-
-#s16 {
-    border-width: 5; border-color: red; padding: 5;
-}
-
-#s17 {
-    border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
-}
diff --git a/apps/app/ui-tests-app/css/gradient-border.xml b/apps/app/ui-tests-app/css/gradient-border.xml
deleted file mode 100644
index 43c8adc28..000000000
--- a/apps/app/ui-tests-app/css/gradient-border.xml
+++ /dev/null
@@ -1,22 +0,0 @@
-<Page>
-    <GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
-        <StackLayout  id="s0" row="0" col="0"/>
-        <StackLayout  id="s1" row="0" col="1"/>
-        <StackLayout  id="s2" row="0" col="2"/>
-        <StackLayout  id="s3" row="1" col="0"/>
-        <StackLayout  id="s4" row="1" col="1"/>
-        <StackLayout  id="s5" row="1" col="2"/>
-        <StackLayout  id="s6" row="2" col="0"/>
-        <StackLayout  id="s7" row="2" col="1"/>
-        <StackLayout  id="s8" row="2" col="2"/>
-        <StackLayout  id="s9" row="3" col="0"/>
-        <StackLayout id="s10" row="3" col="1"/>
-        <StackLayout id="s11" row="3" col="2"/>
-        <StackLayout id="s12" row="4" col="0"/>
-        <StackLayout id="s13" row="4" col="1"/>
-        <StackLayout id="s14" row="4" col="2"/>
-        <StackLayout id="s15" row="5" col="0"/>
-        <StackLayout id="s16" row="5" col="1"/>
-        <StackLayout id="s17" row="5" col="2"/>
-    </GridLayout>
-</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/main-page.ts b/apps/app/ui-tests-app/css/main-page.ts
index 8e7083b4d..2e1953991 100644
--- a/apps/app/ui-tests-app/css/main-page.ts
+++ b/apps/app/ui-tests-app/css/main-page.ts
@@ -30,7 +30,6 @@ export function loadExamples() {
     examples.set("label-border", "css/label-border");
     examples.set("text-view-border", "css/text-view-border");
     examples.set("image-border", "css/image-border");
-    examples.set("gradient-border", "css/gradient-border");
     examples.set("layouts-border-overlap", "css/layouts-border-overlap");
     examples.set("measure-tests", "css/measure-tests");
     examples.set("all-uniform-border", "css/all-uniform-border");
@@ -42,6 +41,5 @@ export function loadExamples() {
     examples.set("non-uniform-radius", "css/non-uniform-radius");
     examples.set("missing-background-image", "css/missing-background-image");
     examples.set("background-shorthand", "css/background-shorthand");
-    examples.set("background-image-linear-gradient", "css/background-image-linear-gradient");
     return examples;
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/core/view/view-common.ts b/tns-core-modules/ui/core/view/view-common.ts
index 61baec9c3..2fb6ad329 100644
--- a/tns-core-modules/ui/core/view/view-common.ts
+++ b/tns-core-modules/ui/core/view/view-common.ts
@@ -21,11 +21,9 @@ import {
 
 import { createViewFromEntry } from "../../builder";
 import { StyleScope } from "../../styling/style-scope";
-import { LinearGradient } from "../../styling/linear-gradient";
 
 export * from "../../styling/style-properties";
 export * from "../view-base";
-export { LinearGradient };
 
 import * as am from "../../animation";
 let animationModule: typeof am;
@@ -437,10 +435,10 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         this.style.backgroundColor = value;
     }
 
-    get backgroundImage(): string | LinearGradient {
+    get backgroundImage(): string {
         return this.style.backgroundImage;
     }
-    set backgroundImage(value: string | LinearGradient) {
+    set backgroundImage(value: string) {
         this.style.backgroundImage = value;
     }
 
diff --git a/tns-core-modules/ui/core/view/view.d.ts b/tns-core-modules/ui/core/view/view.d.ts
index b481c28bd..44413e1ba 100644
--- a/tns-core-modules/ui/core/view/view.d.ts
+++ b/tns-core-modules/ui/core/view/view.d.ts
@@ -7,11 +7,9 @@ import { ViewBase, Property, EventData, Color } from "../view-base";
 import { Animation, AnimationDefinition, AnimationPromise } from "../../animation";
 import { HorizontalAlignment, VerticalAlignment, Visibility, Length, PercentLength } from "../../styling/style-properties";
 import { GestureTypes, GestureEventData, GesturesObserver } from "../../gestures";
-import { LinearGradient } from "../../styling/linear-gradient";
 
 export * from "../view-base";
 export * from "../../styling/style-properties";
-export { LinearGradient };
 
 export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator;
 
@@ -221,7 +219,7 @@ export abstract class View extends ViewBase {
     /**
      * Gets or sets the background image of the view.
      */
-    backgroundImage: string | LinearGradient;
+    backgroundImage: string;
 
     /**
      * Gets or sets the minimum width the view may grow to.
diff --git a/tns-core-modules/ui/styling/background-common.ts b/tns-core-modules/ui/styling/background-common.ts
index 13da78cf9..02328b7cf 100644
--- a/tns-core-modules/ui/styling/background-common.ts
+++ b/tns-core-modules/ui/styling/background-common.ts
@@ -1,6 +1,6 @@
 // Deifinitions.
 import { Background as BackgroundDefinition } from "./background";
-import { BackgroundRepeat, LinearGradient } from "../core/view";
+import { BackgroundRepeat } from "../core/view";
 
 // Types.
 import { Color } from "../../color";
@@ -9,7 +9,7 @@ export class Background implements BackgroundDefinition {
     public static default = new Background();
 
     public color: Color;
-    public image: string | LinearGradient;
+    public image: string;
     public repeat: BackgroundRepeat;
     public position: string;
     public size: string;
@@ -58,7 +58,7 @@ export class Background implements BackgroundDefinition {
         return clone;
     }
 
-    public withImage(value: string | LinearGradient): Background {
+    public withImage(value: string): Background {
         const clone = this.clone();
         clone.image = value;
         return clone;
@@ -179,15 +179,8 @@ export class Background implements BackgroundDefinition {
             return false;
         }
 
-        let imagesEqual = false;
-        if (value1 instanceof LinearGradient && value2 instanceof LinearGradient) {
-            imagesEqual = LinearGradient.equals(value1, value2);
-        } else {
-            imagesEqual = value1.image === value2.image;
-        }
-
         return Color.equals(value1.color, value2.color)
-            && imagesEqual
+            && value1.image === value2.image
             && value1.position === value2.position
             && value1.repeat === value2.repeat
             && value1.size === value2.size
diff --git a/tns-core-modules/ui/styling/background.android.ts b/tns-core-modules/ui/styling/background.android.ts
index fc808b2f2..681475319 100644
--- a/tns-core-modules/ui/styling/background.android.ts
+++ b/tns-core-modules/ui/styling/background.android.ts
@@ -1,4 +1,4 @@
-import { View, LinearGradient } from "../core/view";
+import { View } from "../core/view";
 import { isDataURI, isFileOrResourcePath, layout, RESOURCE_PREFIX, FILE_PREFIX } from "../../utils/utils";
 import { parse } from "../../css-value";
 import { path, knownFolders } from "../../file-system";
@@ -104,38 +104,6 @@ function fromBase64(source: string): android.graphics.Bitmap {
     return android.graphics.BitmapFactory.decodeByteArray(bytes, 0, bytes.length)
 }
 
-function fromGradient(gradient: LinearGradient): org.nativescript.widgets.LinearGradientDefinition {
-    const colors = Array.create("int", gradient.colorStops.length);
-    const stops = Array.create("float", gradient.colorStops.length);
-    let hasStops = false;
-    gradient.colorStops.forEach((stop, index) => {
-        colors[index] = stop.color.android;
-        if (stop.offset) {
-            stops[index] = stop.offset.value;
-            hasStops = true;
-        }
-    });
-
-    const alpha = gradient.angle / (Math.PI * 2);
-    const startX = Math.pow(
-      Math.sin(Math.PI * (alpha + 0.75)),
-      2
-    );
-    const startY = Math.pow(
-      Math.sin(Math.PI * (alpha + 0.5)),
-      2
-    );
-    const endX = Math.pow(
-      Math.sin(Math.PI * (alpha + 0.25)),
-      2
-    );
-    const endY = Math.pow(
-      Math.sin(Math.PI * alpha),
-      2
-    );
-    return new org.nativescript.widgets.LinearGradientDefinition(startX, startY, endX, endY, colors, hasStops ? stops : null);
-}
-
 const pattern: RegExp = /url\(('|")(.*?)\1\)/;
 function refreshBorderDrawable(this: void, view: View, borderDrawable: org.nativescript.widgets.BorderDrawable) {
     const nativeView = <android.view.View>view.nativeViewProtected;
@@ -147,9 +115,8 @@ function refreshBorderDrawable(this: void, view: View, borderDrawable: org.nativ
         const backgroundSizeParsedCSSValues = createNativeCSSValueArray(background.size);
         const blackColor = -16777216; //android.graphics.Color.BLACK;
 
-        let imageUri: string;
-        if (background.image && typeof background.image === "string") {
-            imageUri = background.image;
+        let imageUri = background.image;
+        if (imageUri) {
             const match = imageUri.match(pattern);
             if (match && match[2]) {
                 imageUri = match[2];
@@ -174,11 +141,6 @@ function refreshBorderDrawable(this: void, view: View, borderDrawable: org.nativ
             }
         }
 
-        let gradient: org.nativescript.widgets.LinearGradientDefinition = null;
-        if (background.image && background.image instanceof LinearGradient) {
-            gradient = fromGradient(background.image);
-        }
-
         borderDrawable.refresh(
             background.borderTopColor ? background.borderTopColor.android : blackColor,
             background.borderRightColor ? background.borderRightColor.android : blackColor,
@@ -200,7 +162,6 @@ function refreshBorderDrawable(this: void, view: View, borderDrawable: org.nativ
             background.color ? background.color.android : 0,
             imageUri,
             bitmap,
-            gradient,
             context,
             background.repeat,
             background.position,
diff --git a/tns-core-modules/ui/styling/background.d.ts b/tns-core-modules/ui/styling/background.d.ts
index a41e75ff7..f2780ac06 100644
--- a/tns-core-modules/ui/styling/background.d.ts
+++ b/tns-core-modules/ui/styling/background.d.ts
@@ -3,12 +3,12 @@
  */ /** */
 
 import { Color } from "../../color";
-import { View, BackgroundRepeat, LinearGradient } from "../core/view";
+import { View, BackgroundRepeat } from "../core/view";
 
 export class Background {
     public static default: Background;
     public color: Color;
-    public image: string | LinearGradient;
+    public image: string;
     public repeat: BackgroundRepeat;
     public position: string;
     public size: string;
@@ -27,7 +27,7 @@ export class Background {
     public clipPath: string;
 
     public withColor(value: Color): Background;
-    public withImage(value: string | LinearGradient): Background;
+    public withImage(value: string): Background;
     public withRepeat(value: BackgroundRepeat): Background;
     public withPosition(value: string): Background;
     public withSize(value: string): Background;
diff --git a/tns-core-modules/ui/styling/background.ios.ts b/tns-core-modules/ui/styling/background.ios.ts
index 9c004c23e..25f5b752d 100644
--- a/tns-core-modules/ui/styling/background.ios.ts
+++ b/tns-core-modules/ui/styling/background.ios.ts
@@ -1,7 +1,7 @@
 import { ScrollEventData } from "../scroll-view";
 
 import { Background as BackgroundDefinition } from "./background";
-import { View, Point, LinearGradient } from "../core/view";
+import { View, Point } from "../core/view";
 import { Color } from "../../color";
 import { ios as utilsIos, isDataURI, isFileOrResourcePath, layout } from "../../utils/utils";
 import { fromFileOrResource, fromBase64, fromUrl } from "../../image-source";
@@ -21,8 +21,6 @@ interface NativeView extends UIView {
     rightBorderLayer: CALayer;
     bottomBorderLayer: CALayer;
     leftBorderLayer: CALayer;
-
-    gradientLayer: CAGradientLayer;
 }
 
 interface Rect {
@@ -45,11 +43,6 @@ export module ios {
             clearNonUniformBorders(nativeView);
         }
 
-        clearGradient(nativeView);
-        if (background.image instanceof LinearGradient) {
-            drawGradient(nativeView, background.image);
-        }
-
         const hasNonUniformBorderWidths = background.hasBorderWidth() && !background.hasUniformBorder();
         const hasNonUniformBorderRadiuses = background.hasBorderRadius() && !background.hasUniformBorderRadius();
         if (background.hasUniformBorderColor() && (hasNonUniformBorderWidths || hasNonUniformBorderRadiuses)) {
@@ -74,7 +67,7 @@ export module ios {
             drawClipPath(nativeView, background);
         }
 
-        if (!background.image || background.image instanceof LinearGradient) {
+        if (!background.image) {
             const uiColor = background.color ? background.color.ios : undefined;
             callback(uiColor);
         } else {
@@ -158,7 +151,7 @@ function setUIColorFromImage(view: View, nativeView: UIView, callback: (uiColor:
 
     const style = view.style;
     const background = style.backgroundInternal;
-    let imageUri = background.image as string;
+    let imageUri = background.image;
     if (imageUri) {
         const match = imageUri.match(pattern);
         if (match && match[2]) {
@@ -670,60 +663,6 @@ function drawNoRadiusNonUniformBorders(nativeView: NativeView, background: Backg
     nativeView.hasNonUniformBorder = hasNonUniformBorder;
 }
 
-function drawGradient(nativeView: NativeView, gradient: LinearGradient) {
-
-    const gradientLayer = CAGradientLayer.layer();
-    gradientLayer.frame = nativeView.bounds;
-    nativeView.gradientLayer = gradientLayer;
-
-    const iosColors = NSMutableArray.alloc().initWithCapacity(gradient.colorStops.length);
-    const iosStops = NSMutableArray.alloc<number>().initWithCapacity(gradient.colorStops.length);
-    let hasStops = false;
-
-    gradient.colorStops.forEach(stop => {
-       iosColors.addObject(stop.color.ios.CGColor);
-       if (stop.offset) {
-           iosStops.addObject(stop.offset.value);
-           hasStops = true;
-       }
-    });
-
-    gradientLayer.colors = iosColors;
-
-    if (hasStops) {
-        gradientLayer.locations = iosStops;
-    }
-
-    const alpha = gradient.angle / (Math.PI * 2);
-    const startX = Math.pow(
-      Math.sin(Math.PI * (alpha + 0.75)),
-      2
-    );
-    const startY = Math.pow(
-      Math.sin(Math.PI * (alpha + 0.5)),
-      2
-    );
-    const endX = Math.pow(
-      Math.sin(Math.PI * (alpha + 0.25)),
-      2
-    );
-    const endY = Math.pow(
-      Math.sin(Math.PI * alpha),
-      2
-    );
-    gradientLayer.startPoint = {x: startX, y: startY};
-    gradientLayer.endPoint = {x: endX, y: endY};
-
-    nativeView.layer.insertSublayerAtIndex(gradientLayer, 0);
-
-}
-
-function clearGradient(nativeView: NativeView): void {
-    if (nativeView.gradientLayer) {
-        nativeView.gradientLayer.removeFromSuperlayer();
-    }
-}
-
 function drawClipPath(nativeView: UIView, background: BackgroundDefinition) {
     const layer = nativeView.layer;
     const layerBounds = layer.bounds;
diff --git a/tns-core-modules/ui/styling/linear-gradient.ts b/tns-core-modules/ui/styling/linear-gradient.ts
deleted file mode 100644
index ecedacbcb..000000000
--- a/tns-core-modules/ui/styling/linear-gradient.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { LengthPercentUnit } from "./style-properties";
-import * as parser from "../../css/parser";
-import { Color } from "../../color";
-
-export class LinearGradient {
-    public angle: number;
-    public colorStops: ColorStop[];
-
-    static parse(value: parser.LinearGradient): LinearGradient {
-        const result = new LinearGradient();
-        result.angle = value.angle;
-        result.colorStops = value.colors.map(color => {
-            const offset = color.offset || null;
-            let offsetUnit: LengthPercentUnit;
-
-            if (offset && offset.unit === "%") {
-                offsetUnit = {
-                    unit: "%",
-                    value: offset.value
-                };
-            }
-
-            return {
-                color: new Color(color.argb),
-                offset: offsetUnit
-            }
-        });
-        return result;
-    }
-
-    static equals(first: LinearGradient, second: LinearGradient): boolean {
-        if (!first && !second) {
-            return true;
-        } else if (!first || !second) {
-            return false
-        }
-
-        if (first.angle !== second.angle) {
-            return false;
-        }
-
-        if (first.colorStops.length !== second.colorStops.length) {
-            return false;
-        }
-
-        for (let i = 0; i < first.colorStops.length; i++) {
-            const firstStop = first.colorStops[i];
-            const secondStop = second.colorStops[i];
-            if (firstStop.offset !== secondStop.offset) {
-                return false;
-            }
-            if (!Color.equals(firstStop.color, secondStop.color)) {
-                return false;
-            }
-        }
-
-        return true;
-    }
-}
-
-export interface ColorStop {
-    color: Color;
-    offset?: LengthPercentUnit;
-}
\ No newline at end of file
diff --git a/tns-core-modules/ui/styling/style-properties.ts b/tns-core-modules/ui/styling/style-properties.ts
index 0b5d80bb7..189c5ff48 100644
--- a/tns-core-modules/ui/styling/style-properties.ts
+++ b/tns-core-modules/ui/styling/style-properties.ts
@@ -1,6 +1,6 @@
 // Types
-import { unsetValue, Style,
-    CssProperty, CssAnimationProperty,
+import { unsetValue, Style, 
+    CssProperty, CssAnimationProperty, 
     ShorthandProperty, InheritedCssProperty,
     makeValidator, makeParser } from "../core/properties";
 import {
@@ -27,7 +27,6 @@ import {
 } from "../../matrix";
 
 import * as parser from "../../css/parser";
-import { LinearGradient } from "./linear-gradient";
 
 export type LengthDipUnit = { readonly unit: "dip", readonly value: dip };
 export type LengthPxUnit = { readonly unit: "px", readonly value: px };
@@ -564,28 +563,10 @@ export const backgroundInternalProperty = new CssProperty<Style, Background>({
 backgroundInternalProperty.register(Style);
 
 // const pattern: RegExp = /url\(('|")(.*?)\1\)/;
-export const backgroundImageProperty = new CssProperty<Style, string | LinearGradient>({
+export const backgroundImageProperty = new CssProperty<Style, string>({
     name: "backgroundImage", cssName: "background-image", valueChanged: (target, oldValue, newValue) => {
         const background = target.backgroundInternal.withImage(newValue);
         target.backgroundInternal = background;
-    },
-    equalityComparer: (value1, value2) => {
-        if (value1 instanceof LinearGradient && value2 instanceof LinearGradient) {
-            return LinearGradient.equals(value1, value2)
-        } else {
-            return value1 === value2;
-        }
-    },
-    valueConverter: (value: any) => {
-        if (typeof value === "string") {
-            const parsed = parser.parseBackground(value);
-            if (parsed) {
-                const background = parsed.value;
-                value = (typeof background.image === "object") ? LinearGradient.parse(background.image) : value;
-            }
-        }
-
-        return value;
     }
 });
 backgroundImageProperty.register(Style);
@@ -637,14 +618,7 @@ function convertToBackgrounds(this: void, value: string): [CssProperty<any, any>
     if (typeof value === "string") {
         const backgrounds = parser.parseBackground(value).value;
         const backgroundColor = backgrounds.color ? new Color(backgrounds.color) : unsetValue;
-
-        let backgroundImage: string | LinearGradient;
-        if (typeof backgrounds.image === "object" && backgrounds.image) {
-            backgroundImage = LinearGradient.parse(backgrounds.image);
-        } else {
-            backgroundImage = backgrounds.image || unsetValue;
-        }
-
+        const backgroundImage = backgrounds.image || unsetValue;
         const backgroundRepeat = backgrounds.repeat || unsetValue;
         const backgroundPosition = backgrounds.position ? backgrounds.position.text : unsetValue;
 
diff --git a/tns-core-modules/ui/styling/style/style.d.ts b/tns-core-modules/ui/styling/style/style.d.ts
index a3daa523b..39b5ff6f3 100644
--- a/tns-core-modules/ui/styling/style/style.d.ts
+++ b/tns-core-modules/ui/styling/style/style.d.ts
@@ -11,7 +11,6 @@ import {
     FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent,
     Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf
 } from "../../layouts/flexbox-layout";
-import { LinearGradient } from "../linear-gradient";
 
 export interface Thickness {
     left: number;
@@ -65,7 +64,7 @@ export class Style extends Observable {
 
     public background: string;
     public backgroundColor: Color;
-    public backgroundImage: string | LinearGradient;
+    public backgroundImage: string;
     public backgroundRepeat: BackgroundRepeat;
     public backgroundSize: string;
     public backgroundPosition: string;
diff --git a/tns-core-modules/ui/styling/style/style.ts b/tns-core-modules/ui/styling/style/style.ts
index 14a93f3e0..9dc705841 100644
--- a/tns-core-modules/ui/styling/style/style.ts
+++ b/tns-core-modules/ui/styling/style/style.ts
@@ -2,8 +2,7 @@ import { Style as StyleDefinition } from ".";
 import { Color } from "../../../color";
 import { Font, FontStyle, FontWeight } from "../font";
 import { Background } from "../background";
-import { Length, PercentLength, ViewBase, BackgroundRepeat, Visibility,
-    HorizontalAlignment, VerticalAlignment, dip, LinearGradient } from "../../core/view";
+import { Length, PercentLength, ViewBase, BackgroundRepeat, Visibility, HorizontalAlignment, VerticalAlignment, dip } from "../../core/view";
 import { Observable } from "../../../data/observable";
 
 import {
@@ -38,7 +37,7 @@ export class Style extends Observable implements StyleDefinition {
 
     public background: string;
     public backgroundColor: Color;
-    public backgroundImage: string | LinearGradient;
+    public backgroundImage: string;
     public backgroundRepeat: BackgroundRepeat;
     public backgroundSize: string;
     public backgroundPosition: string;
diff --git a/tns-platform-declarations/android/org.nativescript.widgets.d.ts b/tns-platform-declarations/android/org.nativescript.widgets.d.ts
index 7ff8da3d5..1d336d827 100644
--- a/tns-platform-declarations/android/org.nativescript.widgets.d.ts
+++ b/tns-platform-declarations/android/org.nativescript.widgets.d.ts
@@ -73,7 +73,6 @@
                     backgroundColor: number,
                     backgroundImage: string,
                     backgroundBitmap: android.graphics.Bitmap,
-                    backgroundGradient: LinearGradientDefinition,
                     context: android.content.Context,
                     backgroundRepeat: string,
                     backgroundPosition: string,
@@ -118,18 +117,6 @@
                 public toDebugString(): string;
             }
 
-            export class LinearGradientDefinition {
-                constructor(startX: number, endX: number, startY: number,
-                            endY: number, colors: number[], stops?: number[]);
-
-                public getStartX(): number;
-                public getStartY(): number;
-                public getEndX(): number;
-                public getEndY(): number;
-                public getColors(): number[];
-                public getStops(): number[];
-            }
-
             export class CSSValue {
                 constructor(type: string, str: string, unit: string, value: number);
                 public getType(): string;