From 9ebc01b8e9078ea698ca91e5de1a89e5339dcb3b Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Thu, 10 Nov 2016 12:07:25 +0200
Subject: [PATCH] Add `inset` CSS clip-path support

---
 apps/app/ui-tests-app/css/clip-path-inset.xml |  34 +++++++++++++
 apps/app/ui-tests-app/css/clip-path.xml       |  28 ++++++++---
 apps/app/ui-tests-app/css/inset-test.png      | Bin 0 -> 556 bytes
 apps/app/ui-tests-app/css/main-page.ts        |   1 +
 tns-core-modules/ui/styling/background.ios.ts |  47 +++++++++++++++---
 tns-core-modules/ui/styling/style.ts          |   2 +-
 6 files changed, 99 insertions(+), 13 deletions(-)
 create mode 100644 apps/app/ui-tests-app/css/clip-path-inset.xml
 create mode 100644 apps/app/ui-tests-app/css/inset-test.png

diff --git a/apps/app/ui-tests-app/css/clip-path-inset.xml b/apps/app/ui-tests-app/css/clip-path-inset.xml
new file mode 100644
index 000000000..d802ec1f2
--- /dev/null
+++ b/apps/app/ui-tests-app/css/clip-path-inset.xml
@@ -0,0 +1,34 @@
+<Page>
+    <GridLayout rows="*,*,*,*,*" columns="*,*" automationText="clipPath">
+        <StackLayout col="0" colSpan="2" row="0" width="100" height="100" style.backgroundColor="magenta">
+            <Button width="100" height="100" text="no clip-path" style="background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+        </StackLayout>
+        
+        <StackLayout col="0" row="1" width="100" height="100" style.backgroundColor="magenta">
+            <Button width="100" height="100" text="inset(10)" style="clip-path: inset(10); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+        </StackLayout>
+        <StackLayout col="0" row="2" width="100" height="100" style.backgroundColor="magenta">
+            <Button width="100" height="100" text="inset(10 20)" style="clip-path: inset(10 20); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+        </StackLayout>
+        <StackLayout col="0" row="3" width="100" height="100" style.backgroundColor="magenta">
+            <Button width="100" height="100" text="inset(10 20 30)" style="clip-path: inset(10 20 30); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+        </StackLayout>
+        <StackLayout col="0" row="4" width="100" height="100" style.backgroundColor="magenta">
+            <Button width="100" height="100" text="inset(10 20 30 40)" style="clip-path: inset(10 20 30 40); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+        </StackLayout>
+        
+        <StackLayout col="1" row="1" width="100" height="100" style.backgroundColor="magenta">
+            <Button width="100" height="100" text="inset(10%)" style="clip-path: inset(10%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+        </StackLayout>
+        <StackLayout col="1" row="2" width="100" height="100" style.backgroundColor="magenta">
+            <Button width="100" height="100" text="inset(10% 20%)" style="clip-path: inset(10% 20%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+        </StackLayout>
+        <StackLayout col="1" row="3" width="100" height="100" style.backgroundColor="magenta">
+            <Button width="100" height="100" text="inset(10% 20% 30%)" style="clip-path: inset(10% 20% 30%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+        </StackLayout>
+        <StackLayout col="1" row="4" width="100" height="100" style.backgroundColor="magenta">
+            <Button width="100" height="100" text="inset(10% 20% 30% 40%)" style="clip-path: inset(10% 20% 30% 40%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
+        </StackLayout>
+
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/clip-path.xml b/apps/app/ui-tests-app/css/clip-path.xml
index f567cd119..14765d1c3 100644
--- a/apps/app/ui-tests-app/css/clip-path.xml
+++ b/apps/app/ui-tests-app/css/clip-path.xml
@@ -1,9 +1,25 @@
 <Page>
-    <GridLayout rows="*,*,*,*,*" automationText="clipPath">
-        <Button text="circle" style="background-color: red; border-width:2; border-color: blue; clip-path: circle(100% at 50% 50%);"/>
-        <Button text="ellipse" style="background-color: orange; border-width:2; border-color: green; clip-path: ellipse(50% 50% at 50% 50%);" row="1" />
-        <Button text="rect" style="background-color: red; border-width:2; border-color: blue; clip-path: rect(0, 0, 100%, 100%);" row="2" />
-        <Button text="polygon" style="background-color: magenta; border-width:2; border-color: red; clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);" row="3" />
-        <Button text="image polygon" style="background-image: url('https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/ce/maldives.jpg'); border-width:2; border-color: red; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);" row="4" />
+    <GridLayout columns="*,*" rows="*,*,*,*">
+        <StackLayout col="0" colSpan="2" row="0" width="100" height="100" style.backgroundColor="magenta">
+            <Button text="no clip-path" width="100" height="100" style="background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
+        </StackLayout>
+        <StackLayout col="0" row="1" width="100" height="100" style.backgroundColor="magenta">
+            <Button text="rect" width="100" height="100" style="clip-path: rect(10% 90 90% 10); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
+        </StackLayout>
+        <StackLayout col="1" row="1" width="100" height="100" style.backgroundColor="magenta">
+            <Button text="inset" width="100" height="100" style="clip-path: inset(15%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
+        </StackLayout>
+        <StackLayout col="0" row="2" width="100" height="100" style.backgroundColor="magenta">
+            <Button text="circle" width="100" height="100" style="clip-path: circle(80% at 55% 40%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
+        </StackLayout>
+        <StackLayout col="1" row="2" width="100" height="100" style.backgroundColor="magenta">
+            <Button text="ellipse" width="100" height="100" style=" clip-path: ellipse(45% 25% at 45% 55%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
+        </StackLayout>
+        <StackLayout col="0" row="3" width="100" height="100" style.backgroundColor="magenta">
+            <Button text="polygon"  width="100" height="100" style=" clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
+        </StackLayout>
+        <StackLayout col="1" row="3" width="100" height="100" style.backgroundColor="magenta">
+            <Button text="image polygon" width="100" height="100" style=" clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
+        </StackLayout>
     </GridLayout>
 </Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/inset-test.png b/apps/app/ui-tests-app/css/inset-test.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4c6e9f0c86f68e0aadacc8e9caf37991e2e4345
GIT binary patch
literal 556
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<j1SJ1AFfjuu#^NA%Cx&(BWL^R}Ea{HEjtmSN
z`?>!lvI6;>1s;*b3=BdgAk26#O}+xC;h?9BV@O5Z+Y1|gWgSFZ0=X2OJf=8$J(w3W
z`S$`*b(4nRXDS=q;_pAuo}07u>g?*zzrWeZhpb^fY88M%ygyP^yYuII1Noy;XWTck
zeGXi6utp>s8~6C~q`QBAeSB)bNI)UTn8Je*{r=~}4@xF5&FD|!eYQBF`KQLU1iLO%
zY~06L8{_Kj{+RA#N^juAr3k+fSY&rZtvUUWhgj$SS5s@i<3yPGcA~F;C*tr1Oby7B
p<?}v=ZR8Vq?SM|$z4`W!|1Do2m&cBClE4^d@O1TaS?83{1OU3C?Pvf1

literal 0
HcmV?d00001

diff --git a/apps/app/ui-tests-app/css/main-page.ts b/apps/app/ui-tests-app/css/main-page.ts
index 417339673..d8d28ca32 100644
--- a/apps/app/ui-tests-app/css/main-page.ts
+++ b/apps/app/ui-tests-app/css/main-page.ts
@@ -22,6 +22,7 @@ export function pageLoaded(args: EventData) {
     examples.set("switch", "css/views");
     examples.set("zindex", "css/zindex");
     examples.set("clipPath", "css/clip-path");
+    examples.set("clipPathInset", "css/clip-path-inset");
     examples.set("padding", "css/padding");
     examples.set("label-background-image", "css/label-background-image");
     examples.set("transform-decoration-color", "css/transform-decoration-color");
diff --git a/tns-core-modules/ui/styling/background.ios.ts b/tns-core-modules/ui/styling/background.ios.ts
index 0f280467b..3dbef7427 100644
--- a/tns-core-modules/ui/styling/background.ios.ts
+++ b/tns-core-modules/ui/styling/background.ios.ts
@@ -255,13 +255,46 @@ function drawClipPath(nativeView: UIView, background: common.Background) {
         var arr = value.split(/[\s]+/);
 
         var top = common.cssValueToDevicePixels(arr[0], bounds.top);
-        var left = common.cssValueToDevicePixels(arr[1], bounds.left);
+        var right = common.cssValueToDevicePixels(arr[1], bounds.right);
         var bottom = common.cssValueToDevicePixels(arr[2], bounds.bottom);
-        var right = common.cssValueToDevicePixels(arr[3], bounds.right);
+        var left = common.cssValueToDevicePixels(arr[3], bounds.left);
 
-        path = UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right, bottom)).CGPath;
+        path = UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right - left, bottom - top)).CGPath;
+    } 
+    else if (functionName === "inset") {
+        var arr = value.split(/[\s]+/);
+        
+        let topString: string;
+        let rightString: string;
+        let bottomString: string;
+        let leftString: string;
+        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];
+        }
 
-    } else if (functionName === "circle") {
+        var top = common.cssValueToDevicePixels(topString, bounds.bottom);
+        var right = common.cssValueToDevicePixels("100%", bounds.right) - common.cssValueToDevicePixels(rightString, bounds.right);
+        var bottom = common.cssValueToDevicePixels("100%", bounds.bottom) - common.cssValueToDevicePixels(bottomString, bounds.bottom);
+        var left = common.cssValueToDevicePixels(leftString, bounds.right);
+
+        path = UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right - left, bottom - top)).CGPath;
+    } 
+    else if (functionName === "circle") {
         var arr = value.split(/[\s]+/);
 
         var radius = common.cssValueToDevicePixels(arr[0], (bounds.right > bounds.bottom ? bounds.bottom : bounds.right) / 2);
@@ -270,7 +303,8 @@ function drawClipPath(nativeView: UIView, background: common.Background) {
 
         path = UIBezierPath.bezierPathWithArcCenterRadiusStartAngleEndAngleClockwise(CGPointMake(x, y), radius, 0, 360, true).CGPath;
 
-    } else if (functionName === "ellipse") {
+    } 
+    else if (functionName === "ellipse") {
         var arr = value.split(/[\s]+/);
 
         var rX = common.cssValueToDevicePixels(arr[0], bounds.right);
@@ -285,7 +319,8 @@ function drawClipPath(nativeView: UIView, background: common.Background) {
 
         path = UIBezierPath.bezierPathWithOvalInRect(CGRectMake(left, top, width, height)).CGPath;
 
-    } else if (functionName === "polygon") {
+    } 
+    else if (functionName === "polygon") {
 
         path = CGPathCreateMutable()
 
diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts
index 6b4751415..d4ba5e119 100644
--- a/tns-core-modules/ui/styling/style.ts
+++ b/tns-core-modules/ui/styling/style.ts
@@ -300,7 +300,7 @@ function isNonNegativeFiniteNumber(value: number): boolean {
     return isFinite(value) && !isNaN(value) && value >= 0;
 }
 
-var supportedPaths = ["rect", "circle", "ellipse", "polygon"];
+var supportedPaths = ["rect", "circle", "ellipse", "polygon", "inset"];
 function isClipPathValid(value: string): boolean {
     if (!value) {
         return true;