html2canvas-pro 2.0.4 → 2.1.0

package/src/css/property-descriptor.ts

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,280 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,153 @@
+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);
+        });
+    });
+});