html2canvas-pro 2.1.0 → 2.2.0

package/src/render/canvas/__tests__/text-renderer.test.ts

@@ -1,471 +0,0 @@
-import { ok, strictEqual, deepStrictEqual } from 'assert';
-import { TextRenderer, TextRendererDependencies, hasCJKCharacters } from '../text-renderer';
-import { Context } from '../../../core/context';
-import { Bounds } from '../../../css/layout/bounds';
-import { TextBounds } from '../../../css/layout/text';
-import { Html2CanvasConfig } from '../../../config';
-import { WRITING_MODE } from '../../../css/property-descriptors/writing-mode';
-
-const createMockContext = (): Context => {
-    const mockWindow = {
-        document: {
-            createElement: (_name: string) => {
-                let _href = '';
-                return {
-                    set href(value: string) {
-                        _href = value;
-                    },
-                    get href() {
-                        return _href;
-                    },
-                    get protocol() {
-                        return 'http:';
-                    },
-                    get hostname() {
-                        return 'localhost';
-                    },
-                    get port() {
-                        return '';
-                    }
-                };
-            }
-        },
-        location: { href: 'http://localhost/' }
-    } as unknown as Window;
-
-    const config = new Html2CanvasConfig({ window: mockWindow });
-    return new Context(
-        {
-            logging: false,
-            imageTimeout: 15000,
-            useCORS: false,
-            allowTaint: false
-        },
-        new Bounds(0, 0, 800, 600),
-        config
-    );
-};
-
-describe('TextRenderer', () => {
-    it('should be instantiated', () => {
-        const ctx = {
-            fillStyle: '',
-            font: '',
-            save: () => {},
-            restore: () => {}
-        } as unknown as CanvasRenderingContext2D;
-
-        const deps: TextRendererDependencies = {
-            ctx,
-            context: createMockContext(),
-            options: { scale: 1 }
-        };
-
-        const renderer = new TextRenderer(deps);
-        ok(renderer);
-
-        // Test public methods exist
-        strictEqual(typeof renderer.renderTextNode, 'function');
-        strictEqual(typeof renderer.renderTextWithLetterSpacing, 'function');
-        strictEqual(typeof renderer.createFontStyle, 'function');
-    });
-});
-
-describe('hasCJKCharacters', () => {
-    it('should return true for Chinese characters', () => {
-        strictEqual(hasCJKCharacters('快照'), true);
-        strictEqual(hasCJKCharacters('截图'), true);
-        strictEqual(hasCJKCharacters('中文'), true);
-    });
-
-    it('should return true for Japanese characters', () => {
-        strictEqual(hasCJKCharacters('ひらがな'), true); // Hiragana
-        strictEqual(hasCJKCharacters('カタカナ'), true); // Katakana
-        strictEqual(hasCJKCharacters('漢字'), true); // Kanji
-    });
-
-    it('should return true for Korean characters', () => {
-        strictEqual(hasCJKCharacters('한글'), true);
-    });
-
-    it('should return true for CJK punctuation and symbols', () => {
-        strictEqual(hasCJKCharacters('。'), true); // CJK full stop (U+3002)
-        strictEqual(hasCJKCharacters('、'), true); // CJK comma (U+3001)
-        strictEqual(hasCJKCharacters('「」'), true); // CJK brackets
-    });
-
-    it('should return true for fullwidth characters (U+FF01–U+FFEF)', () => {
-        strictEqual(hasCJKCharacters('！'), true); // Fullwidth ! (U+FF01, range start)
-        strictEqual(hasCJKCharacters('Ａ'), true); // Fullwidth A (U+FF21)
-        strictEqual(hasCJKCharacters('１'), true); // Fullwidth 1 (U+FF11)
-    });
-
-    it('should return false for Latin characters', () => {
-        strictEqual(hasCJKCharacters('Hello'), false);
-        strictEqual(hasCJKCharacters('SOS'), false);
-        strictEqual(hasCJKCharacters('abc123'), false);
-    });
-
-    it('should return false for empty string', () => {
-        strictEqual(hasCJKCharacters(''), false);
-    });
-
-    it('should return true for mixed text containing CJK', () => {
-        strictEqual(hasCJKCharacters('SOS 快照'), true);
-    });
-});
-
-describe('renderTextWithLetterSpacing', () => {
-    it('should apply letterSpacing to each character x position (Issue #73 Bug1)', () => {
-        const fillCalls: Array<{ text: string; x: number; y: number }> = [];
-        const measureResults: Record<string, number> = { A: 10, B: 12, C: 8 };
-
-        const ctx = {
-            fillStyle: '',
-            font: '',
-            textBaseline: 'alphabetic' as CanvasTextBaseline,
-            fillText(text: string, x: number, y: number) {
-                fillCalls.push({ text, x, y });
-            },
-            measureText(text: string) {
-                return { width: measureResults[text] ?? 10 };
-            }
-        } as unknown as CanvasRenderingContext2D;
-
-        const deps: TextRendererDependencies = {
-            ctx,
-            context: createMockContext(),
-            options: { scale: 1 }
-        };
-
-        const renderer = new TextRenderer(deps);
-        const bounds = new Bounds(100, 50, 200, 25);
-        const text = new TextBounds('ABC', bounds);
-        const letterSpacing = 5;
-        const baseline = 20;
-
-        renderer.renderTextWithLetterSpacing(text, letterSpacing, baseline);
-
-        // Verify letter spacing is added between characters
-        // A: x=100, B: x=100+10+5=115, C: x=115+12+5=132
-        strictEqual(fillCalls.length, 3);
-        strictEqual(fillCalls[0].text, 'A');
-        strictEqual(fillCalls[0].x, 100);
-        strictEqual(fillCalls[1].text, 'B');
-        strictEqual(fillCalls[1].x, 115); // 100 + measureText('A').width(10) + letterSpacing(5)
-        strictEqual(fillCalls[2].text, 'C');
-        strictEqual(fillCalls[2].x, 132); // 115 + measureText('B').width(12) + letterSpacing(5)
-
-        // Verify y position uses baseline
-        fillCalls.forEach((call) => {
-            strictEqual(call.y, bounds.top + baseline); // 50 + 20 = 70
-        });
-    });
-
-    it('should use ideographic baseline for CJK characters (Issue #73 Bug2)', () => {
-        const baselineChanges: string[] = [];
-        let currentBaseline: CanvasTextBaseline = 'alphabetic';
-
-        const ctx = {
-            fillStyle: '',
-            font: '',
-            get textBaseline(): CanvasTextBaseline {
-                return currentBaseline;
-            },
-            set textBaseline(value: CanvasTextBaseline) {
-                currentBaseline = value;
-                baselineChanges.push(value);
-            },
-            fillText(_text: string, _x: number, _y: number) {},
-            measureText(_text: string) {
-                return { width: 25 };
-            }
-        } as unknown as CanvasRenderingContext2D;
-
-        const deps: TextRendererDependencies = {
-            ctx,
-            context: createMockContext(),
-            options: { scale: 1 }
-        };
-
-        const renderer = new TextRenderer(deps);
-        const bounds = new Bounds(0, 0, 100, 25);
-        const text = new TextBounds('快照', bounds);
-
-        renderer.renderTextWithLetterSpacing(text, 10, 20);
-
-        // Should have switched to ideographic for each CJK char and restored
-        // Pattern: [ideographic, alphabetic, ideographic, alphabetic]
-        ok(baselineChanges.includes('ideographic'), 'should switch to ideographic baseline for CJK');
-        // Should restore alphabetic after each CJK char
-        const ideographicIdx = baselineChanges.indexOf('ideographic');
-        strictEqual(baselineChanges[ideographicIdx + 1], 'alphabetic');
-    });
-
-    it('should not change textBaseline for non-CJK characters', () => {
-        const baselineChanges: string[] = [];
-        let currentBaseline: CanvasTextBaseline = 'alphabetic';
-
-        const ctx = {
-            fillStyle: '',
-            font: '',
-            get textBaseline(): CanvasTextBaseline {
-                return currentBaseline;
-            },
-            set textBaseline(value: CanvasTextBaseline) {
-                currentBaseline = value;
-                baselineChanges.push(value);
-            },
-            fillText(_text: string, _x: number, _y: number) {},
-            measureText(_text: string) {
-                return { width: 10 };
-            }
-        } as unknown as CanvasRenderingContext2D;
-
-        const deps: TextRendererDependencies = {
-            ctx,
-            context: createMockContext(),
-            options: { scale: 1 }
-        };
-
-        const renderer = new TextRenderer(deps);
-        const bounds = new Bounds(0, 0, 100, 25);
-        const text = new TextBounds('ABC', bounds);
-
-        renderer.renderTextWithLetterSpacing(text, 5, 20);
-
-        // Should not switch to ideographic for Latin characters
-        ok(!baselineChanges.includes('ideographic'), 'should not switch to ideographic for Latin text');
-    });
-
-    it('should render whole string in one call when letterSpacing is 0', () => {
-        const fillCalls: Array<{ text: string; x: number; y: number }> = [];
-
-        const ctx = {
-            fillStyle: '',
-            font: '',
-            textBaseline: 'alphabetic' as CanvasTextBaseline,
-            fillText(text: string, x: number, y: number) {
-                fillCalls.push({ text, x, y });
-            },
-            measureText(_text: string) {
-                return { width: 30 };
-            }
-        } as unknown as CanvasRenderingContext2D;
-
-        const deps: TextRendererDependencies = {
-            ctx,
-            context: createMockContext(),
-            options: { scale: 1 }
-        };
-
-        const renderer = new TextRenderer(deps);
-        const bounds = new Bounds(10, 20, 100, 25);
-        const text = new TextBounds('Hello', bounds);
-
-        renderer.renderTextWithLetterSpacing(text, 0, 22);
-
-        deepStrictEqual(fillCalls, [{ text: 'Hello', x: 10, y: 42 }]);
-    });
-
-    it('should handle negative letterSpacing correctly', () => {
-        const fillCalls: Array<{ text: string; x: number }> = [];
-
-        const ctx = {
-            fillStyle: '',
-            font: '',
-            textBaseline: 'alphabetic' as CanvasTextBaseline,
-            fillText(text: string, x: number, _y: number) {
-                fillCalls.push({ text, x });
-            },
-            measureText(_text: string) {
-                return { width: 10 };
-            }
-        } as unknown as CanvasRenderingContext2D;
-
-        const deps: TextRendererDependencies = {
-            ctx,
-            context: createMockContext(),
-            options: { scale: 1 }
-        };
-
-        const renderer = new TextRenderer(deps);
-        const bounds = new Bounds(100, 0, 50, 20);
-        const text = new TextBounds('AB', bounds);
-
-        renderer.renderTextWithLetterSpacing(text, -3, 15);
-
-        // A: x=100, B: x=100 + 10 + (-3) = 107
-        strictEqual(fillCalls[0].x, 100);
-        strictEqual(fillCalls[1].x, 107);
-    });
-
-    it('should handle mixed CJK and Latin text with correct baseline per character', () => {
-        const baselineAtRender: Record<string, string> = {};
-        let currentBaseline: CanvasTextBaseline = 'alphabetic';
-
-        const ctx = {
-            fillStyle: '',
-            font: '',
-            get textBaseline(): CanvasTextBaseline {
-                return currentBaseline;
-            },
-            set textBaseline(value: CanvasTextBaseline) {
-                currentBaseline = value;
-            },
-            fillText(text: string, _x: number, _y: number) {
-                baselineAtRender[text] = currentBaseline;
-            },
-            measureText(_text: string) {
-                return { width: 12 };
-            }
-        } as unknown as CanvasRenderingContext2D;
-
-        const deps: TextRendererDependencies = {
-            ctx,
-            context: createMockContext(),
-            options: { scale: 1 }
-        };
-
-        const renderer = new TextRenderer(deps);
-        const bounds = new Bounds(0, 0, 200, 25);
-        // Mixed: Latin 'A', CJK '快', Latin 'B'
-        const text = new TextBounds('A快B', bounds);
-
-        renderer.renderTextWithLetterSpacing(text, 5, 20);
-
-        strictEqual(baselineAtRender['A'], 'alphabetic', 'Latin char should use alphabetic baseline');
-        strictEqual(baselineAtRender['快'], 'ideographic', 'CJK char should use ideographic baseline');
-        strictEqual(baselineAtRender['B'], 'alphabetic', 'Latin char after CJK should restore alphabetic baseline');
-    });
-
-    it('should handle empty string without errors', () => {
-        const ctx = {
-            fillStyle: '',
-            font: '',
-            textBaseline: 'alphabetic' as CanvasTextBaseline,
-            fillText(_text: string, _x: number, _y: number) {},
-            measureText(_text: string) {
-                return { width: 0 };
-            }
-        } as unknown as CanvasRenderingContext2D;
-
-        const deps: TextRendererDependencies = {
-            ctx,
-            context: createMockContext(),
-            options: { scale: 1 }
-        };
-
-        const renderer = new TextRenderer(deps);
-        const bounds = new Bounds(0, 0, 100, 25);
-        const text = new TextBounds('', bounds);
-
-        // Should not throw
-        renderer.renderTextWithLetterSpacing(text, 5, 20);
-        renderer.renderTextWithLetterSpacing(text, 0, 20);
-    });
-
-    it('should render CJK glyphs upright in vertical writing mode', () => {
-        const fillCalls: Array<{ text: string; x: number; y: number }> = [];
-        const baselineAtRender: Record<string, string> = {};
-        let currentBaseline: CanvasTextBaseline = 'alphabetic';
-
-        const ctx = {
-            fillStyle: '',
-            font: '',
-            get textBaseline(): CanvasTextBaseline {
-                return currentBaseline;
-            },
-            set textBaseline(value: CanvasTextBaseline) {
-                currentBaseline = value;
-            },
-            fillText(text: string, x: number, y: number) {
-                baselineAtRender[text] = currentBaseline;
-                fillCalls.push({ text, x, y });
-            },
-            measureText(_text: string) {
-                return { width: 20 };
-            },
-            save() {},
-            restore() {},
-            translate(_x: number, _y: number) {},
-            rotate(_angle: number) {}
-        } as unknown as CanvasRenderingContext2D;
-
-        const deps: TextRendererDependencies = {
-            ctx,
-            context: createMockContext(),
-            options: { scale: 1 }
-        };
-
-        const renderer = new TextRenderer(deps);
-        const bounds = new Bounds(100, 50, 24, 80);
-        const text = new TextBounds('縦書', bounds);
-
-        renderer.renderTextWithLetterSpacing(text, 4, 18, WRITING_MODE.VERTICAL_RL);
-
-        deepStrictEqual(fillCalls, [
-            { text: '縦', x: 100, y: 68 },
-            { text: '書', x: 100, y: 92 }
-        ]);
-        strictEqual(baselineAtRender['縦'], 'ideographic');
-        strictEqual(baselineAtRender['書'], 'ideographic');
-        strictEqual(currentBaseline, 'alphabetic');
-    });
-
-    it('should rotate Latin glyphs in vertical writing mode', () => {
-        const operations: string[] = [];
-        const fillCalls: Array<{ text: string; x: number; y: number }> = [];
-
-        const ctx = {
-            fillStyle: '',
-            font: '',
-            textBaseline: 'alphabetic' as CanvasTextBaseline,
-            fillText(text: string, x: number, y: number) {
-                fillCalls.push({ text, x, y });
-            },
-            measureText(_text: string) {
-                return { width: 12 };
-            },
-            save() {
-                operations.push('save');
-            },
-            restore() {
-                operations.push('restore');
-            },
-            translate(x: number, y: number) {
-                operations.push(`translate:${x},${y}`);
-            },
-            rotate(angle: number) {
-                operations.push(`rotate:${angle}`);
-            }
-        } as unknown as CanvasRenderingContext2D;
-
-        const deps: TextRendererDependencies = {
-            ctx,
-            context: createMockContext(),
-            options: { scale: 1 }
-        };
-
-        const renderer = new TextRenderer(deps);
-        const bounds = new Bounds(40, 10, 24, 60);
-        const text = new TextBounds('AB', bounds);
-
-        renderer.renderTextWithLetterSpacing(text, 2, 16, WRITING_MODE.VERTICAL_RL);
-
-        deepStrictEqual(fillCalls, [
-            { text: 'A', x: 0, y: 0 },
-            { text: 'B', x: 0, y: 0 }
-        ]);
-        deepStrictEqual(operations, [
-            'save',
-            'translate:56,10',
-            `rotate:${Math.PI / 2}`,
-            'restore',
-            'save',
-            'translate:56,24',
-            `rotate:${Math.PI / 2}`,
-            'restore'
-        ]);
-    });
-});