Fix CSS gradients fail to render when non-vendor prefix property is included #388

build/html2canvas.js

@@ -259,6 +259,8 @@ GradientContainer.prototype.TYPES = {
     RADIAL: 2
 };
 
+GradientContainer.prototype.angleRegExp = /([+-]?\d*\.?\d+)(deg|grad|rad|turn)/;
+
 function ImageContainer(src, cors) {
     this.src = src;
     this.image = new Image();
@@ -389,28 +391,43 @@ function LinearGradientContainer(imageData) {
     GradientContainer.apply(this, arguments);
     this.type = this.TYPES.LINEAR;
 
-    imageData.args[0].split(" ").forEach(function(position) {
+    var hasDirection = imageData.args[0].match(this.stepRegExp) === null;
-        switch(position) {
-            case "left":
-                this.x0 = 0;
-                this.x1 = 1;
-                break;
-            case "top":
-                this.y0 = 0;
-                this.y1 = 1;
-                break;
-            case "right":
-                this.x0 = 1;
-                this.x1 = 0;
-                break;
-            case "bottom":
-                this.y0 = 1;
-                this.y1 = 0;
-                break;
-        }
-    }, this);
 
-    this.colorStops = imageData.args.slice(1).map(function(colorStop) {
+    if (hasDirection) {
+        imageData.args[0].split(" ").reverse().forEach(function(position) {
+            switch(position) {
+                case "left":
+                    this.x0 = 0;
+                    this.x1 = 1;
+                    break;
+                case "top":
+                    this.y0 = 0;
+                    this.y1 = 1;
+                    break;
+                case "right":
+                    this.x0 = 1;
+                    this.x1 = 0;
+                    break;
+                case "bottom":
+                    this.y0 = 1;
+                    this.y1 = 0;
+                    break;
+                case "to":
+                    var y0 = this.y0;
+                    var x0 = this.x0;
+                    this.y0 = this.y1;
+                    this.x0 = this.x1;
+                    this.x1 = x0;
+                    this.y1 = y0;
+                    break;
+            }
+        }, this);
+    } else {
+        this.y0 = 0;
+        this.y1 = 1;
+    }
+
+    this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) {
         var colorStopMatch = colorStop.match(this.stepRegExp);
         return {
             color: colorStopMatch[1],

src/lineargradientcontainer.js

@@ -2,28 +2,43 @@ function LinearGradientContainer(imageData) {
     GradientContainer.apply(this, arguments);
     this.type = this.TYPES.LINEAR;
 
-    imageData.args[0].split(" ").forEach(function(position) {
+    var hasDirection = imageData.args[0].match(this.stepRegExp) === null;
-        switch(position) {
-            case "left":
-                this.x0 = 0;
-                this.x1 = 1;
-                break;
-            case "top":
-                this.y0 = 0;
-                this.y1 = 1;
-                break;
-            case "right":
-                this.x0 = 1;
-                this.x1 = 0;
-                break;
-            case "bottom":
-                this.y0 = 1;
-                this.y1 = 0;
-                break;
-        }
-    }, this);
 
-    this.colorStops = imageData.args.slice(1).map(function(colorStop) {
+    if (hasDirection) {
+        imageData.args[0].split(" ").reverse().forEach(function(position) {
+            switch(position) {
+                case "left":
+                    this.x0 = 0;
+                    this.x1 = 1;
+                    break;
+                case "top":
+                    this.y0 = 0;
+                    this.y1 = 1;
+                    break;
+                case "right":
+                    this.x0 = 1;
+                    this.x1 = 0;
+                    break;
+                case "bottom":
+                    this.y0 = 1;
+                    this.y1 = 0;
+                    break;
+                case "to":
+                    var y0 = this.y0;
+                    var x0 = this.x0;
+                    this.y0 = this.y1;
+                    this.x0 = this.x1;
+                    this.x1 = x0;
+                    this.y1 = y0;
+                    break;
+            }
+        }, this);
+    } else {
+        this.y0 = 0;
+        this.y1 = 1;
+    }
+
+    this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) {
         var colorStopMatch = colorStop.match(this.stepRegExp);
         return {
             color: colorStopMatch[1],

tests/cases/background/linear-gradient.html

@@ -99,6 +99,19 @@
                 /* W3C */
                 background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
             }
+            .linearGradient7 {
+                background: #cce5f4;
+                background: -moz-linear-gradient(top, #cce5f4 0%, #00263c 100%);
+                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cce5f4), color-stop(100%, #00263c));
+                background: -webkit-linear-gradient(top, #cce5f4 0%, #00263c 100%);
+                background: -o-linear-gradient(top, #cce5f4 0%, #00263c 100%);
+                background: -ms-linear-gradient(top, #cce5f4 0%, #00263c 100%);
+                background: linear-gradient(to bottom, #cce5f4 0%, #00263c 100%);
+            }
+
+            .linearGradient8 {
+                background: linear-gradient(to top left, #fff 0%, #00263c 100%);
+            }
         </style>
 
     </head>
@@ -110,6 +123,8 @@
             <div class="linearGradient4">&nbsp;</div>
             <div class="linearGradient5">&nbsp;</div>
             <div class="linearGradient6">&nbsp;</div>
+            <div class="linearGradient7">&nbsp;</div>
+            <div class="linearGradient8">&nbsp;</div>
         </div>
     </body>
 </html>