Updating tests

motiondivision · Sep 5, 2023 · 9727245 · 9727245
1 parent b0354d8
commit 9727245
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 7 deletions.
diff --git a/dev/optimized-appear/interrupt-tween-opacity-waapi.html b/dev/optimized-appear/interrupt-tween-opacity-waapi.html
@@ -0,0 +1,92 @@
+<html>
+    <head>
+        <style>
+            body {
+                padding: 100px;
+                margin: 0;
+            }
+
+            #box {
+                width: 100px;
+                height: 100px;
+                background-color: #0077ff;
+            }
+
+            [data-layout-correct="false"] {
+                background: #dd1144 !important;
+                opacity: 1 !important;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="../../node_modules/react/umd/react.development.js"></script>
+        <script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
+        <script src="../../node_modules/react-dom/umd/react-dom-server-legacy.browser.development.js"></script>
+        <script src="../../packages/framer-motion/dist/framer-motion.dev.js"></script>
+        <script src="../projection/script-assert.js"></script>
+
+        <script>
+            const {
+                motion,
+                animateStyle,
+                startOptimizedAppearAnimation,
+                optimizedAppearDataAttribute,
+                motionValue,
+            } = window.Motion
+            const { matchOpacity } = window.Assert
+            const root = document.getElementById("root")
+
+            const duration = 0.5
+
+            // This is the tree to be rendered "server" and client-side.
+            const Component = React.createElement(() => {
+                React.useLayoutEffect(() => {
+                    const startTime = performance.now()
+                    while (performance.now() - startTime < 100) {}
+                })
+
+                return React.createElement(motion.div, {
+                    id: "box",
+                    initial: { opacity: 0 },
+                    animate: { opacity: 1 },
+                    transition: { duration, ease: "linear" },
+                    /**
+                     * On animation start, check the values we expect to see here
+                     */
+                    onAnimationStart: () => {
+                        const { opacity: initialOpacity } =
+                            window.getComputedStyle(box)
+                        const opacityAsNumber = parseFloat(initialOpacity)
+                        if (opacityAsNumber < 0.4 || opacityAsNumber > 0.6) {
+                            showError(
+                                box,
+                                `opacity should be roughly less than 0.5 at animation start`
+                            )
+                        }
+                    },
+                    [optimizedAppearDataAttribute]: "a",
+                })
+            })
+
+            // Emulate server rendering of element
+            root.innerHTML = ReactDOMServer.renderToString(Component)
+
+            startOptimizedAppearAnimation(
+                document.getElementById("box"),
+                "opacity",
+                [0, 1],
+                {
+                    duration: duration * 1000,
+                    ease: "linear",
+                },
+                (animation) => {
+                    // Hydrate root mid-way through animation
+                    setTimeout(() => {
+                        ReactDOM.hydrateRoot(root, Component)
+                    }, (duration * 1000) / 2)
+                }
+            )
+        </script>
+    </body>
+</html>
diff --git a/dev/optimized-appear/resync-delay.html b/dev/optimized-appear/resync-delay.html
@@ -59,8 +59,8 @@
 
                 return React.createElement(motion.div, {
                     id: "box",
-                    initial: { x: 0 },
-                    animate: { x: 100 },
+                    initial: { x: 0, opacity: 0 },
+                    animate: { x: 100, opacity: 1 },
                     transition: { delay, duration, ease: "linear" },
                     style: { x },
                     /**
@@ -81,21 +81,29 @@
             // Emulate server rendering of element
             root.innerHTML = ReactDOMServer.renderToString(Component)
 
+            const options = {
+                delay: delay * 1000,
+                duration: duration * 1000,
+                ease: "linear",
+            }
+
             startOptimizedAppearAnimation(
                 document.getElementById("box"),
                 "transform",
                 ["translateX(0px)", "translateX(100px)"],
-                {
-                    delay: delay * 1000,
-                    duration: duration * 1000,
-                    ease: "linear",
-                },
+                options,
                 (animation) => {
                     setTimeout(() => {
                         ReactDOM.hydrateRoot(root, Component)
                     }, duration * 1000)
                 }
             )
+            startOptimizedAppearAnimation(
+                document.getElementById("box"),
+                "opacity",
+                [0, 1],
+                options
+            )
         </script>
     </body>
 </html>