diff --git a/color/color-common.ts b/color/color-common.ts index 2772a5515..837af9b46 100644 --- a/color/color-common.ts +++ b/color/color-common.ts @@ -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); } diff --git a/color/color.d.ts b/color/color.d.ts index 6e31ddd03..f97088317 100644 --- a/color/color.d.ts +++ b/color/color.d.ts @@ -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; } } \ No newline at end of file diff --git a/ui/styling/css-selector.ts b/ui/styling/css-selector.ts index 6027e6e68..c2dc05e63 100644 --- a/ui/styling/css-selector.ts +++ b/ui/styling/css-selector.ts @@ -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); } \ No newline at end of file diff --git a/ui/styling/style.ts b/ui/styling/style.ts index e52f2d263..6b5b08375 100644 --- a/ui/styling/style.ts +++ b/ui/styling/style.ts @@ -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",