Skip to content

Commit 0556892

Browse files
author
André Fiedler
committed
"added -moz-radial-gradient support"
1 parent 6c29664 commit 0556892

1 file changed

Lines changed: 7 additions & 19 deletions

File tree

src/Generate.js

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,13 @@
1414

1515
_html2canvas.Generate = {};
1616

17-
/*
18-
-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(rgb(167, 211, 12)), color-stop(0.9, rgb(1, 159, 98)), to(rgba(1, 159, 98, 0))), -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(rgb(255, 95, 152)), color-stop(0.75, rgb(255, 1, 136)), to(rgba(255, 1, 136, 0))), -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(rgb(0, 201, 255)), color-stop(0.8, rgb(0, 181, 226)), to(rgba(0, 201, 255, 0))), -webkit-gradient(radial, 0 150, 50, 0 140, 90, from(rgb(244, 242, 1)), color-stop(0.8, rgb(228, 199, 0)), to(rgba(228, 199, 0, 0)))
19-
20-
-webkit-radial-gradient(50% 50%, ellipse cover, rgb(149, 149, 149) 0%, rgb(13, 13, 13) 48%, rgb(47, 123, 216) 50%, rgb(10, 10, 10) 64%, rgb(78, 78, 78) 80%, rgb(56, 56, 56) 87%, rgb(27, 27, 27) 100%)
21-
-webkit-radial-gradient(75% 19%, ellipse closest-side, rgb(171, 171, 171), rgb(0, 0, 255) 33%, rgb(153, 31, 31) 100%)
22-
-webkit-radial-gradient(75% 19%, ellipse closest-corner, rgb(171, 171, 171), rgb(0, 0, 255) 33%, rgb(153, 31, 31) 100%)
23-
-webkit-radial-gradient(75% 19%, ellipse farthest-side, rgb(171, 171, 171), rgb(0, 0, 255) 33%, rgb(153, 31, 31) 100%)
24-
-webkit-radial-gradient(75% 19%, ellipse farthest-corner, rgb(171, 171, 171), rgb(0, 0, 255) 33%, rgb(153, 31, 31) 100%)
25-
-webkit-radial-gradient(75% 19%, ellipse contain, rgb(171, 171, 171), rgb(0, 0, 255) 33%, rgb(153, 31, 31) 100%)
26-
-webkit-radial-gradient(75% 19%, ellipse cover, rgb(171, 171, 171), rgb(0, 0, 255) 33%, rgb(153, 31, 31) 100%)
27-
-webkit-radial-gradient(100% 19%, ellipse cover, rgb(171, 171, 171), rgb(0, 0, 255) 33%, rgb(153, 31, 31) 100%)
28-
-webkit-radial-gradient(0% 19%, ellipse cover, rgb(171, 171, 171), rgb(0, 0, 255) 33%, rgb(153, 31, 31) 100%)
29-
-webkit-radial-gradient(0% 0%, circle cover, rgb(171, 171, 171), rgb(0, 0, 255) 33%, rgb(153, 31, 31) 100%)
30-
*/
31-
3217
var reGradients = [
3318
/^(-webkit-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
3419
/^(-o-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
3520
/^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)-]+)\)$/,
3621
/^(-moz-linear-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)]+)\)$/,
37-
/^(-webkit-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(ellipse|circle)\s(contain|cover|farthest-corner|closest-corner|farthest-side|closest-side)((?:,\s(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+)\)$/
22+
/^(-webkit-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(ellipse|circle)\s([a-z-]+)((?:,\s(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+)\)$/,
23+
/^(-moz-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(ellipse|circle)\s?([a-z-]*)((?:,\s(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+)\)$/
3824
];
3925

4026
/*
@@ -46,6 +32,8 @@ var reGradients = [
4632
_html2canvas.Generate.parseGradient = function(css, bounds) {
4733
var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3;
4834

35+
console.log(css);
36+
4937
for(i = 0; i < len; i+=1){
5038
m1 = css.match(reGradients[i]);
5139
if(m1) break;
@@ -215,6 +203,7 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
215203
break;
216204

217205
case '-webkit-radial-gradient':
206+
case '-moz-radial-gradient':
218207
console.log(m1);
219208

220209
gradient = {
@@ -239,11 +228,12 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
239228

240229
// size
241230
m2 = m1[3].match(/ellipse|circle/);
242-
m3 = m1[4].match(/contain|cover|farthest-corner|closest-corner|farthest-side|closest-side/);
231+
m3 = m1[4].match(/[a-z-]*/);
243232
if(m2 && m3){
244233
switch(m3[0]){
245234
case 'farthest-corner':
246235
case 'cover': // is equivalent to farthest-corner
236+
case '': // mozilla removes "cover" from definition :(
247237
var tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));
248238
var tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
249239
var br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
@@ -332,8 +322,6 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
332322
}
333323
}
334324

335-
console.log(gradient);
336-
337325
return gradient;
338326
};
339327

0 commit comments

Comments
 (0)