diff --git a/frontend/playwright/data/render-wasm/get-file-text-shadows-order.json b/frontend/playwright/data/render-wasm/get-file-text-shadows-order.json new file mode 100644 index 0000000000..d5933c9689 --- /dev/null +++ b/frontend/playwright/data/render-wasm/get-file-text-shadows-order.json @@ -0,0 +1,130 @@ +{ + "~:features": { + "~#set": [ + "fdata/path-data", + "plugins/runtime", + "design-tokens/v1", + "variants/v1", + "layout/grid", + "styles/v2", + "fdata/objects-map", + "render-wasm/v1", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:team-id": "~u6bd7c17d-4f59-815e-8006-5c1f6882469a", + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true + }, + "~:has-media-trimmed": false, + "~:comment-thread-seqn": 0, + "~:name": "test_shadows_order", + "~:revn": 13, + "~:modified-at": "~m1759415785228", + "~:vern": 0, + "~:id": "~u48ffa82f-6950-81b5-8006-e49a2a39657f", + "~:is-shared": false, + "~:migrations": { + "~#ordered-set": [ + "legacy-2", + "legacy-3", + "legacy-5", + "legacy-6", + "legacy-7", + "legacy-8", + "legacy-9", + "legacy-10", + "legacy-11", + "legacy-12", + "legacy-13", + "legacy-14", + "legacy-16", + "legacy-17", + "legacy-18", + "legacy-19", + "legacy-25", + "legacy-26", + "legacy-27", + "legacy-28", + "legacy-29", + "legacy-31", + "legacy-32", + "legacy-33", + "legacy-34", + "legacy-36", + "legacy-37", + "legacy-38", + "legacy-39", + "legacy-40", + "legacy-41", + "legacy-42", + "legacy-43", + "legacy-44", + "legacy-45", + "legacy-46", + "legacy-47", + "legacy-48", + "legacy-49", + "legacy-50", + "legacy-51", + "legacy-52", + "legacy-53", + "legacy-54", + "legacy-55", + "legacy-56", + "legacy-57", + "legacy-59", + "legacy-62", + "legacy-65", + "legacy-66", + "legacy-67", + "0001-remove-tokens-from-groups", + "0002-normalize-bool-content-v2", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content-v2", + "0004-clean-shadow-color", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0007-clear-invalid-strokes-and-fills-v2", + "0008-fix-library-colors-v4", + "0009-clean-library-colors", + "0009-add-partial-text-touched-flags", + "0010-fix-swap-slots-pointing-non-existent-shapes", + "0011-fix-invalid-text-touched-flags", + "0012-fix-position-data" + ] + }, + "~:version": 67, + "~:project-id": "~u6bd7c17d-4f59-815e-8006-5c1f68846e43", + "~:created-at": "~m1759415649509", + "~:data": { + "~:pages": [ + "~u48ffa82f-6950-81b5-8006-e49a2a396580" + ], + "~:pages-index": { + "~u48ffa82f-6950-81b5-8006-e49a2a396580": { + "~:objects": { + "~#penpot/objects-map/v2": { + "~u00000000-0000-0000-0000-000000000000": "[\"~#shape\",[\"^ \",\"~:y\",0,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"Root Frame\",\"~:width\",0.01,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0.0,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1.0,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",0,\"^6\",0.01,\"~:height\",0.01,\"~:x1\",0,\"~:y1\",0,\"~:x2\",0.01,\"~:y2\",0.01]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~uae1a2ead-2994-80a4-8006-e49a2b880688\",\"~uae1a2ead-2994-80a4-8006-e49a3c230916\"]]]", + "~uae1a2ead-2994-80a4-8006-e49a2b880688": "[\"~#shape\",[\"^ \",\"~:y\",483.4820356242563,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",0.9788217705787964,\"~:b\",0.20471429222452875,\"~:c\",-0.20471415002509374,\"~:d\",0.9788218003188844,\"~:e\",0.0,\"~:f\",-9.094947017729282E-13]],\"~:rotation\",11.812776963021975,\"~:last-resize-direction\",\"horizontal\",\"~:grow-type\",\"~:fixed\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"1e7hxl490w2\",\"~:children\",[[\"^ \",\"^8\",\"paragraph-set\",\"^:\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^:\",[[\"^ \",\"^;\",\"\",\"^<\",\"normal\",\"~:text-transform\",\"uppercase\",\"~:font-id\",\"gfont-seymour-one\",\"^9\",\"1q0daub9a4o\",\"~:font-size\",\"72\",\"~:font-weight\",\"400\",\"~:font-variant-id\",\"regular\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"-10\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#80ffdb\",\"~:fill-opacity\",1]],\"~:font-family\",\"Seymour One\",\"~:text\",\"hello world\"]],\"^=\",\"uppercase\",\"~:text-align\",\"center\",\"^>\",\"gfont-seymour-one\",\"^9\",\"1njiv0webbj\",\"^?\",\"0\",\"^@\",\"400\",\"~:text-direction\",\"ltr\",\"^8\",\"paragraph\",\"^A\",\"regular\",\"^B\",\"none\",\"^C\",\"-10\",\"^D\",[[\"^ \",\"^E\",\"#80ffdb\",\"^F\",1]],\"^G\",\"Seymour One\"]]]],\"~:vertical-align\",\"top\"],\"~:hide-in-viewer\",false,\"~:name\",\"Text\",\"~:width\",696.7786469812631,\"^8\",\"^H\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",642.8707961222883,\"~:y\",415.00002146255576]],[\"^P\",[\"^ \",\"~:x\",1324.8929050619865,\"~:y\",557.6405690164898]],[\"^P\",[\"^ \",\"~:x\",1270.0221499044503,\"~:y\",820.0000167712013]],[\"^P\",[\"^ \",\"~:x\",588.0000409647498,\"~:y\",677.359469217266]]],\"~:layout-item-h-sizing\",\"~:fix\",\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",0.9788218003188955,\"~:b\",-0.20471429222453108,\"~:c\",0.20471415002509608,\"~:d\",0.9788217705788075,\"~:e\",1.8618643482577324E-13,\"~:f\",8.902332143214221E-13]],\"~:page-id\",\"~uca00b4e9-7831-806e-8006-e483daa11f18\",\"~:layout-item-v-sizing\",\"^R\",\"~:id\",\"~uae1a2ead-2994-80a4-8006-e49a2b880688\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:position-data\",[[\"~#rect\",[\"^ \",\"~:y\",550.8231760071114,\"^<\",\"normal\",\"^=\",\"uppercase\",\"^?\",\"72px\",\"^@\",\"400\",\"~:y1\",-2.3000030517578125,\"^N\",339.1499938964844,\"^B\",\"none\",\"^C\",\"-10px\",\"~:x\",689.2688958782501,\"~:x1\",69.91667175292969,\"~:y2\",88.69999694824219,\"^D\",[[\"^ \",\"^E\",\"#80ffdb\",\"^F\",1]],\"~:x2\",409.06666564941406,\"~:direction\",\"ltr\",\"^G\",\"\\\"Seymour One\\\"\",\"~:height\",91,\"^H\",\"hello \"]],[\"^Y\",[\"^ \",\"~:y\",637.2231851623849,\"^<\",\"normal\",\"^=\",\"uppercase\",\"^?\",\"72px\",\"^@\",\"400\",\"^Z\",84.10000610351562,\"^N\",380.4666748046875,\"^B\",\"none\",\"^C\",\"-10px\",\"~:x\",668.6188867229766,\"^[\",49.26666259765625,\"^10\",175.10000610351562,\"^D\",[[\"^ \",\"^E\",\"#80ffdb\",\"^F\",1]],\"^11\",429.73333740234375,\"^12\",\"ltr\",\"^G\",\"\\\"Seymour One\\\"\",\"^13\",91,\"^H\",\"world\"]]],\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",608.0571495227366,\"~:shadow\",[[\"^ \",\"^V\",\"~u68cfab5e-652d-8097-8006-e488b9656709\",\"~:style\",\"~:drop-shadow\",\"~:color\",[\"^ \",\"~:opacity\",1,\"^19\",\"#64dfdf\"],\"~:offset-x\",4,\"~:offset-y\",4,\"~:blur\",0,\"~:spread\",0,\"~:hidden\",false],[\"^ \",\"^V\",\"~u68cfab5e-652d-8097-8006-e4890c135b3b\",\"^17\",\"^18\",\"^19\",[\"^ \",\"^1:\",1,\"^19\",\"#56cfe1\"],\"^1;\",6,\"^1<\",8,\"^1=\",0,\"^1>\",0,\"^1?\",false],[\"^ \",\"^V\",\"~u68cfab5e-652d-8097-8006-e4894e9ec462\",\"^17\",\"^18\",\"^19\",[\"^ \",\"^1:\",1,\"^19\",\"#5390d9\"],\"^1;\",4,\"^1<\",12,\"^1=\",0,\"^1>\",0,\"^1?\",false],[\"^ \",\"^V\",\"~u68cfab5e-652d-8097-8006-e4898979e7f9\",\"^17\",\"^18\",\"^19\",[\"^ \",\"^1:\",1,\"^19\",\"#5e60ce\"],\"^1;\",2,\"^1<\",16,\"^1=\",0,\"^1>\",0,\"^1?\",false],[\"^ \",\"^V\",\"~u68cfab5e-652d-8097-8006-e489ba59dbd0\",\"^17\",\"^18\",\"^19\",[\"^ \",\"^1:\",1,\"^19\",\"#6930c3\"],\"^1;\",0,\"^1<\",20,\"^1=\",0,\"^1>\",0,\"^1?\",false]],\"~:selrect\",[\"^Y\",[\"^ \",\"~:x\",608.0571495227366,\"~:y\",483.4820356242563,\"^N\",696.7786469812631,\"^13\",268.03596698524456,\"^[\",608.0571495227366,\"^Z\",483.4820356242563,\"^11\",1304.8357965039997,\"^10\",751.5180026095009]],\"^D\",[],\"~:flip-x\",null,\"^13\",268.03596698524456,\"~:flip-y\",null]]", + "~uae1a2ead-2994-80a4-8006-e49a3c230916": "[\"~#shape\",[\"^ \",\"~:y\",574.6013159890737,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",0.8985240774403216,\"~:b\",-0.4389242329377807,\"~:c\",0.4389243127700668,\"~:d\",0.8985240384426714,\"~:e\",-2.5011104298755527E-12,\"~:f\",1.1937117960769683E-12]],\"~:rotation\",333.964740304884,\"~:last-resize-direction\",\"horizontal\",\"~:grow-type\",\"~:auto-height\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"1e7hxl490w2\",\"~:children\",[[\"^ \",\"^8\",\"paragraph-set\",\"^:\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^:\",[[\"^ \",\"^;\",\"\",\"^<\",\"normal\",\"~:text-transform\",\"uppercase\",\"~:font-id\",\"gfont-seymour-one\",\"^9\",\"1q0daub9a4o\",\"~:font-size\",\"72\",\"~:font-weight\",\"400\",\"~:font-variant-id\",\"regular\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"-10\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#80ffdb\",\"~:fill-opacity\",1]],\"~:font-family\",\"Seymour One\",\"~:text\",\"hello world\"]],\"^=\",\"uppercase\",\"~:text-align\",\"center\",\"^>\",\"gfont-seymour-one\",\"^9\",\"1njiv0webbj\",\"^?\",\"0\",\"^@\",\"400\",\"~:text-direction\",\"ltr\",\"^8\",\"paragraph\",\"^A\",\"regular\",\"^B\",\"none\",\"^C\",\"-10\",\"^D\",[[\"^ \",\"^E\",\"#80ffdb\",\"^F\",1]],\"^G\",\"Seymour One\"]]]],\"~:vertical-align\",\"top\"],\"~:hide-in-viewer\",false,\"~:name\",\"Text\",\"~:width\",697.0002208799245,\"^8\",\"^H\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",186.99991883808582,\"~:y\",731.9301311484297]],[\"^P\",[\"^ \",\"~:x\",813.2711110149318,\"~:y\",425.9999446754641]],[\"^P\",[\"^ \",\"~:x\",851.0186650659188,\"~:y\",503.27315214029437]],[\"^P\",[\"^ \",\"~:x\",224.74747288907042,\"~:y\",809.2033386132608]]],\"~:layout-item-h-sizing\",\"~:fix\",\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",0.8985240384426737,\"~:b\",0.4389242329377818,\"~:c\",-0.43892431277006794,\"~:d\",0.8985240774403239,\"~:e\",2.77125697378148E-12,\"~:f\",2.5219186626122624E-14]],\"~:page-id\",\"~uca00b4e9-7831-806e-8006-e483daa11f18\",\"~:layout-item-v-sizing\",\"^R\",\"~:id\",\"~uae1a2ead-2994-80a4-8006-e49a3c230916\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:position-data\",[[\"~#rect\",[\"^ \",\"~:y\",632.821684222062,\"^<\",\"normal\",\"^=\",\"uppercase\",\"^?\",\"72px\",\"^@\",\"400\",\"~:y1\",-2.3000030517578125,\"^N\",339.1499938964844,\"^B\",\"none\",\"^C\",\"-10px\",\"~:x\",291.2682359356231,\"~:x1\",69.91667175292969,\"~:y2\",88.69999694824219,\"^D\",[[\"^ \",\"^E\",\"#80ffdb\",\"^F\",1]],\"~:x2\",409.06666564941406,\"~:direction\",\"ltr\",\"^G\",\"\\\"Seymour One\\\"\",\"~:height\",91,\"^H\",\"hello \"]],[\"^Y\",[\"^ \",\"~:y\",719.2216933773354,\"^<\",\"normal\",\"^=\",\"uppercase\",\"^?\",\"72px\",\"^@\",\"400\",\"^Z\",84.10000610351562,\"^N\",380.4666748046875,\"^B\",\"none\",\"^C\",\"-10px\",\"~:x\",270.6182267803497,\"^[\",49.26666259765625,\"^10\",175.10000610351562,\"^D\",[[\"^ \",\"^E\",\"#80ffdb\",\"^F\",1]],\"^11\",429.73333740234375,\"^12\",\"ltr\",\"^G\",\"\\\"Seymour One\\\"\",\"^13\",91,\"^H\",\"world\"]]],\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",170.50918151203996,\"~:shadow\",[[\"^ \",\"^V\",\"~u68cfab5e-652d-8097-8006-e488b9656709\",\"~:style\",\"~:inner-shadow\",\"~:color\",[\"^ \",\"~:opacity\",1,\"^19\",\"#64dfdf\"],\"~:offset-x\",8,\"~:offset-y\",12,\"~:blur\",0,\"~:spread\",0,\"~:hidden\",false],[\"^ \",\"^V\",\"~u68cfab5e-652d-8097-8006-e4890c135b3b\",\"^17\",\"^18\",\"^19\",[\"^ \",\"^1:\",1,\"^19\",\"#56cfe1\"],\"^1;\",6,\"^1<\",10,\"^1=\",0,\"^1>\",0,\"^1?\",false],[\"^ \",\"^V\",\"~u68cfab5e-652d-8097-8006-e4894e9ec462\",\"^17\",\"^18\",\"^19\",[\"^ \",\"^1:\",1,\"^19\",\"#5390d9\"],\"^1;\",4,\"^1<\",12,\"^1=\",0,\"^1>\",0,\"^1?\",false],[\"^ \",\"^V\",\"~u68cfab5e-652d-8097-8006-e4898979e7f9\",\"^17\",\"^18\",\"^19\",[\"^ \",\"^1:\",1,\"^19\",\"#5e60ce\"],\"^1;\",4,\"^1<\",8,\"^1=\",0,\"^1>\",0,\"^1?\",false],[\"^ \",\"^V\",\"~u68cfab5e-652d-8097-8006-e489ba59dbd0\",\"^17\",\"^18\",\"^19\",[\"^ \",\"^1:\",1,\"^19\",\"#6930c3\"],\"^1;\",4,\"^1<\",4,\"^1=\",0,\"^1>\",0,\"^1?\",false]],\"~:selrect\",[\"^Y\",[\"^ \",\"~:x\",170.50918151203996,\"~:y\",574.6013159890737,\"^N\",697.0002208799245,\"^13\",86.00065131057738,\"^[\",170.50918151203996,\"^Z\",574.6013159890737,\"^11\",867.5094023919645,\"^10\",660.601967299651]],\"^D\",[],\"~:flip-x\",null,\"^13\",86.00065131057738,\"~:flip-y\",null]]" + } + }, + "~:id": "~u48ffa82f-6950-81b5-8006-e49a2a396580", + "~:name": "Page 1" + } + }, + "~:id": "~u48ffa82f-6950-81b5-8006-e49a2a39657f", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/ui/render-wasm-specs/texts.spec.js b/frontend/playwright/ui/render-wasm-specs/texts.spec.js index d4a959e3da..7b6dc9aec8 100644 --- a/frontend/playwright/ui/render-wasm-specs/texts.spec.js +++ b/frontend/playwright/ui/render-wasm-specs/texts.spec.js @@ -281,6 +281,24 @@ test("Renders a file with different text shadows combinations", async ({ await expect(workspace.canvas).toHaveScreenshot(); }); +test("Renders a file with multiple text shadows in order", async ({ + page, +}) => { + const workspace = new WasmWorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockGetFile( + "render-wasm/get-file-text-shadows-order.json", + ); + + await workspace.goToWorkspace({ + id: "48ffa82f-6950-81b5-8006-e49a2a39657f", + pageId: "48ffa82f-6950-81b5-8006-e49a2a396580", + }); + + await workspace.waitForFirstRender(); + await expect(workspace.canvas).toHaveScreenshot(); +}); + test("Renders a file with text in frames and different strokes, shadows, and blurs", async ({ page, }) => { diff --git a/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-multiple-text-shadows-in-order-1.png b/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-multiple-text-shadows-in-order-1.png new file mode 100644 index 0000000000..103e1f87f7 Binary files /dev/null and b/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-multiple-text-shadows-in-order-1.png differ diff --git a/render-wasm/src/shapes.rs b/render-wasm/src/shapes.rs index b018435ef5..3af1550b92 100644 --- a/render-wasm/src/shapes.rs +++ b/render-wasm/src/shapes.rs @@ -1202,7 +1202,7 @@ impl Shape { pub fn drop_shadow_paints(&self) -> Vec { let drop_shadows: Vec<&crate::shapes::shadows::Shadow> = - self.drop_shadows().filter(|s| !s.hidden()).collect(); + self.drop_shadows().rev().filter(|s| !s.hidden()).collect(); drop_shadows .into_iter() .map(|shadow| { @@ -1216,7 +1216,7 @@ impl Shape { pub fn inner_shadow_paints(&self) -> Vec { let inner_shadows: Vec<&crate::shapes::shadows::Shadow> = - self.inner_shadows().filter(|s| !s.hidden()).collect(); + self.inner_shadows().rev().filter(|s| !s.hidden()).collect(); inner_shadows .into_iter() .map(|shadow| {