pagyra-js 0.0.20 → 0.0.21

package/dist/src/pdf/utils/filter-utils.js

@@ -0,0 +1,85 @@
+// src/pdf/utils/filter-utils.ts
+import { parseColor, cloneColor } from "./color-utils.js";
+import { log } from "../../logging/debug.js";
+/**
+ * Extrai o multiplicador de opacity de uma lista de filter functions.
+ * Múltiplos `opacity()` são multiplicados entre si (composição sequencial).
+ * Retorna 1.0 se não houver `opacity()` na lista.
+ */
+export function extractOpacityMultiplier(filters) {
+    let multiplier = 1;
+    for (const fn of filters) {
+        if (fn.kind === "opacity") {
+            multiplier *= fn.value;
+        }
+    }
+    return Math.max(0, Math.min(1, multiplier));
+}
+/**
+ * Converte `drop-shadow()` do filter em ShadowLayer[] compatível
+ * com o pipeline de box-shadow existente.
+ *
+ * Diferenças em relação a box-shadow real:
+ * - Sem `inset` (sempre false).
+ * - Sem `spread-radius` (sempre 0).
+ * - Na prática do CSS, drop-shadow segue a forma alpha do conteúdo,
+ *   mas no MVP aproximamos como sombra retangular (box-shadow).
+ */
+export function extractDropShadowLayers(filters, fallbackColor) {
+    const result = [];
+    for (const fn of filters) {
+        if (fn.kind !== "drop-shadow")
+            continue;
+        const offsetX = typeof fn.offsetX === "number" ? fn.offsetX : 0;
+        const offsetY = typeof fn.offsetY === "number" ? fn.offsetY : 0;
+        const blur = typeof fn.blurRadius === "number" ? Math.max(0, fn.blurRadius) : 0;
+        let color;
+        if (fn.color) {
+            const parsed = parseColor(fn.color);
+            color = parsed ? cloneColor(parsed) : cloneColor(fallbackColor);
+        }
+        else {
+            color = cloneColor(fallbackColor);
+        }
+        result.push({
+            inset: false,
+            offsetX,
+            offsetY,
+            blur,
+            spread: 0,
+            color,
+        });
+    }
+    return result;
+}
+/**
+ * Lista nomes de funções de filtro que não são renderizáveis no MVP.
+ * Usado para emitir warnings durante a fase de pintura.
+ */
+export function listUnsupportedFilters(filters) {
+    if (!filters || filters.length === 0)
+        return [];
+    const unsupported = [];
+    for (const fn of filters) {
+        // opacity e drop-shadow são suportados no MVP
+        if (fn.kind === "opacity" || fn.kind === "drop-shadow")
+            continue;
+        unsupported.push(fn.kind);
+    }
+    return unsupported;
+}
+/**
+ * Emite warnings para filtros não suportados.
+ * Chamado uma vez por box durante a fase de pintura.
+ */
+export function warnUnsupportedFilters(filters, label, boxId) {
+    const names = label === "backdrop-filter"
+        ? (filters ?? []).map((fn) => fn.kind)
+        : listUnsupportedFilters(filters);
+    if (names.length === 0)
+        return;
+    log("paint", "warn", `Unsupported ${label} function(s) ignored: ${names.join(", ")}`, {
+        boxId,
+        functions: names,
+    });
+}

package/dist/src/pdf/utils/node-text-run-factory.js

@@ -20,7 +20,7 @@ export function buildNodeTextRuns(context) {
         }
     }
     if (transform && textRuns.length > 0) {
-        applyTransformToTextRuns(textRuns, transform, borderBox);
+        // applyTransformToTextRuns(textRuns, transform, borderBox);
     }
     return textRuns;
 }

package/dist/src/pdf/utils/text-layout-adjuster.d.ts

@@ -1,12 +1,4 @@
 import type { RenderBox } from "../types.js";
-/**
- * Global pass to fix justified layout in the render tree.
- *
- * For each RenderBox with textAlign: "justify":
- *   - collect ALL runs from that box and its descendants
- *   - group runs by lineIndex
-import type { RenderBox, Run } from "../types.js";
-
 /**
  * Global pass to fix justified layout in the render tree.
  *

package/dist/src/pdf/utils/text-layout-adjuster.js

@@ -1,11 +1,3 @@
-/**
- * Global pass to fix justified layout in the render tree.
- *
- * For each RenderBox with textAlign: "justify":
- *   - collect ALL runs from that box and its descendants
- *   - group runs by lineIndex
-import type { RenderBox, Run } from "../types.js";
-
 /**
  * Global pass to fix justified layout in the render tree.
  *
@@ -73,6 +65,17 @@ function adjustLinePositions(runs) {
         /^\s+$/.test(runs[firstContentIndex].text)) {
         firstContentIndex++;
     }
+    const hasLeadingWhitespace = firstContentIndex > 0;
+    if (firstContentIndex >= runs.length) {
+        const anchorX = runs[0].lineMatrix?.e ?? 0;
+        for (const run of runs) {
+            if (run.lineMatrix) {
+                run.lineMatrix.e = anchorX;
+            }
+            run.advanceWidth = 0;
+        }
+        return;
+    }
     // Calculate width to redistribute from leading spaces
     let widthLost = 0;
     for (let i = 0; i < firstContentIndex; i++) {
@@ -85,7 +88,7 @@ function adjustLinePositions(runs) {
     }
     const isLastLine = runs[0].isLastLine ?? false;
     // Redistribute width if not last line and we have spaces to distribute to
-    if (!isLastLine && widthLost > 0 && remainingSpaces > 0) {
+    if (hasLeadingWhitespace && !isLastLine && widthLost > 0 && remainingSpaces > 0) {
         const adjustment = widthLost / remainingSpaces;
         for (let i = firstContentIndex; i < runs.length; i++) {
             const run = runs[i];

package/dist/src/units/units.d.ts

@@ -13,6 +13,6 @@ export interface UnitCtx {
 }
 export declare function makeUnitParsers(_ctx: UnitCtx): {
     parseLength: (value: string) => number | import("../css/length.js").RelativeLength | undefined;
-    parseLengthOrPercent: (value: string) => number | import("../css/length.js").AbsoluteLength | import("../css/length.js").RelativeLength | undefined;
+    parseLengthOrPercent: (value: string) => number | import("../css/length.js").AbsoluteLength | import("../css/length.js").RelativeLength | import("../css/length.js").CalcLength | undefined;
 };
 export type UnitParsers = ReturnType<typeof makeUnitParsers>;

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

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

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

@@ -0,0 +1,46 @@
+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 { BoxSizing } from "../../src/css/enums.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("box-sizing parser and computed style", () => {
+    beforeAll(() => {
+        registerAllPropertyParsers();
+    });
+    it("defaults to content-box", () => {
+        const style = computeStyleForElement(makeElement("width: 200px;"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(style.boxSizing).toBe(BoxSizing.ContentBox);
+    });
+    it("parses border-box from inline style", () => {
+        const style = computeStyleForElement(makeElement("box-sizing: border-box; width: 200px;"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(style.boxSizing).toBe(BoxSizing.BorderBox);
+    });
+    it("parses content-box explicitly", () => {
+        const style = computeStyleForElement(makeElement("box-sizing: content-box;"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(style.boxSizing).toBe(BoxSizing.ContentBox);
+    });
+});

package/dist/tests/css/calc-parser.spec.d.ts

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

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

@@ -0,0 +1,68 @@
+import { parseCalcLength } from "../../src/css/parsers/calc-parser.js";
+import { computeStyleForElement } from "../../src/css/compute-style.js";
+import { ComputedStyle } from "../../src/css/style.js";
+import { registerAllPropertyParsers } from "../../src/css/parsers/register-parsers.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("calc() parser", () => {
+    beforeAll(() => {
+        registerAllPropertyParsers();
+    });
+    it("parses arithmetic with mixed units", () => {
+        const parsed = parseCalcLength("calc((10px + 5%) * 2 - 4px / 2)");
+        expect(parsed).toBeDefined();
+        expect(parsed).toEqual({
+            kind: "calc",
+            px: 18,
+            percent: 0.1,
+            em: 0,
+            rem: 0,
+            cqw: 0,
+            cqh: 0,
+            cqi: 0,
+            cqb: 0,
+            cqmin: 0,
+            cqmax: 0,
+        });
+    });
+    it("supports calc in width declarations", () => {
+        const style = computeStyleForElement(makeElement("width: calc(100% - 20px);"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(typeof style.width).toBe("object");
+        expect(style.width).toEqual({
+            kind: "calc",
+            px: -20,
+            percent: 1,
+            em: 0,
+            rem: 0,
+            cqw: 0,
+            cqh: 0,
+            cqi: 0,
+            cqb: 0,
+            cqmin: 0,
+            cqmax: 0,
+        });
+    });
+});

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

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

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

@@ -0,0 +1,64 @@
+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("container query length units", () => {
+    beforeAll(() => {
+        registerAllPropertyParsers();
+    });
+    it("parses cqw/cqh in normal lengths", () => {
+        const style = computeStyleForElement(makeElement("width:50cqw;height:25cqh;"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(style.width).toMatchObject({
+            kind: "calc",
+            px: 0,
+            percent: 0,
+            cqw: 0.5,
+        });
+        expect(style.height).toMatchObject({
+            kind: "calc",
+            px: 0,
+            percent: 0,
+            cqh: 0.25,
+        });
+    });
+    it("parses cq units inside calc()", () => {
+        const style = computeStyleForElement(makeElement("width:calc(10px + 10cqw - 2cqh + 1cqmin);"), [], new ComputedStyle(), makeUnitParsers({ viewport: { width: 800, height: 600 } }), 16);
+        expect(style.width).toEqual({
+            kind: "calc",
+            px: 10,
+            percent: 0,
+            em: 0,
+            rem: 0,
+            cqw: 0.1,
+            cqh: -0.02,
+            cqi: 0,
+            cqb: 0,
+            cqmin: 0.01,
+            cqmax: 0,
+        });
+    });
+});

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

@@ -34,6 +34,13 @@ describe("content CSS property parsing", () => {
         const item = expectContentType(target.content[0], "counter");
         expect(item.style).toBe("decimal");
     });
+    it("parses counter() with decimal-leading-zero style", () => {
+        const target = {};
+        parseContent("counter(step, decimal-leading-zero)", target);
+        expect(target.content).toBeDefined();
+        const item = expectContentType(target.content[0], "counter");
+        expect(item.style).toBe("decimal-leading-zero");
+    });
     it("parses attr() function", () => {
         const target = {};
         parseContent('attr(data-index)', target);
@@ -85,6 +92,12 @@ describe("formatCounterValue", () => {
         expect(formatCounterValue(26, "upper-alpha")).toBe("Z");
         expect(formatCounterValue(27, "upper-alpha")).toBe("AA");
     });
+    it("formats decimal-leading-zero", () => {
+        expect(formatCounterValue(1, "decimal-leading-zero")).toBe("01");
+        expect(formatCounterValue(9, "decimal-leading-zero")).toBe("09");
+        expect(formatCounterValue(10, "decimal-leading-zero")).toBe("10");
+        expect(formatCounterValue(-1, "decimal-leading-zero")).toBe("-01");
+    });
 });
 describe("evaluateContent", () => {
     it("evaluates string content", () => {

package/dist/tests/css/filter-parser.spec.d.ts

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

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);
+    });
+});