html2canvas-pro 2.0.3 → 2.1.0

package/src/css/property-descriptors/background-repeat.ts

@@ -0,0 +1,44 @@
+import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue, isIdentToken, parseFunctionArgs } from '../syntax/parser';
+import { Context } from '../../core/context';
+export type BackgroundRepeat = BACKGROUND_REPEAT[];
+
+export const enum BACKGROUND_REPEAT {
+    REPEAT = 0,
+    NO_REPEAT = 1,
+    REPEAT_X = 2,
+    REPEAT_Y = 3
+}
+
+export const backgroundRepeat: IPropertyListDescriptor<BackgroundRepeat> = {
+    name: 'background-repeat',
+    initialValue: 'repeat',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundRepeat => {
+        return parseFunctionArgs(tokens)
+            .map((values) =>
+                values
+                    .filter(isIdentToken)
+                    .map((token) => token.value)
+                    .join(' ')
+            )
+            .map(parseBackgroundRepeat);
+    }
+};
+
+const parseBackgroundRepeat = (value: string): BACKGROUND_REPEAT => {
+    switch (value) {
+        case 'no-repeat':
+            return BACKGROUND_REPEAT.NO_REPEAT;
+        case 'repeat-x':
+        case 'repeat no-repeat':
+            return BACKGROUND_REPEAT.REPEAT_X;
+        case 'repeat-y':
+        case 'no-repeat repeat':
+            return BACKGROUND_REPEAT.REPEAT_Y;
+        case 'repeat':
+        default:
+            return BACKGROUND_REPEAT.REPEAT;
+    }
+};

package/src/css/property-descriptors/background-size.ts

@@ -0,0 +1,27 @@
+import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue, isIdentToken, parseFunctionArgs } from '../syntax/parser';
+import { isLengthPercentage, LengthPercentage } from '../types/length-percentage';
+import { StringValueToken } from '../syntax/tokenizer';
+import { Context } from '../../core/context';
+
+export enum BACKGROUND_SIZE {
+    AUTO = 'auto',
+    CONTAIN = 'contain',
+    COVER = 'cover'
+}
+
+export type BackgroundSizeInfo = LengthPercentage | StringValueToken;
+export type BackgroundSize = BackgroundSizeInfo[][];
+
+export const backgroundSize: IPropertyListDescriptor<BackgroundSize> = {
+    name: 'background-size',
+    initialValue: '0',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundSize => {
+        return parseFunctionArgs(tokens).map((values) => values.filter(isBackgroundSizeInfoToken));
+    }
+};
+
+const isBackgroundSizeInfoToken = (value: CSSValue): value is BackgroundSizeInfo =>
+    isIdentToken(value) || isLengthPercentage(value);

package/src/css/property-descriptors/border-color.ts

@@ -0,0 +1,13 @@
+import { IPropertyTypeValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+const borderColorForSide = (side: string): IPropertyTypeValueDescriptor => ({
+    name: `border-${side}-color`,
+    initialValue: 'transparent',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'color'
+});
+
+export const borderTopColor: IPropertyTypeValueDescriptor = borderColorForSide('top');
+export const borderRightColor: IPropertyTypeValueDescriptor = borderColorForSide('right');
+export const borderBottomColor: IPropertyTypeValueDescriptor = borderColorForSide('bottom');
+export const borderLeftColor: IPropertyTypeValueDescriptor = borderColorForSide('left');

package/src/css/property-descriptors/border-radius.ts

@@ -0,0 +1,19 @@
+import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue } from '../syntax/parser';
+import { isLengthPercentage, LengthPercentageTuple, parseLengthPercentageTuple } from '../types/length-percentage';
+import { Context } from '../../core/context';
+export type BorderRadius = LengthPercentageTuple;
+
+const borderRadiusForSide = (side: string): IPropertyListDescriptor<BorderRadius> => ({
+    name: `border-radius-${side}`,
+    initialValue: '0 0',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]): BorderRadius =>
+        parseLengthPercentageTuple(tokens.filter(isLengthPercentage))
+});
+
+export const borderTopLeftRadius: IPropertyListDescriptor<BorderRadius> = borderRadiusForSide('top-left');
+export const borderTopRightRadius: IPropertyListDescriptor<BorderRadius> = borderRadiusForSide('top-right');
+export const borderBottomRightRadius: IPropertyListDescriptor<BorderRadius> = borderRadiusForSide('bottom-right');
+export const borderBottomLeftRadius: IPropertyListDescriptor<BorderRadius> = borderRadiusForSide('bottom-left');

package/src/css/property-descriptors/border-style.ts

@@ -0,0 +1,34 @@
+import { IPropertyIdentValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { Context } from '../../core/context';
+export const enum BORDER_STYLE {
+    NONE = 0,
+    SOLID = 1,
+    DASHED = 2,
+    DOTTED = 3,
+    DOUBLE = 4
+}
+
+const borderStyleForSide = (side: string): IPropertyIdentValueDescriptor<BORDER_STYLE> => ({
+    name: `border-${side}-style`,
+    initialValue: 'solid',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, style: string): BORDER_STYLE => {
+        switch (style) {
+            case 'none':
+                return BORDER_STYLE.NONE;
+            case 'dashed':
+                return BORDER_STYLE.DASHED;
+            case 'dotted':
+                return BORDER_STYLE.DOTTED;
+            case 'double':
+                return BORDER_STYLE.DOUBLE;
+        }
+        return BORDER_STYLE.SOLID;
+    }
+});
+
+export const borderTopStyle: IPropertyIdentValueDescriptor<BORDER_STYLE> = borderStyleForSide('top');
+export const borderRightStyle: IPropertyIdentValueDescriptor<BORDER_STYLE> = borderStyleForSide('right');
+export const borderBottomStyle: IPropertyIdentValueDescriptor<BORDER_STYLE> = borderStyleForSide('bottom');
+export const borderLeftStyle: IPropertyIdentValueDescriptor<BORDER_STYLE> = borderStyleForSide('left');

package/src/css/property-descriptors/border-width.ts

@@ -0,0 +1,20 @@
+import { IPropertyValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue, isDimensionToken } from '../syntax/parser';
+import { Context } from '../../core/context';
+const borderWidthForSide = (side: string): IPropertyValueDescriptor<number> => ({
+    name: `border-${side}-width`,
+    initialValue: '0',
+    type: PropertyDescriptorParsingType.VALUE,
+    prefix: false,
+    parse: (_context: Context, token: CSSValue): number => {
+        if (isDimensionToken(token)) {
+            return token.number;
+        }
+        return 0;
+    }
+});
+
+export const borderTopWidth: IPropertyValueDescriptor<number> = borderWidthForSide('top');
+export const borderRightWidth: IPropertyValueDescriptor<number> = borderWidthForSide('right');
+export const borderBottomWidth: IPropertyValueDescriptor<number> = borderWidthForSide('bottom');
+export const borderLeftWidth: IPropertyValueDescriptor<number> = borderWidthForSide('left');

package/src/css/property-descriptors/box-shadow.ts

@@ -0,0 +1,60 @@
+import { PropertyDescriptorParsingType, IPropertyListDescriptor } from '../property-descriptor';
+import { CSSValue, isIdentWithValue, parseFunctionArgs } from '../syntax/parser';
+import { ZERO_LENGTH } from '../types/length-percentage';
+import { color, Color } from '../types/color';
+import { isLength, Length } from '../types/length';
+import { Context } from '../../core/context';
+
+export type BoxShadow = BoxShadowItem[];
+interface BoxShadowItem {
+    inset: boolean;
+    color: Color;
+    offsetX: Length;
+    offsetY: Length;
+    blur: Length;
+    spread: Length;
+}
+
+export const boxShadow: IPropertyListDescriptor<BoxShadow> = {
+    name: 'box-shadow',
+    initialValue: 'none',
+    type: PropertyDescriptorParsingType.LIST,
+    prefix: false,
+    parse: (context: Context, tokens: CSSValue[]): BoxShadow => {
+        if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
+            return [];
+        }
+
+        return parseFunctionArgs(tokens).map((values: CSSValue[]) => {
+            const shadow: BoxShadowItem = {
+                color: 0x000000ff,
+                offsetX: ZERO_LENGTH,
+                offsetY: ZERO_LENGTH,
+                blur: ZERO_LENGTH,
+                spread: ZERO_LENGTH,
+                inset: false
+            };
+            let c = 0;
+            for (let i = 0; i < values.length; i++) {
+                const token = values[i];
+                if (isIdentWithValue(token, 'inset')) {
+                    shadow.inset = true;
+                } else if (isLength(token)) {
+                    if (c === 0) {
+                        shadow.offsetX = token;
+                    } else if (c === 1) {
+                        shadow.offsetY = token;
+                    } else if (c === 2) {
+                        shadow.blur = token;
+                    } else {
+                        shadow.spread = token;
+                    }
+                    c++;
+                } else {
+                    shadow.color = color.parse(context, token);
+                }
+            }
+            return shadow;
+        });
+    }
+};

package/src/css/property-descriptors/clip-path.ts

@@ -0,0 +1,271 @@
+import { IPropertyValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue, isIdentToken, isIdentWithValue, nonWhiteSpace, parseFunctionArgs } from '../syntax/parser';
+import { StringValueToken, TokenType } from '../syntax/tokenizer';
+import {
+    LengthPercentage,
+    FIFTY_PERCENT,
+    HUNDRED_PERCENT,
+    ZERO_LENGTH,
+    isLengthPercentage
+} from '../types/length-percentage';
+import { Context } from '../../core/context';
+
+export const enum CLIP_PATH_TYPE {
+    NONE = 0,
+    INSET = 1,
+    CIRCLE = 2,
+    ELLIPSE = 3,
+    POLYGON = 4,
+    PATH = 5
+}
+
+/** Radius keyword or length-percentage for circle/ellipse. */
+export type ShapeRadius = LengthPercentage | 'closest-side' | 'farthest-side';
+
+export interface NoneClipPath {
+    type: CLIP_PATH_TYPE.NONE;
+}
+
+/**
+ * inset(top right bottom left [ round <border-radius> ]?)
+ * Amounts to cut from each side of the reference box.
+ */
+export interface InsetClipPath {
+    type: CLIP_PATH_TYPE.INSET;
+    top: LengthPercentage;
+    right: LengthPercentage;
+    bottom: LengthPercentage;
+    left: LengthPercentage;
+}
+
+/**
+ * circle( [ <shape-radius> ]? [ at <position> ]? )
+ */
+export interface CircleClipPath {
+    type: CLIP_PATH_TYPE.CIRCLE;
+    radius: ShapeRadius;
+    cx: LengthPercentage;
+    cy: LengthPercentage;
+}
+
+/**
+ * ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
+ */
+export interface EllipseClipPath {
+    type: CLIP_PATH_TYPE.ELLIPSE;
+    rx: ShapeRadius;
+    ry: ShapeRadius;
+    cx: LengthPercentage;
+    cy: LengthPercentage;
+}
+
+/**
+ * polygon( [ <fill-rule>, ]? [ <length-percentage> <length-percentage> ]# )
+ */
+export interface PolygonClipPath {
+    type: CLIP_PATH_TYPE.POLYGON;
+    points: [LengthPercentage, LengthPercentage][];
+}
+
+/**
+ * path( [ <fill-rule>, ]? <string> )
+ * The string contains SVG path data in the element's local coordinate space.
+ */
+export interface PathClipPath {
+    type: CLIP_PATH_TYPE.PATH;
+    d: string;
+}
+
+export type ClipPathValue =
+    | NoneClipPath
+    | InsetClipPath
+    | CircleClipPath
+    | EllipseClipPath
+    | PolygonClipPath
+    | PathClipPath;
+
+const NONE: NoneClipPath = { type: CLIP_PATH_TYPE.NONE };
+
+/**
+ * Parse a shape-radius token: <length-percentage> | closest-side | farthest-side.
+ * Defaults to 'closest-side' when no tokens are provided.
+ */
+const parseShapeRadius = (tokens: CSSValue[]): ShapeRadius => {
+    const [first] = tokens;
+    if (!first) return 'closest-side';
+    if (isIdentToken(first)) {
+        // Any unrecognised keyword (e.g. 'closest-corner') intentionally falls back to
+        // 'closest-side' as the CSS spec requires unknown values to be treated as invalid
+        // and the initial value of <shape-radius> is 'closest-side'.
+        return first.value === 'farthest-side' ? 'farthest-side' : 'closest-side';
+    }
+    return isLengthPercentage(first) ? first : 'closest-side';
+};
+
+/**
+ * Parse a CSS <position> as (cx, cy), each as a LengthPercentage.
+ *
+ * Supports the **1–2 value** subset of the CSS `<position>` syntax.
+ * The 4-value form (`at left 10px top 20px`) is not supported and will be
+ * parsed on a best-effort basis.
+ *
+ * Axis assignment rules:
+ *   - `left` / `right`  → x-axis (cx)
+ *   - `top`  / `bottom` → y-axis (cy)
+ *   - `center` or a <length-percentage> → fills the first unset axis, in order
+ *
+ * Examples:
+ *   "at left"        → cx=0,    cy=50%   (left is x; y defaults to center)
+ *   "at top"         → cx=50%,  cy=0     (top is y; x defaults to center)
+ *   "at center 30%"  → cx=50%,  cy=30%
+ *   "at 30% center"  → cx=30%,  cy=50%
+ *   "at left top"    → cx=0,    cy=0
+ *   "at top left"    → cx=0,    cy=0     (keyword order is irrelevant)
+ *
+ * Unset axes fall back to 50%.
+ */
+const parsePosition = (tokens: CSSValue[]): { cx: LengthPercentage; cy: LengthPercentage } => {
+    let cx: LengthPercentage | null = null;
+    let cy: LengthPercentage | null = null;
+
+    for (const token of tokens) {
+        if (isIdentToken(token)) {
+            switch (token.value) {
+                case 'left':
+                    cx = ZERO_LENGTH;
+                    break;
+                case 'right':
+                    cx = HUNDRED_PERCENT;
+                    break;
+                case 'top':
+                    cy = ZERO_LENGTH;
+                    break;
+                case 'bottom':
+                    cy = HUNDRED_PERCENT;
+                    break;
+                case 'center':
+                    // `center` fills whichever axis has not yet been claimed.
+                    if (cx === null) cx = FIFTY_PERCENT;
+                    else if (cy === null) cy = FIFTY_PERCENT;
+                    break;
+            }
+        } else if (isLengthPercentage(token)) {
+            // Length-percentages are assigned in source order.
+            if (cx === null) cx = token;
+            else if (cy === null) cy = token;
+        }
+    }
+
+    return { cx: cx ?? FIFTY_PERCENT, cy: cy ?? FIFTY_PERCENT };
+};
+
+/**
+ * inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
+ * The 1-4 shorthand follows the same expansion as margin/padding:
+ *   1 value  → all four sides
+ *   2 values → top/bottom | left/right
+ *   3 values → top | left/right | bottom
+ *   4 values → top | right | bottom | left
+ * The optional `round` clause (border-radius) is parsed but ignored.
+ */
+const parseInset = (values: CSSValue[]): InsetClipPath => {
+    const lengths: LengthPercentage[] = [];
+    for (const token of values) {
+        if (token.type === TokenType.WHITESPACE_TOKEN) continue;
+        if (isIdentToken(token) && token.value === 'round') break;
+        if (isLengthPercentage(token)) lengths.push(token);
+    }
+    const v0 = lengths[0] ?? ZERO_LENGTH;
+    const v1 = lengths[1] ?? v0;
+    const v2 = lengths[2] ?? v0;
+    const v3 = lengths[3] ?? v1;
+    return { type: CLIP_PATH_TYPE.INSET, top: v0, right: v1, bottom: v2, left: v3 };
+};
+
+/**
+ * circle( [ <shape-radius> ]? [ at <position> ]? )
+ */
+const parseCircle = (values: CSSValue[]): CircleClipPath => {
+    const nonWs = values.filter(nonWhiteSpace);
+    const atIdx = nonWs.findIndex((t) => isIdentWithValue(t, 'at'));
+    const radiusTokens = atIdx === -1 ? nonWs : nonWs.slice(0, atIdx);
+    const posTokens = atIdx === -1 ? [] : nonWs.slice(atIdx + 1);
+    return {
+        type: CLIP_PATH_TYPE.CIRCLE,
+        radius: parseShapeRadius(radiusTokens),
+        ...parsePosition(posTokens)
+    };
+};
+
+/**
+ * ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
+ */
+const parseEllipse = (values: CSSValue[]): EllipseClipPath => {
+    const nonWs = values.filter(nonWhiteSpace);
+    const atIdx = nonWs.findIndex((t) => isIdentWithValue(t, 'at'));
+    const radiusTokens = atIdx === -1 ? nonWs : nonWs.slice(0, atIdx);
+    const posTokens = atIdx === -1 ? [] : nonWs.slice(atIdx + 1);
+    return {
+        type: CLIP_PATH_TYPE.ELLIPSE,
+        rx: parseShapeRadius(radiusTokens.slice(0, 1)),
+        ry: parseShapeRadius(radiusTokens.slice(1, 2)),
+        ...parsePosition(posTokens)
+    };
+};
+
+/**
+ * polygon( [ <fill-rule>, ]? [ <length-percentage> <length-percentage> ]# )
+ * Each comma-separated group defines one vertex (x y).
+ * A leading fill-rule keyword (nonzero/evenodd) is skipped.
+ */
+const parsePolygon = (values: CSSValue[]): PolygonClipPath => {
+    const args = parseFunctionArgs(values);
+    const points: [LengthPercentage, LengthPercentage][] = [];
+    for (const arg of args) {
+        if (arg.length === 1 && isIdentToken(arg[0])) continue; // skip fill-rule
+        const lengths = arg.filter(isLengthPercentage);
+        if (lengths.length >= 2) {
+            points.push([lengths[0], lengths[1]]);
+        }
+    }
+    return { type: CLIP_PATH_TYPE.POLYGON, points };
+};
+
+/**
+ * path( [ <fill-rule>, ]? <string> )
+ * The string value is the SVG path data (coordinates in the element's local space).
+ */
+const parsePath = (values: CSSValue[]): PathClipPath | NoneClipPath => {
+    const stringToken = values.find((t) => t.type === TokenType.STRING_TOKEN) as StringValueToken | undefined;
+    if (!stringToken) return NONE;
+    return { type: CLIP_PATH_TYPE.PATH, d: stringToken.value };
+};
+
+export const clipPath: IPropertyValueDescriptor<ClipPathValue> = {
+    name: 'clip-path',
+    initialValue: 'none',
+    prefix: false,
+    type: PropertyDescriptorParsingType.VALUE,
+    parse: (_context: Context, token: CSSValue): ClipPathValue => {
+        if (isIdentToken(token) && token.value === 'none') {
+            return NONE;
+        }
+
+        if (token.type === TokenType.FUNCTION) {
+            switch (token.name) {
+                case 'inset':
+                    return parseInset(token.values);
+                case 'circle':
+                    return parseCircle(token.values);
+                case 'ellipse':
+                    return parseEllipse(token.values);
+                case 'polygon':
+                    return parsePolygon(token.values);
+                case 'path':
+                    return parsePath(token.values);
+            }
+        }
+
+        return NONE;
+    }
+};

package/src/css/property-descriptors/color.ts

@@ -0,0 +1,9 @@
+import { IPropertyTypeValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+
+export const color: IPropertyTypeValueDescriptor = {
+    name: `color`,
+    initialValue: 'transparent',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'color'
+};

package/src/css/property-descriptors/content.ts

@@ -0,0 +1,26 @@
+import { TokenType } from '../syntax/tokenizer';
+import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue } from '../syntax/parser';
+import { Context } from '../../core/context';
+
+export type Content = CSSValue[];
+
+export const content: IPropertyListDescriptor<Content> = {
+    name: 'content',
+    initialValue: 'none',
+    type: PropertyDescriptorParsingType.LIST,
+    prefix: false,
+    parse: (_context: Context, tokens: CSSValue[]) => {
+        if (tokens.length === 0) {
+            return [];
+        }
+
+        const first = tokens[0];
+
+        if (first.type === TokenType.IDENT_TOKEN && first.value === 'none') {
+            return [];
+        }
+
+        return tokens;
+    }
+};

package/src/css/property-descriptors/counter-increment.ts

@@ -0,0 +1,43 @@
+import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue, isNumberToken, nonWhiteSpace } from '../syntax/parser';
+import { TokenType } from '../syntax/tokenizer';
+import { Context } from '../../core/context';
+
+export interface COUNTER_INCREMENT {
+    counter: string;
+    increment: number;
+}
+
+export type CounterIncrement = COUNTER_INCREMENT[] | null;
+
+export const counterIncrement: IPropertyListDescriptor<CounterIncrement> = {
+    name: 'counter-increment',
+    initialValue: 'none',
+    prefix: true,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]) => {
+        if (tokens.length === 0) {
+            return null;
+        }
+
+        const first = tokens[0];
+
+        if (first.type === TokenType.IDENT_TOKEN && first.value === 'none') {
+            return null;
+        }
+
+        const increments = [];
+        const filtered = tokens.filter(nonWhiteSpace);
+
+        for (let i = 0; i < filtered.length; i++) {
+            const counter = filtered[i];
+            const next = filtered[i + 1];
+            if (counter.type === TokenType.IDENT_TOKEN) {
+                const increment = next && isNumberToken(next) ? next.number : 1;
+                increments.push({ counter: counter.value, increment });
+            }
+        }
+
+        return increments;
+    }
+};

package/src/css/property-descriptors/counter-reset.ts

@@ -0,0 +1,36 @@
+import { IPropertyListDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue, isIdentToken, isNumberToken, nonWhiteSpace } from '../syntax/parser';
+import { Context } from '../../core/context';
+
+export interface COUNTER_RESET {
+    counter: string;
+    reset: number;
+}
+
+export type CounterReset = COUNTER_RESET[];
+
+export const counterReset: IPropertyListDescriptor<CounterReset> = {
+    name: 'counter-reset',
+    initialValue: 'none',
+    prefix: true,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]) => {
+        if (tokens.length === 0) {
+            return [];
+        }
+
+        const resets = [];
+        const filtered = tokens.filter(nonWhiteSpace);
+
+        for (let i = 0; i < filtered.length; i++) {
+            const counter = filtered[i];
+            const next = filtered[i + 1];
+            if (isIdentToken(counter) && counter.value !== 'none') {
+                const reset = next && isNumberToken(next) ? next.number : 0;
+                resets.push({ counter: counter.value, reset });
+            }
+        }
+
+        return resets;
+    }
+};

package/src/css/property-descriptors/direction.ts

@@ -0,0 +1,23 @@
+import { IPropertyIdentValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { Context } from '../../core/context';
+
+export const enum DIRECTION {
+    LTR = 0,
+    RTL = 1
+}
+
+export const direction: IPropertyIdentValueDescriptor<DIRECTION> = {
+    name: 'direction',
+    initialValue: 'ltr',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, direction: string) => {
+        switch (direction) {
+            case 'rtl':
+                return DIRECTION.RTL;
+            case 'ltr':
+            default:
+                return DIRECTION.LTR;
+        }
+    }
+};