From 071ef1607da1306ae1644f34aa6904844c3f059c Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Tue, 27 Sep 2016 09:46:30 +0300
Subject: [PATCH] Fix: CSS border-width causes text to overflow TextView

Resolves #2789
---
 .../css/all-non-uniform-border.css            |  6 +-
 .../ui-tests-app/css/all-uniform-border.css   |  6 +-
 .../ui-tests-app/css/all-uniform-border.xml   |  2 +-
 tns-core-modules/ui/styling/background.ios.ts | 73 +++++++++----------
 4 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/apps/app/ui-tests-app/css/all-non-uniform-border.css b/apps/app/ui-tests-app/css/all-non-uniform-border.css
index 686b78eaa..5187cfa6a 100644
--- a/apps/app/ui-tests-app/css/all-non-uniform-border.css
+++ b/apps/app/ui-tests-app/css/all-non-uniform-border.css
@@ -1,6 +1,6 @@
 .s0 {
     border-width: 1 2 5 10; border-color: red green blue yellow;
-    width: 100;
-    height: 100;
-    font-size: 10;
+    width: 80;
+    height: 80;
+    font-size: 6;
 }
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/all-uniform-border.css b/apps/app/ui-tests-app/css/all-uniform-border.css
index 80a348e33..a8396e2ff 100644
--- a/apps/app/ui-tests-app/css/all-uniform-border.css
+++ b/apps/app/ui-tests-app/css/all-uniform-border.css
@@ -1,6 +1,6 @@
 .s0 {
     border-width: 5; border-color: red; border-radius: 5;
-    width: 100;
-    height: 100;
-    font-size: 10;
+    width: 80;
+    height: 80;
+    font-size: 6;
 }
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/all-uniform-border.xml b/apps/app/ui-tests-app/css/all-uniform-border.xml
index 4fa204ff7..30956a52c 100644
--- a/apps/app/ui-tests-app/css/all-uniform-border.xml
+++ b/apps/app/ui-tests-app/css/all-uniform-border.xml
@@ -3,7 +3,7 @@
         <Button class="s0" row="0" col="0" text="Button"/>
         <Label class="s0" row="0" col="1" text="Label"/>
         <TextField class="s0" row="0" col="2" text="TextField"/>
-        <TextView class="s0" row="1" col="0" text="TextView"/>
+        <TextView class="s0" row="1" col="0" text="TextView Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit, tortor vitae imperdiet gravida, eros neque scelerisque sapien, vel ultricies turpis ipsum vitae nisi. Sed ut consequat magna, scelerisque malesuada elit. Proin posuere purus dolor, semper sagittis dolor tempus ut. Praesent lorem mauris, ultricies eu faucibus quis, auctor ut leo. Mauris tincidunt justo id urna malesuada, at dapibus orci tincidunt. Suspendisse sollicitudin eget lorem porttitor pharetra. Phasellus cursus mauris ut urna sollicitudin pharetra."/>
         <SearchBar class="s0" row="1" col="1" text="SearchBar"/>
         <Switch class="s0" row="1" col="2" checked="true"/>
         <Slider class="s0" row="2" col="0" minValue="0" maxValue="100" value="50"/>
diff --git a/tns-core-modules/ui/styling/background.ios.ts b/tns-core-modules/ui/styling/background.ios.ts
index 920cdac96..165570e1c 100644
--- a/tns-core-modules/ui/styling/background.ios.ts
+++ b/tns-core-modules/ui/styling/background.ios.ts
@@ -33,6 +33,29 @@ export module ios {
         }
 
         // Borders
+
+        // Clear all borders
+        nativeView.layer.borderColor = undefined; 
+        nativeView.layer.borderWidth = 0;
+        nativeView.layer.cornerRadius = 0;
+        nativeView.clipsToBounds = true;
+
+        if (nativeView["topBorderLayer"]){
+            (<CAShapeLayer>nativeView["topBorderLayer"]).removeFromSuperlayer();
+        }
+        
+        if (nativeView["rightBorderLayer"]){
+            (<CAShapeLayer>nativeView["rightBorderLayer"]).removeFromSuperlayer();
+        }
+        
+        if (nativeView["bottomBorderLayer"]){
+            (<CAShapeLayer>nativeView["bottomBorderLayer"]).removeFromSuperlayer();
+        }
+        
+        if (nativeView["leftBorderLayer"]){
+            (<CAShapeLayer>nativeView["leftBorderLayer"]).removeFromSuperlayer();
+        }
+        
         if (background.hasUniformBorder()){
             let borderColor = background.getUniformBorderColor();
             if (borderColor && borderColor.ios){
@@ -43,37 +66,13 @@ export module ios {
             }
             nativeView.layer.borderWidth = background.getUniformBorderWidth();
             nativeView.layer.cornerRadius = background.getUniformBorderRadius();
-            nativeView.clipsToBounds = (nativeView.layer.cornerRadius > 0);
         }
         else { // Draw non-uniform borders
-            // Clear everything
-            nativeView.layer.borderColor = undefined; 
-            nativeView.layer.borderWidth = 0;
-            nativeView.layer.cornerRadius = 0;
-            nativeView.clipsToBounds = false;
-            
-            if (nativeView["topBorderLayer"]){
-                (<CAShapeLayer>nativeView["topBorderLayer"]).removeFromSuperlayer();
-            }
-            
-            if (nativeView["rightBorderLayer"]){
-                (<CAShapeLayer>nativeView["rightBorderLayer"]).removeFromSuperlayer();
-            }
-            
-            if (nativeView["bottomBorderLayer"]){
-                (<CAShapeLayer>nativeView["bottomBorderLayer"]).removeFromSuperlayer();
-            }
-            
-            if (nativeView["leftBorderLayer"]){
-                (<CAShapeLayer>nativeView["leftBorderLayer"]).removeFromSuperlayer();
-            }
-            
-            // Draw borders
-            let nativeViewBounds = {
-                left: nativeView.bounds.origin.x,
-                top: nativeView.bounds.origin.y,
-                bottom: nativeView.bounds.size.height,
-                right: nativeView.bounds.size.width
+            let nativeViewLayerBounds = {
+                left: nativeView.layer.bounds.origin.x,
+                top: nativeView.layer.bounds.origin.y,
+                bottom: nativeView.layer.bounds.size.height,
+                right: nativeView.layer.bounds.size.width
             };
 
             let top = background.borderTopWidth;
@@ -81,17 +80,17 @@ export module ios {
             let bottom = background.borderBottomWidth;
             let left = background.borderLeftWidth;
             
-            let lto: viewModule.Point = {x: nativeViewBounds.left, y: nativeViewBounds.top};// left-top-outside
-            let lti: viewModule.Point = {x: nativeViewBounds.left + left, y: nativeViewBounds.top + top}; // left-top-inside
+            let lto: viewModule.Point = {x: nativeViewLayerBounds.left, y: nativeViewLayerBounds.top};// left-top-outside
+            let lti: viewModule.Point = {x: nativeViewLayerBounds.left + left, y: nativeViewLayerBounds.top + top}; // left-top-inside
 
-            let rto: viewModule.Point = {x: nativeViewBounds.right, y: nativeViewBounds.top}; // right-top-outside
-            let rti: viewModule.Point = {x: nativeViewBounds.right - right, y: nativeViewBounds.top + top}; // right-top-inside
+            let rto: viewModule.Point = {x: nativeViewLayerBounds.right, y: nativeViewLayerBounds.top}; // right-top-outside
+            let rti: viewModule.Point = {x: nativeViewLayerBounds.right - right, y: nativeViewLayerBounds.top + top}; // right-top-inside
             
-            let rbo: viewModule.Point = {x: nativeViewBounds.right, y: nativeViewBounds.bottom}; // right-bottom-outside
-            let rbi: viewModule.Point = {x: nativeViewBounds.right - right, y: nativeViewBounds.bottom - bottom}; // right-bottom-inside
+            let rbo: viewModule.Point = {x: nativeViewLayerBounds.right, y: nativeViewLayerBounds.bottom}; // right-bottom-outside
+            let rbi: viewModule.Point = {x: nativeViewLayerBounds.right - right, y: nativeViewLayerBounds.bottom - bottom}; // right-bottom-inside
 
-            let lbo: viewModule.Point = {x: nativeViewBounds.left, y: nativeViewBounds.bottom}; // left-bottom-outside
-            let lbi: viewModule.Point = {x: nativeViewBounds.left + left, y: nativeViewBounds.bottom - bottom}; // left-bottom-inside
+            let lbo: viewModule.Point = {x: nativeViewLayerBounds.left, y: nativeViewLayerBounds.bottom}; // left-bottom-outside
+            let lbi: viewModule.Point = {x: nativeViewLayerBounds.left + left, y: nativeViewLayerBounds.bottom - bottom}; // left-bottom-inside
             
             if (top > 0 && background.borderTopColor && background.borderTopColor.ios){
                 let topBorderPath = CGPathCreateMutable();