Fix niklasvh#688 fatal exception on unmatched color stop

Author: niklasvh

dist/html2canvas.js

@@ -2412,6 +2412,8 @@ module.exports = ImageLoader;
 var GradientContainer = require('./gradientcontainer');
 var Color = require('./color');
 
+var COLOR_STOP_REGEXP = /^(.*)\s*(\d{1,3})?(%|px)?$/;
+
 function LinearGradientContainer(imageData) {
     GradientContainer.apply(this, arguments);
     this.type = this.TYPES.LINEAR;
@@ -2452,13 +2454,16 @@ function LinearGradientContainer(imageData) {
         this.y1 = 1;
     }
 
-    this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) {
-        var colorStopMatch = colorStop.match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)|\w+)\s*(\d{1,3})?(%|px)?/);
-        return {
-            color: new Color(colorStopMatch[1]),
-            stop: colorStopMatch[3] === "%" ? colorStopMatch[2] / 100 : null
-        };
-    }, this);
+
+    this.colorStops = imageData.args.slice(hasDirection ? 1 : 0)
+        .map(function(colorStop) { return colorStop.match(COLOR_STOP_REGEXP);})
+        .filter(function(colorStopMatch) { return !!colorStopMatch;})
+        .map(function(colorStopMatch) {
+            return {
+                color: new Color(colorStopMatch[1]),
+                stop: colorStopMatch[3] === "%" ? colorStopMatch[2] / 100 : null
+            };
+        });
 
     if (this.colorStops[0].stop === null) {
         this.colorStops[0].stop = 0;

dist/html2canvas.min.js

@@ -1,6 +1,8 @@
 var GradientContainer = require('./gradientcontainer');
 var Color = require('./color');
 
+var COLOR_STOP_REGEXP = /^(.*)\s*(\d{1,3})?(%|px)?$/;
+
 function LinearGradientContainer(imageData) {
     GradientContainer.apply(this, arguments);
     this.type = this.TYPES.LINEAR;
@@ -41,13 +43,16 @@ function LinearGradientContainer(imageData) {
         this.y1 = 1;
     }
 
-    this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) {
-        var colorStopMatch = colorStop.match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)|\w+)\s*(\d{1,3})?(%|px)?/);
-        return {
-            color: new Color(colorStopMatch[1]),
-            stop: colorStopMatch[3] === "%" ? colorStopMatch[2] / 100 : null
-        };
-    }, this);
+
+    this.colorStops = imageData.args.slice(hasDirection ? 1 : 0)
+        .map(function(colorStop) { return colorStop.match(COLOR_STOP_REGEXP);})
+        .filter(function(colorStopMatch) { return !!colorStopMatch;})
+        .map(function(colorStopMatch) {
+            return {
+                color: new Color(colorStopMatch[1]),
+                stop: colorStopMatch[3] === "%" ? colorStopMatch[2] / 100 : null
+            };
+        });
 
     if (this.colorStops[0].stop === null) {
         this.colorStops[0].stop = 0;

src/lineargradientcontainer.js

@@ -35,6 +35,15 @@ describe("Gradients", function() {
                 " to(rgb(191, 110, 78))"
             ]
         },
+        {
+            method: 'linear-gradient',
+            args: [
+                "0deg",
+                " rgb(221, 221, 221)",
+                " rgb(221, 221, 221) 50%",
+                " transparent 50%"
+            ]
+        },
         {
             method: "radial-gradient",
             args: [
@@ -97,7 +106,7 @@ describe("Gradients", function() {
         }
     ];
 
-    $('#backgroundGradients div').each(function(i, node) {
+    [].slice.call(document.querySelectorAll('#backgroundGradients div'), 0).forEach(function(node, i) {
         var container = new html2canvas.NodeContainer(node, null);
         var value = container.css("backgroundImage");
         it(value, function() {

tests/mocha/gradients.js

@@ -108,6 +108,11 @@
             /* W3C */
             background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
         }
+
+        .linearGradient4 {
+            background: linear-gradient(0deg, #ddd, #ddd 50%, transparent 50%);
+        }
+
         .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%);
@@ -156,6 +161,7 @@
         <div class="linearGradientSimple"></div>
         <div class="linearGradientWithStops"></div>
         <div class="linearGradient3"></div>
+        <div class="linearGradient4"></div>
         <div class="radialGradient"></div>
         <div class="radialGradient2"></div>
         <div class="radialGradient3"></div>