pagyra-js 0.0.1

package/tests/layout/gap-calculator.spec.ts

@@ -0,0 +1,196 @@
+import { describe, it, expect } from 'vitest';
+import {
+    calculateTotalGap,
+    calculateAvailableSpace,
+    calculateItemOffsets,
+    calculateTrackOffsets,
+    GapCalculator,
+} from '../../src/layout/utils/gap-calculator.js';
+
+describe('Gap Calculator Utilities', () => {
+    describe('calculateTotalGap', () => {
+        it('should return 0 for single item', () => {
+            expect(calculateTotalGap(10, 1)).toBe(0);
+        });
+
+        it('should return 0 for zero items', () => {
+            expect(calculateTotalGap(10, 0)).toBe(0);
+        });
+
+        it('should return 0 for negative gap', () => {
+            expect(calculateTotalGap(-10, 3)).toBe(0);
+        });
+
+        it('should return 0 for zero gap', () => {
+            expect(calculateTotalGap(0, 3)).toBe(0);
+        });
+
+        it('should calculate correct gap for 2 items', () => {
+            expect(calculateTotalGap(10, 2)).toBe(10);
+        });
+
+        it('should calculate correct gap for 3 items', () => {
+            expect(calculateTotalGap(10, 3)).toBe(20);
+        });
+
+        it('should calculate correct gap for 5 items', () => {
+            expect(calculateTotalGap(15, 5)).toBe(60); // 15 * (5-1) = 60
+        });
+
+        it('should handle decimal gaps', () => {
+            expect(calculateTotalGap(10.5, 3)).toBe(21); // 10.5 * 2 = 21
+        });
+    });
+
+    describe('calculateAvailableSpace', () => {
+        it('should return full space when gap is 0', () => {
+            expect(calculateAvailableSpace(100, 0, 3)).toBe(100);
+        });
+
+        it('should return full space for single item', () => {
+            expect(calculateAvailableSpace(100, 10, 1)).toBe(100);
+        });
+
+        it('should subtract total gap from available space', () => {
+            expect(calculateAvailableSpace(100, 10, 3)).toBe(80); // 100 - 20
+        });
+
+        it('should return 0 when gap exceeds available space', () => {
+            expect(calculateAvailableSpace(50, 30, 3)).toBe(0); // 50 - 60 = -10, clamped to 0
+        });
+
+        it('should handle negative total space gracefully', () => {
+            expect(calculateAvailableSpace(-10, 5, 3)).toBe(0);
+        });
+
+        it('should work with decimal values', () => {
+            expect(calculateAvailableSpace(100.5, 10.5, 3)).toBe(79.5); // 100.5 - 21
+        });
+    });
+
+    describe('calculateItemOffsets', () => {
+        it('should return [0] for single item', () => {
+            expect(calculateItemOffsets([50], 10)).toEqual([0]);
+        });
+
+        it('should calculate offsets with no gap', () => {
+            expect(calculateItemOffsets([50, 30, 40], 0)).toEqual([0, 50, 80]);
+        });
+
+        it('should calculate offsets with gap', () => {
+            expect(calculateItemOffsets([50, 30, 40], 10)).toEqual([0, 60, 100]);
+            // Item 0: 0
+            // Item 1: 50 + 10 = 60
+            // Item 2: 50 + 10 + 30 + 10 = 100
+        });
+
+        it('should handle empty array', () => {
+            expect(calculateItemOffsets([], 10)).toEqual([]);
+        });
+
+        it('should handle uniform sizes', () => {
+            expect(calculateItemOffsets([50, 50, 50], 10)).toEqual([0, 60, 120]);
+        });
+
+        it('should work with decimal values', () => {
+            expect(calculateItemOffsets([50.5, 30.5, 40], 10.5)).toEqual([0, 61, 102]);
+            // Item 0: 0
+            // Item 1: 50.5 + 10.5 = 61
+            // Item 2: 50.5 + 10.5 + 30.5 + 10.5 = 102
+        });
+
+        it('should handle zero-sized items', () => {
+            expect(calculateItemOffsets([0, 50, 0, 30], 10)).toEqual([0, 10, 70, 80]);
+        });
+    });
+
+    describe('calculateTrackOffsets', () => {
+        it('should be equivalent to calculateItemOffsets', () => {
+            const sizes = [100, 150, 200];
+            const gap = 20;
+            expect(calculateTrackOffsets(sizes, gap)).toEqual(calculateItemOffsets(sizes, gap));
+        });
+
+        it('should calculate grid track offsets correctly', () => {
+            expect(calculateTrackOffsets([100, 150, 200], 20)).toEqual([0, 120, 290]);
+            // Track 0: 0
+            // Track 1: 100 + 20 = 120
+            // Track 2: 100 + 20 + 150 + 20 = 290
+        });
+    });
+
+    describe('GapCalculator', () => {
+        describe('getMainAxisGap', () => {
+            it('should return columnGap for row direction', () => {
+                const calc = new GapCalculator({ rowGap: 10, columnGap: 20 });
+                expect(calc.getMainAxisGap(true)).toBe(20);
+            });
+
+            it('should return rowGap for column direction', () => {
+                const calc = new GapCalculator({ rowGap: 10, columnGap: 20 });
+                expect(calc.getMainAxisGap(false)).toBe(10);
+            });
+        });
+
+        describe('getCrossAxisGap', () => {
+            it('should return rowGap for row direction', () => {
+                const calc = new GapCalculator({ rowGap: 10, columnGap: 20 });
+                expect(calc.getCrossAxisGap(true)).toBe(10);
+            });
+
+            it('should return columnGap for column direction', () => {
+                const calc = new GapCalculator({ rowGap: 10, columnGap: 20 });
+                expect(calc.getCrossAxisGap(false)).toBe(20);
+            });
+        });
+
+        describe('calculateMainAxisTotalGap', () => {
+            it('should calculate gap for row direction', () => {
+                const calc = new GapCalculator({ rowGap: 10, columnGap: 20 });
+                expect(calc.calculateMainAxisTotalGap(true, 3)).toBe(40); // columnGap * 2
+            });
+
+            it('should calculate gap for column direction', () => {
+                const calc = new GapCalculator({ rowGap: 10, columnGap: 20 });
+                expect(calc.calculateMainAxisTotalGap(false, 3)).toBe(20); // rowGap * 2
+            });
+
+            it('should return 0 for single item', () => {
+                const calc = new GapCalculator({ rowGap: 10, columnGap: 20 });
+                expect(calc.calculateMainAxisTotalGap(true, 1)).toBe(0);
+            });
+        });
+
+        describe('calculateMainAxisAvailableSpace', () => {
+            it('should calculate available space for row direction', () => {
+                const calc = new GapCalculator({ rowGap: 10, columnGap: 20 });
+                expect(calc.calculateMainAxisAvailableSpace(true, 100, 3)).toBe(60); // 100 - 40
+            });
+
+            it('should calculate available space for column direction', () => {
+                const calc = new GapCalculator({ rowGap: 10, columnGap: 20 });
+                expect(calc.calculateMainAxisAvailableSpace(false, 100, 3)).toBe(80); // 100 - 20
+            });
+
+            it('should handle insufficient space', () => {
+                const calc = new GapCalculator({ rowGap: 50, columnGap: 50 });
+                expect(calc.calculateMainAxisAvailableSpace(true, 80, 3)).toBe(0); // 80 - 100 = -20, clamped to 0
+            });
+        });
+
+        describe('edge cases', () => {
+            it('should handle zero gaps', () => {
+                const calc = new GapCalculator({ rowGap: 0, columnGap: 0 });
+                expect(calc.getMainAxisGap(true)).toBe(0);
+                expect(calc.calculateMainAxisTotalGap(true, 5)).toBe(0);
+                expect(calc.calculateMainAxisAvailableSpace(true, 100, 5)).toBe(100);
+            });
+
+            it('should handle same row and column gap', () => {
+                const calc = new GapCalculator({ rowGap: 15, columnGap: 15 });
+                expect(calc.getMainAxisGap(true)).toBe(15);
+                expect(calc.getCrossAxisGap(true)).toBe(15);
+            });
+        });
+    });
+});

package/tests/layout/inline-background-alignment.spec.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect } from "vitest";
+import { renderTreeForHtml, collectBoxes } from "../helpers/render-utils.js";
+
+// Tolerance for position comparison (accounts for padding and minor layout differences)
+const POSITION_TOLERANCE_PX = 10;
+// Tolerance for width comparison (allows 10% difference)
+const WIDTH_TOLERANCE_RATIO = 0.9;
+
+describe("inline background alignment", () => {
+    it("aligns background with text for inline span elements", async () => {
+        const html = `
+            <p>Normal text <span style="background-color: yellow">highlighted text</span> after.</p>
+        `;
+        const renderTree = await renderTreeForHtml(html);
+        const boxes = collectBoxes(renderTree.root);
+        
+        // Find the span element
+        const spanBox = boxes.find(b => b.tagName === "span");
+        expect(spanBox).toBeDefined();
+        
+        // Find the text node inside the span (should be a child with textRuns)
+        const textNodeInsideSpan = spanBox?.children.find(c => c.textRuns && c.textRuns.length > 0);
+        expect(textNodeInsideSpan).toBeDefined();
+        
+        if (spanBox && textNodeInsideSpan && textNodeInsideSpan.textRuns && textNodeInsideSpan.textRuns.length > 0) {
+            // The span's borderBox.x should be at or before the first text run's position
+            const firstRunX = textNodeInsideSpan.textRuns[0].lineMatrix?.e ?? 0;
+            const spanBorderX = spanBox.borderBox.x;
+            
+            // The span's border box X should match or be very close to where the first text run starts
+            // (accounting for any padding)
+            expect(Math.abs(spanBorderX - firstRunX)).toBeLessThan(POSITION_TOLERANCE_PX);
+            
+            // The span should have a background color
+            expect(spanBox.background?.color).toBeDefined();
+        }
+    });
+    
+    it("calculates correct width for inline span with multiple text fragments", async () => {
+        const html = `
+            <p>Before <span style="background-color: lightblue">text one two three</span> after.</p>
+        `;
+        const renderTree = await renderTreeForHtml(html);
+        const boxes = collectBoxes(renderTree.root);
+        
+        const spanBox = boxes.find(b => b.tagName === "span");
+        expect(spanBox).toBeDefined();
+        
+        if (spanBox && spanBox.children.length > 0) {
+            const textNode = spanBox.children[0];
+            if (textNode.textRuns && textNode.textRuns.length > 0) {
+                // Find the extent of all text runs
+                let minX = Infinity;
+                let maxX = -Infinity;
+                
+                for (const run of textNode.textRuns) {
+                    const runX = run.lineMatrix?.e ?? 0;
+                    const runWidth = run.advanceWidth ?? 0;
+                    minX = Math.min(minX, runX);
+                    maxX = Math.max(maxX, runX + runWidth);
+                }
+                
+                // The span's border box should cover the text content
+                const spanWidth = spanBox.borderBox.width;
+                const textExtent = maxX - minX;
+                
+                // The span width should be at least as wide as the text extent
+                expect(spanWidth).toBeGreaterThanOrEqual(textExtent * WIDTH_TOLERANCE_RATIO);
+            }
+        }
+    });
+    
+    it("positions background correctly when span follows other content", async () => {
+        const html = `
+            <p>Some initial text <span style="background-color: pink">highlighted</span> end.</p>
+        `;
+        const renderTree = await renderTreeForHtml(html);
+        const boxes = collectBoxes(renderTree.root);
+        
+        const spanBox = boxes.find(b => b.tagName === "span");
+        
+        expect(spanBox).toBeDefined();
+        
+        if (spanBox) {
+            // The span's borderBox.x should be positive (not at the start of the line)
+            // since it comes after "Some initial text "
+            expect(spanBox.borderBox.x).toBeGreaterThan(0);
+            
+            // The span should have a background
+            expect(spanBox.background?.color).toBeDefined();
+        }
+    });
+});

package/tests/layout/inline-fragments.spec.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from "vitest";
+import { renderTreeForHtml, collectRuns } from "../helpers/render-utils.js";
+
+describe("inline fragment layout", () => {
+    it("lays out inline fragments without stacking glyphs", async () => {
+        const renderTree = await renderTreeForHtml("<em>itálico</em>");
+        const runs = collectRuns(renderTree.root).filter((r) => r.text.length > 0);
+
+        const xPositions = runs.map((r) => r.lineMatrix?.e ?? 0);
+        for (let i = 1; i < xPositions.length; i++) {
+            expect(xPositions[i]).toBeGreaterThan(xPositions[i - 1]);
+        }
+    });
+
+    it("keeps justified inline fragments in increasing x order", async () => {
+        const html =
+            '<p style="text-align: justify; width: 200px">normal <b>bold</b> normal</p>';
+        const renderTree = await renderTreeForHtml(html);
+        const runs = collectRuns(renderTree.root).filter((r) => r.text.length > 0);
+
+        const xPositions = runs.map((r) => r.lineMatrix?.e ?? 0);
+        for (let i = 1; i < xPositions.length; i++) {
+            expect(xPositions[i]).toBeGreaterThan(xPositions[i - 1]);
+        }
+    });
+});

package/tests/layout/run-placer-baseline.spec.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect, vi } from "vitest";
+import { RunPlacer } from "../../src/layout/inline/run-placer.js";
+import { LayoutNode } from "../../src/dom/node.js";
+import { ComputedStyle } from "../../src/css/style.js";
+import type { LayoutItem } from "../../src/layout/inline/types.js";
+import type { FontEmbedder } from "../../src/pdf/font/embedder.js";
+
+describe("RunPlacer", () => {
+    it("uses font metrics for baseline calculation when FontEmbedder is provided", () => {
+        const mockFontEmbedder = {
+            getMetrics: vi.fn().mockReturnValue({
+                metrics: {
+                    unitsPerEm: 1000,
+                    ascender: 800,
+                    descender: -200,
+                }
+            })
+        } as unknown as FontEmbedder;
+
+        const placer = new RunPlacer(mockFontEmbedder);
+
+        const style = new ComputedStyle({
+            fontSize: 20,
+            fontFamily: "TestFont",
+            lineHeight: { kind: "length", value: 20 }
+        });
+        const node = new LayoutNode(style);
+
+        const item: LayoutItem = {
+            kind: "word",
+            width: 50,
+            height: 20,
+            lineHeight: 20,
+            node: node,
+            style: style,
+            text: "Test",
+        };
+
+        const lineContext = {
+            lineTop: 100,
+            lineHeight: 20,
+            lineStartX: 0,
+            lineIndex: 0,
+            availableWidth: 100,
+            offsetShift: 0,
+            isLastLine: false,
+            contentX: 0,
+            inlineOffsetStart: 0,
+        };
+
+        placer.placeRunsForLine([{ item, offset: 0 }], lineContext);
+
+        expect(mockFontEmbedder.getMetrics).toHaveBeenCalledWith("TestFont", 400, "normal");
+
+        const runs = placer.getNodeRuns().get(node);
+        expect(runs).toBeDefined();
+        expect(runs!.length).toBe(1);
+
+        // Baseline calculation:
+        // ascent = (800 / 1000) * 20 = 16
+        // leading = 20 - 20 = 0
+        // halfLeading = 0
+        // baseline = 100 + 0 + 16 = 116
+        expect(runs![0].baseline).toBe(116);
+    });
+
+    it("uses default heuristic when FontEmbedder is not provided", () => {
+        const placer = new RunPlacer(null);
+
+        const style = new ComputedStyle({
+            fontSize: 20,
+            lineHeight: { kind: "length", value: 20 }
+        });
+        const node = new LayoutNode(style);
+
+        const item: LayoutItem = {
+            kind: "word",
+            width: 50,
+            height: 20,
+            lineHeight: 20,
+            node: node,
+            style: style,
+            text: "Test",
+        };
+
+        const lineContext = {
+            lineTop: 100,
+            lineHeight: 20,
+            lineStartX: 0,
+            lineIndex: 0,
+            availableWidth: 100,
+            offsetShift: 0,
+            isLastLine: false,
+            contentX: 0,
+            inlineOffsetStart: 0,
+        };
+
+        placer.placeRunsForLine([{ item, offset: 0 }], lineContext);
+
+        const runs = placer.getNodeRuns().get(node);
+        expect(runs).toBeDefined();
+
+        // Default heuristic:
+        // ascent = 20 * 0.75 = 15
+        // baseline = 100 + 15 = 115
+        expect(runs![0].baseline).toBe(115);
+    });
+});

package/tests/pdf/alignments.spec.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from "vitest";
+import { renderRuns } from "../helpers/render-utils.js";
+
+describe("PDF text alignment (non-justify)", () => {
+    it("does not apply justification to left/center/right alignments", async () => {
+        const html = `
+      <div>
+        <p style="width: 260px; text-align: left;">
+          Some sample text that wraps into multiple lines for left.
+        </p>
+        <p style="width: 260px; text-align: center;">
+          Some sample text that wraps into multiple lines for center.
+        </p>
+        <p style="width: 260px; text-align: right;">
+          Some sample text that wraps into multiple lines for right.
+        </p>
+      </div>
+    `;
+
+        const runs = await renderRuns(html);
+
+        // no positive wordSpacing anywhere
+        const hasWordSpacing = runs.some((r) => (r.wordSpacing ?? 0) > 0);
+        expect(hasWordSpacing).toBe(false);
+    });
+});

package/tests/pdf/background-clip.spec.ts

@@ -0,0 +1,57 @@
+import { describe, it, expect, beforeAll } from "vitest";
+import { registerAllPropertyParsers } from "../../src/css/parsers/register-parsers.js";
+import {
+  parseBackgroundImage,
+  applyBackgroundClipDecl,
+} from "../../src/css/parsers/background-parser-extended.js";
+import { resolveTextGradientLayer } from "../../src/pdf/utils/background-layer-resolver.js";
+import { ComputedStyle } from "../../src/css/style.js";
+import { LayoutNode } from "../../src/dom/node.js";
+import type { StyleAccumulator } from "../../src/css/style.js";
+import type { GradientBackgroundLayer } from "../../src/css/background-types.js";
+describe("background-clip CSS handling", () => {
+  beforeAll(() => {
+    registerAllPropertyParsers();
+  });
+
+  it("marks gradients with background-clip: text", () => {
+    const target: StyleAccumulator = {};
+    parseBackgroundImage("linear-gradient(red, blue)", target);
+    applyBackgroundClipDecl("text", target);
+
+    expect(target.backgroundLayers).toBeDefined();
+    const gradientLayer = target.backgroundLayers?.find((layer) => layer.kind === "gradient");
+    expect(gradientLayer).toBeDefined();
+    expect(gradientLayer?.clip).toBe("text");
+  });
+
+  it("resolveTextGradientLayer returns gradient data for text clips", () => {
+    const style = new ComputedStyle();
+    style.backgroundLayers = [
+      {
+        kind: "gradient",
+        gradient: {
+          type: "linear",
+          angleOrTo: "to right",
+          stops: [
+            { color: "#ff0000" },
+            { color: "#0000ff" },
+          ],
+        },
+        clip: "text",
+      },
+    ] as GradientBackgroundLayer[];
+
+    const node = new LayoutNode(style);
+    const boxes = {
+      borderBox: { x: 0, y: 0, width: 200, height: 50 },
+      paddingBox: { x: 0, y: 0, width: 200, height: 50 },
+      contentBox: { x: 0, y: 0, width: 200, height: 50 },
+    };
+
+    const result = resolveTextGradientLayer(node, boxes);
+    expect(result).toBeDefined();
+    expect(result?.rect.width).toBeGreaterThan(0);
+    expect(result?.gradient).toBeDefined();
+  });
+});

package/tests/pdf/background-repeat-space-round.spec.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { computeBackgroundTileRects } from "../../src/pdf/utils/background-tiles.js";
+import type { Rect } from "../../src/pdf/types.js";
+
+describe("background-repeat space and round modes", () => {
+    const tileRect: Rect = { x: 0, y: 0, width: 50, height: 50 };
+    const clipRect: Rect = { x: 0, y: 0, width: 300, height: 200 };
+
+    it("space mode distributes tiles evenly with spacing", () => {
+        const tiles = computeBackgroundTileRects(tileRect, clipRect, "space");
+
+        expect(tiles.length).toBeGreaterThan(1);
+        // All tiles should have the original dimensions  
+        expect(tiles[0].width).toBe(50);
+        expect(tiles[0].height).toBe(50);
+    });
+
+    it("round mode scales tiles to fit perfectly", () => {
+        const tiles = computeBackgroundTileRects(tileRect, clipRect, "round");
+
+        expect(tiles.length).toBeGreaterThan(1);
+        // All tiles should have consistent scaled dimensions
+        expect(tiles[0].width).toBeGreaterThan(0);
+        expect(tiles[0].height).toBeGreaterThan(0);
+    });
+
+    it("round mode scales with non-perfect dimensions", () => {
+        const oddTile: Rect = { x: 0, y: 0, width: 55, height: 55 };
+        const tiles = computeBackgroundTileRects(oddTile, clipRect, "round");
+
+        // Tiles should be scaled (not 55px)
+        expect(tiles.length).toBeGreaterThan(0);
+        expect(tiles[0].width).not.toBe(55);
+    });
+});

package/tests/pdf/background-repeat.spec.ts

@@ -0,0 +1,137 @@
+import { describe, it, expect, beforeAll } from "vitest";
+import { registerAllPropertyParsers } from "../../src/css/parsers/register-parsers.js";
+import { applyBackgroundRepeatDecl } from "../../src/css/parsers/background-parser-extended.js";
+import { parseBackgroundImage, parseBackground } from "../../src/css/parsers/background-parser-extended.js";
+import type { ImageBackgroundLayer, GradientBackgroundLayer } from "../../src/css/background-types.js";
+
+interface StyleAccumulator {
+    backgroundLayers?: Array<ImageBackgroundLayer | GradientBackgroundLayer>;
+    [key: string]: any;
+}
+
+describe("background-repeat CSS parsing", () => {
+    beforeAll(() => {
+        registerAllPropertyParsers();
+    });
+
+    it("parses background-repeat: no-repeat", () => {
+        const target: StyleAccumulator = {};
+        parseBackgroundImage('url(test.png)', target);
+        applyBackgroundRepeatDecl('no-repeat', target);
+
+        expect(target.backgroundLayers).toBeDefined();
+        const imageLayer = target.backgroundLayers?.find((l) => l.kind === "image") as ImageBackgroundLayer;
+        expect(imageLayer).toBeDefined();
+        expect(imageLayer?.repeat).toBe("no-repeat");
+    });
+
+    it("parses background-repeat: repeat", () => {
+        const target: StyleAccumulator = {};
+        parseBackgroundImage('url(test.png)', target);
+        applyBackgroundRepeatDecl('repeat', target);
+
+        expect(target.backgroundLayers).toBeDefined();
+        const imageLayer = target.backgroundLayers?.find((l) => l.kind === "image") as ImageBackgroundLayer;
+        expect(imageLayer).toBeDefined();
+        expect(imageLayer?.repeat).toBe("repeat");
+    });
+
+    it("parses background-repeat: repeat-x", () => {
+        const target: StyleAccumulator = {};
+        parseBackgroundImage('url(test.png)', target);
+        applyBackgroundRepeatDecl('repeat-x', target);
+
+        expect(target.backgroundLayers).toBeDefined();
+        const imageLayer = target.backgroundLayers?.find((l) => l.kind === "image") as ImageBackgroundLayer;
+        expect(imageLayer).toBeDefined();
+        expect(imageLayer?.repeat).toBe("repeat-x");
+    });
+
+    it("parses background-repeat: repeat-y", () => {
+        const target: StyleAccumulator = {};
+        parseBackgroundImage('url(test.png)', target);
+        applyBackgroundRepeatDecl('repeat-y', target);
+
+        expect(target.backgroundLayers).toBeDefined();
+        const imageLayer = target.backgroundLayers?.find((l) => l.kind === "image") as ImageBackgroundLayer;
+        expect(imageLayer).toBeDefined();
+        expect(imageLayer?.repeat).toBe("repeat-y");
+    });
+
+    it("parses background-repeat: space", () => {
+        const target: StyleAccumulator = {};
+        parseBackgroundImage('url(test.png)', target);
+        applyBackgroundRepeatDecl('space', target);
+
+        expect(target.backgroundLayers).toBeDefined();
+        const imageLayer = target.backgroundLayers?.find((l) => l.kind === "image") as ImageBackgroundLayer;
+        expect(imageLayer).toBeDefined();
+        expect(imageLayer?.repeat).toBe("space");
+    });
+
+    it("parses background-repeat: round", () => {
+        const target: StyleAccumulator = {};
+        parseBackgroundImage('url(test.png)', target);
+        applyBackgroundRepeatDecl('round', target);
+
+        expect(target.backgroundLayers).toBeDefined();
+        const imageLayer = target.backgroundLayers?.find((l) => l.kind === "image") as ImageBackgroundLayer;
+        expect(imageLayer).toBeDefined();
+        expect(imageLayer?.repeat).toBe("round");
+    });
+
+    it("defaults to repeat when background-repeat is not specified", () => {
+        const target: StyleAccumulator = {};
+        parseBackgroundImage('url(test.png)', target);
+
+        expect(target.backgroundLayers).toBeDefined();
+        const imageLayer = target.backgroundLayers?.find((l) => l.kind === "image") as ImageBackgroundLayer;
+        expect(imageLayer).toBeDefined();
+        expect(imageLayer?.repeat).toBe("repeat");
+    });
+
+    it("parses background-repeat from background shorthand", () => {
+        const target: StyleAccumulator = {};
+        parseBackground('url(test.png) no-repeat', target);
+
+        expect(target.backgroundLayers).toBeDefined();
+        const imageLayer = target.backgroundLayers?.find((l) => l.kind === "image") as ImageBackgroundLayer;
+        expect(imageLayer).toBeDefined();
+        expect(imageLayer?.repeat).toBe("no-repeat");
+    });
+
+    it("applies background-repeat to gradients", () => {
+        const target: StyleAccumulator = {};
+        parseBackgroundImage('linear-gradient(red, blue)', target);
+        applyBackgroundRepeatDecl('no-repeat', target);
+
+        expect(target.backgroundLayers).toBeDefined();
+        const gradientLayer = target.backgroundLayers?.find((l) => l.kind === "gradient") as GradientBackgroundLayer;
+        expect(gradientLayer).toBeDefined();
+        expect(gradientLayer?.repeat).toBe("no-repeat");
+    });
+
+    it("overrides background-repeat when specified after background shorthand", () => {
+        const target: StyleAccumulator = {};
+        parseBackground('url(test.png) repeat', target);
+        applyBackgroundRepeatDecl('no-repeat', target);
+
+        expect(target.backgroundLayers).toBeDefined();
+        const imageLayer = target.backgroundLayers?.find((l) => l.kind === "image") as ImageBackgroundLayer;
+        expect(imageLayer).toBeDefined();
+        expect(imageLayer?.repeat).toBe("no-repeat");
+    });
+
+
+    it("ignores invalid background-repeat values", () => {
+        const target: StyleAccumulator = {};
+        parseBackgroundImage('url(test.png)', target);
+        applyBackgroundRepeatDecl('invalid-value', target);
+
+        expect(target.backgroundLayers).toBeDefined();
+        const imageLayer = target.backgroundLayers?.find((l) => l.kind === "image") as ImageBackgroundLayer;
+        expect(imageLayer).toBeDefined();
+        // Should keep the default 'repeat' value
+        expect(imageLayer?.repeat).toBe("repeat");
+    });
+});