From 88f224272b434a835871f7a9d8598f54c479df8c Mon Sep 17 00:00:00 2001
From: Manol Donev <manoldonev@users.noreply.github.com>
Date: Fri, 15 Mar 2019 17:42:03 +0200
Subject: [PATCH] fix: expose missing css background* properties on View
 (#7032)

---
 .../app/ui-tests-app/css/background-image.css |  5 ++++
 .../app/ui-tests-app/css/background-image.xml | 29 +++++++++++++++++++
 apps/app/ui-tests-app/css/main-page.ts        |  1 +
 tns-core-modules/ui/core/view/view-common.ts  | 22 ++++++++++++++
 4 files changed, 57 insertions(+)
 create mode 100644 apps/app/ui-tests-app/css/background-image.css
 create mode 100644 apps/app/ui-tests-app/css/background-image.xml

diff --git a/apps/app/ui-tests-app/css/background-image.css b/apps/app/ui-tests-app/css/background-image.css
new file mode 100644
index 000000000..19bc3c719
--- /dev/null
+++ b/apps/app/ui-tests-app/css/background-image.css
@@ -0,0 +1,5 @@
+.testBtn {
+    background-image: url("res://icon");
+    background-repeat: no-repeat;
+    color: black;
+}
diff --git a/apps/app/ui-tests-app/css/background-image.xml b/apps/app/ui-tests-app/css/background-image.xml
new file mode 100644
index 000000000..115bbbac4
--- /dev/null
+++ b/apps/app/ui-tests-app/css/background-image.xml
@@ -0,0 +1,29 @@
+<Page>
+    <GridLayout rows="*,*,*,*,*,*" >
+        <Button backgroundImage="url('~/ui-tests-app/resources/images/no-image.png')" 
+            borderRadius='125' borderWidth='2' borderColor='black' 
+            backgroundRepeat="repeat" backgroundSize="contain" 
+            />
+        <Button row="1" backgroundImage="url('~/ui-tests-app/resources/images/no-image.png')" 
+            borderRadius='5' borderWidth='2' borderColor='black' 
+            backgroundRepeat="repeat-y"
+            />
+        <Button row="2" backgroundImage="url('~/ui-tests-app/resources/images/no-image.png')" 
+            borderRadius='25' borderWidth='2' borderColor='black' 
+            backgroundRepeat="repeat-x"
+            />
+         <Button row="3" backgroundImage="url('res://icon')" 
+            borderRadius='10' borderWidth='2' borderColor='black' 
+            backgroundRepeat="no-repeat"
+            backgroundSize="contain" 
+            height="80" width="180"
+            />
+        <Button row="4" text="css background no-repeat" class="testBtn"/>
+        <Button row="5" backgroundImage="url('res://icon')" 
+            borderRadius='10' borderWidth='2' borderColor='black' 
+            style="background-repeat: no-repeat"
+            backgroundSize="contain" 
+            height="80" width="180"
+            />
+    </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..464da8189 100644
--- a/apps/app/ui-tests-app/css/main-page.ts
+++ b/apps/app/ui-tests-app/css/main-page.ts
@@ -43,5 +43,6 @@ export function loadExamples() {
     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");
+    examples.set("background-image", "css/background-image");
     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 b52989865..99c248bcd 100644
--- a/tns-core-modules/ui/core/view/view-common.ts
+++ b/tns-core-modules/ui/core/view/view-common.ts
@@ -24,6 +24,7 @@ import {
 import { createViewFromEntry } from "../../builder";
 import { StyleScope } from "../../styling/style-scope";
 import { LinearGradient } from "../../styling/linear-gradient";
+import { BackgroundRepeat } from "../../styling/style-properties";
 
 export * from "../../styling/style-properties";
 export * from "../view-base";
@@ -472,6 +473,27 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         this.style.backgroundImage = value;
     }
 
+    get backgroundSize(): string {
+        return this.style.backgroundSize;
+    }
+    set backgroundSize(value: string) {
+        this.style.backgroundSize = value;
+    }
+
+    get backgroundPosition(): string {
+        return this.style.backgroundPosition;
+    }
+    set backgroundPosition(value: string) {
+        this.style.backgroundPosition = value;
+    }
+
+    get backgroundRepeat(): BackgroundRepeat {
+        return this.style.backgroundRepeat;
+    }
+    set backgroundRepeat(value: BackgroundRepeat) {
+        this.style.backgroundRepeat = value;
+    }
+
     get minWidth(): Length {
         return this.style.minWidth;
     }