test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-15 01:11:26 +08:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity
6c8082a474
ant-design/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
二货爱吃白萝卜 6770b7fb22
test: Use render for demo-extends test (#41242) 
* test: update snapshot

* test: use render

* test: fix skip

* test: fix skip
2023-03-15 00:08:31 +08:00

2588 lines
88 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/progress/demo/circle.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 76.82742735936014; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="75%"
>
75%
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 91.59291283123217; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
>
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
>
<span
aria-label="check"
class="anticon anticon-check"
role="img"
>
<svg
aria-hidden="true"
data-icon="check"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
`;
exports[`renders components/progress/demo/circle-dynamic.tsx extend context correctly 1`] = `
Array [
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
style="margin-right: 8px;"
>
<div
class="ant-progress-inner"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="0%"
>
0%
</span>
</div>
</div>,
<div
class="ant-btn-group"
>
<button
class="ant-btn ant-btn-default ant-btn-icon-only"
type="button"
>
<span
aria-label="minus"
class="anticon anticon-minus"
role="img"
>
<svg
aria-hidden="true"
data-icon="minus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
/>
</svg>
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only"
type="button"
>
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
>
<svg
aria-hidden="true"
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<defs>
<style />
</defs>
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
</button>
</div>,
]
`;
exports[`renders components/progress/demo/circle-micro.tsx extend context correctly 1`] = `
Array [
<div
class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 14px; height: 14px; font-size: 8.1px;"
>
<span>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="40"
stroke="#e6f4ff"
stroke-linecap="round"
stroke-width="20"
style="stroke: #e6f4ff; stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="40"
stroke-linecap="round"
stroke-width="20"
style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 110.53096491487338; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="40"
stroke-linecap="round"
stroke-width="20"
style="stroke: #52C41A; stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 251.31741228718346; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
</span>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span
class="ant-progress-text"
title="进行中，已完成60%"
>
进行中，已完成60%
</span>
</div>
</div>
</div>
</div>
</div>,
<span
style="margin-left: 8px;"
>
代码发布
</span>,
]
`;
exports[`renders components/progress/demo/circle-mini.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 80px; height: 80px; font-size: 18px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="30%"
>
30%
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 80px; height: 80px; font-size: 18px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 91.59291283123217; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
>
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 80px; height: 80px; font-size: 18px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
>
<span
aria-label="check"
class="anticon anticon-check"
role="img"
>
<svg
aria-hidden="true"
data-icon="check"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
`;
exports[`renders components/progress/demo/dashboard.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 61.44671332616011; transform: rotate(127.5deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="75%"
>
75%
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 270.7005669843205px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(105deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 270.7005669843205px 295.3097094374406; stroke-dashoffset: 70.67514174608013; transform: rotate(105deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 270.7005669843205px 295.3097094374406; stroke-dashoffset: 270.6905669843205; transform: rotate(105deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="75%"
>
75%
</span>
</div>
</div>
</div>
</div>
`;
exports[`renders components/progress/demo/dynamic.tsx extend context correctly 1`] = `
Array [
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 8px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 0%; height: 8px;"
/>
</div>
</div>
<span
class="ant-progress-text"
title="0%"
>
0%
</span>
</div>,
<div
class="ant-btn-group"
>
<button
class="ant-btn ant-btn-default ant-btn-icon-only"
type="button"
>
<span
aria-label="minus"
class="anticon anticon-minus"
role="img"
>
<svg
aria-hidden="true"
data-icon="minus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
/>
</svg>
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only"
type="button"
>
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
>
<svg
aria-hidden="true"
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<defs>
<style />
</defs>
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
</button>
</div>,
]
`;
exports[`renders components/progress/demo/format.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 76.82742735936014; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="75 Days"
>
75 Days
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="Done"
>
Done
</span>
</div>
</div>
</div>
</div>
`;
exports[`renders components/progress/demo/gradient-line.tsx extend context correctly 1`] = `
Array [
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 8px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 99.9%; height: 8px;"
/>
</div>
</div>
<span
class="ant-progress-text"
title="99.9%"
>
99.9%
</span>
</div>,
<div
class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 8px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 99.9%; height: 8px;"
/>
</div>
</div>
<span
class="ant-progress-text"
title="99.9%"
>
99.9%
</span>
</div>,
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner ant-progress-circle-gradient"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 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="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
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: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="90%"
>
90%
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner ant-progress-circle-gradient"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 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="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
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: 0; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
>
<span
aria-label="check"
class="anticon anticon-check"
role="img"
>
<svg
aria-hidden="true"
data-icon="check"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>,
]
`;
exports[`renders components/progress/demo/line.tsx extend context correctly 1`] = `
Array [
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 8px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 30%; height: 8px;"
/>
</div>
</div>
<span
class="ant-progress-text"
title="30%"
>
30%
</span>
</div>,
<div
class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 8px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 50%; height: 8px;"
/>
</div>
</div>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>,
<div
class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 8px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 70%; height: 8px;"
/>
</div>
</div>
<span
class="ant-progress-text"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</div>,
<div
class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 8px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 100%; height: 8px;"
/>
</div>
</div>
<span
class="ant-progress-text"
>
<span
aria-label="check-circle"
class="anticon anticon-check-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="check-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
/>
</svg>
</span>
</span>
</div>,
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 8px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 50%; height: 8px;"
/>
</div>
</div>
</div>,
]
`;
exports[`renders components/progress/demo/line-mini.tsx extend context correctly 1`] = `
<div
style="width: 170px;"
>
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 6px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 30%; height: 6px;"
/>
</div>
</div>
<span
class="ant-progress-text"
title="30%"
>
30%
</span>
</div>
<div
class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-small"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 6px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 50%; height: 6px;"
/>
</div>
</div>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
<div
class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-small"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 6px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 70%; height: 6px;"
/>
</div>
</div>
<span
class="ant-progress-text"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-small"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 6px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 100%; height: 6px;"
/>
</div>
</div>
<span
class="ant-progress-text"
>
<span
aria-label="check-circle"
class="anticon anticon-check-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="check-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
/>
</svg>
</span>
</span>
</div>
</div>
`;
exports[`renders components/progress/demo/linecap.tsx extend context correctly 1`] = `
Array [
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 8px;"
>
<div
class="ant-progress-inner"
style="border-radius: 0;"
>
<div
class="ant-progress-bg"
style="width: 75%; height: 8px; border-radius: 0;"
/>
</div>
</div>
<span
class="ant-progress-text"
title="75%"
>
75%
</span>
</div>,
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="butt"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="butt"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 73.82742735936014; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="butt"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.3097094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="75%"
>
75%
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="butt"
stroke-width="6"
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="butt"
stroke-width="6"
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 58.44671332616011; transform: rotate(127.5deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="butt"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.78685330464043; transform: rotate(127.5deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="75%"
>
75%
</span>
</div>
</div>
</div>
</div>,
]
`;
exports[`renders components/progress/demo/segment.tsx extend context correctly 1`] = `
Array [
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 8px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 60%; height: 8px;"
/>
<div
class="ant-progress-success-bg"
style="width: 30%; height: 8px;"
/>
</div>
</div>
<span
class="ant-progress-text"
title="60%"
>
60%
</span>
</div>,
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
3 done / 3 in progress / 4 to do
</div>
</div>
</div>,
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(18deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="60%"
>
60%
</span>
</div>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
3 done / 3 in progress / 4 to do
</div>
</div>
</div>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 166.6507973132483; transform: rotate(213deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 166.6507973132483; transform: rotate(127.5deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="60%"
>
60%
</span>
</div>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
3 done / 3 in progress / 4 to do
</div>
</div>
</div>
</div>
</div>,
]
`;
exports[`renders components/progress/demo/size.tsx extend context correctly 1`] = `
Array [
<div
class="ant-space ant-space-vertical"
>
<div
class="ant-space-item"
style="margin-bottom: 8px;"
>
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 8px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 50%; height: 8px;"
/>
</div>
</div>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom: 8px;"
>
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 100%; height: 6px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 50%; height: 6px;"
/>
</div>
</div>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info"
role="progressbar"
>
<div
class="ant-progress-outer"
style="width: 300px; height: 20px;"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 50%; height: 20px;"
/>
</div>
</div>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
</div>
</div>,
<br />,
<br />,
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right: 30px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-right: 30px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 60px; height: 60px; font-size: 15px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 20px; height: 20px; font-size: 9px;"
>
<span>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="42.5"
stroke-linecap="round"
stroke-width="15"
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="42.5"
stroke-linecap="round"
stroke-width="15"
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="42.5"
stroke-linecap="round"
stroke-width="15"
style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; transform: rotate(-90deg); transform-origin: 0 0; 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;"
/>
</svg>
</span>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>,
<br />,
<br />,
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right: 30px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 120px; height: 120px; font-size: 24px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 119.89342665232022; transform: rotate(127.5deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-right: 30px;"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 60px; height: 60px; font-size: 15px;"
>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 119.89342665232022; transform: rotate(127.5deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 0 0; 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;"
/>
</svg>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
role="progressbar"
>
<div
class="ant-progress-inner"
style="width: 20px; height: 20px; font-size: 9px;"
>
<span>
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
r="42.5"
stroke-linecap="round"
stroke-width="15"
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; 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="ant-progress-circle-path"
cx="0"
cy="0"
opacity="1"
r="42.5"
stroke-linecap="round"
stroke-width="15"
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; transform: rotate(127.5deg); transform-origin: 0 0; 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;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
opacity="0"
r="42.5"
stroke-linecap="round"
stroke-width="15"
style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; transform: rotate(127.5deg); transform-origin: 0 0; 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;"
/>
</svg>
</span>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>,
<br />,
<br />,
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -30px;"
>
<div
class="ant-space-item"
style="margin-right: 30px; padding-bottom: 30px;"
>
<div
class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-steps-outer"
>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="width: 14px; height: 8px;"
/>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="width: 14px; height: 8px;"
/>
<div
class="ant-progress-steps-item"
style="width: 14px; height: 8px;"
/>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-right: 30px; padding-bottom: 30px;"
>
<div
class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-small"
role="progressbar"
>
<div
class="ant-progress-steps-outer"
>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="width: 2px; height: 8px;"
/>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="width: 2px; height: 8px;"
/>
<div
class="ant-progress-steps-item"
style="width: 2px; height: 8px;"
/>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-right: 30px; padding-bottom: 30px;"
>
<div
class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info"
role="progressbar"
>
<div
class="ant-progress-steps-outer"
>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="width: 20px; height: 20px;"
/>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="width: 20px; height: 20px;"
/>
<div
class="ant-progress-steps-item"
style="width: 20px; height: 20px;"
/>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="padding-bottom: 30px;"
>
<div
class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info"
role="progressbar"
>
<div
class="ant-progress-steps-outer"
>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="width: 20px; height: 30px;"
/>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="width: 20px; height: 30px;"
/>
<div
class="ant-progress-steps-item"
style="width: 20px; height: 30px;"
/>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
</div>
</div>
</div>,
]
`;
exports[`renders components/progress/demo/steps.tsx extend context correctly 1`] = `
Array [
<div
class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-steps-outer"
>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="width: 14px; height: 8px;"
/>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="width: 14px; height: 8px;"
/>
<div
class="ant-progress-steps-item"
style="width: 14px; height: 8px;"
/>
<span
class="ant-progress-text"
title="50%"
>
50%
</span>
</div>
</div>,
<br />,
<div
class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-steps-outer"
>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="width: 14px; height: 8px;"
/>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="width: 14px; height: 8px;"
/>
<div
class="ant-progress-steps-item"
style="width: 14px; height: 8px;"
/>
<div
class="ant-progress-steps-item"
style="width: 14px; height: 8px;"
/>
<div
class="ant-progress-steps-item"
style="width: 14px; height: 8px;"
/>
<span
class="ant-progress-text"
title="30%"
>
30%
</span>
</div>
</div>,
<br />,
<div
class="ant-progress ant-progress-steps ant-progress-status-success ant-progress-show-info ant-progress-small"
role="progressbar"
>
<div
class="ant-progress-steps-outer"
>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="background-color: rgb(56, 158, 13); width: 2px; height: 8px;"
/>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="background-color: rgb(56, 158, 13); width: 2px; height: 8px;"
/>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="background-color: rgb(56, 158, 13); width: 2px; height: 8px;"
/>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="background-color: rgb(56, 158, 13); width: 2px; height: 8px;"
/>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="background-color: rgb(56, 158, 13); width: 2px; height: 8px;"
/>
<span
class="ant-progress-text"
>
<span
aria-label="check-circle"
class="anticon anticon-check-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="check-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
/>
</svg>
</span>
</span>
</div>
</div>,
<br />,
<div
class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
role="progressbar"
>
<div
class="ant-progress-steps-outer"
>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="background-color: rgb(56, 158, 13); width: 14px; height: 8px;"
/>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="background-color: rgb(56, 158, 13); width: 14px; height: 8px;"
/>
<div
class="ant-progress-steps-item ant-progress-steps-item-active"
style="background-color: rgb(245, 34, 45); width: 14px; height: 8px;"
/>
<div
class="ant-progress-steps-item"
style="width: 14px; height: 8px;"
/>
<div
class="ant-progress-steps-item"
style="width: 14px; height: 8px;"
/>
<span
class="ant-progress-text"
title="60%"
>
60%
</span>
</div>
</div>,
]
`;
Reference in New Issue View Git Blame Copy Permalink