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

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-- '0.10'
+- '4.0'
 env:
   global:
   - secure: eW41gIqOizwO4pTgWnAAbW75AP7F+CK9qfSed/fSh4sJ9HWMIY1YRIaY8gjr+6jV/f7XVHcXuym6ZxgINYSkVKbF1JKxBJNLOXtSgNbVHSic58pYFvUjwxIBI9aPig9uux1+DbnpWqXFDTcACJSevQZE0xwmjdrSkDLgB0G34v8=

dist/html2canvas.svg.js

@@ -0,0 +1,8 @@
+/*
+  html2canvas 0.5.0-beta2 <http://html2canvas.hertzen.com>
+  Copyright (c) 2015 Niklas von Hertzen
+
+  Released under  License
+*/
+
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({},{},[])

dist/html2canvas.svg.min.js

@@ -0,0 +1,7 @@
+/*
+  html2canvas 0.5.0-beta2 <http://html2canvas.hertzen.com>
+  Copyright (c) 2015 Niklas von Hertzen
+
+  Released under  License
+*/
+!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({},{},[]);

package.json

@@ -3,14 +3,14 @@
   "name": "html2canvas",
   "description": "Screenshots with JavaScript",
   "main": "dist/html2canvas.js",
-  "version": "0.5.0-beta2",
+  "version": "0.5.0-beta3",
   "author": {
     "name": "Niklas von Hertzen",
     "email": "niklasvh@gmail.com",
     "url": "http://hertzen.com"
   },
   "engines": {
-    "node": ">=0.10.0"
+    "node": ">=4.0.0"
   },
   "repository": {
     "type": "git",
@@ -20,31 +20,31 @@
     "url": "https://github.com/niklasvh/html2canvas/issues"
   },
   "devDependencies": {
-    "base64-arraybuffer": ">= 0.1.4",
-    "bluebird": "2.7.1",
+    "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"
+    "test": "grunt travis --verbose",
+    "start": "grunt server",
+    "sauceconnect": "tests/sauceconnect.js"
   },
   "homepage": "http://html2canvas.hertzen.com",
-  "licenses": [
-    {
-      "type": "MIT"
-    }
-  ]
+  "license": "MIT"
 }

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/gradientcontainer.js

@@ -9,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/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/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);

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/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/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/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) {