Adding failing test

framer · May 21, 2024 · c8da9c2 · c8da9c2
1 parent 9179b93
commit c8da9c2
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 0 deletions.
diff --git a/dev/tests/layout-portal.tsx b/dev/tests/layout-portal.tsx
@@ -0,0 +1,33 @@
+import { motion } from "framer-motion"
+import { useState } from "react"
+import { createPortal } from "react-dom"
+
+export const App = () => {
+    const [count, setCount] = useState(0)
+
+    const size = count === 0 ? 100 : 300
+
+    return (
+        <motion.div
+            id="parent"
+            layout
+            style={{
+                background: "red",
+                width: size,
+                height: size,
+            }}
+            onClick={() => setCount(count + 1)}
+            transition={{ duration: 10, ease: () => 0.5 }}
+        >
+            {createPortal(
+                <motion.div
+                    id="child"
+                    layout
+                    style={{ width: 100, height: 100, background: "blue" }}
+                    transition={{ duration: 10, ease: () => 0.5 }}
+                />,
+                document.body
+            )}
+        </motion.div>
+    )
+}
diff --git a/packages/framer-motion/cypress/integration/layout.ts b/packages/framer-motion/cypress/integration/layout.ts
@@ -255,4 +255,48 @@ describe("Layout animation", () => {
                 expect(bbox.left).not.to.equal(170)
             })
     })
+
+    it("Elements within portal don't perform scale correction on parents", () => {
+        cy.visit("?test=layout-portal")
+            .wait(50)
+            .get("#parent")
+            .should(([$box]: any) => {
+                expectBbox($box, {
+                    top: 0,
+                    left: 0,
+                    width: 100,
+                    height: 100,
+                })
+            })
+            .get("#child")
+            .should(([$box]: any) => {
+                expectBbox($box, {
+                    top: 100,
+                    left: 100,
+                    width: 100,
+                    height: 100,
+                })
+            })
+            .get("#parent")
+            .trigger("click")
+            .wait(50)
+            .should(([$box]: any) => {
+                expectBbox($box, {
+                    top: 0,
+                    left: 0,
+                    width: 200,
+                    height: 200,
+                })
+            })
+            .trigger("click")
+            .wait(50)
+            .should(([$box]: any) => {
+                expectBbox($box, {
+                    top: 200,
+                    left: 200,
+                    width: 100,
+                    height: 100,
+                })
+            })
+    })
 })