0.5.0-beta3

Adds .editorconfig

.editorconfig

@@ -0,0 +1,17 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+indent_style = space
+indent_size = 4
+
+[{.travis.yml,package.json}]
+# The indent size used in the `package.json` file cannot be changed
+# https://github.com/npm/npm/pull/3180#issuecomment-16336516
+indent_size = 2

.gitignore

@@ -1,7 +1,6 @@
 /nbproject/
 image.jpg
 /.project
-dist/
 /.settings/
 node_modules/
 .envrc

.jshintrc

@@ -15,5 +15,5 @@
     "globals": {
       "jQuery": true
     },
-    "predef": ["-Promise", "define"]
+    "predef": ["Promise", "define"]
 }

.npmignore

@@ -3,3 +3,8 @@ examples/
 Gruntfile.js
 bower.json
 src/
+*.iml
+.idea/
+.npmignore
+.jshintrc
+.travis.yml

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-- '0.10'
+- '4.0'
 env:
   global:
   - secure: eW41gIqOizwO4pTgWnAAbW75AP7F+CK9qfSed/fSh4sJ9HWMIY1YRIaY8gjr+6jV/f7XVHcXuym6ZxgINYSkVKbF1JKxBJNLOXtSgNbVHSic58pYFvUjwxIBI9aPig9uux1+DbnpWqXFDTcACJSevQZE0xwmjdrSkDLgB0G34v8=
@@ -22,7 +22,7 @@ deploy:
   - provider: npm
     email: niklasvh@gmail.com
     api_key:
-      secure: dot+HzIe3thKep5mz5pyNYQV1ZYiGlVQAWScmfYh75AtOCJQJGvvw1alwRZDL0Ykn/7LeftZik845INn8Al8h4OEUQyuq2WmybZ5zn7PsLXRes7FtlJeYERO79bV5P3aV4vq4QoaZkPB5jQ98CmgQ2/9xPB+1ogNd7fRfUpSvSI=
+      secure: G/Szpr8q4/D6hp+H/Z9yyluUXtHAwf7LLa1Y07X59/Enlj1h7V5fQ7AW4/iAVM3XbIsrCPWR3dJU9g/ZxpxFg4OovIHVpS2Jr/mahtPYWdHR3pWuSmMW8QD+Twnq2VAFwSgg5Oumq3QxhX3YbCOnZox6+6Uviqk8FO7Z5B0RwW4=
     on:
       tags: true
       branch: master

package.json

@@ -3,17 +3,14 @@
   "name": "html2canvas",
   "description": "Screenshots with JavaScript",
   "main": "dist/html2canvas.js",
-  "version": "0.5.0-beta1",
+  "version": "0.5.0-beta3",
   "author": {
     "name": "Niklas von Hertzen",
     "email": "niklasvh@gmail.com",
     "url": "http://hertzen.com"
   },
   "engines": {
-    "node": ">=0.10.0"
-  },
-  "dependencies": {
-    "es6-promise": "^2.0.1"
+    "node": ">=4.0.0"
   },
   "repository": {
     "type": "git",
@@ -23,33 +20,31 @@
     "url": "https://github.com/niklasvh/html2canvas/issues"
   },
   "devDependencies": {
-    "base64-arraybuffer": ">= 0.1.0",
-    "bluebird": "^2.7.1",
-    "bower": "^1.3.12",
+    "base64-arraybuffer": "^0.1.5",
+    "bluebird": "^3.0.6",
     "grunt": "^0.4.5",
-    "grunt-browserify": "^3.3.0",
-    "grunt-contrib-connect": "^0.8.0",
-    "grunt-contrib-jshint": "^0.10.0",
-    "grunt-contrib-uglify": "^0.6.0",
+    "grunt-browserify": "^4.0.1",
+    "grunt-cli": "^0.1.13",
+    "grunt-contrib-connect": "^0.11.2",
+    "grunt-contrib-jshint": "^0.11.3",
+    "grunt-contrib-uglify": "^0.11.0",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-execute": "^0.2.2",
     "grunt-mocha-cli": "^1.12.0",
     "grunt-mocha-phantomjs": "^2.0.0",
     "html2canvas-proxy": "0.0.5",
     "humanize-duration": "^2.0.1",
-    "lodash": "^2.4.1",
-    "png-js": ">= 0.1.1",
+    "lodash": "^3.10.1",
+    "pngjs": "^2.2.0",
     "requirejs": "^2.1.20",
-    "wd": "^0.2.21"
+    "sauce-connect-launcher": "^0.13.0",
+    "wd": "^0.4.0"
   },
   "scripts": {
     "test": "grunt travis --verbose",
-    "postpublish": "bower register html2canvas git://github.com/niklasvh/html2canvas.git"
+    "start": "grunt server",
+    "sauceconnect": "tests/sauceconnect.js"
   },
   "homepage": "http://html2canvas.hertzen.com",
-  "licenses": [
-    {
-      "type": "MIT"
-    }
-  ]
+  "license": "MIT"
 }

readme.md

@@ -20,7 +20,7 @@ The script is still in a **very experimental state**, so I don't recommend using
 
 ###Browser compatibility###
 
-The script should work fine on the following browsers:
+The library should work fine on the following browsers (with `Promise` polyfill):
 
 * Firefox 3.5+
 * Google Chrome
@@ -32,6 +32,10 @@ As each CSS property needs to be manually built to be supported, there are a num
 
 ### Usage ###
 
+The html2canvas library utilizes `Promise`s and expects them to be available in the global context. If you wish to
+support [older browsers](http://caniuse.com/#search=promise) that do not natively support `Promise`s, please include a polyfill such as
+[es6-promise](https://github.com/jakearchibald/es6-promise) before including `html2canvas`.
+
 **Note!** These instructions are for using the current dev version of 0.5, for the latest release version (0.4.1), checkout the [old readme](https://github.com/niklasvh/html2canvas/blob/v0.4/readme.md).
 
 To render an `element` with html2canvas, simply call:

src/clone.js

@@ -1,5 +1,4 @@
 var log = require('./log');
-var Promise = require('./promise');
 
 function restoreOwnerScroll(ownerDocument, x, y) {
     if (ownerDocument.defaultView && (x !== ownerDocument.defaultView.pageXOffset || y !== ownerDocument.defaultView.pageYOffset)) {

src/color.js

@@ -69,7 +69,7 @@ Color.prototype.hex6 = function(value) {
 };
 
 
-var _rgb = /^rgb\((\d{1,3}) *, *(\d{1,3}) *, *(\d{1,3})\)$/;
+var _rgb = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/;
 
 Color.prototype.rgb = function(value) {
     var match = null;
@@ -81,7 +81,7 @@ Color.prototype.rgb = function(value) {
     return match !== null;
 };
 
-var _rgba = /^rgba\((\d{1,3}) *, *(\d{1,3}) *, *(\d{1,3}) *, *(\d+\.?\d*)\)$/;
+var _rgba = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d?\.?\d+)\s*\)$/;
 
 Color.prototype.rgba = function(value) {
     var match = null;
@@ -101,12 +101,13 @@ Color.prototype.toString = function() {
 };
 
 Color.prototype.namedColor = function(value) {
-    var color = colors[value.toLowerCase()];
+    value = value.toLowerCase();
+    var color = colors[value];
     if (color) {
         this.r = color[0];
         this.g = color[1];
         this.b = color[2];
-    } else if (value.toLowerCase() === "transparent") {
+    } else if (value === "transparent") {
         this.r = this.g = this.b = this.a = 0;
         return true;
     }

src/core.js

@@ -1,4 +1,3 @@
-var Promise = require('./promise');
 var Support = require('./support');
 var CanvasRenderer = require('./renderers/canvas');
 var ImageLoader = require('./imageloader');
@@ -51,7 +50,6 @@ function html2canvas(nodeList, options) {
     });
 }
 
-html2canvas.Promise = Promise;
 html2canvas.CanvasRenderer = CanvasRenderer;
 html2canvas.NodeContainer = NodeContainer;
 html2canvas.log = log;

src/dummyimagecontainer.js

@@ -1,4 +1,3 @@
-var Promise = require('./promise');
 var log = require('./log');
 var smallImage = require('./utils').smallImage;
 

src/framecontainer.js

@@ -1,5 +1,4 @@
 var utils = require('./utils');
-var Promise = require('./promise');
 var getBounds = utils.getBounds;
 var loadUrlDocument = require('./proxy').loadUrlDocument;
 

src/gradientcontainer.js

@@ -1,5 +1,3 @@
-var Promise = require('./promise');
-
 function GradientContainer(imageData) {
     this.src = imageData.value;
     this.colorStops = [];
@@ -11,9 +9,13 @@ function GradientContainer(imageData) {
     this.promise = Promise.resolve(true);
 }
 
-GradientContainer.prototype.TYPES = {
+GradientContainer.TYPES = {
     LINEAR: 1,
     RADIAL: 2
 };
 
+// TODO: support hsl[a], negative %/length values
+// TODO: support <angle> (e.g. -?\d{1,3}(?:\.\d+)deg, etc. : https://developer.mozilla.org/docs/Web/CSS/angle )
+GradientContainer.REGEXP_COLORSTOP = /^\s*(rgba?\(\s*\d{1,3},\s*\d{1,3},\s*\d{1,3}(?:,\s*[0-9\.]+)?\s*\)|[a-z]{3,20}|#[a-f0-9]{3,6})(?:\s+(\d{1,3}(?:\.\d+)?)(%|px)?)?(?:\s|$)/i;
+
 module.exports = GradientContainer;

src/imagecontainer.js

@@ -1,5 +1,3 @@
-var Promise = require('./promise');
-
 function ImageContainer(src, cors) {
     this.src = src;
     this.image = new Image();

src/imageloader.js

@@ -1,4 +1,3 @@
-var Promise = require('./promise');
 var log = require('./log');
 var ImageContainer = require('./imagecontainer');
 var DummyImageContainer = require('./dummyimagecontainer');

src/lineargradientcontainer.js

@@ -1,16 +1,15 @@
 var GradientContainer = require('./gradientcontainer');
 var Color = require('./color');
 
-var COLOR_STOP_REGEXP = /^\s*(.*)\s*(\d{1,3})?(%|px)?$/;
-
 function LinearGradientContainer(imageData) {
     GradientContainer.apply(this, arguments);
-    this.type = this.TYPES.LINEAR;
+    this.type = GradientContainer.TYPES.LINEAR;
 
-    var hasDirection = imageData.args[0].match(this.stepRegExp) === null;
+    var hasDirection = LinearGradientContainer.REGEXP_DIRECTION.test( imageData.args[0] ) ||
+        !GradientContainer.REGEXP_COLORSTOP.test( imageData.args[0] );
 
     if (hasDirection) {
-        imageData.args[0].split(" ").reverse().forEach(function(position) {
+        imageData.args[0].split(/\s+/).reverse().forEach(function(position, index) {
             switch(position) {
             case "left":
                 this.x0 = 0;
@@ -36,6 +35,24 @@ function LinearGradientContainer(imageData) {
                 this.x1 = x0;
                 this.y1 = y0;
                 break;
+            case "center":
+                break; // centered by default
+            // Firefox internally converts position keywords to percentages:
+            // http://www.w3.org/TR/2010/WD-CSS2-20101207/colors.html#propdef-background-position
+            default: // percentage or absolute length
+                // TODO: support absolute start point positions (e.g., use bounds to convert px to a ratio)
+                var ratio = parseFloat(position, 10) * 1e-2;
+                if (isNaN(ratio)) { // invalid or unhandled value
+                    break;
+                }
+                if (index === 0) {
+                    this.y0 = ratio;
+                    this.y1 = 1 - this.y0;
+                } else {
+                    this.x0 = ratio;
+                    this.x1 = 1 - this.x0;
+                }
+                break;
             }
         }, this);
     } else {
@@ -43,15 +60,16 @@ function LinearGradientContainer(imageData) {
         this.y1 = 1;
     }
 
-    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
-            };
-        });
+    this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) {
+        var colorStopMatch = colorStop.match(GradientContainer.REGEXP_COLORSTOP);
+        var value = +colorStopMatch[2];
+        var unit = value === 0 ? "%" : colorStopMatch[3]; // treat "0" as "0%"
+        return {
+            color: new Color(colorStopMatch[1]),
+            // TODO: support absolute stop positions (e.g., compute gradient line length & convert px to ratio)
+            stop: unit === "%" ? value / 100 : null
+        };
+    });
 
     if (this.colorStops[0].stop === null) {
         this.colorStops[0].stop = 0;
@@ -61,6 +79,7 @@ function LinearGradientContainer(imageData) {
         this.colorStops[this.colorStops.length - 1].stop = 1;
     }
 
+    // calculates and fills-in explicit stop positions when omitted from rule
     this.colorStops.forEach(function(colorStop, index) {
         if (colorStop.stop === null) {
             this.colorStops.slice(index).some(function(find, count) {
@@ -77,6 +96,7 @@ function LinearGradientContainer(imageData) {
 
 LinearGradientContainer.prototype = Object.create(GradientContainer.prototype);
 
-LinearGradientContainer.prototype.stepRegExp = /((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/;
+// TODO: support <angle> (e.g. -?\d{1,3}(?:\.\d+)deg, etc. : https://developer.mozilla.org/docs/Web/CSS/angle )
+LinearGradientContainer.REGEXP_DIRECTION = /^\s*(?:to|left|right|top|bottom|center|\d{1,3}(?:\.\d+)?%?)(?:\s|$)/i;
 
 module.exports = LinearGradientContainer;

src/nodeparser.js

@@ -5,7 +5,6 @@ var TextContainer = require('./textcontainer');
 var PseudoElementContainer = require('./pseudoelementcontainer');
 var FontMetrics = require('./fontmetrics');
 var Color = require('./color');
-var Promise = require('./promise');
 var StackingContext = require('./stackingcontext');
 var utils = require('./utils');
 var bind = utils.bind;

src/promise.js

@@ -1 +0,0 @@
-module.exports = require('es6-promise').Promise;

src/proxy.js

@@ -1,4 +1,3 @@
-var Promise = require('./promise');
 var XHR = require('./xhr');
 var utils = require('./utils');
 var log = require('./log');

src/proxyimagecontainer.js

@@ -1,5 +1,4 @@
 var ProxyURL = require('./proxy').ProxyURL;
-var Promise = require('./promise');
 
 function ProxyImageContainer(src, proxy) {
     var link = document.createElement("a");

src/svgcontainer.js

@@ -1,4 +1,3 @@
-var Promise = require('./promise');
 var XHR = require('./xhr');
 var decode64 = require('./utils').decode64;
 

src/svgnodecontainer.js

@@ -1,5 +1,4 @@
 var SVGContainer = require('./svgcontainer');
-var Promise = require('./promise');
 
 function SVGNodeContainer(node, _native) {
     this.src = node;

src/webkitgradientcontainer.js

@@ -2,7 +2,7 @@ var GradientContainer = require('./gradientcontainer');
 
 function WebkitGradientContainer(imageData) {
     GradientContainer.apply(this, arguments);
-    this.type = (imageData.args[0] === "linear") ? this.TYPES.LINEAR : this.TYPES.RADIAL;
+    this.type = imageData.args[0] === "linear" ? GradientContainer.TYPES.LINEAR : GradientContainer.TYPES.RADIAL;
 }
 
 WebkitGradientContainer.prototype = Object.create(GradientContainer.prototype);

src/xhr.js

@@ -1,5 +1,3 @@
-var Promise = require('./promise');
-
 function XHR(url) {
     return new Promise(function(resolve, reject) {
         var xhr = new XMLHttpRequest();

tests/cases/background/linear-gradient.html

@@ -112,10 +112,13 @@
             .linearGradient8 {
                 background: linear-gradient(to top left, #fff 0%, #00263c 100%);
             }
-
             .linearGradient9 {
                 background: linear-gradient(to top left, white 0%, black 100%);
             }
+
+            .linearGradient10 {
+                background: linear-gradient(to left top, #0000Ff, rgb(255, 0,0) 50px, green 199px, rgba(0, 0, 0, 0.5) 100.0%);
+            }
         </style>
 
     </head>
@@ -130,6 +133,7 @@
             <div class="linearGradient7">&nbsp;</div>
             <div class="linearGradient8">&nbsp;</div>
             <div class="linearGradient9">&nbsp;</div>
+            <div class="linearGradient10">&nbsp;</div>
         </div>
     </body>
 </html>

tests/mocha/background.html

@@ -3,6 +3,7 @@
     <meta charset="utf-8">
     <title>Mocha Tests</title>
     <link rel="stylesheet" href="lib/mocha.css" />
+    <script src="../../node_modules/bluebird/js/browser/bluebird.js"></script>
     <script src="../../dist/html2canvas.js"></script>
     <script src="../assets/jquery-1.6.2.js"></script>
     <script src="lib/expect.js"></script>

tests/mocha/cropping.html

@@ -3,6 +3,7 @@
     <meta charset="utf-8">
     <title>Mocha Tests</title>
     <link rel="stylesheet" href="lib/mocha.css" />
+    <script src="../../node_modules/bluebird/js/browser/bluebird.js"></script>
     <script src="../../dist/html2canvas.js"></script>
     <script src="../assets/jquery-1.6.2.js"></script>
     <script src="lib/expect.js"></script>

tests/mocha/form-rendering.html

@@ -3,6 +3,7 @@
     <meta charset="utf-8">
     <title>Mocha Tests</title>
     <link rel="stylesheet" href="lib/mocha.css" />
+    <script src="../../node_modules/bluebird/js/browser/bluebird.js"></script>
     <script src="../../dist/html2canvas.js"></script>
     <script src="../assets/jquery-1.6.2.js"></script>
     <script src="lib/expect.js"></script>

tests/mocha/gradients.js

@@ -9,6 +9,15 @@ describe("Gradients", function() {
                 " rgb(0, 255, 0)"
             ]
         },
+        {
+            method: "linear-gradient",
+            args: [
+                "left",
+                " red",
+                " rgb(255, 255, 0)",
+                " rgb(0, 255, 0)"
+            ]
+        },
         {
             method: 'linear-gradient',
             args: [
@@ -23,6 +32,20 @@ describe("Gradients", function() {
                 " rgb(38, 85, 139) 100%"
             ]
         },
+        {
+            method: 'linear-gradient',
+            args: [
+                "left",
+                " rgb(206, 219, 233) 0%",
+                " rgb(170, 197, 222) 17px",
+                " rgb(97, 153, 199) 50%",
+                " rgb(58, 132, 195) 51px",
+                " rgb(65, 154, 214) 59%",
+                " rgb(75, 184, 240) 71px",
+                " rgb(58, 139, 194) 84%",
+                " rgb(38, 85, 139) 100px"
+            ]
+        },
         {
             method: "gradient",
             args: [
@@ -35,6 +58,20 @@ describe("Gradients", function() {
                 " to(rgb(191, 110, 78))"
             ]
         },
+        {
+            method: "gradient",
+            args: [
+                "linear",
+                " 50% 0%",
+                " 50% 100%",
+                " from(rgb(255, 0, 0))",
+                " color-stop(0.314159, green)",
+                " color-stop(0.51, rgb(0, 0, 255))",
+                // temporary workaround for Blink/WebKit bug: crbug.com/453414
+                //" to(rgba(0, 0, 0, 0.5))"
+                " to(rgba(0, 0, 0, 0))"
+            ]
+        },
         {
             method: 'linear-gradient',
             args: [

tests/mocha/ie9-clonenode-bug.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Proxy tests</title>
     <link rel="stylesheet" href="lib/mocha.css" />
+    <script src="../../node_modules/bluebird/js/browser/bluebird.js"></script>
     <script src="../assets/jquery-1.6.2.js"></script>
     <script src="lib/expect.js"></script>
     <script src="lib/mocha.js"></script>

tests/mocha/multiple-renders.html

@@ -3,6 +3,7 @@
     <meta charset="utf-8">
     <title>Mocha Tests</title>
     <link rel="stylesheet" href="lib/mocha.css" />
+    <script src="../../node_modules/bluebird/js/browser/bluebird.js"></script>
     <script src="../../dist/html2canvas.js"></script>
     <script src="../assets/jquery-1.6.2.js"></script>
     <script src="lib/expect.js"></script>
@@ -25,7 +26,6 @@
 <div id="green-block"></div>
 <script>mocha.setup('bdd')</script>
 <script>
-    var Promise = html2canvas.Promise;
     describe("Multiple renders", function() {
         it("render correctly", function(done) {
             this.timeout(10000);

tests/mocha/options.onclone.html

@@ -3,6 +3,7 @@
     <meta charset="utf-8">
     <title>Mocha Tests</title>
     <link rel="stylesheet" href="lib/mocha.css" />
+    <script src="../../node_modules/bluebird/js/browser/bluebird.js"></script>
     <script src="../../dist/html2canvas.js"></script>
     <script src="../assets/jquery-1.6.2.js"></script>
     <script src="lib/expect.js"></script>
@@ -23,7 +24,6 @@
 <div style="background: red; width: 200px; height:200px;" id="block"></div>
 <div style="width: 200px; height:200px;" id="block2"></div>
 <script>
-    var Promise = html2canvas.Promise;
     describe("options.onclone", function() {
         it("with a function", function(done) {
             html2canvas(document.querySelector("#block"), {onclone: function(document) {

tests/mocha/parsing.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
@@ -67,7 +68,8 @@
         <div style="background-position: left bottom;"></div>
     </div>
 
-    <style>
+    <div id="backgroundGradients">
+        <style scoped>
         .linearGradientSimple {
             /* FF 3.6+ */
             background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
@@ -82,6 +84,20 @@
             /* W3C */
             background: linear-gradient(left, #ff0000, #ffff00, #00ff00);
         }
+        .linearGradientSimple2 {
+            /* FF 3.6+ */
+            background: -moz-linear-gradient(left, red, #ff0, #0f0);
+            /* Chrome,Safari4+ */
+            background: -webkit-gradient(linear, left center, right center, color-stop(red), color-stop(#ff0), color-stop(#0f0));
+            /* Chrome 10+, Safari 5.1+ */
+            background: -webkit-linear-gradient(left, red, #ff0, #0f0);
+            /* Opera 11.10+ */
+            background: -o-linear-gradient(left, red, #ff0, #0f0);
+            /* IE 10+ */
+            background: -ms-linear-gradient(left, red, #ff0, #0f0);
+            /* W3C */
+            background: linear-gradient(left, red, #ff0, #0f0);
+        }
         .linearGradientWithStops {
             /* FF 3.6+ */
             background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
@@ -96,7 +112,23 @@
             /* W3C */
             background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
         }
-        .linearGradient3 {
+        .linearGradientWithPixelLengthStops {
+            width: 100px;
+            height: 100px;
+            /* FF 3.6+ */
+            background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17px, #6199c7 50%, #3a84c3 51px, #419ad6 59%, #4bb8f0 71px, #3a8bc2 84%, #26558b 100px);
+            /* Chrome, Safari 4+ */
+            background: -webkit-gradient(linear, left center, right center, color-stop(0%, #cedbe9), color-stop(17px, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71px, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100px, #26558b));
+            /* Chrome 10+, Safari 5.1+ */
+            background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17px, #6199c7 50%, #3a84c3 51px, #419ad6 59%, #4bb8f0 71px, #3a8bc2 84%, #26558b 100px);
+            /* Opera 11.10+ */
+            background: -o-linear-gradient(left, #cedbe9 0%, #aac5de 17px, #6199c7 50%, #3a84c3 51px, #419ad6 59%, #4bb8f0 71px, #3a8bc2 84%, #26558b 100px);
+            /* IE 10+ */
+            background: -ms-linear-gradient(left, #cedbe9 0%, #aac5de 17px, #6199c7 50%, #3a84c3 51px, #419ad6 59%, #4bb8f0 71px, #3a8bc2 84%, #26558b 100px);
+            /* W3C */
+            background: linear-gradient(left, #cedbe9 0%, #aac5de 17px, #6199c7 50%, #3a84c3 51px, #419ad6 59%, #4bb8f0 71px, #3a8bc2 84%, #26558b 100px);
+        }
+        .linearGradient5 {
             /* FF 3.6+ */
             background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
             /* Chrome, Safari 4+ */
@@ -108,8 +140,19 @@
             /* W3C */
             background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
         }
-
-        .linearGradient4 {
+        .linearGradient6 {
+            /* FF 3.6+ */
+            background: -moz-linear-gradient(top, #F00 0, green 31.4159%, #0000fF 51%, rgba(0, 0, 0, 0.0) 100%);
+            /* Chrome, Safari 4+ */
+            background: -webkit-gradient(linear, center top, center bottom, color-stop(0, #F00), color-stop(31.4159%, green), color-stop(51%, #0000fF), color-stop(100%, rgba(0, 0, 0, 0.0)));
+            /* Opera 11.10+ */
+            background: -o-linear-gradient(top, #F00 0, green 31.4159%, #0000fF 51%, rgba(0, 0, 0, 0.0) 100%);
+            /* IE 10+ */
+            background: -ms-linear-gradient(top, #F00 0, green 31.4159%, #0000fF 51%, rgba(0, 0, 0, 0.0) 100%);
+            /* W3C */
+            background: linear-gradient(top, #F00 0, green 31.4159%, #0000fF 51%, rgba(0, 0, 0, 0.0) 100%);
+        }
+        .linearGradient7 {
             background: -webkit-linear-gradient(0deg, #ddd, #ddd 50%, transparent 50%);
             background: linear-gradient(0deg, #ddd, #ddd 50%, transparent 50%);
         }
@@ -157,12 +200,14 @@
             background: -ms-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
             background: radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
         }
-    </style>
-    <div id="backgroundGradients">
+        </style>
         <div class="linearGradientSimple"></div>
+        <div class="linearGradientSimple2"></div>
         <div class="linearGradientWithStops"></div>
-        <div class="linearGradient3"></div>
-        <div class="linearGradient4"></div>
+        <div class="linearGradientWithPixelLengthStops"></div>
+        <div class="linearGradient5"></div>
+        <div class="linearGradient6"></div>
+        <div class="linearGradient7"></div>
         <div class="radialGradient"></div>
         <div class="radialGradient2"></div>
         <div class="radialGradient3"></div>

tests/mocha/scrolling.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Scrolling tests</title>
     <link rel="stylesheet" href="lib/mocha.css" />
+    <script src="../../node_modules/bluebird/js/browser/bluebird.js"></script>
     <script src="../../dist/html2canvas.js"></script>
     <script src="../assets/jquery-1.6.2.js"></script>
     <script src="lib/expect.js"></script>

tests/sauceconnect.js

@@ -0,0 +1,13 @@
+const sauceConnectLauncher = require('sauce-connect-launcher');
+
+sauceConnectLauncher({
+    username: process.env.SAUCE_USERNAME,
+    accessKey: process.env.SAUCE_ACCESS_KEY,
+    logger: console.log
+}, err => {
+    if (err) {
+        console.error(err.message);
+        return;
+    }
+    console.log('Sauce Connect ready');
+});

tests/selenium.js

@@ -6,7 +6,7 @@
         url = require("url"),
         path = require("path"),
         base64_arraybuffer = require('base64-arraybuffer'),
-        PNG = require('png-js'),
+        PNG = require('pngjs').PNG,
         Promise = require('bluebird'),
         _ = require('lodash'),
         humanizeDuration = require("humanize-duration"),
@@ -20,9 +20,15 @@
     var port = 8080;
 
     function getPixelArray(base64) {
-        return new Promise(function(resolve) {
-            var arraybuffer = base64_arraybuffer.decode(base64);
-            (new PNG(arraybuffer)).decodePixels(resolve);
+        return new Promise(function(resolve, reject) {
+            const arraybuffer = base64_arraybuffer.decode(base64);
+            new PNG().parse(arraybuffer, (error, data) => {
+                if (error) {
+                    reject(error);
+                } else {
+                    resolve(data.data);
+                }
+            });
         });
     }
 
@@ -78,7 +84,7 @@
         return Promise.resolve(browser
             .then(utils.loadTestPage(browser, test, port))
             .then(captureScreenshots(browser))
-            .then(analyzeResults(test))).cancellable();
+            .then(analyzeResults(test)));
     }
 
     exports.tests = function(browsers, singleTest) {

tests/test.js

@@ -4,10 +4,7 @@ var h2cSelector, h2cOptions;
         document.write('<script type="text/javascript" src="' + src + '.js?' + Math.random() + '"></script>');
     }
 
-    var sources = ['log', 'punycode/punycode', 'core', 'nodecontainer', 'pseudoelementcontainer', 'stackingcontext', 'textcontainer', 'support', 'imagecontainer', 'dummyimagecontainer', 'proxyimagecontainer', 'gradientcontainer',
-        'lineargradientcontainer', 'webkitgradientcontainer', 'svgcontainer', 'svgnodecontainer', 'imageloader', 'nodeparser', 'font', 'fontmetrics', 'renderer', 'promise', 'xhr', 'framecontainer', 'proxy', 'color', 'renderers/canvas'];
-
-    ['/tests/assets/jquery-1.6.2', '/dist/html2canvas'].forEach(appendScript);
+    ['/node_modules/bluebird/js/browser/bluebird', '/tests/assets/jquery-1.6.2', '/dist/html2canvas'].forEach(appendScript);
 
     if (typeof(noFabric) === "undefined") {
         appendScript('/dist/html2canvas.svg');