From e82d70328849eef9956ecb571a5f09c032feb963 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Sun, 4 Mar 2012 19:06:25 +0000
Subject: [PATCH 01/18] "tests: splitted Generate from CSS; if not supported
 pass test"

---
 tests/qunit/index.html       |  1 +
 tests/qunit/unit/css.js      | 40 ------------------------
 tests/qunit/unit/generate.js | 60 ++++++++++++++++++++++++++++++++++++
 3 files changed, 61 insertions(+), 40 deletions(-)
 create mode 100644 tests/qunit/unit/generate.js

diff --git a/tests/qunit/index.html b/tests/qunit/index.html
index bd87b61..0c233f4 100644
--- a/tests/qunit/index.html
+++ b/tests/qunit/index.html
@@ -22,6 +22,7 @@
         <script type="text/javascript" src="../../src/renderers/Canvas.js"></script>
 
         <script src="unit/css.js"></script>
+        <script src="unit/generate.js"></script>
 
 
         <style>
diff --git a/tests/qunit/unit/css.js b/tests/qunit/unit/css.js
index 96956c7..e1f6e1a 100644
--- a/tests/qunit/unit/css.js
+++ b/tests/qunit/unit/css.js
@@ -145,45 +145,5 @@ $(function() {
     }); 
     
 // TODO add backgroundPosition % tests
-
-    propsToTest['background-gradient'] = ["backgroundImage"];
-    numDivs['background-gradient'] = $('#backgroundGradients div').length;
     
-    test('background-gradient', propsToTest['background-gradient'].length * numDivs['background-gradient'], function() {  
-            
-        $('#backgroundGradients div').each(function(i, el) {
-            $.each(propsToTest['background-gradient'], function(s, prop) {
-                var src, img, canvas, ctx, id, data, len, red, green, blue, overallColor = 0;
-                
-                src = _html2canvas.Util.getCSS(el, prop),
-                img = _html2canvas.Generate.Gradient(src, {
-                    width: 50,
-                    height: 50
-                });
-                
-                canvas = document.createElement('canvas');
-                canvas.width = 50;
-                canvas.height = 50;
-                ctx = canvas.getContext('2d');
-                ctx.drawImage(img, 0, 0);
-                id = ctx.getImageData(0, 0, 50, 50);
-                data = id.data;
-                len = data.length;
-                
-                //console.log(img);
-                
-                for (var i = 0; i < len; i += 4) {
-                    red = data[i]; // red
-                    green = data[i + 1]; // green
-                    blue = data[i + 2]; // blue
-                    // i+3 is alpha (the fourth element)
-                    
-                    overallColor += (red + green + blue) / 3;
-                }
-                overallColor /= (len / 4);
-                
-                QUnit.notEqual(overallColor, 255, 'No Background Gradient - CSS was ' + src);
-            });
-        });
-    }); 
 });
\ No newline at end of file
diff --git a/tests/qunit/unit/generate.js b/tests/qunit/unit/generate.js
new file mode 100644
index 0000000..a6ecfed
--- /dev/null
+++ b/tests/qunit/unit/generate.js
@@ -0,0 +1,60 @@
+// declare vars (preventing JSHint messages)
+var test = test || function(){},
+    QUnit = QUnit || {},
+    _html2canvas = _html2canvas || {};
+
+
+module("Generate");
+$(function() {
+    
+    var propsToTest = {},
+        numDivs = {};
+    
+
+    propsToTest['Generate.Gradient'] = ["backgroundImage"];
+    numDivs['Generate.Gradient'] = $('#backgroundGradients div').length;
+    
+    test('Generate.Gradient', propsToTest['Generate.Gradient'].length * numDivs['Generate.Gradient'], function() {  
+            
+        $('#backgroundGradients div').each(function(i, el) {
+            $.each(propsToTest['Generate.Gradient'], function(s, prop) {
+                var src, img, canvas, ctx, id, data, len, red, green, blue, overallColor = 0;
+                
+                src = _html2canvas.Util.getCSS(el, prop);
+                
+                if (/^(-webkit|-o|-moz|-ms|linear)-/.test(src)) {
+                    
+                    img = _html2canvas.Generate.Gradient(src, {
+                        width: 50,
+                        height: 50
+                    });
+                    
+                    canvas = document.createElement('canvas');
+                    canvas.width = 50;
+                    canvas.height = 50;
+                    ctx = canvas.getContext('2d');
+                    ctx.drawImage(img, 0, 0);
+                    id = ctx.getImageData(0, 0, 50, 50);
+                    data = id.data;
+                    len = data.length;
+                    
+                    //console.log(img);
+                    
+                    for (var i = 0; i < len; i += 4) {
+                        red = data[i]; // red
+                        green = data[i + 1]; // green
+                        blue = data[i + 2]; // blue
+                        // i+3 is alpha (the fourth element)
+                        
+                        overallColor += (red + green + blue) / 3;
+                    }
+                    overallColor /= (len / 4);
+                    
+                    QUnit.notEqual(overallColor, 255, 'Background Gradient drawn with CSS: ' + src);
+                } else {
+                    QUnit.ok(true, 'No CSS Background Gradient support');
+                }
+            });
+        });
+    }); 
+});
\ No newline at end of file

From 954631d0458309119df1f5ffdd2793aa068db852 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Sun, 4 Mar 2012 20:18:03 +0000
Subject: [PATCH 02/18] "BugFixes"

---
 tests/qunit/unit/generate.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tests/qunit/unit/generate.js b/tests/qunit/unit/generate.js
index a6ecfed..78177bf 100644
--- a/tests/qunit/unit/generate.js
+++ b/tests/qunit/unit/generate.js
@@ -1,10 +1,12 @@
 // declare vars (preventing JSHint messages)
+/* this breaks the testing for IE<9
 var test = test || function(){},
     QUnit = QUnit || {},
     _html2canvas = _html2canvas || {};
+*/
 
 
-module("Generate");
+//module("Generate"); // <- overwrites predefined CSS-module ?
 $(function() {
     
     var propsToTest = {},

From 6637ba1bd74d92da94283e6d9496ba5703bc13b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Mon, 5 Mar 2012 19:20:44 +0000
Subject: [PATCH 03/18] "-webkit-linear-gradient color stops and rendering"

---
 src/Generate.js       | 222 ++++++++++++++++++++++--------------------
 tests/background.html |  34 +++++++
 2 files changed, 153 insertions(+), 103 deletions(-)

diff --git a/src/Generate.js b/src/Generate.js
index 932fca2..f55812b 100644
--- a/src/Generate.js
+++ b/src/Generate.js
@@ -6,124 +6,138 @@
   Released under MIT License
  */
 
+(function(){
+    
 _html2canvas.Generate = {};
 
 
+// -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-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), to(rgb(232, 232, 232)))
+// -moz-linear-gradient(100% 0%, rgb(255, 0, 0), rgb(0, 0, 255), rgb(186, 218, 85), rgba(0, 0, 255, 0.5))
+
+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((?:[a-z]+|\d{1,3}%?)\s(?:[a-z]+|\d{1,3}%?)),\s((?:[a-z]+|\d{1,3}%?)\s(?:[a-z]+|\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-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))"]
+
+_html2canvas.Generate.getColorStopsFromGradient = function(css, bounds) {
+    console.log(css);
+    
+    var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3;
+    
+    for(i = 0; i < len; i+=1){
+        m1 = css.match(reGradients[i]);
+        if(m1) break;
+    }
+    
+    console.log(m1);
+    if(m1) {
+        switch(m1[1]) {
+            case '-webkit-linear-gradient':
+                
+                gradient = {
+                        type: 'linear',
+                        x0: 0,
+                        y0: 0,
+                        x1: 0,
+                        y1: 0,
+                        colorStops: []
+                };
+                
+                // get coordinates
+                m2 = m1[2].match(/\w+/g);
+                if(m2){
+                    m2Len = m2.length;
+                    for(i = 0; i < m2Len; i+=1){
+                        switch(m2[i]) {
+                            case 'top':
+                                gradient.y1 = bounds.height;
+                                break;
+                                
+                            case 'right':
+                                gradient.x0 = bounds.width;
+                                break;
+                                
+                            case 'bottom':
+                                gradient.y0 = bounds.height;
+                                break;
+                                
+                            case 'left':
+                                gradient.x1 = bounds.width;
+                                break;
+                        }
+                    }
+                }
+                
+                // 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
+                        });
+                    }
+                    console.log(gradient);
+                }
+                break;
+                
+            case '-webkit-gradient':
+                // stop = m2[1] == 'from' ? 0.0 : 1.0;
+                break;
+        }
+    }
+    
+    return gradient;
+};
 
 _html2canvas.Generate.Gradient = function(src, bounds) {
     var canvas = document.createElement('canvas'),
     ctx = canvas.getContext('2d'),
-    tmp, 
-    p0 = 0,
-    p1 = 0,
-    p2 = 0,
-    p3 = 0,
-    steps = [],
-    position,
-    i,
-    len,
-    lingrad,
-    increment,
-    p,
-    img;
+    gradient, lingrad, i, len, img;
     
     canvas.width = bounds.width;
     canvas.height = bounds.height;
     
+    gradient = _html2canvas.Generate.getColorStopsFromGradient(src, bounds);
     
-    function getColors(input) {      
-        var j = -1, 
-        color = '', 
-        chr;
-        while( j++ < input.length ) {
-            chr = input.charAt( j );
-            if (chr === ')') {
-                color += chr;
-                steps.push( color );
-                color = '';
-                j = input.indexOf(",", j) + 1;
-                if (j === 0) {
-                    break;
-                }
-            //  while (j++ < input.length && input.charAt( j ) !== ',') {}
-            } else {
-                color += chr;
-            }
-        }
-    }
-      
-    if ( (tmp = src.match(/-webkit-linear-gradient\((.*)\)/)) !== null ) {
-        
-        position = tmp[1].split( ",", 1 )[0];
-        getColors( tmp[1].substr( position.length + 2 ) );
-        position = position.split(' ');
-        
-        for ( p = 0, len = position.length; p < len; p+=1 ) {
-            
-            switch( position[ p ] ) {
-                case 'top':
-                    p3 = bounds.height;
-                    break;
-                    
-                case 'right':
-                    p0 = bounds.width;
-                    break;
-                    
-                case 'bottom':
-                    p1 = bounds.height;
-                    break;
-                    
-                case 'left':
-                    p2 = bounds.width;
-                    break;
-            }
-            
-        }
-
-    } else if ( (tmp = src.match(/-webkit-gradient\(linear, (\d+)[%]{0,1} (\d+)[%]{0,1}, (\d+)[%]{0,1} (\d+)[%]{0,1}, from\((.*)\), to\((.*)\)\)/)) !== null ) {
-        
-        p0 = (tmp[1] * bounds.width) / 100;
-        p1 = (tmp[2] * bounds.height) / 100;
-        p2 = (tmp[3] * bounds.width) / 100;
-        p3 = (tmp[4] * bounds.height) / 100;
-        
-        steps.push(tmp[5]);
-        steps.push(tmp[6]);
-        
-    } else if ( (tmp = src.match(/-moz-linear-gradient\((\d+)[%]{0,1} (\d+)[%]{0,1}, (.*)\)/)) !== null ) {
-        
-        p0 = (tmp[1] * bounds.width) / 100;
-        p1 = (tmp[2] * bounds.width) / 100;
-        p2 = bounds.width - p0;
-        p3 = bounds.height - p1;
-        getColors( tmp[3] );
-        
-    } else {
-        return;
-    }
-
-    lingrad = ctx.createLinearGradient( p0, p1, p2, p3 );
-    increment = 1 / (steps.length - 1);
-    
-    for (i = 0, len = steps.length; i < len; i+=1) {
-        try {
-            lingrad.addColorStop(increment * i, steps[i]);
-        }
-        catch(e) {
-            h2clog(['failed to add color stop: ', e, '; tried to add: ', steps[i], '; stop: ', i, '; in: ', src]);
-        }
-    }
-    
-    ctx.fillStyle = lingrad;
-    
-    // draw shapes
-    ctx.fillRect(0, 0, bounds.width,bounds.height);
-
     img = new Image();
-    img.src = canvas.toDataURL();
+    
+    if(gradient){
+        lingrad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1);
+        
+        for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {
+            try {
+                lingrad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color);
+            }
+            catch(e) {
+                h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]);
+            }
+        }
+        
+        ctx.fillStyle = lingrad;
+        ctx.fillRect(0, 0, bounds.width, bounds.height);
+    
+        img.src = canvas.toDataURL();
+    }
     
     return img;
-
 };
 
 _html2canvas.Generate.ListAlpha = function(number) {
@@ -160,3 +174,5 @@ _html2canvas.Generate.ListRoman = function(number) {
     return roman;
    
 };
+
+})();
\ No newline at end of file
diff --git a/tests/background.html b/tests/background.html
index ef97595..8b0a184 100644
--- a/tests/background.html
+++ b/tests/background.html
@@ -54,6 +54,38 @@
             .linearGradient2 {
                 background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), to(rgb(232, 232, 232)));
             }
+            
+            .linearGradient3 {
+                /* FF 3.6+ */
+                background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
+                /* Chrome,Safari4+ */
+                background: -webkit-gradient(linear, left top, right top, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
+                /* Chrome 10+, Safari 5.1+ */
+                background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00);
+                /* Opera 11.10+ */
+                background: -o-linear-gradient(left, #ff0000, #ffff00, #00ff00);
+                /* IE 10+ */
+                background: -ms-linear-gradient(left, #ff0000, #ffff00, #00ff00);
+                /* W3C */
+                background: linear-gradient(left, #ff0000, #ffff00, #00ff00);
+            }
+            
+            .linearGradient4 {
+                /* 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+ */
+                background: -webkit-gradient(linear, left top, right top, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b));
+                /* Chrome 10+, Safari 5.1+ */
+                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+ */
+                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%);
+            }
         </style>
 
     </head>
@@ -61,6 +93,8 @@
         <div class="medium">
             <div class="linearGradient">&nbsp;</div>
             <div class="linearGradient2">&nbsp;</div>
+            <div class="linearGradient3">&nbsp;</div>
+            <div class="linearGradient4">&nbsp;</div>
         </div>
 
   

From e479c952f7a7ea2b503118d3d382911622d4ec2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Mon, 5 Mar 2012 19:33:52 +0000
Subject: [PATCH 04/18] "added another background gradient to backgrounds.html"

---
 src/Generate.js       |  6 +-----
 tests/background.html | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/Generate.js b/src/Generate.js
index f55812b..c6c2a3f 100644
--- a/src/Generate.js
+++ b/src/Generate.js
@@ -25,9 +25,7 @@ var reGradients = [
 // ["-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))"]
 
-_html2canvas.Generate.getColorStopsFromGradient = function(css, bounds) {
-    console.log(css);
-    
+_html2canvas.Generate.getColorStopsFromGradient = function(css, bounds) {  
     var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3;
     
     for(i = 0; i < len; i+=1){
@@ -35,7 +33,6 @@ _html2canvas.Generate.getColorStopsFromGradient = function(css, bounds) {
         if(m1) break;
     }
     
-    console.log(m1);
     if(m1) {
         switch(m1[1]) {
             case '-webkit-linear-gradient':
@@ -94,7 +91,6 @@ _html2canvas.Generate.getColorStopsFromGradient = function(css, bounds) {
                             stop: stop
                         });
                     }
-                    console.log(gradient);
                 }
                 break;
                 
diff --git a/tests/background.html b/tests/background.html
index 8b0a184..ce221d9 100644
--- a/tests/background.html
+++ b/tests/background.html
@@ -86,6 +86,23 @@
                 /* W3C */
                 background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
             }
+            
+            .linearGradient5 {
+                /* 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+ */
+                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0b7a1), color-stop(50%, #8c3310), color-stop(51%, #752201), color-stop(100%, #bf6e4e));
+                /* Chrome 10+, Safari 5.1+ */
+                background: -webkit-linear-gradient(top,  #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
+                /* Opera 11.10+ */
+                background: -o-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
+                /* IE 10+ */
+                background: -ms-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
+                /* W3C */
+                background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
+            }
         </style>
 
     </head>
@@ -95,6 +112,7 @@
             <div class="linearGradient2">&nbsp;</div>
             <div class="linearGradient3">&nbsp;</div>
             <div class="linearGradient4">&nbsp;</div>
+            <div class="linearGradient5">&nbsp;</div>
         </div>
 
   

From ae8d499942e6a2ea2b0d51d11007e677032d73d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Mon, 5 Mar 2012 19:37:54 +0000
Subject: [PATCH 05/18] "small bugfix"

---
 src/Generate.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Generate.js b/src/Generate.js
index c6c2a3f..79fedf6 100644
--- a/src/Generate.js
+++ b/src/Generate.js
@@ -80,7 +80,7 @@ _html2canvas.Generate.getColorStopsFromGradient = function(css, bounds) {
                         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
+                            if(m3[3]){ // percentage
                                 stop /= 100;
                             }
                         } else {
@@ -115,7 +115,7 @@ _html2canvas.Generate.Gradient = function(src, bounds) {
     
     img = new Image();
     
-    if(gradient){
+    if(gradient && gradient.type === 'linear'){
         lingrad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1);
         
         for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {

From 75ba8679888a1c5df11746e31b39aa54ff41201a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Mon, 5 Mar 2012 21:04:25 +0000
Subject: [PATCH 06/18] "added tests for getColorStopsFromGradient"

---
 src/Generate.js              | 12 ++---
 tests/qunit/unit/generate.js | 98 +++++++++++++++++++++++++++++++++++-
 2 files changed, 102 insertions(+), 8 deletions(-)

diff --git a/src/Generate.js b/src/Generate.js
index 79fedf6..ad7d375 100644
--- a/src/Generate.js
+++ b/src/Generate.js
@@ -38,12 +38,12 @@ _html2canvas.Generate.getColorStopsFromGradient = function(css, bounds) {
             case '-webkit-linear-gradient':
                 
                 gradient = {
-                        type: 'linear',
-                        x0: 0,
-                        y0: 0,
-                        x1: 0,
-                        y1: 0,
-                        colorStops: []
+                    type: 'linear',
+                    x0: 0,
+                    y0: 0,
+                    x1: 0,
+                    y1: 0,
+                    colorStops: []
                 };
                 
                 // get coordinates
diff --git a/tests/qunit/unit/generate.js b/tests/qunit/unit/generate.js
index 78177bf..e11c4f8 100644
--- a/tests/qunit/unit/generate.js
+++ b/tests/qunit/unit/generate.js
@@ -10,7 +10,101 @@ var test = test || function(){},
 $(function() {
     
     var propsToTest = {},
-        numDivs = {};
+        numDivs = {},
+        expected = {};
+        
+    propsToTest['Generate.getColorStopsFromGradient'] = ["backgroundImage"];
+    numDivs['Generate.getColorStopsFromGradient'] = $('#backgroundGradients div').length;
+    expected['Generate.getColorStopsFromGradient'] = [
+        {
+            type: 'linear',
+            x0: 0,
+            y0: 0,
+            x1: 50,
+            y1: 0,
+            colorStops: [
+                {
+                    color: "rgb(255, 0, 0)",
+                    stop: 0
+                },
+                {
+                    color: "rgb(255, 255, 0)",
+                    stop: 0.5
+                },
+                {
+                    color: "rgb(0, 255, 0)",
+                    stop: 1
+                }
+            ]
+        },
+        {
+            type: 'linear',
+            x0: 0,
+            y0: 0,
+            x1: 50,
+            y1: 0,
+            colorStops: [
+                {
+                    color: "rgb(206, 219, 233)",
+                    stop: 0
+                },
+                {
+                    color: "rgb(170, 197, 222)",
+                    stop: 0.17
+                },
+                {
+                    color: "rgb(97, 153, 199)",
+                    stop: 0.5
+                },
+                {
+                    color: "rgb(58, 132, 195)",
+                    stop: 0.51
+                },
+                {
+                    color: "rgb(65, 154, 214)",
+                    stop: 0.59
+                },
+                {
+                    color: "rgb(75, 184, 240)",
+                    stop: 0.71
+                },
+                {
+                    color: "rgb(58, 139, 194)",
+                    stop: 0.84
+                },
+                {
+                    color: "rgb(38, 85, 139)",
+                    stop: 1
+                }
+            ]
+        }
+    ];
+    
+    test('Generate.getColorStopsFromGradient', propsToTest['Generate.getColorStopsFromGradient'].length * numDivs['Generate.getColorStopsFromGradient'], function() {  
+            
+        $('#backgroundGradients div').each(function(i, el) {
+            $.each(propsToTest['Generate.getColorStopsFromGradient'], function(s, prop) {
+                var src, gradient, exptd;
+                
+                src = _html2canvas.Util.getCSS(el, prop);
+                
+                if (/^(-webkit|-o|-moz|-ms|linear)-/.test(src)) {
+                    
+                    gradient = _html2canvas.Generate.getColorStopsFromGradient(src, {
+                        width: 50,
+                        height: 50
+                    });
+                    
+                    // compare
+                    exptd = expected['Generate.getColorStopsFromGradient'][i];
+                    
+                    QUnit.deepEqual(gradient, exptd, 'Parsed gradient; got: ' + JSON.stringify(gradient));
+                } else {
+                    QUnit.ok(true, 'No CSS Background Gradient support');
+                }
+            });
+        });
+    });
     
 
     propsToTest['Generate.Gradient'] = ["backgroundImage"];
@@ -58,5 +152,5 @@ $(function() {
                 }
             });
         });
-    }); 
+    });
 });
\ No newline at end of file

From a4f13de455bac5613c3110acca72181801b1e3fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Mon, 5 Mar 2012 22:21:28 +0000
Subject: [PATCH 07/18] "renamed getColorStopsFromGradient to parseGradient"

---
 src/Generate.js              |  4 ++--
 tests/qunit/unit/generate.js | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/Generate.js b/src/Generate.js
index ad7d375..df11a28 100644
--- a/src/Generate.js
+++ b/src/Generate.js
@@ -25,7 +25,7 @@ var reGradients = [
 // ["-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))"]
 
-_html2canvas.Generate.getColorStopsFromGradient = function(css, bounds) {  
+_html2canvas.Generate.parseGradient = function(css, bounds) {  
     var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3;
     
     for(i = 0; i < len; i+=1){
@@ -111,7 +111,7 @@ _html2canvas.Generate.Gradient = function(src, bounds) {
     canvas.width = bounds.width;
     canvas.height = bounds.height;
     
-    gradient = _html2canvas.Generate.getColorStopsFromGradient(src, bounds);
+    gradient = _html2canvas.Generate.parseGradient(src, bounds);
     
     img = new Image();
     
diff --git a/tests/qunit/unit/generate.js b/tests/qunit/unit/generate.js
index e11c4f8..fce1706 100644
--- a/tests/qunit/unit/generate.js
+++ b/tests/qunit/unit/generate.js
@@ -13,9 +13,9 @@ $(function() {
         numDivs = {},
         expected = {};
         
-    propsToTest['Generate.getColorStopsFromGradient'] = ["backgroundImage"];
-    numDivs['Generate.getColorStopsFromGradient'] = $('#backgroundGradients div').length;
-    expected['Generate.getColorStopsFromGradient'] = [
+    propsToTest['Generate.parseGradient'] = ["backgroundImage"];
+    numDivs['Generate.parseGradient'] = $('#backgroundGradients div').length;
+    expected['Generate.parseGradient'] = [
         {
             type: 'linear',
             x0: 0,
@@ -80,23 +80,23 @@ $(function() {
         }
     ];
     
-    test('Generate.getColorStopsFromGradient', propsToTest['Generate.getColorStopsFromGradient'].length * numDivs['Generate.getColorStopsFromGradient'], function() {  
+    test('Generate.parseGradient', propsToTest['Generate.parseGradient'].length * numDivs['Generate.parseGradient'], function() {  
             
         $('#backgroundGradients div').each(function(i, el) {
-            $.each(propsToTest['Generate.getColorStopsFromGradient'], function(s, prop) {
+            $.each(propsToTest['Generate.parseGradient'], function(s, prop) {
                 var src, gradient, exptd;
                 
                 src = _html2canvas.Util.getCSS(el, prop);
                 
                 if (/^(-webkit|-o|-moz|-ms|linear)-/.test(src)) {
                     
-                    gradient = _html2canvas.Generate.getColorStopsFromGradient(src, {
+                    gradient = _html2canvas.Generate.parseGradient(src, {
                         width: 50,
                         height: 50
                     });
                     
                     // compare
-                    exptd = expected['Generate.getColorStopsFromGradient'][i];
+                    exptd = expected['Generate.parseGradient'][i];
                     
                     QUnit.deepEqual(gradient, exptd, 'Parsed gradient; got: ' + JSON.stringify(gradient));
                 } else {

From 163219b656db84032c1e25fe7a71a7254969f7f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Mon, 5 Mar 2012 23:03:36 +0000
Subject: [PATCH 08/18] "added -webkit-gradient parsing + tests"

---
 src/Generate.js              | 39 ++++++++++++++++++++++++++++++++++--
 tests/qunit/index.html       | 15 ++++++++++++++
 tests/qunit/unit/generate.js | 25 +++++++++++++++++++++++
 3 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/src/Generate.js b/src/Generate.js
index df11a28..e23d1f8 100644
--- a/src/Generate.js
+++ b/src/Generate.js
@@ -14,16 +14,18 @@ _html2canvas.Generate = {};
 // -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-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))
 
 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((?:[a-z]+|\d{1,3}%?)\s(?:[a-z]+|\d{1,3}%?)),\s((?:[a-z]+|\d{1,3}%?)\s(?:[a-z]+|\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\.]+)?\)\))+)\)$/
 ];
 
 // ["-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))"]
 
 _html2canvas.Generate.parseGradient = function(css, bounds) {  
     var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3;
@@ -95,7 +97,40 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
                 break;
                 
             case '-webkit-gradient':
-                // stop = m2[1] == 'from' ? 0.0 : 1.0;
+                
+                gradient = {
+                    type: m1[2],
+                    x0: 0,
+                    y0: 0,
+                    x1: 0,
+                    y1: 0,
+                    colorStops: []
+                };
+                
+                // get coordinates
+                m2 = m1[3].match(/(\d{1,3})%?\s(\d{1,3})%?,\s(\d{1,3})%?\s(\d{1,3})%?/);
+                if(m2){
+                    gradient.x0 = (m2[1] * bounds.width) / 100;
+                    gradient.y0 = (m2[2] * bounds.height) / 100;
+                    gradient.x1 = (m2[3] * bounds.width) / 100;
+                    gradient.y1 = (m2[4] * bounds.height) / 100;
+                }
+                
+                // get colors and stops
+                m2 = m1[4].match(/((?:from|to|color-stop)\((?:[0-9\.]+,\s)?(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)\))+/g);
+                if(m2){
+                    m2Len = m2.length;
+                    for(i = 0; i < m2Len; i+=1){
+                        m3 = m2[i].match(/(from|to|color-stop)\(([0-9\.]+)?(?:,\s)?((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\)/);
+                        stop = parseFloat(m3[2]);
+                        if(m3[1] === 'from') stop = 0.0;
+                        if(m3[1] === 'to') stop = 1.0;
+                        gradient.colorStops.push({
+                            color: m3[3],
+                            stop: stop
+                        });
+                    }
+                }
                 break;
         }
     }
diff --git a/tests/qunit/index.html b/tests/qunit/index.html
index c9a844c..57604e5 100644
--- a/tests/qunit/index.html
+++ b/tests/qunit/index.html
@@ -121,10 +121,25 @@
                     /* 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+ */
+                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0b7a1), color-stop(50%, #8c3310), color-stop(51%, #752201), color-stop(100%, #bf6e4e));
+                    /* Opera 11.10+ */
+                    background: -o-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
+                    /* IE 10+ */
+                    background: -ms-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
+                    /* W3C */
+                    background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
+                }
             </style>
             <div id="backgroundGradients">
                 <div class="linearGradientSimple"></div>
                 <div class="linearGradientWithStops"></div>
+                <div class="linearGradient3"></div>
             </div>
         </div>
         <!--
diff --git a/tests/qunit/unit/generate.js b/tests/qunit/unit/generate.js
index fce1706..29a3a21 100644
--- a/tests/qunit/unit/generate.js
+++ b/tests/qunit/unit/generate.js
@@ -77,6 +77,31 @@ $(function() {
                     stop: 1
                 }
             ]
+        },
+        {
+            type: "linear",
+            x0: 0,
+            y0: 0,
+            x1: 0,
+            y1: 50,
+            colorStops: [
+                {
+                    color: "rgb(240, 183, 161)",
+                    stop: 0
+                },
+                {
+                    color: "rgb(140, 51, 16)",
+                    stop: 0.5
+                },
+                {
+                    color: "rgb(117, 34, 1)",
+                    stop: 0.51
+                },
+                {
+                    color: "rgb(191, 110, 78)",
+                    stop: 1
+                }
+            ]
         }
     ];
     

From b65a8509972bdbcd4c7d5e6b75d6eac6b74d9216 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Mon, 5 Mar 2012 23:15:58 +0000
Subject: [PATCH 09/18] "cleanup test"

---
 tests/qunit/unit/generate.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/tests/qunit/unit/generate.js b/tests/qunit/unit/generate.js
index 29a3a21..4a2f846 100644
--- a/tests/qunit/unit/generate.js
+++ b/tests/qunit/unit/generate.js
@@ -109,7 +109,7 @@ $(function() {
             
         $('#backgroundGradients div').each(function(i, el) {
             $.each(propsToTest['Generate.parseGradient'], function(s, prop) {
-                var src, gradient, exptd;
+                var src, gradient;
                 
                 src = _html2canvas.Util.getCSS(el, prop);
                 
@@ -120,10 +120,7 @@ $(function() {
                         height: 50
                     });
                     
-                    // compare
-                    exptd = expected['Generate.parseGradient'][i];
-                    
-                    QUnit.deepEqual(gradient, exptd, 'Parsed gradient; got: ' + JSON.stringify(gradient));
+                    QUnit.deepEqual(gradient, expected['Generate.parseGradient'][i], 'Parsed gradient; got: ' + JSON.stringify(gradient));
                 } else {
                     QUnit.ok(true, 'No CSS Background Gradient support');
                 }

From f387267c0fcf6913d9b32cceb076bca60b7fda80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Mon, 5 Mar 2012 23:22:01 +0000
Subject: [PATCH 10/18] "TODO: implement radial gradient generation"

---
 src/Generate.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/Generate.js b/src/Generate.js
index e23d1f8..b1cb725 100644
--- a/src/Generate.js
+++ b/src/Generate.js
@@ -166,6 +166,9 @@ _html2canvas.Generate.Gradient = function(src, bounds) {
         ctx.fillRect(0, 0, bounds.width, bounds.height);
     
         img.src = canvas.toDataURL();
+    } else if(gradient && gradient.type === 'radial'){
+        // TODO: implement radial gradient generation
+        h2clog('No radial gradient support implemented');
     }
     
     return img;

From 51b2c01b0c3644f00e1133f20a2e65f0b6efb7d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Tue, 6 Mar 2012 21:11:01 +0000
Subject: [PATCH 11/18] "-moz-linear-gradient parsing"

---
 src/Generate.js | 71 +++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 69 insertions(+), 2 deletions(-)

diff --git a/src/Generate.js b/src/Generate.js
index b1cb725..c50f851 100644
--- a/src/Generate.js
+++ b/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;
         }
     }
     

From ffd998b01586cd310f868bda01b5816786c04595 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Tue, 6 Mar 2012 21:26:43 +0000
Subject: [PATCH 12/18] "-o-linear-gradient parsing"

---
 src/Generate.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/Generate.js b/src/Generate.js
index c50f851..c21611b 100644
--- a/src/Generate.js
+++ b/src/Generate.js
@@ -18,9 +18,13 @@ _html2canvas.Generate = {};
 // -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%)
+// -o-linear-gradient(left, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0))
+// -o-linear-gradient(left, rgb(206, 219, 233) 0px, 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%)
+// -o-linear-gradient(top, rgb(240, 183, 161) 0px, 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}%)?)+)\)$/,
+    /^(-o-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}(?:%|px))?)+)\)$/,
     /^(-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}%)?)+)\)$/
 ];
@@ -47,6 +51,7 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
     if(m1) {
         switch(m1[1]) {
             case '-webkit-linear-gradient':
+            case '-o-linear-gradient':
                 
                 gradient = {
                     type: 'linear',
@@ -83,16 +88,18 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
                 }
                 
                 // 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);
+                m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/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})?(%)?/);
+                        m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/);
                         if(m3[2]){
                             stop = parseFloat(m3[2]);
-                            if(m3[3]){ // percentage
+                            if(m3[3] === '%'){
                                 stop /= 100;
+                            } else { // px - stupid opera
+                                stop /= bounds.width;
                             }
                         } else {
                             stop = i * step;

From 82446ee3c3051c629c08006b34f6e7071e2d2832 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Tue, 6 Mar 2012 21:36:29 +0000
Subject: [PATCH 13/18] "cleanup"

---
 src/Generate.js | 31 ++++---------------------------
 1 file changed, 4 insertions(+), 27 deletions(-)

diff --git a/src/Generate.js b/src/Generate.js
index c21611b..48baf16 100644
--- a/src/Generate.js
+++ b/src/Generate.js
@@ -10,34 +10,13 @@
     
 _html2canvas.Generate = {};
 
-
-// -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-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(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%)
-// -o-linear-gradient(left, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0))
-// -o-linear-gradient(left, rgb(206, 219, 233) 0px, 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%)
-// -o-linear-gradient(top, rgb(240, 183, 161) 0px, 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}%)?)+)\)$/,
-    /^(-o-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}(?:%|px))?)+)\)$/,
-    /^(-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)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
+    /^(-o-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
+    /^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)-]+)\)$/,
+    /^(-moz-linear-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)]+)\)$/
 ];
 
-// ["-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;
     
@@ -46,8 +25,6 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
         if(m1) break;
     }
     
-    console.log(m1);
-    
     if(m1) {
         switch(m1[1]) {
             case '-webkit-linear-gradient':

From 57bff5292d43abe9592a6a55d1a2cce2c2323f11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Tue, 6 Mar 2012 21:41:22 +0000
Subject: [PATCH 14/18] "added contributors"

---
 src/Generate.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/Generate.js b/src/Generate.js
index 48baf16..1c725df 100644
--- a/src/Generate.js
+++ b/src/Generate.js
@@ -2,6 +2,10 @@
   html2canvas @VERSION@ <http://html2canvas.hertzen.com>
   Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
   http://www.twitter.com/niklasvh
+  
+  Contributor(s):
+      Niklas von Hertzen <http://www.twitter.com/niklasvh>
+      André Fiedler      <http://www.twitter.com/sonnenkiste>
 
   Released under MIT License
  */

From cde96bb17e3eeae767df8916f75ee8bb7100a287 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Tue, 6 Mar 2012 21:45:38 +0000
Subject: [PATCH 15/18] =?UTF-8?q?"added=20TODO=C2=B4s"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Generate.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/Generate.js b/src/Generate.js
index 1c725df..cf31885 100644
--- a/src/Generate.js
+++ b/src/Generate.js
@@ -21,6 +21,11 @@ var reGradients = [
     /^(-moz-linear-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)]+)\)$/
 ];
 
+/*
+ * TODO: Add IE10 vendor prefix (-ms) support
+ * TODO: Add radial gradient parsing
+ * TODO: Maybe some RegExp optimizations are possible ;o)
+ */
 _html2canvas.Generate.parseGradient = function(css, bounds) {  
     var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3;
     

From a0b498fbf50678db446ecbdd71dda2852a693a1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Tue, 6 Mar 2012 21:50:09 +0000
Subject: [PATCH 16/18] "added TODO"

---
 src/Generate.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Generate.js b/src/Generate.js
index cf31885..41827e0 100644
--- a/src/Generate.js
+++ b/src/Generate.js
@@ -23,6 +23,7 @@ var reGradients = [
 
 /*
  * TODO: Add IE10 vendor prefix (-ms) support
+ * TODO: Add W3C gradient (linear-gradient) support
  * TODO: Add radial gradient parsing
  * TODO: Maybe some RegExp optimizations are possible ;o)
  */

From 6390c1c7acbab1c649066339b59b725941077e26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Wed, 7 Mar 2012 18:20:09 +0000
Subject: [PATCH 17/18] "center gradient BugFix"

---
 src/Generate.js              | 24 ++++++++++++++----------
 tests/qunit/index.html       |  6 +++---
 tests/qunit/unit/generate.js | 15 ++++++++-------
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/Generate.js b/src/Generate.js
index 41827e0..48b7fd9 100644
--- a/src/Generate.js
+++ b/src/Generate.js
@@ -42,10 +42,10 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
                 
                 gradient = {
                     type: 'linear',
-                    x0: 0,
-                    y0: 0,
-                    x1: 0,
-                    y1: 0,
+                    x0: null,
+                    y0: null,
+                    x1: null,
+                    y1: null,
                     colorStops: []
                 };
                 
@@ -56,23 +56,33 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
                     for(i = 0; i < m2Len; i+=1){
                         switch(m2[i]) {
                             case 'top':
+                                gradient.y0 = 0;
                                 gradient.y1 = bounds.height;
                                 break;
                                 
                             case 'right':
                                 gradient.x0 = bounds.width;
+                                gradient.x1 = 0;
                                 break;
                                 
                             case 'bottom':
                                 gradient.y0 = bounds.height;
+                                gradient.y1 = 0;
                                 break;
                                 
                             case 'left':
+                                gradient.x0 = 0;
                                 gradient.x1 = bounds.width;
                                 break;
                         }
                     }
                 }
+                if(gradient.x0 === null && gradient.x1 === null){ // center
+                    gradient.x0 = gradient.x1 = bounds.width / 2;
+                }
+                if(gradient.y0 === null && gradient.y1 === null){ // center
+                    gradient.y0 = gradient.y1 = bounds.height / 2;
+                }
                 
                 // 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}(?:%|px))?)+/g);
@@ -165,12 +175,6 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
                     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){
diff --git a/tests/qunit/index.html b/tests/qunit/index.html
index 57604e5..14c08a4 100644
--- a/tests/qunit/index.html
+++ b/tests/qunit/index.html
@@ -95,7 +95,7 @@
                     /* FF 3.6+ */
                     background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
                     /* Chrome,Safari4+ */
-                    background: -webkit-gradient(linear, left top, right top, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
+                    background: -webkit-gradient(linear, left center, right center, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
                     /* Chrome 10+, Safari 5.1+ */
                     background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00);
                     /* Opera 11.10+ */
@@ -111,7 +111,7 @@
                     /* 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+ */
-                    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b));
+                    background: -webkit-gradient(linear, left center, right center, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b));
                     /* Chrome 10+, Safari 5.1+ */
                     background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
                     /* Opera 11.10+ */
@@ -127,7 +127,7 @@
                     /* FF 3.6+ */
                     background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
                     /* Chrome, Safari 4+ */
-                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0b7a1), color-stop(50%, #8c3310), color-stop(51%, #752201), color-stop(100%, #bf6e4e));
+                    background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #f0b7a1), color-stop(50%, #8c3310), color-stop(51%, #752201), color-stop(100%, #bf6e4e));
                     /* Opera 11.10+ */
                     background: -o-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
                     /* IE 10+ */
diff --git a/tests/qunit/unit/generate.js b/tests/qunit/unit/generate.js
index 4a2f846..eb358ed 100644
--- a/tests/qunit/unit/generate.js
+++ b/tests/qunit/unit/generate.js
@@ -19,9 +19,9 @@ $(function() {
         {
             type: 'linear',
             x0: 0,
-            y0: 0,
+            y0: 25,
             x1: 50,
-            y1: 0,
+            y1: 25,
             colorStops: [
                 {
                     color: "rgb(255, 0, 0)",
@@ -40,9 +40,9 @@ $(function() {
         {
             type: 'linear',
             x0: 0,
-            y0: 0,
+            y0: 25,
             x1: 50,
-            y1: 0,
+            y1: 25,
             colorStops: [
                 {
                     color: "rgb(206, 219, 233)",
@@ -80,9 +80,9 @@ $(function() {
         },
         {
             type: "linear",
-            x0: 0,
+            x0: 25,
             y0: 0,
-            x1: 0,
+            x1: 25,
             y1: 50,
             colorStops: [
                 {
@@ -120,7 +120,8 @@ $(function() {
                         height: 50
                     });
                     
-                    QUnit.deepEqual(gradient, expected['Generate.parseGradient'][i], 'Parsed gradient; got: ' + JSON.stringify(gradient));
+                    //QUnit.deepEqual(gradient, expected['Generate.parseGradient'][i], 'Parsed gradient; got: ' + JSON.stringify(gradient));
+                    QUnit.deepEqual(gradient, expected['Generate.parseGradient'][i], 'Parsed gradient with CSS: ' + src);
                 } else {
                     QUnit.ok(true, 'No CSS Background Gradient support');
                 }

From 211467fcc1e0ad73cd3bd6b53a75a9552045a4ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= <kontakt@visualdrugs.net>
Date: Wed, 7 Mar 2012 18:24:43 +0000
Subject: [PATCH 18/18] "better unit test for gradient parsing, check inverted
 width/height"

---
 tests/qunit/unit/generate.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/tests/qunit/unit/generate.js b/tests/qunit/unit/generate.js
index eb358ed..7f1f5d6 100644
--- a/tests/qunit/unit/generate.js
+++ b/tests/qunit/unit/generate.js
@@ -19,9 +19,9 @@ $(function() {
         {
             type: 'linear',
             x0: 0,
-            y0: 25,
+            y0: 35,
             x1: 50,
-            y1: 25,
+            y1: 35,
             colorStops: [
                 {
                     color: "rgb(255, 0, 0)",
@@ -40,9 +40,9 @@ $(function() {
         {
             type: 'linear',
             x0: 0,
-            y0: 25,
+            y0: 35,
             x1: 50,
-            y1: 25,
+            y1: 35,
             colorStops: [
                 {
                     color: "rgb(206, 219, 233)",
@@ -83,7 +83,7 @@ $(function() {
             x0: 25,
             y0: 0,
             x1: 25,
-            y1: 50,
+            y1: 70,
             colorStops: [
                 {
                     color: "rgb(240, 183, 161)",
@@ -117,7 +117,7 @@ $(function() {
                     
                     gradient = _html2canvas.Generate.parseGradient(src, {
                         width: 50,
-                        height: 50
+                        height: 70
                     });
                     
                     //QUnit.deepEqual(gradient, expected['Generate.parseGradient'][i], 'Parsed gradient; got: ' + JSON.stringify(gradient));