mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
"added tests for radial gradients"
This commit is contained in:
André Fiedler
parent
155ad45292
commit
6c29664e35
@ -106,8 +106,6 @@
|
||||
background: linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||
}
|
||||
.linearGradientWithStops {
|
||||
/* IE9 SVG */
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlZGJlOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2FhYzVkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzYxOTljNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzNhODRjMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU5JSIgc3RvcC1jb2xvcj0iIzQxOWFkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iIzRiYjhmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzNhOGJjMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjU1OGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
||||
/* FF 3.6+ */
|
||||
background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||
/* Chrome, Safari 4+ */
|
||||
@ -116,14 +114,12 @@
|
||||
background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||
/* Opera 11.10+ */
|
||||
background: -o-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||
/* IE10+ */
|
||||
/* IE 10+ */
|
||||
background: -ms-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||
/* W3C */
|
||||
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||
}
|
||||
.linearGradient3 {
|
||||
/* IE9 SVG */
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjdhMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzhjMzMxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzc1MjIwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZjZlNGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
||||
/* FF 3.6+ */
|
||||
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||
/* Chrome, Safari 4+ */
|
||||
@ -135,11 +131,60 @@
|
||||
/* W3C */
|
||||
background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||
}
|
||||
.radialGradient {
|
||||
background: -moz-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
}
|
||||
|
||||
.radialGradient2 {
|
||||
background: -moz-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
}
|
||||
.radialGradient3 {
|
||||
background: -moz-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%)
|
||||
}
|
||||
.radialGradient4 {
|
||||
background: -moz-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
}
|
||||
.radialGradient5 {
|
||||
background: -moz-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
}
|
||||
.radialGradient6 {
|
||||
background: -moz-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -webkit-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -o-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: -ms-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
background: radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
|
||||
}
|
||||
</style>
|
||||
<div id="backgroundGradients">
|
||||
<div class="linearGradientSimple"></div>
|
||||
<div class="linearGradientWithStops"></div>
|
||||
<div class="linearGradient3"></div>
|
||||
<div class="radialGradient"></div>
|
||||
<div class="radialGradient2"></div>
|
||||
<div class="radialGradient3"></div>
|
||||
<div class="radialGradient4"></div>
|
||||
<div class="radialGradient5"></div>
|
||||
<div class="radialGradient6"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
|
||||
@ -102,6 +102,156 @@ $(function() {
|
||||
stop: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "radial",
|
||||
x0: 0,
|
||||
y0: 0,
|
||||
x1: 50,
|
||||
y1: 70,
|
||||
cx: 37.5,
|
||||
cy: 13.3,
|
||||
rx: 12.5,
|
||||
ry: 13.3,
|
||||
colorStops: [
|
||||
{
|
||||
color: "rgb(171, 171, 171)",
|
||||
stop: 0
|
||||
},
|
||||
{
|
||||
color: "rgb(0, 0, 255)",
|
||||
stop: 0.33
|
||||
},
|
||||
{
|
||||
color: "rgb(153, 31, 31)",
|
||||
stop: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "radial",
|
||||
x0: 0,
|
||||
y0: 0,
|
||||
x1: 50,
|
||||
y1: 70,
|
||||
cx: 37.5,
|
||||
cy: 13.3,
|
||||
rx: 18.25212316416915,
|
||||
ry: 18.25212316416915,
|
||||
colorStops: [
|
||||
{
|
||||
color: "rgb(171, 171, 171)",
|
||||
stop: 0
|
||||
},
|
||||
{
|
||||
color: "rgb(0, 0, 255)",
|
||||
stop: 0.33
|
||||
},
|
||||
{
|
||||
color: "rgb(153, 31, 31)",
|
||||
stop: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "radial",
|
||||
x0: 0,
|
||||
y0: 0,
|
||||
x1: 50,
|
||||
y1: 70,
|
||||
cx: 37.5,
|
||||
cy: 13.3,
|
||||
rx: 37.5,
|
||||
ry: 56.7,
|
||||
colorStops: [
|
||||
{
|
||||
color: "rgb(171, 171, 171)",
|
||||
stop: 0
|
||||
},
|
||||
{
|
||||
color: "rgb(0, 0, 255)",
|
||||
stop: 0.33
|
||||
},
|
||||
{
|
||||
color: "rgb(153, 31, 31)",
|
||||
stop: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "radial",
|
||||
x0: 0,
|
||||
y0: 0,
|
||||
x1: 50,
|
||||
y1: 70,
|
||||
cx: 37.5,
|
||||
cy: 13.3,
|
||||
rx: 67.97896733549283,
|
||||
ry: 67.97896733549283,
|
||||
colorStops: [
|
||||
{
|
||||
color: "rgb(171, 171, 171)",
|
||||
stop: 0
|
||||
},
|
||||
{
|
||||
color: "rgb(0, 0, 255)",
|
||||
stop: 0.33
|
||||
},
|
||||
{
|
||||
color: "rgb(153, 31, 31)",
|
||||
stop: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "radial",
|
||||
x0: 0,
|
||||
y0: 0,
|
||||
x1: 50,
|
||||
y1: 70,
|
||||
cx: 37.5,
|
||||
cy: 13.3,
|
||||
rx: 12.5,
|
||||
ry: 13.3,
|
||||
colorStops: [
|
||||
{
|
||||
color: "rgb(171, 171, 171)",
|
||||
stop: 0
|
||||
},
|
||||
{
|
||||
color: "rgb(0, 0, 255)",
|
||||
stop: 0.33
|
||||
},
|
||||
{
|
||||
color: "rgb(153, 31, 31)",
|
||||
stop: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "radial",
|
||||
x0: 0,
|
||||
y0: 0,
|
||||
x1: 50,
|
||||
y1: 70,
|
||||
cx: 37.5,
|
||||
cy: 13.3,
|
||||
rx: 67.97896733549283,
|
||||
ry: 67.97896733549283,
|
||||
colorStops: [
|
||||
{
|
||||
color: "rgb(171, 171, 171)",
|
||||
stop: 0
|
||||
},
|
||||
{
|
||||
color: "rgb(0, 0, 255)",
|
||||
stop: 0.33
|
||||
},
|
||||
{
|
||||
color: "rgb(153, 31, 31)",
|
||||
stop: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user