chore: fallback of old bro

react-component · Aug 24, 2023 · 2b40f5c · 2b40f5c
1 parent c9cc945
commit 2b40f5c
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 62 deletions.
diff --git a/tests/__snapshots__/conic.spec.tsx.snap b/tests/__snapshots__/conic.spec.tsx.snap
@@ -41,7 +41,11 @@ exports[`Circle.conic gapDegree 1`] = `
     >
       <div
         style="width: 100%; height: 100%;"
-      />
+      >
+        <div
+          style="width: 100%; height: 100%;"
+        />
+      </div>
     </foreignobject>
   </svg>
 </DocumentFragment>
@@ -88,7 +92,11 @@ exports[`Circle.conic should work 1`] = `
     >
       <div
         style="width: 100%; height: 100%;"
-      />
+      >
+        <div
+          style="width: 100%; height: 100%;"
+        />
+      </div>
     </foreignobject>
   </svg>
 </DocumentFragment>

diff --git a/tests/__snapshots__/index.spec.js.snap b/tests/__snapshots__/index.spec.js.snap
@@ -89,90 +89,92 @@ exports[`Progress Circle should gradient works and circles have different gradie
     role="presentation"
     viewBox="0 0 100 100"
   >
-    <defs>
-      <linearGradient
-        id="rc_progress_TEST_OR_SSR-gradient"
-        x1="100%"
-        x2="0%"
-        y1="0%"
-        y2="0%"
-      >
-        <stop
-          offset="0%"
-          stop-color="#108ee9"
-        />
-        <stop
-          offset="100%"
-          stop-color="#87d068"
-        />
-      </linearGradient>
-    </defs>
     <circle
       class="rc-progress-circle-trail"
       cx="50"
       cy="50"
       r="47"
       stroke="#D9D9D9"
-      stroke-linecap="round"
+      stroke-linecap="butt"
       stroke-width="1"
       style="stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
     />
-    <circle
-      class="rc-progress-circle-path"
-      cx="50"
-      cy="50"
-      opacity="1"
-      r="47"
-      stroke="url(#rc_progress_TEST_OR_SSR-gradient)"
-      stroke-linecap="round"
-      stroke-width="6"
-      style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 32.53097094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
-    />
+    <mask
+      id="rc_progress_TEST_OR_SSR-gradient-conic"
+    >
+      <circle
+        class="rc-progress-circle-path"
+        cx="50"
+        cy="50"
+        opacity="1"
+        r="47"
+        stroke="#FFF"
+        stroke-linecap="butt"
+        stroke-width="6"
+        style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 29.53097094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+      />
+    </mask>
+    <foreignObject
+      height="100"
+      mask="url(#rc_progress_TEST_OR_SSR-gradient-conic)"
+      width="100"
+      x="0"
+      y="0"
+    >
+      <div
+        style="width: 100%; height: 100%;"
+      >
+        <div
+          style="width: 100%; height: 100%;"
+        />
+      </div>
+    </foreignObject>
   </svg>
   <svg
     class="rc-progress-circle"
     role="presentation"
     viewBox="0 0 100 100"
   >
-    <defs>
-      <linearGradient
-        id="rc_progress_TEST_OR_SSR-gradient"
-        x1="100%"
-        x2="0%"
-        y1="0%"
-        y2="0%"
-      >
-        <stop
-          offset="0%"
-          stop-color="#108ee9"
-        />
-        <stop
-          offset="100%"
-          stop-color="#87d068"
-        />
-      </linearGradient>
-    </defs>
     <circle
       class="rc-progress-circle-trail"
       cx="50"
       cy="50"
       r="47"
       stroke="#D9D9D9"
-      stroke-linecap="round"
+      stroke-linecap="butt"
       stroke-width="1"
       style="stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
     />
-    <circle
-      class="rc-progress-circle-path"
-      cx="50"
-      cy="50"
-      opacity="1"
-      r="47"
-      stroke="url(#rc_progress_TEST_OR_SSR-gradient)"
-      stroke-linecap="round"
-      stroke-width="6"
-      style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 32.53097094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
-    />
+    <mask
+      id="rc_progress_TEST_OR_SSR-gradient-conic"
+    >
+      <circle
+        class="rc-progress-circle-path"
+        cx="50"
+        cy="50"
+        opacity="1"
+        r="47"
+        stroke="#FFF"
+        stroke-linecap="butt"
+        stroke-width="6"
+        style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 29.53097094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+      />
+    </mask>
+    <foreignObject
+      height="100"
+      mask="url(#rc_progress_TEST_OR_SSR-gradient-conic)"
+      width="100"
+      x="0"
+      y="0"
+    >
+      <div
+        style="width: 100%; height: 100%;"
+      >
+        <div
+          style="width: 100%; height: 100%;"
+        />
+      </div>
+    </foreignObject>
   </svg>
 </div>
 `;