pagyra-js 0.0.19 → 0.0.21

package/dist/tests/css/filter-parser.spec.js

@@ -0,0 +1,116 @@
+import { describe, it, expect } from "vitest";
+import { parseFilterList } from "../../src/css/parsers/filter-parser.js";
+describe("parseFilterList", () => {
+    // Keywords globais
+    it("returns [] for 'none'", () => {
+        expect(parseFilterList("none")).toEqual([]);
+    });
+    it("returns [] for 'initial'", () => {
+        expect(parseFilterList("initial")).toEqual([]);
+    });
+    it("returns undefined for 'inherit'", () => {
+        expect(parseFilterList("inherit")).toBeUndefined();
+    });
+    it("returns undefined for 'revert'", () => {
+        expect(parseFilterList("revert")).toBeUndefined();
+    });
+    it("returns undefined for empty string", () => {
+        expect(parseFilterList("")).toBeUndefined();
+    });
+    // Funções individuais
+    it("parses blur(5px)", () => {
+        const result = parseFilterList("blur(5px)");
+        expect(result).toEqual([{ kind: "blur", value: 5 }]);
+    });
+    it("parses blur() with no args as blur(0px)", () => {
+        const result = parseFilterList("blur()");
+        expect(result).toEqual([{ kind: "blur", value: 0 }]);
+    });
+    it("parses brightness(1.5)", () => {
+        const result = parseFilterList("brightness(1.5)");
+        expect(result).toEqual([{ kind: "brightness", value: 1.5 }]);
+    });
+    it("parses brightness(150%)", () => {
+        const result = parseFilterList("brightness(150%)");
+        expect(result).toEqual([{ kind: "brightness", value: 1.5 }]);
+    });
+    it("parses opacity(50%)", () => {
+        const result = parseFilterList("opacity(50%)");
+        expect(result).toEqual([{ kind: "opacity", value: 0.5 }]);
+    });
+    it("clamps opacity to [0, 1]", () => {
+        const result = parseFilterList("opacity(200%)");
+        expect(result).toEqual([{ kind: "opacity", value: 1 }]);
+    });
+    it("clamps grayscale to [0, 1]", () => {
+        const result = parseFilterList("grayscale(150%)");
+        expect(result).toEqual([{ kind: "grayscale", value: 1 }]);
+    });
+    it("does not clamp brightness above 1", () => {
+        const result = parseFilterList("brightness(3)");
+        expect(result).toEqual([{ kind: "brightness", value: 3 }]);
+    });
+    // Ângulos
+    it("parses hue-rotate(90deg)", () => {
+        const result = parseFilterList("hue-rotate(90deg)");
+        expect(result).toEqual([{ kind: "hue-rotate", valueDeg: 90 }]);
+    });
+    it("parses hue-rotate(0.5turn)", () => {
+        const result = parseFilterList("hue-rotate(0.5turn)");
+        expect(result).toEqual([{ kind: "hue-rotate", valueDeg: 180 }]);
+    });
+    it("parses hue-rotate(3.14159rad)", () => {
+        const result = parseFilterList("hue-rotate(3.14159rad)");
+        expect(result[0].kind).toBe("hue-rotate");
+        expect(result[0].valueDeg).toBeCloseTo(180, 1);
+    });
+    it("parses hue-rotate with negative angle", () => {
+        const result = parseFilterList("hue-rotate(-45deg)");
+        expect(result).toEqual([{ kind: "hue-rotate", valueDeg: -45 }]);
+    });
+    // drop-shadow
+    it("parses drop-shadow(2px 4px 6px black)", () => {
+        const result = parseFilterList("drop-shadow(2px 4px 6px black)");
+        expect(result).toEqual([{
+                kind: "drop-shadow",
+                offsetX: 2,
+                offsetY: 4,
+                blurRadius: 6,
+                color: "black",
+            }]);
+    });
+    it("parses drop-shadow with only offsets", () => {
+        const result = parseFilterList("drop-shadow(2px 4px)");
+        expect(result).toEqual([{
+                kind: "drop-shadow",
+                offsetX: 2,
+                offsetY: 4,
+                blurRadius: 0,
+                color: undefined,
+            }]);
+    });
+    it("parses drop-shadow with rgb() color", () => {
+        const result = parseFilterList("drop-shadow(1px 1px 3px rgb(255, 0, 0))");
+        expect(result[0].kind).toBe("drop-shadow");
+        expect(result[0].color).toBe("rgb(255, 0, 0)");
+    });
+    // Múltiplas funções
+    it("parses multiple functions separated by space", () => {
+        const result = parseFilterList("blur(2px) opacity(0.5) brightness(1.2)");
+        expect(result).toHaveLength(3);
+        expect(result[0]).toEqual({ kind: "blur", value: 2 });
+        expect(result[1]).toEqual({ kind: "opacity", value: 0.5 });
+        expect(result[2]).toEqual({ kind: "brightness", value: 1.2 });
+    });
+    // Valores inválidos
+    it("returns undefined for unknown function", () => {
+        const result = parseFilterList("foo(42)");
+        expect(result).toBeUndefined();
+    });
+    it("drops invalid values but keeps valid ones", () => {
+        const result = parseFilterList("blur(5px) unknown(42) opacity(0.8)");
+        expect(result).toHaveLength(2);
+        expect(result[0].kind).toBe("blur");
+        expect(result[1].kind).toBe("opacity");
+    });
+});

package/dist/tests/css/flex-shorthand.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/css/flex-shorthand.spec.js

@@ -0,0 +1,45 @@
+import { registerAllPropertyParsers } from "../../src/css/parsers/register-parsers.js";
+import { computeStyleForElement } from "../../src/css/compute-style.js";
+import { ComputedStyle } from "../../src/css/style.js";
+import { makeUnitParsers } from "../../src/units/units.js";
+function makeElement(inlineStyle) {
+    return {
+        nodeType: 1,
+        nodeName: "DIV",
+        tagName: "div",
+        getAttribute(name) {
+            if (name === "style") {
+                return inlineStyle;
+            }
+            return null;
+        },
+        hasAttribute(name) {
+            return name === "style";
+        },
+        querySelectorAll(_selectors) {
+            return [];
+        },
+        parentElement: null,
+        firstElementChild: null,
+        lastElementChild: null,
+        nextElementSibling: null,
+        previousElementSibling: null,
+    };
+}
+describe("flex shorthand parsing", () => {
+    beforeAll(() => {
+        registerAllPropertyParsers();
+    });
+    it("parses flex: 1 1 200px", () => {
+        const style = computeStyleForElement(makeElement("display:flex;flex:1 1 200px;"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(style.flexGrow).toBe(1);
+        expect(style.flexShrink).toBe(1);
+        expect(style.flexBasis).toBe(200);
+    });
+    it("parses single-value numeric flex shorthand", () => {
+        const style = computeStyleForElement(makeElement("display:flex;flex:2;"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(style.flexGrow).toBe(2);
+        expect(style.flexShrink).toBe(1);
+        expect(style.flexBasis).toBe(0);
+    });
+});

package/dist/tests/css/grid-clamp.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/css/grid-clamp.spec.js

@@ -0,0 +1,82 @@
+import { registerAllPropertyParsers } from "../../src/css/parsers/register-parsers.js";
+import { parseGap, parseGridTemplate } from "../../src/css/parsers/grid-parser.js";
+import { setViewportSize } from "../../src/css/viewport.js";
+import { computeStyleForElement } from "../../src/css/compute-style.js";
+import { ComputedStyle } from "../../src/css/style.js";
+import { makeUnitParsers } from "../../src/units/units.js";
+function makeElement(inlineStyle) {
+    return {
+        nodeType: 1,
+        nodeName: "DIV",
+        tagName: "div",
+        getAttribute(name) {
+            if (name === "style") {
+                return inlineStyle;
+            }
+            return null;
+        },
+        hasAttribute(name) {
+            return name === "style";
+        },
+        querySelectorAll(_selectors) {
+            return [];
+        },
+        parentElement: null,
+        firstElementChild: null,
+        lastElementChild: null,
+        nextElementSibling: null,
+        previousElementSibling: null,
+    };
+}
+describe("grid clamp parsing and resolution", () => {
+    beforeAll(() => {
+        registerAllPropertyParsers();
+    });
+    beforeEach(() => {
+        setViewportSize(800, 600);
+    });
+    it("parses clamp() track sizes in grid-template-columns", () => {
+        const parsed = parseGridTemplate("clamp(150px, 20vw, 300px) 1fr");
+        expect(parsed).toBeDefined();
+        expect(parsed).toHaveLength(2);
+        const first = parsed?.[0];
+        const second = parsed?.[1];
+        expect(first).toEqual({
+            kind: "clamp",
+            min: 150,
+            preferred: 160,
+            max: 300,
+        });
+        expect(second).toEqual({
+            kind: "flex",
+            flex: 1,
+        });
+    });
+    it("parses clamp() values in gap shorthand", () => {
+        const parsed = parseGap("clamp(10px, 5vw, 40px)");
+        expect(parsed).toBeDefined();
+        expect(parsed?.row).toEqual({
+            kind: "clamp",
+            min: 10,
+            preferred: 40,
+            max: 40,
+        });
+        expect(parsed?.column).toEqual({
+            kind: "clamp",
+            min: 10,
+            preferred: 40,
+            max: 40,
+        });
+    });
+    it("resolves clamp() gap values and preserves clamp tracks in computed style", () => {
+        const style = computeStyleForElement(makeElement("display:grid;grid-template-columns:clamp(150px,20vw,300px) 1fr;gap:clamp(10px,5vw,40px);"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(style.rowGap).toBeCloseTo(40, 3);
+        expect(style.columnGap).toBeCloseTo(40, 3);
+        expect(style.trackListColumns[0]).toEqual({
+            kind: "clamp",
+            min: 150,
+            preferred: 160,
+            max: 300,
+        });
+    });
+});

package/dist/tests/css/parse-css-pseudo.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/css/parse-css-pseudo.spec.js

@@ -0,0 +1,26 @@
+import { buildCssRules } from "../../src/html/css/parse-css.js";
+describe("parse-css pseudo-element rules", () => {
+    it("keeps terminal ::before selectors and matches the host element", () => {
+        const css = ".item::before { content: 'x'; color: red; }";
+        const parsed = buildCssRules(css);
+        expect(parsed.styleRules).toHaveLength(1);
+        const rule = parsed.styleRules[0];
+        expect(rule.pseudoElement).toBe("::before");
+        const fakeEl = {
+            tagName: "div",
+            id: "",
+            classList: {
+                contains: (cls) => cls === "item",
+            },
+            parentElement: null,
+            firstElementChild: null,
+            lastElementChild: null,
+            nextElementSibling: null,
+            previousElementSibling: null,
+            ownerDocument: undefined,
+            textContent: "",
+            getAttribute: (name) => (name === "class" ? "item" : null),
+        };
+        expect(rule.match(fakeEl)).toBe(true);
+    });
+});

package/dist/tests/helpers/render-utils.d.ts

@@ -1,5 +1,21 @@
 import type { RenderBox, Run } from "../../src/pdf/types.js";
-export declare function renderRuns(html: string, css?: string): Promise<Run[]>;
-export declare function renderTreeForHtml(html: string, css?: string): Promise<import("../../src/pdf/types.js").LayoutTree>;
+declare const DEFAULT_TEST_MARGINS: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export interface RenderHelperOptions {
+    viewportWidth?: number;
+    viewportHeight?: number;
+    pageWidth?: number;
+    pageHeight?: number;
+    margins?: Partial<typeof DEFAULT_TEST_MARGINS>;
+    pagedBodyMargin?: "auto" | "zero";
+    interBlockWhitespace?: "collapse" | "preserve";
+}
+export declare function renderRuns(html: string, css?: string, options?: RenderHelperOptions): Promise<Run[]>;
+export declare function renderTreeForHtml(html: string, css?: string, options?: RenderHelperOptions): Promise<import("../../src/pdf/types.js").LayoutTree>;
 export declare function collectRuns(box: RenderBox): Run[];
 export declare function collectBoxes(box: RenderBox): RenderBox[];
+export {};

package/dist/tests/helpers/render-utils.js

@@ -1,27 +1,40 @@
 import { prepareHtmlRender } from "../../src/html-to-pdf.js";
-export async function renderRuns(html, css = "") {
+const DEFAULT_TEST_PAGE = {
+    viewportWidth: 794,
+    viewportHeight: 1123,
+    pageWidth: 794,
+    pageHeight: 1123,
+};
+// Keep legacy fixture behavior stable: these tests historically rendered with 48px
+// effective margins because prepareHtmlRender ignored helper-provided margins.
+const DEFAULT_TEST_MARGINS = { top: 48, right: 48, bottom: 48, left: 48 };
+export async function renderRuns(html, css = "", options = {}) {
     const wrappedHtml = /<html[\s>]/i.test(html) ? html : `<html><body>${html}</body></html>`;
     const { renderTree } = await prepareHtmlRender({
         html: wrappedHtml,
         css,
-        viewportWidth: 794,
-        viewportHeight: 1123,
-        pageWidth: 794,
-        pageHeight: 1123,
-        margins: { top: 96, right: 96, bottom: 96, left: 96 },
+        viewportWidth: options.viewportWidth ?? DEFAULT_TEST_PAGE.viewportWidth,
+        viewportHeight: options.viewportHeight ?? DEFAULT_TEST_PAGE.viewportHeight,
+        pageWidth: options.pageWidth ?? DEFAULT_TEST_PAGE.pageWidth,
+        pageHeight: options.pageHeight ?? DEFAULT_TEST_PAGE.pageHeight,
+        margins: options.margins ?? DEFAULT_TEST_MARGINS,
+        pagedBodyMargin: options.pagedBodyMargin ?? "auto",
+        interBlockWhitespace: options.interBlockWhitespace ?? "collapse",
     });
     return collectRuns(renderTree.root);
 }
-export async function renderTreeForHtml(html, css = "") {
+export async function renderTreeForHtml(html, css = "", options = {}) {
     const wrappedHtml = /<html[\s>]/i.test(html) ? html : `<html><body>${html}</body></html>`;
     const { renderTree } = await prepareHtmlRender({
         html: wrappedHtml,
         css,
-        viewportWidth: 794,
-        viewportHeight: 1123,
-        pageWidth: 794,
-        pageHeight: 1123,
-        margins: { top: 96, right: 96, bottom: 96, left: 96 },
+        viewportWidth: options.viewportWidth ?? DEFAULT_TEST_PAGE.viewportWidth,
+        viewportHeight: options.viewportHeight ?? DEFAULT_TEST_PAGE.viewportHeight,
+        pageWidth: options.pageWidth ?? DEFAULT_TEST_PAGE.pageWidth,
+        pageHeight: options.pageHeight ?? DEFAULT_TEST_PAGE.pageHeight,
+        margins: options.margins ?? DEFAULT_TEST_MARGINS,
+        pagedBodyMargin: options.pagedBodyMargin ?? "auto",
+        interBlockWhitespace: options.interBlockWhitespace ?? "collapse",
     });
     return renderTree;
 }

package/dist/tests/html/dom-converter-pseudo-elements.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/html/dom-converter-pseudo-elements.spec.js

@@ -0,0 +1,33 @@
+import { parseHTML } from "linkedom";
+import { ComputedStyle } from "../../src/css/style.js";
+import { buildCssRules } from "../../src/html/css/parse-css.js";
+import { synthesizePseudoElement } from "../../src/html/dom-converter/pseudo-elements.js";
+import { makeUnitParsers } from "../../src/units/units.js";
+function createTestContext() {
+    return {
+        resourceBaseDir: "",
+        assetRootDir: "",
+        units: makeUnitParsers({ viewport: { width: 800, height: 600 } }),
+        rootFontSize: 16,
+    };
+}
+describe("dom-converter/pseudo-elements", () => {
+    it("synthesizes a pseudo element with generated text content", async () => {
+        const { document } = parseHTML(`<div id="host" data-label="Alpha"></div>`);
+        const element = document.querySelector("#host");
+        const cssRules = buildCssRules(`#host::before { content: "X"; }`).styleRules;
+        const result = await synthesizePseudoElement(element, "::before", cssRules, new ComputedStyle(), createTestContext(), null);
+        expect(result).not.toBeNull();
+        expect(result?.tagName).toBe("::before");
+        expect(result?.customData).toMatchObject({ pseudoType: "before" });
+        expect(result?.children).toHaveLength(1);
+        expect(result?.children[0]?.textContent).toBe("X");
+    });
+    it("returns null when the pseudo style has no content", async () => {
+        const { document } = parseHTML(`<div id="host"></div>`);
+        const element = document.querySelector("#host");
+        const cssRules = buildCssRules(`#host { color: red; }`).styleRules;
+        const result = await synthesizePseudoElement(element, "::after", cssRules, new ComputedStyle(), createTestContext(), null);
+        expect(result).toBeNull();
+    });
+});

package/dist/tests/html/dom-converter-text.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/html/dom-converter-text.spec.js

@@ -0,0 +1,67 @@
+import { parseHTML } from "linkedom";
+import { Display } from "../../src/css/enums.js";
+import { ComputedStyle } from "../../src/css/style.js";
+import { LayoutNode } from "../../src/dom/node.js";
+import { convertTextDomNode, flushBufferedText } from "../../src/html/dom-converter/text.js";
+describe("dom-converter/text whitespace handling", () => {
+    it("preserves a single collapsed space between meaningful siblings", () => {
+        const { document } = parseHTML(`<div><span>A</span>   <span>B</span></div>`);
+        const root = document.querySelector("div");
+        const textNode = root?.childNodes[1] ?? null;
+        expect(textNode).toBeTruthy();
+        const result = convertTextDomNode(textNode, new ComputedStyle());
+        expect(result).not.toBeNull();
+        expect(result?.textContent).toBe(" ");
+        expect(result?.customData).toMatchObject({
+            preserveLeadingSpace: true,
+            preserveTrailingSpace: true,
+        });
+    });
+    it("drops whitespace-only text at the edge of an element", () => {
+        const { document } = parseHTML(`<div>   <span>B</span></div>`);
+        const root = document.querySelector("div");
+        const textNode = root?.childNodes[0] ?? null;
+        const result = convertTextDomNode(textNode, new ComputedStyle());
+        expect(result).toBeNull();
+    });
+    it("removes leading collapsed whitespace at block edges while preserving interior separation", () => {
+        const { document } = parseHTML(`<div>   hello   <span>world</span>   </div>`);
+        const root = document.querySelector("div");
+        const leadingTextNode = root?.childNodes[0] ?? null;
+        const trailingTextNode = root?.childNodes[2] ?? null;
+        const leading = convertTextDomNode(leadingTextNode, new ComputedStyle());
+        const trailing = convertTextDomNode(trailingTextNode, new ComputedStyle());
+        expect(leading?.textContent).toBe("hello ");
+        expect(trailing).toBeNull();
+    });
+    it("preserves space before trailing text content after an inline sibling", () => {
+        const { document } = parseHTML(`<div><span>A</span>   tail   </div>`);
+        const root = document.querySelector("div");
+        const trailingTextNode = root?.childNodes[1] ?? null;
+        const trailing = convertTextDomNode(trailingTextNode, new ComputedStyle());
+        expect(trailing?.textContent).toBe(" tail");
+    });
+    it("preserves buffered whitespace after inline content but drops it after block content", () => {
+        const inlineChildren = [new LayoutNode(new ComputedStyle({ display: Display.Inline }))];
+        const blockChildren = [new LayoutNode(new ComputedStyle({ display: Display.Block }))];
+        const style = new ComputedStyle();
+        flushBufferedText(inlineChildren, "   ", style);
+        flushBufferedText(blockChildren, "   ", style);
+        expect(inlineChildren.at(-1)?.textContent).toBe(" ");
+        expect(blockChildren).toHaveLength(1);
+    });
+    it("drops whitespace-only text between block siblings by default", () => {
+        const { document } = parseHTML(`<body><p>A</p>\n    <p>B</p></body>`);
+        const body = document.querySelector("body");
+        const textNode = body?.childNodes[1] ?? null;
+        const result = convertTextDomNode(textNode, new ComputedStyle({ display: Display.Block }));
+        expect(result).toBeNull();
+    });
+    it("preserves whitespace-only text between block siblings when preserve mode is enabled", () => {
+        const { document } = parseHTML(`<body><p>A</p>\n    <p>B</p></body>`);
+        const body = document.querySelector("body");
+        const textNode = body?.childNodes[1] ?? null;
+        const result = convertTextDomNode(textNode, new ComputedStyle({ display: Display.Block }), { interBlockWhitespace: "preserve" });
+        expect(result?.textContent).toBe(" ");
+    });
+});

package/dist/tests/image/png-backend.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/image/png-backend.spec.js

@@ -0,0 +1,34 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { ImageService } from '../../src/image/image-service.js';
+import { PngWasmLoader } from '../../src/image/png-wasm-loader.js';
+import { NodeEnvironment } from '../../src/environment/node-environment.js';
+describe('ImageService PNG Backend', () => {
+    beforeEach(() => {
+        ImageService['instance'] = undefined;
+        PngWasmLoader.reset();
+    });
+    it('should use JS backend when configured', async () => {
+        const env = new NodeEnvironment();
+        const service = ImageService.getInstance(env);
+        service.setPngBackendConfig({ pngBackend: 'js' });
+        expect(service.getPngBackendConfig()).toEqual({ pngBackend: 'js' });
+    });
+    it('should default to auto backend', async () => {
+        const env = new NodeEnvironment();
+        const service = ImageService.getInstance(env);
+        expect(service.getPngBackendConfig()).toEqual({ pngBackend: 'auto' });
+    });
+    it('should fallback to JS when WASM is not available', async () => {
+        const env = new NodeEnvironment();
+        const service = ImageService.getInstance(env);
+        service.setPngBackendConfig({ pngBackend: 'auto' });
+        const isWasmAvailable = await PngWasmLoader.isAvailable();
+        expect(isWasmAvailable).toBe(false);
+    });
+    it('should throw in strict mode when WASM unavailable', async () => {
+        const env = new NodeEnvironment();
+        const service = ImageService.getInstance(env);
+        service.setPngBackendConfig({ pngBackend: 'wasm', wasm: { strict: true } });
+        await expect(PngWasmLoader.getOrInit()).rejects.toThrow();
+    });
+});

package/dist/tests/layout/box-sizing.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/layout/box-sizing.spec.js

@@ -0,0 +1,75 @@
+import { collectBoxes, renderTreeForHtml } from "../helpers/render-utils.js";
+function findByTag(boxes, tagName) {
+    const found = boxes.find((b) => b.tagName === tagName);
+    if (!found) {
+        throw new Error(`Expected to find <${tagName}> in render tree`);
+    }
+    return found;
+}
+describe("layout box-sizing behavior", () => {
+    it("uses content-box as default and border-box when specified for width", async () => {
+        const html = `
+      <article style="width:200px;padding:20px;border:5px solid #000">A</article>
+      <aside style="width:200px;padding:20px;border:5px solid #000;box-sizing:border-box">B</aside>
+    `;
+        const tree = await renderTreeForHtml(html);
+        const boxes = collectBoxes(tree.root);
+        const contentBox = findByTag(boxes, "article");
+        const borderBox = findByTag(boxes, "aside");
+        expect(contentBox.contentBox.width).toBeCloseTo(200, 3);
+        expect(contentBox.borderBox.width).toBeCloseTo(250, 3);
+        expect(borderBox.contentBox.width).toBeCloseTo(150, 3);
+        expect(borderBox.borderBox.width).toBeCloseTo(200, 3);
+    });
+    it("applies max-width in border-box space when box-sizing is border-box", async () => {
+        const html = `
+      <section style="width:400px;max-width:220px;padding:10px;border:5px solid #000;box-sizing:border-box">X</section>
+    `;
+        const tree = await renderTreeForHtml(html);
+        const boxes = collectBoxes(tree.root);
+        const section = findByTag(boxes, "section");
+        expect(section.contentBox.width).toBeCloseTo(190, 3);
+        expect(section.borderBox.width).toBeCloseTo(220, 3);
+    });
+    it("applies explicit height in border-box space for block containers", async () => {
+        const html = `
+      <main style="height:200px;padding:20px;border:5px solid #000;box-sizing:border-box"></main>
+    `;
+        const tree = await renderTreeForHtml(html);
+        const boxes = collectBoxes(tree.root);
+        const main = findByTag(boxes, "main");
+        expect(main.contentBox.height).toBeCloseTo(150, 3);
+        expect(main.borderBox.height).toBeCloseTo(200, 3);
+    });
+    it("applies explicit height in border-box space for grid and table containers", async () => {
+        const html = `
+      <div style="display:grid;height:200px;padding:20px;border:5px solid #000;box-sizing:border-box"></div>
+      <table style="height:200px;padding:20px;border:5px solid #000;box-sizing:border-box">
+        <tr><td>cell</td></tr>
+      </table>
+    `;
+        const tree = await renderTreeForHtml(html);
+        const boxes = collectBoxes(tree.root);
+        const grid = boxes.find((b) => b.tagName === "div");
+        const table = findByTag(boxes, "table");
+        if (!grid) {
+            throw new Error("Expected to find grid container");
+        }
+        expect(grid.contentBox.height).toBeCloseTo(150, 3);
+        expect(grid.borderBox.height).toBeCloseTo(200, 3);
+        expect(table.contentBox.height).toBeCloseTo(150, 3);
+        expect(table.borderBox.height).toBeCloseTo(200, 3);
+    });
+    it("applies border-box sizing to form controls with explicit width and height", async () => {
+        const html = `
+      <input type="text" style="width:200px;height:60px;padding:10px;border:5px solid #000;box-sizing:border-box" value="ok" />
+    `;
+        const tree = await renderTreeForHtml(html);
+        const boxes = collectBoxes(tree.root);
+        const input = findByTag(boxes, "input");
+        expect(input.contentBox.width).toBeCloseTo(170, 3);
+        expect(input.borderBox.width).toBeCloseTo(200, 3);
+        expect(input.contentBox.height).toBeCloseTo(30, 3);
+        expect(input.borderBox.height).toBeCloseTo(60, 3);
+    });
+});

package/dist/tests/layout/calc-padding.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/layout/calc-padding.spec.js

@@ -0,0 +1,19 @@
+import { collectBoxes, renderTreeForHtml } from "../helpers/render-utils.js";
+function findByTag(boxes, tagName) {
+    const found = boxes.find((b) => b.tagName === tagName);
+    if (!found) {
+        throw new Error(`Expected to find <${tagName}> in render tree`);
+    }
+    return found;
+}
+describe("calc() layout for padding", () => {
+    it("resolves calc(px + %) using containing block width", async () => {
+        const html = "<!DOCTYPE html><html><body style=\"margin:0;\"><main style=\"width:400px;padding:calc(10px + 2%);height:40px;background:#ddd;\">X</main></body></html>";
+        const tree = await renderTreeForHtml(html);
+        const boxes = collectBoxes(tree.root);
+        const main = findByTag(boxes, "main");
+        const expectedPadding = 10 + 0.02 * 400;
+        expect(main.contentBox.width).toBeCloseTo(400, 2);
+        expect(main.borderBox.width).toBeCloseTo(400 + expectedPadding * 2, 2);
+    });
+});

package/dist/tests/layout/container-query-units.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/layout/container-query-units.spec.js

@@ -0,0 +1,24 @@
+import { collectBoxes, renderTreeForHtml } from "../helpers/render-utils.js";
+function findByTag(boxes, tagName) {
+    const found = boxes.find((b) => b.tagName === tagName);
+    if (!found) {
+        throw new Error(`Expected to find <${tagName}> in render tree`);
+    }
+    return found;
+}
+describe("container query unit layout", () => {
+    it("resolves cqw/cqh/cqmin/cqmax against containing block dimensions", async () => {
+        const html = "<!DOCTYPE html><html><body style=\"margin:0;\"><section style=\"width:400px;height:300px;\"><div id=\"a\" style=\"width:50cqw;height:25cqh;\"></div><div id=\"b\" style=\"width:10cqmin;height:10cqmax;\"></div></section></body></html>";
+        const tree = await renderTreeForHtml(html);
+        const boxes = collectBoxes(tree.root).filter((box) => box.tagName === "div");
+        if (boxes.length !== 2) {
+            throw new Error(`Expected exactly 2 divs, got ${boxes.length}`);
+        }
+        const first = boxes[0];
+        const second = boxes[1];
+        expect(first.contentBox.width).toBeCloseTo(200, 2);
+        expect(first.contentBox.height).toBeCloseTo(75, 2);
+        expect(second.contentBox.width).toBeCloseTo(30, 2);
+        expect(second.contentBox.height).toBeCloseTo(40, 2);
+    });
+});

package/dist/tests/layout/flex-auto-height.spec.d.ts

@@ -0,0 +1 @@
+export {};