Fixing test

framer · Dec 5, 2022 · 94cc0cf · 94cc0cf
1 parent 9953226
commit 94cc0cf
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git a/packages/framer-motion/package.json b/packages/framer-motion/package.json
@@ -72,15 +72,15 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "28.9 kB"
+            "maxSize": "29 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
-            "maxSize": "4.7 kB"
+            "maxSize": "4.75 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "14.13 kB"
+            "maxSize": "14.2kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",

diff --git a/packages/framer-motion/src/motion/__tests__/component-svg.test.tsx b/packages/framer-motion/src/motion/__tests__/component-svg.test.tsx
@@ -88,6 +88,23 @@ describe("SVG", () => {
         render(<Component />)
     })
 
+    test("doesn't read viewBox as '0 0 0 0'", () => {
+        const Component = () => {
+            return (
+                <motion.svg
+                    viewBox="0 0 100 100"
+                    transition={{ delay: 1 }}
+                    animate={{ viewBox: "100 100 200 200" }}
+                />
+            )
+        }
+        const { container } = render(<Component />)
+        expect(container.firstChild as Element).toHaveAttribute(
+            "viewBox",
+            "0 0 100 100"
+        )
+    })
+
     test("animates viewBox", () => {
         const Component = () => {
             return (

diff --git a/packages/framer-motion/src/render/svg/utils/build-attrs.ts b/packages/framer-motion/src/render/svg/utils/build-attrs.ts
@@ -27,13 +27,15 @@ export function buildSVGAttrs(
     transformTemplate?: MotionProps["transformTemplate"]
 ) {
     buildHTMLStyles(state, latest, options, transformTemplate)
-
+    console.log(state.attrs, state.style)
     /**
      * For svg tags we just want to make sure viewBox is animatable and treat all the styles
      * as normal HTML tags.
      */
     if (isSVGTag) {
-        state.attrs.viewBox = state.style.viewBox
+        if (state.style.viewBox) {
+            state.attrs.viewBox = state.style.viewBox
+        }
         return
     }
 

diff --git a/packages/framer-motion/src/render/svg/utils/render.ts b/packages/framer-motion/src/render/svg/utils/render.ts
@@ -14,6 +14,7 @@ export function renderSVG(
     renderHTML(element as any, renderState, undefined, projection)
 
     for (const key in renderState.attrs) {
+        console.log(key, renderState.attrs)
         element.setAttribute(
             !camelCaseAttributes.has(key) ? camelToDash(key) : key,
             renderState.attrs[key] as string