diff --git a/src/layers.test.ts b/src/layers.test.ts index bfa5c88..829e566 100644 --- a/src/layers.test.ts +++ b/src/layers.test.ts @@ -56,12 +56,14 @@ test("basic", async () => { expect(getFaLayersText("b").getAttribute("id")).toBe("b"); expect(getFaLayersText("b").getAttribute("class")).toContain("class-b"); - expect(getFaLayersText("b").querySelector("span")?.getAttribute("style")).toContain("color:blue"); + expect(getComputedStyle(getFaLayersText("b").querySelector("span"))["color"]).toBe( + "rgb(0, 0, 255)", + ); }); test("color", async () => { mountFaLayers({}, { color: "red" }); - expect(getFaLayersText().querySelector("span")?.getAttribute("style")).toContain("color:red"); + expect(getComputedStyle(getFaLayersText().querySelector("span"))["color"]).toBe("rgb(255, 0, 0)"); mountFaLayers({}, { color: undefined }); expect(getFaLayersText().querySelector("span")?.getAttribute("style")).not.toContain("color:red"); }); diff --git a/src/lib/fa-layers-text.svelte b/src/lib/fa-layers-text.svelte index 8a1b7e9..97a86c0 100644 --- a/src/lib/fa-layers-text.svelte +++ b/src/lib/fa-layers-text.svelte @@ -17,21 +17,22 @@ let containerElement: HTMLElement; $: containerElement && size && setCutomFontSize(containerElement, size); - + $: containerElement && color && (containerElement.style.color = color); $: transform = getTransform(scale, translateX, translateY, rotate, flip, 1, "em", "deg"); - $: fullStyle = - `transform: ${transform}` + (color ? `; color:${color}` : "") + (style ? `; ${style}` : ""); + $: containerElement && transform && (containerElement.style.transform = transform); + +