Add tests for border radius shared layout animations (#3047)

* Latest

* Latest

Author: mattgperry

Makefile

@@ -95,7 +95,8 @@ test-e2e: test-nextjs test-html test-react test-react-19
 	yarn test-playwright
 
 test-single: build test-mkdir
-	yarn start-server-and-test "yarn dev-server" http://localhost:9990 "cd packages/framer-motion && cypress run --headless --spec cypress/integration/animate-style.ts"
+	yarn start-server-and-test "yarn dev-server" http://localhost:9990 "cd packages/framer-motion && cypress run --headless --spec cypress/integration/layout-shared.ts"
+
 
 lint: bootstrap
 	yarn lint

dev/react/src/tests/layout-shared-border-radius.tsx

@@ -0,0 +1,91 @@
+import { motion, MotionConfig } from "framer-motion"
+import { useState } from "react"
+
+const transition = {
+    // ease: () => 0.5,
+    duration: 10,
+}
+
+function BoxA({ isOpen }: { isOpen: boolean }) {
+    return (
+        <div style={container}>
+            <motion.div
+                style={{ ...a, borderRadius: 24 }}
+                transition={transition}
+                layoutId="boxA"
+            />
+            {isOpen && (
+                <motion.div
+                    className="measure-box"
+                    style={{ ...b, borderRadius: 0 }}
+                    transition={transition}
+                    layoutId="boxA"
+                />
+            )}
+        </div>
+    )
+}
+
+function BoxB({ isOpen }: { isOpen: boolean }) {
+    return (
+        <div style={container}>
+            {!isOpen ? (
+                <motion.div
+                    key="a"
+                    style={{ ...a, borderRadius: 24 }}
+                    transition={transition}
+                    layoutId="boxB"
+                />
+            ) : (
+                <motion.div
+                    key="b"
+                    className="measure-box"
+                    style={{ ...b, borderRadius: 0 }}
+                    transition={transition}
+                    layoutId="boxB"
+                />
+            )}
+        </div>
+    )
+}
+
+export const App = () => {
+    const [isOpen, setOpen] = useState(false)
+
+    return (
+        <MotionConfig transition={{ duration: 1 }}>
+            <button id="next" onClick={() => setOpen(!isOpen)}>
+                Next
+            </button>
+            <BoxA isOpen={isOpen} />
+            <BoxB isOpen={isOpen} />
+        </MotionConfig>
+    )
+}
+
+const box = {
+    background: "red",
+    gridArea: "1 / 1",
+}
+
+const container = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 20,
+    width: 300,
+    height: 300,
+}
+
+const a = {
+    ...box,
+    width: 80,
+    height: 80,
+}
+
+const b = {
+    ...box,
+    left: 200,
+    width: 140,
+    height: 140,
+}

packages/framer-motion/cypress/integration/layout-shared.ts

@@ -1184,3 +1184,21 @@ describe("Shared layout: Measures rotated elements correctly when animation is i
             })
     })
 })
+
+describe("Shared layout: Border radius", () => {
+    it("Should animate border radius", () => {
+        cy.visit("?test=layout-shared-border-radius")
+            .wait(50)
+            .get("#next")
+            .click()
+            .wait(200)
+            .get(".measure-box")
+            .should(([$boxA, $boxB]: any) => {
+                const boxAStyle = window.getComputedStyle($boxA)
+                const boxBStyle = window.getComputedStyle($boxB)
+                expect(boxAStyle.borderRadius).not.to.equal("0%")
+                expect(boxBStyle.borderRadius).not.to.equal("0%")
+                expect(boxBStyle.borderRadius).to.equal(boxAStyle.borderRadius)
+            })
+    })
+})