Merge pull request #1754 from framer/feature/sticky-tests

Tests for `position: sticky` layout animations
motiondivision · Nov 8, 2022 · 0072460 · 0072460
2 parents 05a9262 + b9653ea
commit 0072460
Show file tree

Hide file tree

Showing 15 changed files with 1,214 additions and 1 deletion.
diff --git a/dev/projection/collect-projection-tests.js b/dev/projection/collect-projection-tests.js
@@ -3,7 +3,7 @@ const path = require("path")
 
 const files = fs
     .readdirSync(__dirname)
-    .filter((f) => path.extname(f) === ".html")
+    .filter((f) => path.extname(f) === ".html" && !f.includes(".skip."))
 
 fs.writeFile(
     "../../packages/framer-motion/cypress/fixtures/projection-tests.json",

diff --git a/dev/projection/sticky-child-scroll-change-offset.skip.html b/dev/projection/sticky-child-scroll-change-offset.skip.html
@@ -0,0 +1,88 @@
+<html>
+    <head>
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+            }
+
+            #box {
+                width: 100px;
+                height: 100px;
+                background-color: #00cc88;
+            }
+
+            #size {
+                height: 100px;
+            }
+
+            #overlay {
+                background-color: black;
+                position: sticky;
+                top: 0px;
+                height: 200px;
+                width: 200px;
+            }
+
+            #overlay.b #box {
+                position: relative;
+                left: 300px;
+                top: 300px;
+            }
+
+            #trigger-overflow {
+                width: 1px;
+                height: 1px;
+                position: absolute;
+                top: 2000px;
+                left: 2000px;
+            }
+
+            [data-layout-correct="false"] {
+                background: #dd1144 !important;
+                opacity: 0.5;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="size"></div>
+        <div id="overlay">
+            <div id="box"></div>
+        </div>
+        <div id="trigger-overflow"></div>
+
+        <script src="../../packages/framer-motion/dist/projection.dev.js"></script>
+        <script src="./script-assert.js"></script>
+        <script src="./script-undo.js"></script>
+        <script>
+            const { createNode } = window.Undo
+            const { matchViewportBox, addPageScroll } = window.Assert
+
+            const overlay = document.getElementById("overlay")
+            const overlayProjection = createNode(overlay, undefined, {
+                layoutScroll: true,
+            })
+
+            const box = document.getElementById("box")
+            const boxProjection = createNode(
+                box,
+                overlayProjection
+                // undefined,
+                // { duration: 2 }
+            )
+
+            const boxOrigin = box.getBoundingClientRect()
+
+            boxProjection.willUpdate()
+
+            overlay.classList.add("b")
+
+            const scrollOffset = [50, 150]
+            window.scrollTo(...scrollOffset)
+
+            boxProjection.root.didUpdate()
+
+            matchViewportBox(box, { top: 0, left: -50, bottom: 100, right: 50 })
+        </script>
+    </body>
+</html>
diff --git a/dev/projection/sticky-child-scroll-change.skip.html b/dev/projection/sticky-child-scroll-change.skip.html
@@ -0,0 +1,86 @@
+<html>
+    <head>
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+            }
+
+            #box {
+                width: 100px;
+                height: 100px;
+                background-color: #00cc88;
+            }
+
+            #size {
+                height: 100px;
+            }
+
+            #overlay {
+                background-color: black;
+                position: sticky;
+                top: 0px;
+                height: 200px;
+                width: 200px;
+            }
+
+            #overlay.b #box {
+                position: relative;
+            }
+
+            #trigger-overflow {
+                width: 1px;
+                height: 1px;
+                position: absolute;
+                top: 2000px;
+                left: 2000px;
+            }
+
+            [data-layout-correct="false"] {
+                background: #dd1144 !important;
+                opacity: 0.5;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="size"></div>
+        <div id="overlay">
+            <div id="box"></div>
+        </div>
+        <div id="trigger-overflow"></div>
+
+        <script src="../../packages/framer-motion/dist/projection.dev.js"></script>
+        <script src="./script-assert.js"></script>
+        <script src="./script-undo.js"></script>
+        <script>
+            const { createNode } = window.Undo
+            const { matchViewportBox, addPageScroll } = window.Assert
+
+            const overlay = document.getElementById("overlay")
+            const overlayProjection = createNode(overlay, undefined, {
+                layoutScroll: true,
+            })
+
+            const box = document.getElementById("box")
+            const boxProjection = createNode(
+                box,
+                overlayProjection
+                // undefined,
+                // { duration: 2 }
+            )
+
+            const boxOrigin = box.getBoundingClientRect()
+
+            boxProjection.willUpdate()
+
+            overlay.classList.add("b")
+
+            const scrollOffset = [50, 150]
+            window.scrollTo(...scrollOffset)
+
+            boxProjection.root.didUpdate()
+
+            matchViewportBox(box, { top: 0, left: -50, bottom: 100, right: 50 })
+        </script>
+    </body>
+</html>
diff --git a/dev/projection/sticky-child.html b/dev/projection/sticky-child.html
@@ -0,0 +1,86 @@
+<html>
+    <head>
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+            }
+
+            #box {
+                width: 100px;
+                height: 100px;
+                background-color: #00cc88;
+            }
+
+            #size {
+                height: 100px;
+            }
+
+            #overlay {
+                background-color: black;
+                position: sticky;
+                top: 0px;
+                height: 200px;
+                width: 200px;
+            }
+
+            #overlay.b #box {
+                position: relative;
+            }
+
+            #trigger-overflow {
+                width: 1px;
+                height: 1px;
+                position: absolute;
+                top: 2000px;
+                left: 2000px;
+            }
+
+            [data-layout-correct="false"] {
+                background: #dd1144 !important;
+                opacity: 0.5;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="size"></div>
+        <div id="overlay">
+            <div id="box"></div>
+        </div>
+        <div id="trigger-overflow"></div>
+
+        <script src="../../packages/framer-motion/dist/projection.dev.js"></script>
+        <script src="./script-assert.js"></script>
+        <script src="./script-undo.js"></script>
+        <script>
+            const { createNode } = window.Undo
+            const { matchViewportBox, addPageScroll } = window.Assert
+
+            const overlay = document.getElementById("overlay")
+            const overlayProjection = createNode(overlay, undefined, {
+                layoutScroll: true,
+            })
+
+            const box = document.getElementById("box")
+            const boxProjection = createNode(
+                box,
+                overlayProjection
+                // undefined,
+                // { duration: 2 }
+            )
+
+            const scrollOffset = [50, 150]
+            window.scrollTo(...scrollOffset)
+
+            const boxOrigin = box.getBoundingClientRect()
+
+            boxProjection.willUpdate()
+
+            overlay.classList.add("b")
+
+            boxProjection.root.didUpdate()
+
+            matchViewportBox(box, { top: 0, left: -50, bottom: 100, right: 50 })
+        </script>
+    </body>
+</html>
diff --git a/dev/projection/sticky-element-scroll-child.skip.html b/dev/projection/sticky-element-scroll-child.skip.html
@@ -0,0 +1,109 @@
+<html>
+    <head>
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+            }
+
+            #position {
+                width: 1px;
+                height: 200px;
+            }
+
+            #scroller {
+                width: 200px;
+                height: 200px;
+                overflow: scroll;
+                margin-left: 100px;
+            }
+
+            #sticky {
+                position: sticky;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 50px;
+                background: #0088ff;
+                display: flex;
+                justify-content: flex-start;
+            }
+
+            #sticky.b {
+                justify-content: flex-end;
+            }
+
+            #child {
+                width: 50px;
+                height: 50px;
+                background: #00cc88;
+            }
+
+            #content {
+                width: 100%;
+                height: 400px;
+            }
+
+            #trigger-overflow {
+                width: 1px;
+                height: 1px;
+                position: absolute;
+                top: 2000px;
+                left: 2000px;
+            }
+
+            [data-layout-correct="false"] {
+                background: #dd1144 !important;
+                opacity: 0.5;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="position"></div>
+        <div id="scroller">
+            <div id="sticky">
+                <div id="child"></div>
+            </div>
+            <div id="content"></div>
+        </div>
+        <div id="trigger-overflow"></div>
+
+        <script src="../../packages/framer-motion/dist/projection.dev.js"></script>
+        <script src="./script-assert.js"></script>
+        <script src="./script-undo.js"></script>
+        <script>
+            const { createNode } = window.Undo
+            const {
+                matchViewportBox,
+                matchVisibility,
+                matchOpacity,
+                addPageScroll,
+            } = window.Assert
+
+            const scroller = document.getElementById("scroller")
+            const scrollerProjection = createNode(scroller, undefined, {
+                layoutScroll: true,
+            })
+
+            const sticky = document.getElementById("sticky")
+            const stickyProjection = createNode(sticky, scrollerProjection)
+
+            const child = document.getElementById("child")
+            const childProjection = createNode(child, stickyProjection)
+
+            const childOrigin = child.getBoundingClientRect()
+
+            stickyProjection.willUpdate()
+            childProjection.willUpdate()
+
+            scroller.scrollTo(0, 100)
+            sticky.classList.add("b")
+
+            stickyProjection.root.didUpdate()
+
+            setTimeout(() => {
+                matchViewportBox(child, childOrigin)
+            }, 50)
+        </script>
+    </body>
+</html>