Adding test

framer · May 2, 2023 · 0fd9aed · 0fd9aed
1 parent 204f8fb
commit 0fd9aed
Showing 1 changed file with 101 additions and 0 deletions.
diff --git a/dev/projection/animate-relative-mixed-transition.html b/dev/projection/animate-relative-mixed-transition.html
@@ -0,0 +1,101 @@
+<html>
+    <head>
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+            }
+
+            #parent {
+                position: relative;
+                width: 200px;
+                height: 200px;
+                background-color: #00cc88;
+            }
+
+            #mid {
+                position: absolute;
+                width: auto;
+                height: auto;
+                left: 0;
+                top: 0;
+            }
+
+            .b #mid {
+                left: 100px;
+            }
+
+            #child {
+                width: 50px;
+                height: 50px;
+                background-color: #0077ff;
+            }
+
+            [data-layout-correct="false"] {
+                background: #dd1144 !important;
+                opacity: 0.5;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="parent">
+            <div id="mid"><div id="child" /></div>
+        </div>
+
+        <script src="../../packages/framer-motion/dist/projection.dev.js"></script>
+        <script src="./script-assert.js"></script>
+        <script src="./script-animate.js"></script>
+        <script>
+            const { createNode, relativeEase } = window.Animate
+            const { matchViewportBox } = window.Assert
+
+            const parent = document.getElementById("parent")
+            const mid = document.getElementById("mid")
+            const child = document.getElementById("child")
+
+            const parentProjection = createNode(
+                parent,
+                undefined,
+                {},
+                { duration: 0 }
+            )
+            const midProjection = createNode(
+                mid,
+                parentProjection,
+                {},
+                { duration: 0 }
+            )
+            const childProjection = createNode(
+                child,
+                midProjection,
+                {},
+                { type: false }
+            )
+
+            parentProjection.willUpdate()
+            midProjection.willUpdate()
+            childProjection.willUpdate()
+
+            parent.classList.add("b")
+
+            parentProjection.root.didUpdate()
+
+            frame.postRender(() => {
+                frame.postRender(() => {
+                    matchViewportBox(mid, {
+                        bottom: 50,
+                        left: 100,
+                        right: 150,
+                        top: 0,
+                    })
+                    matchViewportBox(child, {
+                        bottom: 50,
+                        left: 100,
+                        right: 150,
+                        top: 0,
+                    })
+                })
+            })
+        </script>
+    </body>
+</html>