diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index ef59023b7..62e95a62f 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -1116,8 +1116,10 @@
Designer
+
+
+
-
PreserveNewest
@@ -1355,9 +1357,6 @@
polymer-expressions.d.ts
-
- reworkcss.d.ts
-
mainPage.xml
@@ -2099,7 +2098,7 @@
False
-
+
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 @@
-
+
+
+
+
+
+
+
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;
- }
- export = ParserFunction;
+ function parse(cssValue: string): Array;
+ 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