mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-29 04:35:32 +08:00
422 lines
10 KiB
Plaintext
422 lines
10 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`Progress should be render background-color with color prop 1`] = `
|
|
"<div class=\\"progress \\"><div class=\\"inner\\" title=\\"59%\\"></div><progress class=\\"\\" value=\\"59\\" max=\\"100\\"></progress><style>
|
|
progress {
|
|
position: fixed;
|
|
top: -1000px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0.625rem;
|
|
background-color: #eaeaea;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed;
|
|
top: unset;
|
|
bottom: unset;
|
|
left: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.fixed > .inner {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.inner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
bottom: 0;
|
|
transition: all 100ms ease-in;
|
|
border-radius: 5px;
|
|
background-color: #111;
|
|
width: 59%;
|
|
}
|
|
</style></div>"
|
|
`;
|
|
|
|
exports[`Progress should fixed 1`] = `
|
|
"<div><div class=\\"progress fixed\\"><div class=\\"inner\\" title=\\"59%\\"></div><progress class=\\"\\" value=\\"59\\" max=\\"100\\"></progress><style>
|
|
progress {
|
|
position: fixed;
|
|
top: -1000px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0.625rem;
|
|
background-color: #eaeaea;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: unset;
|
|
left: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.fixed > .inner {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.inner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
bottom: 0;
|
|
transition: all 100ms ease-in;
|
|
border-radius: 5px;
|
|
background-color: #000;
|
|
width: 59%;
|
|
}
|
|
</style></div><div class=\\"progress fixed\\"><div class=\\"inner\\" title=\\"21%\\"></div><progress class=\\"\\" value=\\"21\\" max=\\"100\\"></progress><style>
|
|
progress {
|
|
position: fixed;
|
|
top: -1000px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0.625rem;
|
|
background-color: #eaeaea;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed;
|
|
top: unset;
|
|
bottom: 0;
|
|
left: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.fixed > .inner {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.inner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
bottom: 0;
|
|
transition: all 100ms ease-in;
|
|
border-radius: 5px;
|
|
background-color: #000;
|
|
width: 21%;
|
|
}
|
|
</style></div></div>"
|
|
`;
|
|
|
|
exports[`Progress should render correctly 1`] = `
|
|
"<div class=\\"progress \\"><div class=\\"inner\\" title=\\"59%\\"></div><progress class=\\"\\" value=\\"59\\" max=\\"100\\"></progress><style>
|
|
progress {
|
|
position: fixed;
|
|
top: -1000px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0.625rem;
|
|
background-color: #eaeaea;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed;
|
|
top: unset;
|
|
bottom: unset;
|
|
left: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.fixed > .inner {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.inner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
bottom: 0;
|
|
transition: all 100ms ease-in;
|
|
border-radius: 5px;
|
|
background-color: #000;
|
|
width: 59%;
|
|
}
|
|
</style></div>"
|
|
`;
|
|
|
|
exports[`Progress should show different progress by maximum 1`] = `
|
|
"<div><div class=\\"progress \\"><div class=\\"inner\\" title=\\"98.33%\\"></div><progress class=\\"\\" value=\\"59\\" max=\\"60\\"></progress><style>
|
|
progress {
|
|
position: fixed;
|
|
top: -1000px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0.625rem;
|
|
background-color: #eaeaea;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed;
|
|
top: unset;
|
|
bottom: unset;
|
|
left: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.fixed > .inner {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.inner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
bottom: 0;
|
|
transition: all 100ms ease-in;
|
|
border-radius: 5px;
|
|
background-color: #000;
|
|
width: 98.33%;
|
|
}
|
|
</style></div><div class=\\"progress \\"><div class=\\"inner\\" title=\\"42%\\"></div><progress class=\\"\\" value=\\"21\\" max=\\"50\\"></progress><style>
|
|
progress {
|
|
position: fixed;
|
|
top: -1000px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0.625rem;
|
|
background-color: #eaeaea;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed;
|
|
top: unset;
|
|
bottom: unset;
|
|
left: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.fixed > .inner {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.inner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
bottom: 0;
|
|
transition: all 100ms ease-in;
|
|
border-radius: 5px;
|
|
background-color: #000;
|
|
width: 42%;
|
|
}
|
|
</style></div></div>"
|
|
`;
|
|
|
|
exports[`Progress should work with different types 1`] = `
|
|
"<div><div class=\\"progress \\"><div class=\\"inner\\" title=\\"59%\\"></div><progress class=\\"\\" value=\\"59\\" max=\\"100\\"></progress><style>
|
|
progress {
|
|
position: fixed;
|
|
top: -1000px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0.625rem;
|
|
background-color: #eaeaea;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed;
|
|
top: unset;
|
|
bottom: unset;
|
|
left: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.fixed > .inner {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.inner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
bottom: 0;
|
|
transition: all 100ms ease-in;
|
|
border-radius: 5px;
|
|
background-color: #666;
|
|
width: 59%;
|
|
}
|
|
</style></div><div class=\\"progress \\"><div class=\\"inner\\" title=\\"21%\\"></div><progress class=\\"\\" value=\\"21\\" max=\\"100\\"></progress><style>
|
|
progress {
|
|
position: fixed;
|
|
top: -1000px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0.625rem;
|
|
background-color: #eaeaea;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed;
|
|
top: unset;
|
|
bottom: unset;
|
|
left: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.fixed > .inner {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.inner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
bottom: 0;
|
|
transition: all 100ms ease-in;
|
|
border-radius: 5px;
|
|
background-color: #0070f3;
|
|
width: 21%;
|
|
}
|
|
</style></div><div class=\\"progress \\"><div class=\\"inner\\" title=\\"2%\\"></div><progress class=\\"\\" value=\\"2\\" max=\\"100\\"></progress><style>
|
|
progress {
|
|
position: fixed;
|
|
top: -1000px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0.625rem;
|
|
background-color: #eaeaea;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed;
|
|
top: unset;
|
|
bottom: unset;
|
|
left: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.fixed > .inner {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.inner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
bottom: 0;
|
|
transition: all 100ms ease-in;
|
|
border-radius: 5px;
|
|
background-color: #f5a623;
|
|
width: 2%;
|
|
}
|
|
</style></div><div class=\\"progress \\"><div class=\\"inner\\" title=\\"1%\\"></div><progress class=\\"\\" value=\\"1\\" max=\\"100\\"></progress><style>
|
|
progress {
|
|
position: fixed;
|
|
top: -1000px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0.625rem;
|
|
background-color: #eaeaea;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed;
|
|
top: unset;
|
|
bottom: unset;
|
|
left: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.fixed > .inner {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.inner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
bottom: 0;
|
|
transition: all 100ms ease-in;
|
|
border-radius: 5px;
|
|
background-color: #e00;
|
|
width: 1%;
|
|
}
|
|
</style></div></div>"
|
|
`;
|