html2canvas-pro 2.0.3 → 2.1.0

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

@@ -0,0 +1,25 @@
+import { IPropertyIdentValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { Context } from '../../core/context';
+export const enum VISIBILITY {
+    VISIBLE = 0,
+    HIDDEN = 1,
+    COLLAPSE = 2
+}
+
+export const visibility: IPropertyIdentValueDescriptor<VISIBILITY> = {
+    name: 'visible',
+    initialValue: 'none',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, visibility: string) => {
+        switch (visibility) {
+            case 'hidden':
+                return VISIBILITY.HIDDEN;
+            case 'collapse':
+                return VISIBILITY.COLLAPSE;
+            case 'visible':
+            default:
+                return VISIBILITY.VISIBLE;
+        }
+    }
+};

package/src/css/property-descriptors/webkit-line-clamp.ts

@@ -0,0 +1,30 @@
+import { IPropertyValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue } from '../syntax/parser';
+import { TokenType } from '../syntax/tokenizer';
+import { Context } from '../../core/context';
+
+/**
+ * -webkit-line-clamp property descriptor
+ * Used with display: -webkit-box and -webkit-box-orient: vertical
+ * to limit text to a specific number of lines
+ */
+export const webkitLineClamp: IPropertyValueDescriptor<number> = {
+    name: '-webkit-line-clamp',
+    initialValue: 'none',
+    prefix: true,
+    type: PropertyDescriptorParsingType.VALUE,
+    parse: (_context: Context, token: CSSValue) => {
+        // 'none' means no line clamping
+        if (token.type === TokenType.IDENT_TOKEN && token.value === 'none') {
+            return 0;
+        }
+
+        // Number value specifies the number of lines
+        if (token.type === TokenType.NUMBER_TOKEN) {
+            return Math.max(0, Math.floor(token.number));
+        }
+
+        // Default to 0 (no clamping)
+        return 0;
+    }
+};

package/src/css/property-descriptors/webkit-text-stroke-color.ts

@@ -0,0 +1,8 @@
+import { IPropertyTypeValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+export const webkitTextStrokeColor: IPropertyTypeValueDescriptor = {
+    name: `-webkit-text-stroke-color`,
+    initialValue: 'currentcolor',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'color'
+};

package/src/css/property-descriptors/webkit-text-stroke-width.ts

@@ -0,0 +1,15 @@
+import { CSSValue, isDimensionToken } from '../syntax/parser';
+import { IPropertyValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { Context } from '../../core/context';
+export const webkitTextStrokeWidth: IPropertyValueDescriptor<number> = {
+    name: `-webkit-text-stroke-width`,
+    initialValue: '0',
+    type: PropertyDescriptorParsingType.VALUE,
+    prefix: false,
+    parse: (_context: Context, token: CSSValue): number => {
+        if (isDimensionToken(token)) {
+            return token.number;
+        }
+        return 0;
+    }
+};

package/src/css/property-descriptors/word-break.ts

@@ -0,0 +1,25 @@
+import { IPropertyIdentValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { Context } from '../../core/context';
+export enum WORD_BREAK {
+    NORMAL = 'normal',
+    BREAK_ALL = 'break-all',
+    KEEP_ALL = 'keep-all'
+}
+
+export const wordBreak: IPropertyIdentValueDescriptor<WORD_BREAK> = {
+    name: 'word-break',
+    initialValue: 'normal',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, wordBreak: string): WORD_BREAK => {
+        switch (wordBreak) {
+            case 'break-all':
+                return WORD_BREAK.BREAK_ALL;
+            case 'keep-all':
+                return WORD_BREAK.KEEP_ALL;
+            case 'normal':
+            default:
+                return WORD_BREAK.NORMAL;
+        }
+    }
+};

package/src/css/property-descriptors/writing-mode.ts

@@ -0,0 +1,37 @@
+import { IPropertyIdentValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { Context } from '../../core/context';
+
+export const enum WRITING_MODE {
+    HORIZONTAL_TB = 0,
+    VERTICAL_RL = 1,
+    VERTICAL_LR = 2,
+    SIDEWAYS_RL = 3,
+    SIDEWAYS_LR = 4
+}
+
+export const isVerticalWritingMode = (writingMode: WRITING_MODE): boolean => writingMode !== WRITING_MODE.HORIZONTAL_TB;
+
+export const isSidewaysWritingMode = (writingMode: WRITING_MODE): boolean =>
+    writingMode === WRITING_MODE.SIDEWAYS_RL || writingMode === WRITING_MODE.SIDEWAYS_LR;
+
+export const writingMode: IPropertyIdentValueDescriptor<WRITING_MODE> = {
+    name: 'writing-mode',
+    initialValue: 'horizontal-tb',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, writingMode: string): WRITING_MODE => {
+        switch (writingMode) {
+            case 'vertical-rl':
+                return WRITING_MODE.VERTICAL_RL;
+            case 'vertical-lr':
+                return WRITING_MODE.VERTICAL_LR;
+            case 'sideways-rl':
+                return WRITING_MODE.SIDEWAYS_RL;
+            case 'sideways-lr':
+                return WRITING_MODE.SIDEWAYS_LR;
+            case 'horizontal-tb':
+            default:
+                return WRITING_MODE.HORIZONTAL_TB;
+        }
+    }
+};

package/src/css/property-descriptors/z-index.ts

@@ -0,0 +1,27 @@
+import { IPropertyValueDescriptor, PropertyDescriptorParsingType } from '../property-descriptor';
+import { CSSValue, isNumberToken } from '../syntax/parser';
+import { TokenType } from '../syntax/tokenizer';
+import { Context } from '../../core/context';
+
+interface zIndex {
+    order: number;
+    auto: boolean;
+}
+
+export const zIndex: IPropertyValueDescriptor<zIndex> = {
+    name: 'z-index',
+    initialValue: 'auto',
+    prefix: false,
+    type: PropertyDescriptorParsingType.VALUE,
+    parse: (_context: Context, token: CSSValue): zIndex => {
+        if (token.type === TokenType.IDENT_TOKEN) {
+            return { auto: true, order: 0 };
+        }
+
+        if (isNumberToken(token)) {
+            return { auto: false, order: token.number };
+        }
+
+        throw new Error(`Invalid z-index number parsed`);
+    }
+};

package/src/css/syntax/__tests__/tokernizer-tests.ts

@@ -0,0 +1,29 @@
+import { deepEqual } from 'assert';
+import { Tokenizer, TokenType } from '../tokenizer';
+
+const tokenize = (value: string) => {
+    const tokenizer = new Tokenizer();
+    tokenizer.write(value);
+    return tokenizer.read();
+};
+
+describe('tokenizer', () => {
+    describe('<ident>', () => {
+        it('auto', () => deepEqual(tokenize('auto'), [{ type: TokenType.IDENT_TOKEN, value: 'auto' }]));
+        it('url', () => deepEqual(tokenize('url'), [{ type: TokenType.IDENT_TOKEN, value: 'url' }]));
+        it('auto test', () =>
+            deepEqual(tokenize('auto        test'), [
+                { type: TokenType.IDENT_TOKEN, value: 'auto' },
+                { type: TokenType.WHITESPACE_TOKEN },
+                { type: TokenType.IDENT_TOKEN, value: 'test' }
+            ]));
+    });
+    describe('<url-token>', () => {
+        it('url(test.jpg)', () =>
+            deepEqual(tokenize('url(test.jpg)'), [{ type: TokenType.URL_TOKEN, value: 'test.jpg' }]));
+        it('url("test.jpg")', () =>
+            deepEqual(tokenize('url("test.jpg")'), [{ type: TokenType.URL_TOKEN, value: 'test.jpg' }]));
+        it("url('test.jpg')", () =>
+            deepEqual(tokenize("url('test.jpg')"), [{ type: TokenType.URL_TOKEN, value: 'test.jpg' }]));
+    });
+});

package/src/css/syntax/parser.ts

@@ -0,0 +1,188 @@
+import {
+    CSSToken,
+    DimensionToken,
+    EOF_TOKEN,
+    NumberValueToken,
+    StringValueToken,
+    Tokenizer,
+    TokenType
+} from './tokenizer';
+
+export type CSSBlockType =
+    | TokenType.LEFT_PARENTHESIS_TOKEN
+    | TokenType.LEFT_SQUARE_BRACKET_TOKEN
+    | TokenType.LEFT_CURLY_BRACKET_TOKEN;
+
+export interface CSSBlock {
+    type: CSSBlockType;
+    values: CSSValue[];
+}
+
+export interface CSSFunction {
+    type: TokenType.FUNCTION;
+    name: string;
+    values: CSSValue[];
+}
+
+export type CSSValue = CSSFunction | CSSToken | CSSBlock;
+
+export class Parser {
+    private _tokens: CSSToken[];
+
+    constructor(tokens: CSSToken[]) {
+        this._tokens = tokens;
+    }
+
+    static create(value: string): Parser {
+        const tokenizer = new Tokenizer();
+        tokenizer.write(value);
+        return new Parser(tokenizer.read());
+    }
+
+    static parseValue(value: string): CSSValue {
+        return Parser.create(value).parseComponentValue();
+    }
+
+    static parseValues(value: string): CSSValue[] {
+        return Parser.create(value).parseComponentValues();
+    }
+
+    parseComponentValue(): CSSValue {
+        let token = this.consumeToken();
+        while (token.type === TokenType.WHITESPACE_TOKEN) {
+            token = this.consumeToken();
+        }
+
+        if (token.type === TokenType.EOF_TOKEN) {
+            throw new SyntaxError(`Error parsing CSS component value, unexpected EOF`);
+        }
+
+        this.reconsumeToken(token);
+        const value = this.consumeComponentValue();
+
+        do {
+            token = this.consumeToken();
+        } while (token.type === TokenType.WHITESPACE_TOKEN);
+
+        if (token.type === TokenType.EOF_TOKEN) {
+            return value;
+        }
+
+        throw new SyntaxError(`Error parsing CSS component value, multiple values found when expecting only one`);
+    }
+
+    parseComponentValues(): CSSValue[] {
+        const values = [];
+        while (true) {
+            const value = this.consumeComponentValue();
+            if (value.type === TokenType.EOF_TOKEN) {
+                return values;
+            }
+            values.push(value);
+            values.push();
+        }
+    }
+
+    private consumeComponentValue(): CSSValue {
+        const token = this.consumeToken();
+
+        switch (token.type) {
+            case TokenType.LEFT_CURLY_BRACKET_TOKEN:
+            case TokenType.LEFT_SQUARE_BRACKET_TOKEN:
+            case TokenType.LEFT_PARENTHESIS_TOKEN:
+                return this.consumeSimpleBlock(token.type);
+            case TokenType.FUNCTION_TOKEN:
+                return this.consumeFunction(token);
+        }
+
+        return token;
+    }
+
+    private consumeSimpleBlock(type: CSSBlockType): CSSBlock {
+        const block: CSSBlock = { type, values: [] };
+
+        let token = this.consumeToken();
+        while (true) {
+            if (token.type === TokenType.EOF_TOKEN || isEndingTokenFor(token, type)) {
+                return block;
+            }
+
+            this.reconsumeToken(token);
+            block.values.push(this.consumeComponentValue());
+            token = this.consumeToken();
+        }
+    }
+
+    private consumeFunction(functionToken: StringValueToken): CSSFunction {
+        const cssFunction: CSSFunction = {
+            name: functionToken.value,
+            values: [],
+            type: TokenType.FUNCTION
+        };
+
+        while (true) {
+            const token = this.consumeToken();
+            if (token.type === TokenType.EOF_TOKEN || token.type === TokenType.RIGHT_PARENTHESIS_TOKEN) {
+                return cssFunction;
+            }
+
+            this.reconsumeToken(token);
+            cssFunction.values.push(this.consumeComponentValue());
+        }
+    }
+
+    private consumeToken(): CSSToken {
+        const token = this._tokens.shift();
+        return typeof token === 'undefined' ? EOF_TOKEN : token;
+    }
+
+    private reconsumeToken(token: CSSToken): void {
+        this._tokens.unshift(token);
+    }
+}
+
+export const isDimensionToken = (token: CSSValue): token is DimensionToken => token.type === TokenType.DIMENSION_TOKEN;
+export const isNumberToken = (token: CSSValue): token is NumberValueToken => token.type === TokenType.NUMBER_TOKEN;
+export const isIdentToken = (token: CSSValue): token is StringValueToken => token.type === TokenType.IDENT_TOKEN;
+export const isStringToken = (token: CSSValue): token is StringValueToken => token.type === TokenType.STRING_TOKEN;
+export const isIdentWithValue = (token: CSSValue, value: string): boolean =>
+    isIdentToken(token) && token.value === value;
+
+export const nonWhiteSpace = (token: CSSValue): boolean => token.type !== TokenType.WHITESPACE_TOKEN;
+export const nonFunctionArgSeparator = (token: CSSValue): boolean =>
+    token.type !== TokenType.WHITESPACE_TOKEN && token.type !== TokenType.COMMA_TOKEN;
+
+export const parseFunctionArgs = (tokens: CSSValue[]): CSSValue[][] => {
+    const args: CSSValue[][] = [];
+    let arg: CSSValue[] = [];
+    tokens.forEach((token) => {
+        if (token.type === TokenType.COMMA_TOKEN) {
+            if (arg.length === 0) {
+                throw new Error(`Error parsing function args, zero tokens for arg`);
+            }
+            args.push(arg);
+            arg = [];
+            return;
+        }
+
+        if (token.type !== TokenType.WHITESPACE_TOKEN) {
+            arg.push(token);
+        }
+    });
+    if (arg.length) {
+        args.push(arg);
+    }
+
+    return args;
+};
+
+const isEndingTokenFor = (token: CSSToken, type: CSSBlockType): boolean => {
+    if (type === TokenType.LEFT_CURLY_BRACKET_TOKEN && token.type === TokenType.RIGHT_CURLY_BRACKET_TOKEN) {
+        return true;
+    }
+    if (type === TokenType.LEFT_SQUARE_BRACKET_TOKEN && token.type === TokenType.RIGHT_SQUARE_BRACKET_TOKEN) {
+        return true;
+    }
+
+    return type === TokenType.LEFT_PARENTHESIS_TOKEN && token.type === TokenType.RIGHT_PARENTHESIS_TOKEN;
+};