From 831a44f2181125a4c86e13e2126fbf5e29b31062 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Mon, 16 Nov 2015 16:29:27 +0200
Subject: [PATCH] Fix: background-position with negative values

---
 CrossPlatformModules.csproj          |   9 ++-
 apps/ui-tests-app/css/background.xml |   8 ++-
 css-value/index.js                   |   4 +-
 css-value/reworkcss-value.d.ts       |  10 ++-
 ui/styling/background-common.ts      | 100 ++++++++++++++++++++-------
 5 files changed, 91 insertions(+), 40 deletions(-)

diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index ef59023b7..62e95a62f 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -1116,8 +1116,10 @@
     <Content Include="apps\ui-tests-app\web-view\web-view.xml">
       <SubType>Designer</SubType>
     </Content>
+    <Content Include="css-value\index.js" />
+    <Content Include="css\index.js" />
+    <Content Include="css\lib\parse\index.js" />
     <Content Include="fetch\fetch.js" />
-    <Content Include="css-value\reworkcss-value.js" />
     <Content Include="ui\layouts\stack-layout\package.json">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
@@ -1355,9 +1357,6 @@
     <Content Include="js-libs\polymer-expressions\polymer-expressions.js">
       <DependentUpon>polymer-expressions.d.ts</DependentUpon>
     </Content>
-    <Content Include="css\reworkcss.js">
-      <DependentUpon>reworkcss.d.ts</DependentUpon>
-    </Content>
     <TypeScriptCompile Include="apps\tests\xml-declaration\app.ts" />
     <TypeScriptCompile Include="apps\tests\xml-declaration\mainPage.ts">
       <DependentUpon>mainPage.xml</DependentUpon>
@@ -2099,7 +2098,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>
diff --git a/apps/ui-tests-app/css/background.xml b/apps/ui-tests-app/css/background.xml
index 93064360e..438f69fa4 100644
--- a/apps/ui-tests-app/css/background.xml
+++ b/apps/ui-tests-app/css/background.xml
@@ -22,7 +22,13 @@
       <Button width="50" height="50" text="4.4" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: left bottom;"/>
       <Button width="50" height="50" text="4.5" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 20% 80%;"/>
       <Button width="50" height="50" text="4.6" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 20 80;"/>
-
+      <Button width="50" height="50" text="4.7" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: -10 20;"/>
+      <Button width="50" height="50" text="4.8" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 10 -20;"/>
+      <Button width="50" height="50" text="4.9" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: -10 -20;"/>
+      <Button width="50" height="50" text="4.10" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center;"/>
+      <Button width="50" height="50" text="4.11" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: left;"/>
+      <Button width="50" height="50" text="4.12" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: bottom;"/>
+      
       <!-- Size -->
       <Button width="50" height="50" text="5.1" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100px 100px;"/>
       <Button width="50" height="50" text="5.2" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100% 100%;"/>
diff --git a/css-value/index.js b/css-value/index.js
index d3af489b9..3c6c49698 100644
--- a/css-value/index.js
+++ b/css-value/index.js
@@ -31,7 +31,7 @@ Parser.prototype.ident = function(){
 };
 
 Parser.prototype.int = function(){
-  var m = /^((\d+)(\S+)?) */.exec(this.str);
+  var m = /^(([-\+]?\d+)(\S+)?) */.exec(this.str);
   if (!m) return;
   this.skip(m);
   var n = ~~m[2];
@@ -46,7 +46,7 @@ Parser.prototype.int = function(){
 };
 
 Parser.prototype.float = function(){
-  var m = /^(((?:\d+)?\.\d+)(\S+)?) */.exec(this.str);
+  var m = /^(((?:[-\+]?\d+)?\.\d+)(\S+)?) */.exec(this.str);
   if (!m) return;
   this.skip(m);
   var n = parseFloat(m[2]);
diff --git a/css-value/reworkcss-value.d.ts b/css-value/reworkcss-value.d.ts
index 6af942382..77b322491 100644
--- a/css-value/reworkcss-value.d.ts
+++ b/css-value/reworkcss-value.d.ts
@@ -2,12 +2,10 @@ declare module "css-value" {
     interface CSSValue {
         type: string;
         string: string;
-        unit: string;
-        value: number;
+        unit?: string;
+        value?: number;
     }
 
-    interface ParserFunction {
-        (cssValue: string): Array<CSSValue>;
-    }
-    export = ParserFunction;
+    function parse(cssValue: string): Array<CSSValue>;
+    export = parse;
 }
diff --git a/ui/styling/background-common.ts b/ui/styling/background-common.ts
index dc6634451..1e34283eb 100644
--- a/ui/styling/background-common.ts
+++ b/ui/styling/background-common.ts
@@ -3,7 +3,14 @@ import colorModule = require("color");
 import types = require("utils/types");
 import enums = require("ui/enums");
 import dts = require("ui/styling/background");
-var cssValue = require("css-value");
+import cssValue = require("css-value");
+
+interface CSSValue {
+    type: string;
+    string: string;
+    unit?: string;
+    value?: number;
+}
 
 export class Background implements dts.Background {
     public static default = new Background(undefined, undefined, undefined, undefined, undefined);
@@ -99,25 +106,25 @@ export class Background implements dts.Background {
                     ((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){
+
+                if (scale > 0) {
                     imageWidth *= scale;
                     imageHeight *= scale;
-                    
+
                     res.sizeX = imageWidth;
                     res.sizeY = imageHeight;
                 }
@@ -126,35 +133,32 @@ export class Background implements dts.Background {
 
         // position
         if (this.position) {
-            let values = cssValue(this.position);
-            let spaceX = width - imageWidth;
-            let spaceY = height - imageHeight;
+            let v = Background.parsePosition(this.position);
+            if (v) {
+                let spaceX = width - imageWidth;
+                let spaceY = height - imageHeight;
 
-            if (values.length === 2) {
-                let vx = values[0];
-                let vy = values[1];
-
-                if (vx.unit === "%" && vy.unit === "%") {
-                    res.posX = spaceX * vx.value / 100;
-                    res.posY = spaceY * vy.value / 100;
+                if (v.x.unit === "%" && v.y.unit === "%") {
+                    res.posX = spaceX * v.x.value / 100;
+                    res.posY = spaceY * v.y.value / 100;
                 }
-                else if (vx.type === "number" && vy.type === "number" &&
-                    ((vx.unit === "px" && vy.unit === "px") || (vx.unit === "" && vy.unit === ""))) {
-                    res.posX = vx.value;
-                    res.posY = vy.value;
+                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 (vx.type === "ident" && vy.type === "ident") {
-                    if (vx.string.toLowerCase() === "center") {
+                else if (v.x.type === "ident" && v.y.type === "ident") {
+                    if (v.x.string.toLowerCase() === "center") {
                         res.posX = spaceX / 2;
                     }
-                    else if (vx.string.toLowerCase() === "right") {
+                    else if (v.x.string.toLowerCase() === "right") {
                         res.posX = spaceX;
                     }
 
-                    if (vy.string.toLowerCase() === "center") {
+                    if (v.y.string.toLowerCase() === "center") {
                         res.posY = spaceY / 2;
                     }
-                    else if (vy.string.toLowerCase() === "bottom") {
+                    else if (v.y.string.toLowerCase() === "bottom") {
                         res.posY = spaceY;
                     }
                 }
@@ -164,6 +168,50 @@ export class Background implements dts.Background {
         return res;
     }
 
+    private static parsePosition(pos: string): { x: CSSValue, y: CSSValue } {
+        var res = undefined
+        let values = cssValue(pos);
+
+        if (values.length === 2) {
+            return {
+                x: values[0],
+                y: values[1]
+            };
+        }
+
+        if (values.length === 1 && values[0].type === "ident") {
+            let val = values[0].string.toLocaleLowerCase();
+            let center = {
+                type: "ident",
+                string: "center"
+            };
+            
+            // 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
+                };
+            }
+        }
+
+        return null;
+    };
+
     public isEmpty(): boolean {
         return types.isNullOrUndefined(this.image) && types.isNullOrUndefined(this.color);
     }
@@ -185,4 +233,4 @@ export class Background implements dts.Background {
             value1.size === value2.size &&
             colorModule.Color.equals(value1.color, value2.color);
     }
-}
+}
\ No newline at end of file