html2canvas-pro 2.1.0 → 2.2.0

package/src/css/property-descriptor.ts

@@ -1,49 +0,0 @@
-import { CSSValue } from './syntax/parser';
-import { CSSTypes } from './types';
-import { Context } from '../core/context';
-
-export const enum PropertyDescriptorParsingType {
-    VALUE,
-    LIST,
-    IDENT_VALUE,
-    TYPE_VALUE,
-    TOKEN_VALUE
-}
-
-export interface IPropertyDescriptor {
-    name: string;
-    type: PropertyDescriptorParsingType;
-    initialValue: string;
-    prefix: boolean;
-}
-
-export interface IPropertyIdentValueDescriptor<T> extends IPropertyDescriptor {
-    type: PropertyDescriptorParsingType.IDENT_VALUE;
-    parse: (context: Context, token: string) => T;
-}
-
-export interface IPropertyTypeValueDescriptor extends IPropertyDescriptor {
-    type: PropertyDescriptorParsingType.TYPE_VALUE;
-    format: CSSTypes;
-}
-
-export interface IPropertyValueDescriptor<T> extends IPropertyDescriptor {
-    type: PropertyDescriptorParsingType.VALUE;
-    parse: (context: Context, token: CSSValue) => T;
-}
-
-export interface IPropertyListDescriptor<T> extends IPropertyDescriptor {
-    type: PropertyDescriptorParsingType.LIST;
-    parse: (context: Context, tokens: CSSValue[]) => T;
-}
-
-export interface IPropertyTokenValueDescriptor extends IPropertyDescriptor {
-    type: PropertyDescriptorParsingType.TOKEN_VALUE;
-}
-
-export type CSSPropertyDescriptor<T> =
-    | IPropertyValueDescriptor<T>
-    | IPropertyListDescriptor<T>
-    | IPropertyIdentValueDescriptor<T>
-    | IPropertyTypeValueDescriptor
-    | IPropertyTokenValueDescriptor;

package/src/css/property-descriptors/__tests__/background-tests.ts

@@ -1,65 +0,0 @@
-import { deepStrictEqual } from 'assert';
-import { Parser } from '../../syntax/parser';
-import { backgroundImage } from '../background-image';
-import { CSSImageType } from '../../types/image';
-import { pack } from '../../types/color-utilities';
-import { deg } from '../../types/angle';
-
-vi.mock('../../../core/context');
-import { Context } from '../../../core/context';
-
-vi.mock('../../../core/features');
-
-const backgroundImageParse = (context: Context, value: string) =>
-    backgroundImage.parse(context, Parser.parseValues(value));
-
-import { Html2CanvasConfig } from '../../../config';
-
-describe('property-descriptors', () => {
-    let context: Context;
-    beforeEach(() => {
-        const mockWindow = {
-            location: { href: 'http://example.com' },
-            document: { createElement: () => ({ href: '' }) }
-        } as any;
-        const config = new Html2CanvasConfig({ window: mockWindow });
-        context = new Context({} as any, {} as any, config);
-    });
-    describe('background-image', () => {
-        it('none', () => {
-            deepStrictEqual(backgroundImageParse(context, 'none'), []);
-            expect(context.cache.addImage).not.toHaveBeenCalled();
-        });
-
-        it('url(test.jpg), url(test2.jpg)', () => {
-            deepStrictEqual(
-                backgroundImageParse(context, 'url(http://example.com/test.jpg), url(http://example.com/test2.jpg)'),
-                [
-                    { url: 'http://example.com/test.jpg', type: CSSImageType.URL },
-                    { url: 'http://example.com/test2.jpg', type: CSSImageType.URL }
-                ]
-            );
-            expect(context.cache.addImage).toHaveBeenCalledWith('http://example.com/test.jpg');
-            expect(context.cache.addImage).toHaveBeenCalledWith('http://example.com/test2.jpg');
-        });
-
-        it(`linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://html2canvas.hertzen.com')`, () =>
-            deepStrictEqual(
-                backgroundImageParse(
-                    context,
-                    `linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://html2canvas.hertzen.com')`
-                ),
-                [
-                    {
-                        angle: deg(180),
-                        type: CSSImageType.LINEAR_GRADIENT,
-                        stops: [
-                            { color: pack(255, 255, 0, 0.5), stop: null },
-                            { color: pack(0, 0, 255, 0.5), stop: null }
-                        ]
-                    },
-                    { url: 'https://html2canvas.hertzen.com', type: CSSImageType.URL }
-                ]
-            ));
-    });
-});

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

@@ -1,280 +0,0 @@
-import { strictEqual, deepStrictEqual, ok } from 'assert';
-import { Parser } from '../../syntax/parser';
-import { clipPath, CLIP_PATH_TYPE, ClipPathValue } from '../clip-path';
-import { LengthPercentage } from '../../types/length-percentage';
-import { TokenType } from '../../syntax/tokenizer';
-
-/** Helper that runs a CSS value string through the clipPath descriptor. */
-const parse = (css: string): ClipPathValue => {
-    const token = Parser.parseValue(css);
-    return clipPath.parse(null as any, token);
-};
-
-describe('clip-path property descriptor', () => {
-    // ------------------------------------------------------------------ none
-    describe('none / fallbacks', () => {
-        it('should return NONE for "none"', () => {
-            strictEqual(parse('none').type, CLIP_PATH_TYPE.NONE);
-        });
-
-        it('should return NONE for unknown ident', () => {
-            strictEqual(parse('auto').type, CLIP_PATH_TYPE.NONE);
-        });
-
-        it('should return NONE for unsupported function', () => {
-            // url() is not yet supported
-            strictEqual(parse('url(#mask)').type, CLIP_PATH_TYPE.NONE);
-        });
-    });
-
-    // ----------------------------------------------------------------- inset
-    describe('inset()', () => {
-        it('should parse a single length (all sides equal)', () => {
-            const result = parse('inset(10px)');
-            if (result.type !== CLIP_PATH_TYPE.INSET) throw new Error('wrong type');
-            strictEqual(result.top.number, 10);
-            strictEqual(result.right.number, 10);
-            strictEqual(result.bottom.number, 10);
-            strictEqual(result.left.number, 10);
-        });
-
-        it('should parse two values (top/bottom | left/right)', () => {
-            const result = parse('inset(10px 20%)');
-            if (result.type !== CLIP_PATH_TYPE.INSET) throw new Error('wrong type');
-            strictEqual(result.top.number, 10);
-            strictEqual(result.right.number, 20);
-            strictEqual(result.bottom.number, 10);
-            strictEqual(result.left.number, 20);
-        });
-
-        it('should parse four values', () => {
-            const result = parse('inset(5px 10px 15px 20px)');
-            if (result.type !== CLIP_PATH_TYPE.INSET) throw new Error('wrong type');
-            strictEqual(result.top.number, 5);
-            strictEqual(result.right.number, 10);
-            strictEqual(result.bottom.number, 15);
-            strictEqual(result.left.number, 20);
-        });
-
-        it('should parse three values (top | left/right | bottom)', () => {
-            const result = parse('inset(5px 10px 15px)');
-            if (result.type !== CLIP_PATH_TYPE.INSET) throw new Error('wrong type');
-            strictEqual(result.top.number, 5);
-            strictEqual(result.right.number, 10);
-            strictEqual(result.bottom.number, 15);
-            strictEqual(result.left.number, 10, 'left should mirror right');
-        });
-
-        it('should ignore the "round" clause', () => {
-            const result = parse('inset(10px round 5px)');
-            if (result.type !== CLIP_PATH_TYPE.INSET) throw new Error('wrong type');
-            strictEqual(result.top.number, 10);
-        });
-
-        it('should parse percentage values', () => {
-            const result = parse('inset(25%)');
-            if (result.type !== CLIP_PATH_TYPE.INSET) throw new Error('wrong type');
-            strictEqual(result.top.type, TokenType.PERCENTAGE_TOKEN);
-            strictEqual(result.top.number, 25);
-        });
-
-        it('should parse overlapping insets (>50% each side) — clamping to 0 is done at render time', () => {
-            // The parser stores the raw values; buildClipPathEffect clamps w/h to Math.max(0, …).
-            const result = parse('inset(60%)');
-            if (result.type !== CLIP_PATH_TYPE.INSET) throw new Error('wrong type');
-            strictEqual(result.top.number, 60);
-            strictEqual(result.right.number, 60);
-        });
-    });
-
-    // ---------------------------------------------------------------- circle
-    describe('circle()', () => {
-        it('should default to closest-side radius and 50% 50% center', () => {
-            const result = parse('circle()');
-            if (result.type !== CLIP_PATH_TYPE.CIRCLE) throw new Error('wrong type');
-            strictEqual(result.radius, 'closest-side');
-            strictEqual(result.cx.number, 50);
-            strictEqual(result.cy.number, 50);
-        });
-
-        it('should parse a percentage radius', () => {
-            const result = parse('circle(50%)');
-            if (result.type !== CLIP_PATH_TYPE.CIRCLE) throw new Error('wrong type');
-            ok(result.radius !== 'closest-side' && result.radius !== 'farthest-side');
-            strictEqual((result.radius as LengthPercentage).number, 50);
-        });
-
-        it('should parse closest-side keyword', () => {
-            const result = parse('circle(closest-side)');
-            if (result.type !== CLIP_PATH_TYPE.CIRCLE) throw new Error('wrong type');
-            strictEqual(result.radius, 'closest-side');
-        });
-
-        it('should parse farthest-side keyword', () => {
-            const result = parse('circle(farthest-side)');
-            if (result.type !== CLIP_PATH_TYPE.CIRCLE) throw new Error('wrong type');
-            strictEqual(result.radius, 'farthest-side');
-        });
-
-        it('should parse "at" position', () => {
-            const result = parse('circle(50% at 30% 70%)');
-            if (result.type !== CLIP_PATH_TYPE.CIRCLE) throw new Error('wrong type');
-            strictEqual(result.cx.number, 30);
-            strictEqual(result.cy.number, 70);
-        });
-
-        it('should parse "at center" as 50% 50%', () => {
-            const result = parse('circle(at center)');
-            if (result.type !== CLIP_PATH_TYPE.CIRCLE) throw new Error('wrong type');
-            strictEqual(result.cx.number, 50);
-            strictEqual(result.cy.number, 50);
-        });
-
-        it('should parse "at left top" as 0 0', () => {
-            const result = parse('circle(at left top)');
-            if (result.type !== CLIP_PATH_TYPE.CIRCLE) throw new Error('wrong type');
-            strictEqual(result.cx.number, 0);
-            strictEqual(result.cy.number, 0);
-        });
-
-        it('should parse "at top" as cx=50% cy=0 (top is y-axis)', () => {
-            const result = parse('circle(at top)');
-            if (result.type !== CLIP_PATH_TYPE.CIRCLE) throw new Error('wrong type');
-            strictEqual(result.cx.number, 50, 'cx should default to 50% (center)');
-            strictEqual(result.cy.number, 0, 'cy should be 0 (top)');
-        });
-
-        it('should parse "at bottom" as cx=50% cy=100%', () => {
-            const result = parse('circle(at bottom)');
-            if (result.type !== CLIP_PATH_TYPE.CIRCLE) throw new Error('wrong type');
-            strictEqual(result.cx.number, 50);
-            strictEqual(result.cy.number, 100);
-        });
-
-        it('should parse "at right" as cx=100% cy=50%', () => {
-            const result = parse('circle(at right)');
-            if (result.type !== CLIP_PATH_TYPE.CIRCLE) throw new Error('wrong type');
-            strictEqual(result.cx.number, 100);
-            strictEqual(result.cy.number, 50);
-        });
-
-        it('should parse "at top left" (reversed order) as cx=0 cy=0', () => {
-            const result = parse('circle(at top left)');
-            if (result.type !== CLIP_PATH_TYPE.CIRCLE) throw new Error('wrong type');
-            strictEqual(result.cx.number, 0);
-            strictEqual(result.cy.number, 0);
-        });
-
-        it('should parse mixed "at top 30%" as cx=30% cy=0', () => {
-            const result = parse('circle(at top 30%)');
-            if (result.type !== CLIP_PATH_TYPE.CIRCLE) throw new Error('wrong type');
-            strictEqual(result.cx.number, 30, 'cx should be the length-percentage');
-            strictEqual(result.cy.number, 0, 'cy should be 0 (top)');
-        });
-
-        it('should parse "at center 30%" as cx=50% cy=30%', () => {
-            const result = parse('circle(at center 30%)');
-            if (result.type !== CLIP_PATH_TYPE.CIRCLE) throw new Error('wrong type');
-            strictEqual(result.cx.number, 50);
-            strictEqual(result.cy.number, 30);
-        });
-
-        it('should parse "at 30% center" as cx=30% cy=50%', () => {
-            const result = parse('circle(at 30% center)');
-            if (result.type !== CLIP_PATH_TYPE.CIRCLE) throw new Error('wrong type');
-            strictEqual(result.cx.number, 30);
-            strictEqual(result.cy.number, 50);
-        });
-    });
-
-    // --------------------------------------------------------------- ellipse
-    describe('ellipse()', () => {
-        it('should default both radii to closest-side and center to 50% 50%', () => {
-            const result = parse('ellipse()');
-            if (result.type !== CLIP_PATH_TYPE.ELLIPSE) throw new Error('wrong type');
-            strictEqual(result.rx, 'closest-side');
-            strictEqual(result.ry, 'closest-side');
-            strictEqual(result.cx.number, 50);
-            strictEqual(result.cy.number, 50);
-        });
-
-        it('should parse two length-percentage radii', () => {
-            const result = parse('ellipse(40% 30%)');
-            if (result.type !== CLIP_PATH_TYPE.ELLIPSE) throw new Error('wrong type');
-            ok(result.rx !== 'closest-side' && result.rx !== 'farthest-side');
-            ok(result.ry !== 'closest-side' && result.ry !== 'farthest-side');
-            strictEqual((result.rx as LengthPercentage).number, 40);
-            strictEqual((result.ry as LengthPercentage).number, 30);
-        });
-
-        it('should parse radii and "at" position', () => {
-            const result = parse('ellipse(40px 20px at 50% 50%)');
-            if (result.type !== CLIP_PATH_TYPE.ELLIPSE) throw new Error('wrong type');
-            strictEqual((result.rx as LengthPercentage).number, 40);
-            strictEqual((result.ry as LengthPercentage).number, 20);
-            strictEqual(result.cx.number, 50);
-            strictEqual(result.cy.number, 50);
-        });
-    });
-
-    // -------------------------------------------------------------- polygon
-    describe('polygon()', () => {
-        it('should parse a triangle', () => {
-            const result = parse('polygon(0% 0%, 100% 0%, 50% 100%)');
-            if (result.type !== CLIP_PATH_TYPE.POLYGON) throw new Error('wrong type');
-            strictEqual(result.points.length, 3);
-            strictEqual(result.points[0][0].number, 0);
-            strictEqual(result.points[0][1].number, 0);
-            strictEqual(result.points[1][0].number, 100);
-            strictEqual(result.points[2][0].number, 50);
-        });
-
-        it('should skip a leading fill-rule keyword', () => {
-            const result = parse('polygon(evenodd, 0% 0%, 100% 50%, 0% 100%)');
-            if (result.type !== CLIP_PATH_TYPE.POLYGON) throw new Error('wrong type');
-            strictEqual(result.points.length, 3);
-        });
-
-        it('should parse pixel coordinates', () => {
-            const result = parse('polygon(10px 20px, 100px 20px, 100px 80px, 10px 80px)');
-            if (result.type !== CLIP_PATH_TYPE.POLYGON) throw new Error('wrong type');
-            strictEqual(result.points.length, 4);
-            strictEqual(result.points[0][0].number, 10);
-            strictEqual(result.points[0][1].number, 20);
-        });
-
-        it('should return empty points array for empty polygon', () => {
-            const result = parse('polygon()');
-            if (result.type !== CLIP_PATH_TYPE.POLYGON) throw new Error('wrong type');
-            deepStrictEqual(result.points, []);
-        });
-    });
-
-    // ------------------------------------------------------------------ path
-    describe('path()', () => {
-        it('should parse a valid SVG path string', () => {
-            const result = parse("path('M 0 0 L 100 0 L 100 100 Z')");
-            if (result.type !== CLIP_PATH_TYPE.PATH) throw new Error('wrong type');
-            strictEqual(result.d, 'M 0 0 L 100 0 L 100 100 Z');
-        });
-
-        it('should return NONE when no string is provided', () => {
-            strictEqual(parse('path()').type, CLIP_PATH_TYPE.NONE);
-        });
-    });
-
-    // ---------------------------------------- initial value / descriptor meta
-    describe('descriptor metadata', () => {
-        it('should have name "clip-path"', () => {
-            strictEqual(clipPath.name, 'clip-path');
-        });
-
-        it('should have initial value "none"', () => {
-            strictEqual(clipPath.initialValue, 'none');
-        });
-
-        it('should not require vendor prefix', () => {
-            strictEqual(clipPath.prefix, false);
-        });
-    });
-});

package/src/css/property-descriptors/__tests__/font-family.ts

@@ -1,25 +0,0 @@
-import { deepEqual } from 'assert';
-import { Parser } from '../../syntax/parser';
-import { fontFamily } from '../font-family';
-import { Context } from '../../../core/context';
-
-const fontFamilyParse = (value: string) => fontFamily.parse({} as Context, Parser.parseValues(value));
-
-describe('property-descriptors', () => {
-    describe('font-family', () => {
-        it('sans-serif', () => deepEqual(fontFamilyParse('sans-serif'), ['sans-serif']));
-
-        it('great fonts 40 library', () =>
-            deepEqual(fontFamilyParse('great fonts 40 library'), ["'great fonts 40 library'"]));
-
-        it('preferred font, "quoted fallback font", font', () =>
-            deepEqual(fontFamilyParse('preferred font, "quoted fallback font", font'), [
-                "'preferred font'",
-                "'quoted fallback font'",
-                'font'
-            ]));
-
-        it("'escaping test\\'s font'", () =>
-            deepEqual(fontFamilyParse("'escaping test\\'s font'"), ["'escaping test's font'"]));
-    });
-});

package/src/css/property-descriptors/__tests__/image-rendering-integration.test.ts

@@ -1,153 +0,0 @@
-import { IMAGE_RENDERING } from '../image-rendering';
-
-/**
- * Integration tests for image-rendering CSS property
- * Tests actual DOM and canvas rendering behavior
- */
-describe('image-rendering integration', () => {
-    let container: HTMLDivElement;
-    let canvas: HTMLCanvasElement;
-    let ctx: CanvasRenderingContext2D | null = null;
-
-    beforeEach(() => {
-        // Create test DOM elements
-        container = document.createElement('div');
-        document.body.appendChild(container);
-
-        // Create canvas for testing
-        canvas = document.createElement('canvas');
-        canvas.width = 100;
-        canvas.height = 100;
-        try {
-            ctx = canvas.getContext('2d');
-        } catch {
-            // JSDOM does not implement getContext('2d') unless canvas npm package is installed
-            ctx = null;
-        }
-    });
-
-    afterEach(() => {
-        // Cleanup
-        if (container.parentNode) {
-            container.parentNode.removeChild(container);
-        }
-    });
-
-    describe('Canvas context imageSmoothingEnabled', () => {
-        it('should default to true', () => {
-            if (!ctx) return; // Skip if canvas not available
-            expect(ctx.imageSmoothingEnabled).toBe(true);
-        });
-
-        it('should be settable to false', () => {
-            if (!ctx) return; // Skip if canvas not available
-            ctx.imageSmoothingEnabled = false;
-            expect(ctx.imageSmoothingEnabled).toBe(false);
-        });
-
-        it('should be settable to true', () => {
-            if (!ctx) return; // Skip if canvas not available
-            ctx.imageSmoothingEnabled = false;
-            ctx.imageSmoothingEnabled = true;
-            expect(ctx.imageSmoothingEnabled).toBe(true);
-        });
-    });
-
-    describe('Canvas context imageSmoothingQuality', () => {
-        it('should accept "low" value', () => {
-            if (!ctx) return; // Skip if canvas not available
-            ctx.imageSmoothingQuality = 'low';
-            expect(ctx.imageSmoothingQuality).toBe('low');
-        });
-
-        it('should accept "medium" value', () => {
-            if (!ctx) return; // Skip if canvas not available
-            ctx.imageSmoothingQuality = 'medium';
-            expect(ctx.imageSmoothingQuality).toBe('medium');
-        });
-
-        it('should accept "high" value', () => {
-            if (!ctx) return; // Skip if canvas not available
-            ctx.imageSmoothingQuality = 'high';
-            expect(ctx.imageSmoothingQuality).toBe('high');
-        });
-    });
-
-    describe('CSS image-rendering property', () => {
-        it('should apply pixelated style to img element', () => {
-            const img = document.createElement('img');
-            img.style.imageRendering = 'pixelated';
-            container.appendChild(img);
-            expect(img.style.imageRendering).toBe('pixelated');
-        });
-
-        it('should apply crisp-edges style to img element', () => {
-            const img = document.createElement('img');
-            img.style.imageRendering = 'crisp-edges';
-            container.appendChild(img);
-            expect(img.style.imageRendering).toBe('crisp-edges');
-        });
-
-        it('should apply smooth style to img element', () => {
-            const img = document.createElement('img');
-            img.style.imageRendering = 'smooth';
-            container.appendChild(img);
-            // Note: Some browsers may normalize this value
-            expect(['smooth', 'auto', '']).toContain(img.style.imageRendering);
-        });
-    });
-
-    describe('IMAGE_RENDERING enum values', () => {
-        it('should have correct enum values', () => {
-            expect(IMAGE_RENDERING.AUTO).toBe(0);
-            expect(IMAGE_RENDERING.CRISP_EDGES).toBe(1);
-            expect(IMAGE_RENDERING.PIXELATED).toBe(2);
-            expect(IMAGE_RENDERING.SMOOTH).toBe(3);
-        });
-
-        it('should have distinct values', () => {
-            const values = [
-                IMAGE_RENDERING.AUTO,
-                IMAGE_RENDERING.CRISP_EDGES,
-                IMAGE_RENDERING.PIXELATED,
-                IMAGE_RENDERING.SMOOTH
-            ];
-            const uniqueValues = new Set(values);
-            expect(uniqueValues.size).toBe(values.length);
-        });
-    });
-
-    describe('Smoothing state preservation', () => {
-        it('should preserve and restore smoothing state', () => {
-            if (!ctx) return; // Skip if canvas not available
-            const originalState = ctx.imageSmoothingEnabled;
-
-            // Save state
-            ctx.save();
-            ctx.imageSmoothingEnabled = false;
-            expect(ctx.imageSmoothingEnabled).toBe(false);
-
-            // Restore state
-            ctx.restore();
-            expect(ctx.imageSmoothingEnabled).toBe(originalState);
-        });
-
-        it('should handle multiple save/restore cycles', () => {
-            if (!ctx) return; // Skip if canvas not available
-            ctx.imageSmoothingEnabled = true;
-            ctx.save();
-
-            ctx.imageSmoothingEnabled = false;
-            ctx.save();
-
-            ctx.imageSmoothingEnabled = true;
-            expect(ctx.imageSmoothingEnabled).toBe(true);
-
-            ctx.restore();
-            expect(ctx.imageSmoothingEnabled).toBe(false);
-
-            ctx.restore();
-            expect(ctx.imageSmoothingEnabled).toBe(true);
-        });
-    });
-});