"-moz-linear-gradient parsing"

src/Generate.js

@@ -15,17 +15,24 @@ _html2canvas.Generate = {};
 // -webkit-linear-gradient(left, rgb(206, 219, 233) 0%, rgb(170, 197, 222) 17%, rgb(97, 153, 199) 50%, rgb(58, 132, 195) 51%, rgb(65, 154, 214) 59%, rgb(75, 184, 240) 71%, rgb(58, 139, 194) 84%, rgb(38, 85, 139) 100%)
 // -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), to(rgb(232, 232, 232)))
 // -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 183, 161)), color-stop(0.5, rgb(140, 51, 16)), color-stop(0.51, rgb(117, 34, 1)), to(rgb(191, 110, 78)))
-// -moz-linear-gradient(100% 0%, rgb(255, 0, 0), rgb(0, 0, 255), rgb(186, 218, 85), rgba(0, 0, 255, 0.5))
+// -moz-linear-gradient(0% 50%, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0))
+// -moz-linear-gradient(0% 50%, rgb(206, 219, 233) 0%, rgb(170, 197, 222) 17%, rgb(97, 153, 199) 50%, rgb(58, 132, 195) 51%, rgb(65, 154, 214) 59%, rgb(75, 184, 240) 71%, rgb(58, 139, 194) 84%, rgb(38, 85, 139) 100%)
+// -moz-linear-gradient(50% 0%, rgb(240, 183, 161) 0%, rgb(140, 51, 16) 50%, rgb(117, 34, 1) 51%, rgb(191, 110, 78) 100%)
 
 var reGradients = [
     /^(-webkit-linear-gradient)\(([a-z\s]+)((?:,\s(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+)\)$/,
-    /^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))((?:,\s(?:from|to|color-stop)\((?:[0-9\.]+,\s)?(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)\))+)\)$/
+    /^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))((?:,\s(?:from|to|color-stop)\((?:[0-9\.]+,\s)?(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)\))+)\)$/,
+    /^(-moz-linear-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?))((?:,\s(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+)\)$/
 ];
 
 // ["-webkit-linear-gradient(left top, rgb(255, 0, 0), rgb(0, 0, 255), rgb(186, 218, 85), rgba(0, 0, 255, 0.496094))", "-webkit-linear-gradient", "left top", ", rgb(255, 0, 0), rgb(0, 0, 255), rgb(186, 218, 85), rgba(0, 0, 255, 0.496094)"]
 // ["-webkit-linear-gradient(left, rgb(206, 219, 233) 0%, rgb(170, 197, 222) 17%, rgb(97, 153, 199) 50%, rgb(58, 132, 195) 51%, rgb(65, 154, 214) 59%, rgb(75, 184, 240) 71%, rgb(58, 139, 194) 84%, rgb(38, 85, 139) 100%)", "-webkit-linear-gradient", "left", ", rgb(206, 219, 233) 0%, rgb(170, 197, 222) 17%, rgb(97, 153, 199) 50%, rgb(58, 132, 195) 51%, rgb(65, 154, 214) 59%, rgb(75, 184, 240) 71%, rgb(58, 139, 194) 84%, rgb(38, 85, 139) 100%"]
 // ["-webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), to(rgb(232, 232, 232)))", "-webkit-gradient", "linear", "0% 0", "0% 100%", ", from(rgb(252, 252, 252)), to(rgb(232, 232, 232))"]
 // ["-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 183, 161)), color-stop(0.5, rgb(140, 51, 16)), color-stop(0.51, rgb(117, 34, 1)), to(rgb(191, 110, 78)))", "-webkit-gradient", "linear", "0% 0%, 0% 100%", ", from(rgb(240, 183, 161)), color-stop(0.5, rgb(140, 51, 16)), color-stop(0.51, rgb(117, 34, 1)), to(rgb(191, 110, 78))"]
+// ["-moz-linear-gradient(0%...55, 0), rgb(0, 255, 0))", "-moz-linear-gradient", "0% 50%", ", rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0)"]
+// ["-moz-linear-gradient(0%... rgb(38, 85, 139) 100%)", "-moz-linear-gradient", "0% 50%", ", rgb(206, 219, 233) 0%..., rgb(38, 85, 139) 100%"]
+// ["-moz-linear-gradient(50...rgb(191, 110, 78) 100%)", "-moz-linear-gradient", "50% 0%", ", rgb(240, 183, 161) 0%... rgb(191, 110, 78) 100%"]
+// ["-moz-linear-gradient(0%...55, 0), rgb(0, 255, 0))", "-moz-linear-gradient", "0% 50%", ", rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0)"]
 
 _html2canvas.Generate.parseGradient = function(css, bounds) {  
     var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3;
@@ -35,6 +42,8 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
         if(m1) break;
     }
     
+    console.log(m1);
+    
     if(m1) {
         switch(m1[1]) {
             case '-webkit-linear-gradient':
@@ -132,6 +141,64 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
                     }
                 }
                 break;
+                
+            case '-moz-linear-gradient':
+                
+                gradient = {
+                    type: 'linear',
+                    x0: 0,
+                    y0: 0,
+                    x1: 0,
+                    y1: 0,
+                    colorStops: []
+                };
+                
+                // get coordinates
+                m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);
+                
+                // m2[1] == 0%   -> left
+                // m2[1] == 50%  -> center
+                // m2[1] == 100% -> right
+                
+                // m2[2] == 0%   -> top
+                // m2[2] == 50%  -> center
+                // m2[2] == 100% -> bottom
+                
+                if(m2){
+                    gradient.x0 = (m2[1] * bounds.width) / 100;
+                    gradient.y0 = (m2[2] * bounds.height) / 100;
+                    gradient.x1 = bounds.width - gradient.x0;
+                    gradient.y1 = bounds.height - gradient.y0;
+                }
+                
+                if(gradient.x0 === gradient.x1) // center
+                    gradient.x0 = gradient.x1 = 0;
+                
+                if(gradient.y0 === gradient.y1) // center
+                    gradient.y0 = gradient.y1 = 0;
+                
+                // get colors and stops
+                m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+/g);
+                if(m2){
+                    m2Len = m2.length;
+                    step = 1 / Math.max(m2Len - 1, 1);
+                    for(i = 0; i < m2Len; i+=1){
+                        m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%)?/);
+                        if(m3[2]){
+                            stop = parseFloat(m3[2]);
+                            if(m3[3]){ // percentage
+                                stop /= 100;
+                            }
+                        } else {
+                            stop = i * step;
+                        }
+                        gradient.colorStops.push({
+                            color: m3[1],
+                            stop: stop
+                        });
+                    }
+                }
+                break;
         }
     }