Fix: crashes when applying css

This commit is contained in:
vakrilov
2015-07-27 16:29:24 +03:00
parent 6e58c5242e
commit 4a6c841f0e
4 changed files with 30 additions and 5 deletions

View File

@ -3,6 +3,7 @@ import types = require("utils/types");
import knownColors = require("color/known-colors");
var AMP = "#";
var HEX_REGEX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i;
export class Color implements definition.Color {
private _a: number;
@ -107,6 +108,18 @@ export class Color implements definition.Color {
return value1.equals(value2);
}
public static isValid(value: string): boolean {
if (!types.isString(value)) {
return false;
}
if (knownColors.isKnownName(value)) {
return true;
}
return HEX_REGEX.test(value);
}
private _buildHex(): string {
return AMP + this._componentToHex(this._a) + this._componentToHex(this._r) + this._componentToHex(this._g) + this._componentToHex(this._b);
}

6
color/color.d.ts vendored
View File

@ -68,5 +68,11 @@ declare module "color" {
* @param value2 A Color to compare.
*/
public static equals(value1: Color, value2: Color): boolean;
/**
* Validates if a string value can be converted to color.
* @param value Input string.
*/
public static isValid(value: string): boolean;
}
}

View File

@ -2,6 +2,7 @@
import observable = require("ui/core/dependency-observable");
import cssParser = require("js-libs/reworkcss");
import styleProperty = require("ui/styling/style-property");
import trace = require("trace");
var ID_SPECIFICITY = 10000;
var CLASS_SPECIFICITY = 100;
@ -34,7 +35,12 @@ export class CssSelector {
public apply(view: view.View) {
this.eachSetter((property, value) => {
view.style._setValue(property, value, observable.ValueSource.Css);
try {
view.style._setValue(property, value, observable.ValueSource.Css);
}
catch (ex) {
trace.write("Error setting property: " + property.name + " view: " + view + " value: " + value + " " + ex, trace.categories.Style, trace.messageType.error);
}
});
}
@ -177,7 +183,7 @@ class InlineStyleSelector extends CssSelector {
}
}
export function applyInlineSyle(view: view.View, declarations : cssParser.Declaration[]) {
export function applyInlineSyle(view: view.View, declarations: cssParser.Declaration[]) {
var localStyleSelector = new InlineStyleSelector(declarations);
localStyleSelector.apply(view);
}

View File

@ -455,14 +455,14 @@ function getHandlerInternal(propertyId: number, classInfo: types.ClassInfo): sty
// Property registration
export var colorProperty = new styleProperty.Property("color", "color",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.Inheritable, undefined, undefined, color.Color.equals),
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.Inheritable, undefined, color.Color.isValid, color.Color.equals),
converters.colorConverter);
export var backgroundImageProperty = new styleProperty.Property("backgroundImage", "background-image",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, onBackgroundImagePropertyChanged));
export var backgroundColorProperty = new styleProperty.Property("backgroundColor", "background-color",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, onBackgroundColorPropertyChanged, undefined, color.Color.equals),
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, onBackgroundColorPropertyChanged, color.Color.isValid, color.Color.equals),
converters.colorConverter);
export var backgroundRepeatProperty = new styleProperty.Property("backgroundRepeat", "background-repeat",
@ -475,7 +475,7 @@ export var backgroundPositionProperty = new styleProperty.Property("backgroundPo
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, onBackgroundPositionPropertyChanged));
export var borderColorProperty = new styleProperty.Property("borderColor", "border-color",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, undefined, undefined, color.Color.equals),
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, undefined, color.Color.isValid, color.Color.equals),
converters.colorConverter);
export var borderWidthProperty = new styleProperty.Property("borderWidth", "border-width",