Bump v0.5.0-alpha2

Temporarily add manual update to es6-promise polyfill

.gitignore

@@ -1,13 +1,11 @@
 /nbproject/
-/images/
-/external/
-/tests/templates/
-/tests/cache/
-/tests/flashcanvas.html
-/lib/
-/build/
 image.jpg
 /.project
 /.settings/
+node_modules/
 .envrc
 *.sublime-workspace
+*.baseline
+*.iml
+.idea/
+.DS_Store

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src/fabric"]
+	path = src/fabric
+	url = https://github.com/kangax/fabric.js.git

.jshintrc

@@ -0,0 +1,19 @@
+{
+    "curly": true,
+    "eqeqeq": true,
+    "immed": true,
+    "latedef": false,
+    "newcap": true,
+    "noarg": true,
+    "sub": true,
+    "undef": true,
+    "boss": true,
+    "eqnull": true,
+    "browser": true,
+    "node": true,
+    "indent": 4,
+    "globals": {
+      "jQuery": true
+    },
+    "predef": ["-Promise"]
+}

.travis.yml

@@ -0,0 +1,21 @@
+---
+language: node_js
+node_js:
+- '0.10'
+env:
+  global:
+  - secure: "eW41gIqOizwO4pTgWnAAbW75AP7F+CK9qfSed/fSh4sJ9HWMIY1YRIaY8gjr+6jV/f7XVHcXuym6ZxgINYSkVKbF1JKxBJNLOXtSgNbVHSic58pYFvUjwxIBI9aPig9uux1+DbnpWqXFDTcACJSevQZE0xwmjdrSkDLgB0G34v8="
+  - secure: "Y2Av+Gd3z9uQEB36GwdOOuGka0hx0/HeitASEo59z934O8RxnmN9eNTXS7dDT3XtKtwxIyLTOEpS7qlRdWahH28hr/dS4xJj6ao58C+1xMcDs6NAPGmDxUlcJWpcGEsnjmXjQCc3fBioSTdpIBrK/gdvgpNh77UKG74Sk7Z+YGk="
+  - secure: "YI+YbTOGf2x4fPMKW+KhJiZWswoXT6xOKGwLfsQsVwmFX1LerJouil5D5iYOQuL4FE3pNaoJSNakIsokJQuGKJMmnPc8rdhMZuBJBk6MRghurE2Xe9qBHfuUBPlfD61nARESm4WDcyMwM0QVYaOKeY6aIpZ91qbUbyc60EEx3C4="
+addons:
+  sauce_connect: true
+before_script:
+  - npm install -g grunt-cli
+  - npm install -g uglify-js
+notifications:
+  webhooks:
+    urls:
+      - https://webhooks.gitter.im/e/2b007d4f86de89588804
+    on_success: always
+    on_failure: always
+    on_start: false

CHANGELOG.md

@@ -0,0 +1,57 @@
+### Changelog ###
+
+v0.5.0-alpha2 - 3.2.2015
+ * Switch to using browserify for building
+ * Fix (#517) Chrome stretches background images with 'auto' or single attributes
+
+v0.5.0-alpha - 19.1.2015
+ * Complete rewrite of library
+ * Switched interface to return Promise
+ * Uses hidden iframe window to perform rendering, allowing async rendering and doesn't force the viewport to be scrolled to the top anymore.
+ * Better support for unicode
+ * Checkbox/radio button rendering
+ * SVG rendering
+ * iframe rendering
+ * Changed format for proxy requests, permitting binary responses with CORS headers as well
+ * Fixed many layering issues (see z-index tests)
+
+v0.4.1 - 7.9.2013
+ * Added support for bower
+ * Improved z-index ordering
+ * Basic implementation for CSS transformations
+ * Fixed inline text in top element
+ * Basic implementation for text-shadow
+
+v0.4.0 - 30.1.2013
+ * Added rendering tests with <a href="https://github.com/niklasvh/webdriver.js">webdriver</a>
+ * Switched to using grunt for building
+ * Removed support for IE<9, including any FlashCanvas bits
+ * Support for border-radius
+ * Support for multiple background images, size, and clipping
+ * Support for :before and :after pseudo elements
+ * Support for placeholder rendering
+ * Reformatted all tests to small units to test specific features
+
+v0.3.4 - 26.6.2012
+
+* Removed (last?) jQuery dependencies (<a href="https://github.com/niklasvh/html2canvas/commit/343b86705fe163766fcf735eb0217130e4bd5b17">niklasvh</a>)
+* SVG-powered rendering (<a href="https://github.com/niklasvh/html2canvas/commit/67d3e0d0f59a5a654caf71a2e3be6494ff146c75">niklasvh</a>)
+* Radial gradients (<a href="https://github.com/niklasvh/html2canvas/commit/4f22c18043a73c0c3bbf3b5e4d62714c56acd3c7">SunboX</a>)
+* Split renderers to their own objects (<a href="https://github.com/niklasvh/html2canvas/commit/94f2f799a457cd29a21cc56ef8c06f1697866739">niklasvh</a>)
+* Simplified API, cleaned up code (<a href="https://github.com/niklasvh/html2canvas/commit/c7d526c9eaa6a4abf4754d205fe1dee360c7660e">niklasvh</a>)
+
+v0.3.3 - 2.3.2012
+
+* SVG taint fix, and additional taint testing options for rendering (<a href="https://github.com/niklasvh/html2canvas/commit/2dc8b9385e656696cb019d615bdfa1d98b17d5d4">niklasvh</a>)
+* Added support for CORS images and option to create canvas as tainted (<a href="https://github.com/niklasvh/html2canvas/commit/3ad49efa0032cde25c6ed32a39e35d1505d3b2ef">niklasvh</a>)
+* Improved minification saved ~1K! (<a href="https://github.com/cobexer/html2canvas/commit/b82be022b2b9240bd503e078ac980bde2b953e43">cobexer</a>)
+* Added integrated support for Flashcanvas (<a href="https://github.com/niklasvh/html2canvas/commit/e9257191519f67d74fd5e364d8dee3c0963ba5fc">niklasvh</a>)
+* Fixed a variety of legacy IE bugs (<a href="https://github.com/niklasvh/html2canvas/commit/b65357c55d0701017bafcd357bc654b54d458f8f">niklasvh</a>)
+
+v0.3.2 - 20.2.2012
+
+* Added changelog!
+* Added bookmarklet (<a href="https://github.com/niklasvh/html2canvas/commit/b320dd306e1a2d32a3bc5a71b6ebf6d8c060cde5">cobexer</a>)
+* Option to select single element to render (<a href="https://github.com/niklasvh/html2canvas/commit/0cb252ada91c84ef411288b317c03e97da1f12ad">niklasvh</a>)
+* Fixed closure compiler warnings (<a href="https://github.com/niklasvh/html2canvas/commit/36ff1ec7aadcbdf66851a0b77f0b9e87e4a8e4a1">cobexer</a>)
+* Enable profiling in FF (<a href="https://github.com/niklasvh/html2canvas/commit/bbd75286a8406cf9e5aea01fdb7950d547edefb9">cobexer</a>)

Gruntfile.js

@@ -0,0 +1,220 @@
+/*global module:false*/
+var _ =  require('lodash'), path = require('path');
+var proxy = require('html2canvas-proxy');
+
+module.exports = function(grunt) {
+
+    var meta = {
+        banner: '/*\n  <%= pkg.title || pkg.name %> <%= pkg.version %>' +
+            '<%= pkg.homepage ? " <" + pkg.homepage + ">" : "" %>' + '\n' +
+            '  Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>' +
+            '\n\n  Released under <%= _.pluck(pkg.licenses, "type").join(", ") %> License\n*/\n'
+    };
+
+    var browsers = {
+        chrome: {
+            browserName: "chrome",
+            platform: "Windows 7",
+            version: "39"
+        },
+        firefox: {
+            browserName: "firefox",
+            version: "15",
+            platform: "Windows 7"
+        },
+        ie9: {
+            browserName: "internet explorer",
+            version: "9",
+            platform: "Windows 7"
+        },
+        ie10: {
+            browserName: "internet explorer",
+            version: "10",
+            platform: "Windows 8"
+        },
+        ie11: {
+            browserName: "internet explorer",
+            version: "11",
+            platform: "Windows 8.1"
+        },
+        safari6: {
+            browserName: "safari",
+            version: "6",
+            platform: "OS X 10.8"
+        },
+        safari7:{
+            browserName: "safari",
+            platform: "OS X 10.9",
+            version: "7"
+        },
+        chromeOSX:{
+            browserName: "chrome",
+            platform: "OS X 10.8",
+            version: "39"
+        }
+    };
+    grunt.initConfig({
+
+        pkg: grunt.file.readJSON('package.json'),
+
+        browserify: {
+            dist: {
+                src: ['src/core.js'],
+                dest: 'dist/<%= pkg.name %>.js',
+                options: {
+                    browserifyOptions: {
+                        standalone: 'html2canvas'
+                    },
+                    banner: meta.banner
+                }
+            },
+            svg: {
+                src: [
+                    'src/fabric/dist/fabric.js'
+                ],
+                dest: 'dist/<%= pkg.name %>.svg.js',
+                options:{
+                    browserifyOptions: {
+                        standalone: 'html2canvas.svg'
+                    },
+                    banner: meta.banner
+                }
+            }
+        },
+        connect: {
+            server: {
+                options: {
+                    port: 8080,
+                    base: './',
+                    keepalive: true
+                }
+            },
+            altServer: {
+                options: {
+                    port: 8083,
+                    base: './'
+                }
+            },
+            cors: {
+                options: {
+                    port: 8081,
+                    base: './',
+                    middleware:  function(connect, options) {
+                        return [
+                            function(req, res, next) {
+                                if (req.url !== '/tests/assets/image2.jpg') {
+                                    next();
+                                    return;
+                                }
+                                res.setHeader("Access-Control-Allow-Origin", "*");
+                                res.end(require("fs").readFileSync('tests/assets/image2.jpg'));
+                            }
+                        ];
+                    }
+                }
+            },
+            proxy: {
+                options: {
+                    port: 8082,
+                    middleware:  function(connect, options) {
+                        return [
+                            function(req, res, next) {
+                                res.jsonp = function(content) {
+                                    res.end(req.query.callback +  "(" + JSON.stringify(content) + ")");
+                                };
+                                next();
+                            },
+                            proxy()
+                        ];
+                    }
+                }
+            },
+            ci: {
+                options: {
+                    port: 8080,
+                    base: './'
+                }
+            }
+        },
+        execute: {
+            fabric: {
+                options: {
+                    args: ['modules=' + ['text','serialization',
+                        'parser', 'gradient', 'pattern', 'shadow', 'freedrawing',
+                        'image_filters', 'serialization'].join(","), 'no-es5-compat', 'dest=' + path.resolve(__dirname, 'src/fabric/dist/') + '/']
+                },
+                src: ['src/fabric/build.js']
+            }
+        },
+        uglify: {
+            dist: {
+                src: ['<%= browserify.dist.dest %>'],
+                dest: 'dist/<%= pkg.name %>.min.js'
+            },
+            svg: {
+                src: ['<%= browserify.svg.dest %>'],
+                dest: 'dist/<%= pkg.name %>.svg.min.js'
+            },
+            options: {
+                banner: meta.banner
+            }
+        },
+        watch: {
+            files: ['src/**/*', '!src/fabric/**/*'],
+            tasks: ['jshint', 'build']
+        },
+        jshint: {
+            all: ['src/*.js', 'src/renderers/*.js'],
+            options: grunt.file.readJSON('./.jshintrc')
+        },
+        mochacli: {
+            options: {
+                reporter: 'spec'
+            },
+            all: ['tests/node/*.js']
+        },
+        mocha_phantomjs: {
+            all: ['tests/mocha/**/*.html']
+        },
+        mocha_webdriver: browsers,
+        webdriver: browsers
+    });
+
+    grunt.registerTask('webdriver', 'Browser render tests', function(browser, test) {
+        var selenium = require("./tests/selenium.js");
+        var done = this.async();
+        var browsers = (browser) ? [grunt.config.get(this.name + "." + browser)] : _.values(grunt.config.get(this.name));
+        selenium.tests(browsers, test).catch(function() {
+            done(false);
+        }).finally(function() {
+            console.log("Done");
+            done();
+        });
+    });
+
+    grunt.registerTask('mocha_webdriver', 'Browser mocha tests', function(browser, test) {
+        var selenium = require("./tests/mocha/selenium.js");
+        var done = this.async();
+        var browsers = (browser) ? [grunt.config.get(this.name + "." + browser)] : _.values(grunt.config.get(this.name));
+        selenium.tests(browsers, test).catch(function() {
+            done(false);
+        }).finally(function() {
+            done();
+        });
+    });
+
+    grunt.loadNpmTasks('grunt-browserify');
+    grunt.loadNpmTasks('grunt-mocha-phantomjs');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-contrib-connect');
+    grunt.loadNpmTasks('grunt-execute');
+    grunt.loadNpmTasks('grunt-mocha-cli');
+
+    grunt.registerTask('server', ['connect:cors', 'connect:proxy', 'connect:altServer', 'connect:server']);
+    grunt.registerTask('build', ['execute', 'browserify', 'uglify']);
+    grunt.registerTask('default', ['jshint', 'build', 'mochacli', 'connect:altServer', 'mocha_phantomjs']);
+    grunt.registerTask('travis', ['jshint', 'build', 'connect:altServer', 'connect:ci', 'connect:proxy', 'connect:cors', 'mocha_phantomjs', 'webdriver']);
+
+};

LICENSE

@@ -1,21 +1,22 @@
-/*
-  The MIT License
+Copyright (c) 2012 Niklas von Hertzen
 
-  Permission is hereby granted, free of charge, to any person obtaining a copy
-  of this software and associated documentation files (the "Software"), to deal
-  in the Software without restriction, including without limitation the rights
-  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-  copies of the Software, and to permit persons to whom the Software is
-  furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
 
-  The above copyright notice and this permission notice shall be included in
-  all copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
 
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-  THE SOFTWARE.
- */
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

Makefile

@@ -1,7 +0,0 @@
-build:
-	ant
-
-install:
-	brew install https://raw.github.com/Homebrew/homebrew-dupes/master/ant.rb
-
-.PHONY: install build

bookmarklet.html

@@ -1,57 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-		<title>html2canvas Bookmarklet</title>
-		<script type="text/javascript" src="external/jquery-1.6.2.min.js"></script>
-		<script type="text/javascript">
-			var isDebug = false, origBookmarklet = '';
-			function patchLinks() {
-				var bookmarklet = origBookmarklet;
-				if (isDebug) {
-					bookmarklet = bookmarklet.replace('//DEBUG: ', '');
-				}
-				bookmarklet = bookmarklet.replace(/\s\/\/.*/g, ''); // remove single line comments
-				bookmarklet = bookmarklet.replace(/[\u000A\u000D]+/g, ''); // remove all linebreaks
-				bookmarklet = bookmarklet.replace(/\/\*.*?\*\//g, ''); // remove multi line comments
-				bookmarklet = bookmarklet.replace(/\s\s+/g, ' '); // reduce multiple spaces to single spaces
-				bookmarklet = bookmarklet.replace(/\s+=\s+/g, '=');
-				$('a.bookmarklet').each(function(_, el) {
-					el.href = $(el).attr('data-href') + bookmarklet;
-				});
-			}
-			$(function() {
-				$('input[type=checkbox]').bind('change', function() {
-					isDebug = $(this).is(':checked');
-					patchLinks();
-				}).change();
-				$.ajax('src/plugins/bookmarklet.js', {
-					dataType: 'text',
-					success: function(data, status, xhr) {
-						origBookmarklet = data;
-						patchLinks();
-					}
-				});
-			});
-		</script>
-	</head>
-	<body>
-		<h1>html2canvas Bookmarklet</h1>
-		<p>
-			If you use a normal browser: drag the normal <a class="bookmarklet" data-href="javascript:">html2canvas</a> bookmarklet to your bookmarks toolbar.<br />
-			If not use the following link: <a class="bookmarklet" data-href="#_remove_this_javascript:">bookmarklet for those special mobile devices</a>
-			click / tap that link and then bookmark the page, edit the bookmark and remove the start up until including <code>#_remove_this_</code>
-			part at the beginning of the URL, it must start with: <code>javascript:</code> to be correct.
-		</p>
-		<p>
-			If you are using Firefox and the NoScript Addon: disable the ABE part of it,
-			took me quite some time to figure out that the reason for an unreliable bookmarklet was in NoScript...
-		</p>
-		<h2>For Developers:</h2>
-		<p>
-			If you are a developer and want to debug locally (you need the source tree of your html2canvas at:
-			<code>http(s)://localhost/html2canvas/</code>)
-			check the following box to get the bookmarklet patched automatically ;)<br />
-			<label>Debug bookmarklet: <input type="checkbox" /></label>
-		</p>
-	</body>
-</html>

bower.json

@@ -0,0 +1,9 @@
+{
+    "name": "html2canvas",
+    "description": "Screenshots with JavaScript",
+    "main": "dist/html2canvas.js",
+    "ignore": [
+        "tests",
+        ".travis.yml"
+    ]
+}

build.xml

@@ -1,167 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<project name="html2canvas" basedir="." default="build">
-    <property name="src.dir" location="src"/>
-    <property name="lib.dir" location="../lib"/>
-    <property name="build.dir" location="build"/>
-    <property name="dist"  location="dist"/>
-    <property name="jquery-externs" value="jquery-1.4.4.externs.js"/>
-
-    <property name="JS_NAME" value="html2canvas.js"/>
-    <property name="JS_NAME_MIN" value="html2canvas.min.js"/>
-    <property name="JQUERY_PLUGIN_NAME" value="jquery.plugin.html2canvas.js"/>
-    <loadfile property="version" srcfile="version.txt" />
-
-    <path id="sourcefiles">
-        <filelist dir="${src.dir}">
-            <file name="LICENSE"/>
-            <file name="html2canvas-pre.txt"/>
-            <file name="Core.js"/>
-            <file name="Generate.js"/>
-            <file name="Parse.js"/>
-            <file name="Preload.js"/>
-            <file name="Queue.js"/>
-            <file name="Renderer.js"/>
-            <file name="Util.js"/>
-			<file name="renderers/Canvas.js"/>
-            <file name="html2canvas-post.txt"/>
-		</filelist>
-	</path>
-
-    <path id="sourcefiles-allrends">
-        <filelist dir="${src.dir}">
-            <file name="LICENSE"/>
-            <file name="html2canvas-pre.txt"/>
-            <file name="Core.js"/>
-            <file name="Generate.js"/>
-            <file name="Parse.js"/>
-            <file name="Preload.js"/>
-            <file name="Queue.js"/>
-            <file name="Renderer.js"/>
-            <file name="Util.js"/>
-			<file name="renderers/Canvas.js"/>
-			<file name="renderers/SVG.js"/>
-            <file name="html2canvas-post.txt"/>
-		</filelist>
-	</path>
-
-    <path id="jquery-plugin">
-        <fileset dir="${src.dir}" includes="LICENSE"/>
-        <fileset dir="${src.dir}/plugins" includes="${JQUERY_PLUGIN_NAME}"/>
-    </path>
-
-    <target name="build-dir">
-        <echo>Creating directory ${build.dir}...</echo>
-        <mkdir dir="${build.dir}"/>
-    </target>
-
-    <target name="plugins" depends="build-dir">
-        <echo>Creating ${JQUERY_PLUGIN_NAME}...</echo>
-        <concat fixlastline="yes" destfile="${build.dir}/${JQUERY_PLUGIN_NAME}">
-            <path refid="jquery-plugin"/>
-        </concat>
-        <replaceregexp match="@VERSION@" replace="${version}" flags="g" byline="true" file="${build.dir}/${JQUERY_PLUGIN_NAME}" />
-    </target>
-
-    <pathconvert property="prettty-sourcefiles" pathsep="${line.separator}" refid="sourcefiles"></pathconvert>
-	
-	<pathconvert property="prettty-sourcefiles-allrends" pathsep="${line.separator}" refid="sourcefiles-allrends"></pathconvert>
-
-    <target name="build" depends="build-dir,plugins">
-        <echo>Concatenating files:${line.separator}${prettty-sourcefiles}${line.separator}into ${build.dir}/${JS_NAME}...</echo>
-		<concat fixlastline="yes" destfile="${build.dir}/${JS_NAME}">
-			<path refid="sourcefiles"/>
-        </concat>
-        <replaceregexp match="@VERSION@" replace="${version}" flags="g" byline="true" file="${build.dir}/${JS_NAME}" />
-	</target>
-
-    <target name="build-allrends" depends="build-dir,plugins">
-        <echo>Concatenating files:${line.separator}${prettty-sourcefiles-allrends}${line.separator}into ${build.dir}/${JS_NAME}...</echo>
-		<concat fixlastline="yes" destfile="${build.dir}/${JS_NAME}">
-			<path refid="sourcefiles-allrends"/>
-        </concat>
-        <replaceregexp match="@VERSION@" replace="${version}" flags="g" byline="true" file="${build.dir}/${JS_NAME}" />
-    </target>
-
-    <taskdef name="jscomp" classname="com.google.javascript.jscomp.ant.CompileTask"
-           classpath="${lib.dir}/compiler.jar" onerror="report"/>
-
-    <target name="syntaxcheck" depends="build-dir,build">
-        <jscomp compilationLevel="simple" warning="verbose"
-            debug="false"
-            output="${build.dir}/${JS_NAME_MIN}.tmp">
-            <externs dir="${lib.dir}">
-                 <file name="${jquery-externs}"/>
-            </externs>
-            <sources dir="${src.dir}">
-                <!-- need to write them again here since the closure compiler doesn't understand filesets,... -->
-                <file name="LICENSE"/>
-                <file name="Core.js"/>
-                <file name="Generate.js"/>
-                <file name="Parse.js"/>
-                <file name="Preload.js"/>
-                <file name="Queue.js"/>
-                <file name="Renderer.js"/>
-                <file name="Util.js"/>
-				<file name="renderers/Canvas.js"/>
-            </sources>
-        </jscomp>
-        <delete file="${build.dir}/${JS_NAME_MIN}.tmp"></delete>
-	</target>
-
-    <target name="syntaxcheck-allrends" depends="build-dir,build-allrends">
-        <jscomp compilationLevel="simple" warning="verbose"
-            debug="false"
-            output="${build.dir}/${JS_NAME_MIN}.tmp">
-            <externs dir="${lib.dir}">
-                 <file name="${jquery-externs}"/>
-            </externs>
-            <sources dir="${src.dir}">
-                <!-- need to write them again here since the closure compiler doesn't understand filesets,... -->
-                <file name="LICENSE"/>
-                <file name="Core.js"/>
-                <file name="Generate.js"/>
-                <file name="Parse.js"/>
-                <file name="Preload.js"/>
-                <file name="Queue.js"/>
-                <file name="Renderer.js"/>
-                <file name="Util.js"/>
-				<file name="renderers/Canvas.js"/>
-				<file name="renderers/SVG.js"/>
-            </sources>
-        </jscomp>
-        <delete file="${build.dir}/${JS_NAME_MIN}.tmp"></delete>
-    </target>
-
-    <target name="release" depends="build-dir,build,syntaxcheck">
-        <jscomp compilationLevel="simple" warning="verbose"
-            debug="false"
-            output="${build.dir}/${JS_NAME_MIN}">
-            <externs dir="${lib.dir}">
-                 <file name="${jquery-externs}"/>
-            </externs>
-            <sources dir="${build.dir}">
-                <file name="${JS_NAME}"/>
-            </sources>
-        </jscomp>
-        <replaceregexp match="@VERSION@" replace="${version}" flags="g" byline="true" file="${build.dir}/${JS_NAME_MIN}" />
-    </target>
-
-    <target name="release-allrends" depends="build-dir,build-allrends,syntaxcheck-allrends">
-        <jscomp compilationLevel="simple" warning="verbose"
-            debug="false"
-            output="${build.dir}/${JS_NAME_MIN}">
-            <externs dir="${lib.dir}">
-                 <file name="${jquery-externs}"/>
-            </externs>
-            <sources dir="${build.dir}">
-                <file name="${JS_NAME}"/>
-            </sources>
-        </jscomp>
-        <replaceregexp match="@VERSION@" replace="${version}" flags="g" byline="true" file="${build.dir}/${JS_NAME_MIN}" />
-    </target>
-
-    <target name="clean">
-        <delete dir="${build.dir}"></delete>
-    </target>
-</project>
-

demo2.html

@@ -1,186 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
-<html>
-    <head>
-
-        <script type="text/javascript" src="external/jquery-1.6.2.min.js"></script>
-        <script type="text/javascript" src="build/html2canvas.js"></script>
-        <script type="text/javascript" src="build/jquery.plugin.html2canvas.js"></script>
-        <script type="text/javascript">
-            $(document).ready(function() {
-                $('body').html2canvas();
-                // var ss = $('ul').offset();
-                // alert(ss.left);
-            });
-        </script>
-        <title>
-			 display/box/float/clear test 
-        </title>
-        <style type="text/css">
-            /* last modified: 1 Dec 98 */ 	
-
-            html {
-                font: 10px/1 Verdana, sans-serif;
-                background-color: blue;
-                color: white;
-            }
-
-            body {
-                margin: 1.5em;
-                border: .5em solid black;
-                padding: 0;
-                width: 48em;
-                background-color: white;
-            }
-
-            dl {
-                margin: 0;
-                border: 0;
-                padding: .5em;
-            }
-
-            dt { 
-                background-color: rgb(204,0,0);
-                margin: 0; 
-                padding: 1em;
-                width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
-                height: 28em;
-                border: .5em solid black;
-                float: left;
-            }
-
-            dd {
-                float: right;
-                margin: 0 0 0 1em;
-                border: 1em solid black;
-                padding: 1em;
-                width: 34em;
-                height: 27em;
-            }
-
-            ul {
-                margin: 0;
-                border: 0;
-                padding: 0;
-            }
-
-            li {
-                display: block; /* i.e., suppress marker */
-                color: black;
-                height: 9em;
-                width: 5em;
-                margin: 0;
-                border: .5em solid black;
-                padding: 1em;
-                float: left;
-                background-color: #FC0;
-            }
-
-            #bar {
-                background-color: black;
-                color: white;
-                width: 41.17%; /* = 14em */
-                border: 0;
-                margin: 0 1em;
-            }
-
-            #baz {
-                margin: 1em 0;
-                border: 0;
-                padding: 1em;
-                width: 10em;
-                height: 10em;
-                background-color: black;
-                color: white;
-            }
-
-            form { 
-                margin: 0;
-                display: inline;
-            }
-
-            p { 
-                margin: 0;
-            }
-
-            form p {
-                line-height: 1.9;
-            }
-
-            blockquote {
-                margin: 1em 1em 1em 2em;
-                border-width: 1em 1.5em 2em .5em;
-                border-style: solid;
-                border-color: black;
-                padding: 1em 0;
-                width: 5em;
-                height: 9em;
-                float: left;
-                background-color: #FC0;
-                color: black;
-            }
-
-            address {
-                font-style: normal;
-            }
-
-            h1 {
-                background-color: black;
-                color: white;
-                float: left;
-                margin: 1em 0;
-                border: 0;
-                padding: 1em;
-                width: 10em;
-                height: 10em;
-                font-weight: normal;
-                font-size: 1em;
-            }
-        </style>
-    </head>
-    <body>
-        <dl>
-            <dt>
-			 toggle 
-            </dt>
-            <dd>
-                <ul>
-                    <li>
-				 the way 
-                    </li>
-                    <li id="bar">
-                        <p>
-				 the world ends 
-                        </p>
-                        <form action="./" method="get">
-                            <p>
-					 bang 
-                                <input type="radio" name="foo" value="off">
-                            </p>
-                            <p>
-					 whimper 
-                                <input type="radio" name="foo2" value="on">
-                            </p>
-                        </form>
-                    </li>
-                    <li>
-				 i grow old 
-                    </li>
-                    <li id="baz">
-				 pluot? 
-                    </li>
-                </ul>
-                <blockquote>
-                    <address>
-					 bar maids, 
-                    </address>
-                </blockquote>
-                <h1>
-				 sing to me, erbarme dich 
-                </h1>
-            </dd>
-        </dl>
-        <p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
-		 This is a nonsensical document, but syntactically valid HTML 4.0. All 100% conformant CSS1 agents should be able to render the document elements above this paragraph <b>indistinguishably</b> (to the pixel) from this reference rendering, (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the <A HREF="sec5526c.htm" style="text-decoration:none">parent page</A>. 
-        </p>
-    </body>
-</html>

demo3.html

@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title></title>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
-
-        <script type="text/javascript" src="external/jquery-1.6.2.min.js"></script>
-        <script type="text/javascript" src="build/html2canvas.js"></script>
-        <script type="text/javascript" src="build/jquery.plugin.html2canvas.js"></script>
-        <script type="text/javascript"> 
-            $(function(){
-           
-                   
-                $('body').html2canvas();
-                    
-          
-            
-            });        
-        </script> 
-        <style>
-            .feedback-overlay-black{
-                background-color:#000;
-                opacity:0.5;
-                position:absolute;
-                top:0;
-                left:0;
-                width:100%;
-                height:100%;
-                margin:0;
-            }
-
-        </style>
-
-        <style> 
-            div{
-                padding:20px;
-                margin:0 auto;
-                border:5px solid black;
-            }
-
-            h1{
-                border-bottom:2px solid white;
-            }
-
-            h2{
-                background: #efefef;
-                padding:10px;
-            }
-
-
-        </style> 
-    </head>
-    <body>
-        <div style="background:red;"> 
-            <div style="background:green;"> 
-                <div style="background:blue;border-color:white;"> 
-                    <div style="background:yellow;"><div style="background:orange;"><h1>Heading</h1> 
-                            Text that isn't wrapped in anything.
-                            <p>Followed by some text wrapped in a <b>&lt;p&gt; paragraph.</b> </p> 
-                            Maybe add a <a href="#">link</a> or a different style of <a href="#" style="background:white;" id="highlight">link with a highlight</a>.
-                            <hr /> 
-                            <h2>More content</h2> 
-                            <div style="width:10px;height:10px;border-width:10px;padding:0;">a</div>
-                        </div></div> 
-
-                </div> 
-
-            </div> 
-        </div> 
-    </body>
-</html>

examples/demo.html

@@ -0,0 +1,181 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
+<html>
+  <head>
+    <title>
+      display/box/float/clear test
+    </title>
+    <style type="text/css">
+      /* last modified: 1 Dec 98 */
+
+      html {
+        font: 10px/1 Verdana, sans-serif;
+        background-color: blue;
+        color: white;
+      }
+
+      body {
+        margin: 1.5em;
+        border: .5em solid black;
+        padding: 0;
+        width: 48em;
+        background-color: white;
+      }
+
+      dl {
+        margin: 0;
+        border: 0;
+        padding: .5em;
+      }
+
+      dt {
+        background-color: rgb(204,0,0);
+        margin: 0;
+        padding: 1em;
+        width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
+        height: 28em;
+        border: .5em solid black;
+        float: left;
+      }
+
+      dd {
+        float: right;
+        margin: 0 0 0 1em;
+        border: 1em solid black;
+        padding: 1em;
+        width: 34em;
+        height: 27em;
+      }
+
+      ul {
+        margin: 0;
+        border: 0;
+        padding: 0;
+      }
+
+      li {
+        display: block; /* i.e., suppress marker */
+        color: black;
+        height: 9em;
+        width: 5em;
+        margin: 0;
+        border: .5em solid black;
+        padding: 1em;
+        float: left;
+        background-color: #FC0;
+      }
+
+      #bar {
+        background-color: black;
+        color: white;
+        width: 41.17%; /* = 14em */
+        border: 0;
+        margin: 0 1em;
+      }
+
+      #baz {
+        margin: 1em 0;
+        border: 0;
+        padding: 1em;
+        width: 10em;
+        height: 10em;
+        background-color: black;
+        color: white;
+      }
+
+      form {
+        margin: 0;
+        display: inline;
+      }
+
+      p {
+        margin: 0;
+      }
+
+      form p {
+        line-height: 1.9;
+      }
+
+      blockquote {
+        margin: 1em 1em 1em 2em;
+        border-width: 1em 1.5em 2em .5em;
+        border-style: solid;
+        border-color: black;
+        padding: 1em 0;
+        width: 5em;
+        height: 9em;
+        float: left;
+        background-color: #FC0;
+        color: black;
+      }
+
+      address {
+        font-style: normal;
+      }
+
+      h1 {
+        background-color: black;
+        color: white;
+        float: left;
+        margin: 1em 0;
+        border: 0;
+        padding: 1em;
+        width: 10em;
+        height: 10em;
+        font-weight: normal;
+        font-size: 1em;
+      }
+    </style>
+  </head>
+  <body>
+    <dl>
+      <dt>
+        toggle
+      </dt>
+      <dd>
+        <ul>
+          <li>
+            the way
+          </li>
+          <li id="bar">
+            <p>
+              the world ends
+            </p>
+            <form action="./" method="get">
+              <p>
+                bang
+                <input type="radio" name="foo" value="off">
+              </p>
+              <p>
+                whimper
+                <input type="radio" name="foo2" value="on">
+              </p>
+            </form>
+          </li>
+          <li>
+            i grow old
+          </li>
+          <li id="baz">
+            pluot?
+          </li>
+        </ul>
+        <blockquote>
+          <address>
+            bar maids,
+          </address>
+        </blockquote>
+        <h1>
+          sing to me, erbarme dich
+        </h1>
+      </dd>
+    </dl>
+    <p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
+      This is a nonsensical document, but syntactically valid HTML 4.0. All 100% conformant CSS1 agents should be able to render the document elements above this paragraph <b>indistinguishably</b> (to the pixel) from this reference rendering, (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the <A HREF="sec5526c.htm" style="text-decoration:none">parent page</A>.
+    </p>
+    <script type="text/javascript" src="../dist/html2canvas.js"></script>
+    <script type="text/javascript">
+        html2canvas(document.body).then(function(canvas) {
+            document.body.appendChild(canvas);
+        });
+    </script>
+  </body>
+</html>

examples/demo2.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title></title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <style>
+      .feedback-overlay-black{
+        background-color:#000;
+        opacity:0.5;
+        position:absolute;
+        top:0;
+        left:0;
+        width:100%;
+        height:100%;
+        margin:0;
+      }
+
+    </style>
+
+    <style>
+      div{
+        padding:20px;
+        margin:0 auto;
+        border:5px solid black;
+      }
+
+      h1{
+        border-bottom:2px solid white;
+      }
+
+      h2{
+        background: #efefef;
+        padding:10px;
+      }
+
+
+    </style>
+  </head>
+  <body>
+    <div style="background:red;">
+      <div style="background:green;">
+        <div style="background:blue;border-color:white;">
+          <div style="background:yellow;"><div style="background:orange;"><h1>Heading</h1>
+              Text that isn't wrapped in anything.
+              <p>Followed by some text wrapped in a <b>&lt;p&gt; paragraph.</b> </p>
+              Maybe add a <a href="#">link</a> or a different style of <a href="#" style="background:white;" id="highlight">link with a highlight</a>.
+              <hr />
+              <h2>More content</h2>
+              <div style="width:10px;height:10px;border-width:10px;padding:0;">a</div>
+            </div></div>
+
+        </div>
+
+      </div>
+    </div>
+    <script type="text/javascript" src="../dist/html2canvas.js"></script>
+    <script type="text/javascript">
+        html2canvas(document.body).then(function(canvas) {
+            document.body.appendChild(canvas);
+        });
+    </script>
+  </body>
+</html>

examples/existing_canvas.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>Using an existing canvas to draw on</title>
+    <style>
+        canvas {
+            border: 1px solid black;
+        }
+        button {
+            clear: both;
+            display: block;
+        }
+        #content {
+            background: rgba(100, 255, 255, 0.5);
+            padding: 50px 10px;
+        }
+    </style>
+</head>
+<body>
+<div><h1>HTML content to render:</h1>
+    <div id="content">Render the content in this element <strong>only</strong> onto the existing canvas element</div>
+</div>
+<h1>Existing canvas:</h1>
+<canvas width="500" height="200"></canvas>
+<script type="text/javascript" src="../dist/html2canvas.js"></script>
+<button>Run html2canvas</button>
+<script type="text/javascript">
+    var canvas = document.querySelector("canvas");
+    var ctx = canvas.getContext("2d");
+
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
+    ctx.moveTo(110,75);
+    ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)
+    ctx.moveTo(65,65);
+    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
+    ctx.moveTo(95,65);
+    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
+    ctx.stroke();
+
+    document.querySelector("button").addEventListener("click", function() {
+        html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
+            console.log('Drew on the existing canvas');
+        });
+    }, false);
+
+</script>
+</body>
+</html>

external/flashcanvas.min.js

@@ -1,28 +0,0 @@
-/*
- * FlashCanvas
- *
- * Copyright (c) 2009      Tim Cameron Ryan
- * Copyright (c) 2009-2011 FlashCanvas Project
- * Released under the MIT/X License
- */
-window.ActiveXObject&&!window.CanvasRenderingContext2D&&function(h,j){function D(a){this.code=a;this.message=T[a]}function U(a){this.width=a}function E(a){this.id=a.C++}function t(a){this.G=a;this.id=a.C++}function u(a,b){this.canvas=a;this.B=b;this.d=a.uniqueID;this.D();this.C=0;this.t="";var c=this;setInterval(function(){n[c.d]===0&&c.e()},30)}function A(){if(j.readyState==="complete"){j.detachEvent(F,A);for(var a=j.getElementsByTagName(r),b=0,c=a.length;b<c;++b)B.initElement(a[b])}}function G(){var a=
-event.srcElement,b=a.parentNode;a.blur();b.focus()}function H(){var a=event.propertyName;if(a==="width"||a==="height"){var b=event.srcElement,c=b[a],d=parseInt(c,10);if(isNaN(d)||d<0)d=a==="width"?300:150;if(c===d){b.style[a]=d+"px";b.getContext("2d").I(b.width,b.height)}else b[a]=d}}function I(){h.detachEvent(J,I);for(var a in s){var b=s[a],c=b.firstChild,d;for(d in c)if(typeof c[d]==="function")c[d]=k;for(d in b)if(typeof b[d]==="function")b[d]=k;c.detachEvent(K,G);b.detachEvent(L,H)}h[M]=k;h[N]=
-k;h[O]=k;h[C]=k;h[P]=k}function V(){var a=j.getElementsByTagName("script");a=a[a.length-1];return j.documentMode>=8?a.src:a.getAttribute("src",4)}function v(a){return(""+a).replace(/&/g,"&amp;").replace(/</g,"&lt;")}function W(a){return a.toLowerCase()}function i(a){throw new D(a);}function Q(a){var b=parseInt(a.width,10),c=parseInt(a.height,10);if(isNaN(b)||b<0)b=300;if(isNaN(c)||c<0)c=150;a.width=b;a.height=c}var k=null,r="canvas",M="CanvasRenderingContext2D",N="CanvasGradient",O="CanvasPattern",
-C="FlashCanvas",P="G_vmlCanvasManager",K="onfocus",L="onpropertychange",F="onreadystatechange",J="onunload",w=((h[C+"Options"]||{}).swfPath||V().replace(/[^\/]+$/,""))+"flashcanvas.swf",e=new function(a){for(var b=0,c=a.length;b<c;b++)this[a[b]]=b}(["toDataURL","save","restore","scale","rotate","translate","transform","setTransform","globalAlpha","globalCompositeOperation","strokeStyle","fillStyle","createLinearGradient","createRadialGradient","createPattern","lineWidth","lineCap","lineJoin","miterLimit",
-"shadowOffsetX","shadowOffsetY","shadowBlur","shadowColor","clearRect","fillRect","strokeRect","beginPath","closePath","moveTo","lineTo","quadraticCurveTo","bezierCurveTo","arcTo","rect","arc","fill","stroke","clip","isPointInPath","font","textAlign","textBaseline","fillText","strokeText","measureText","drawImage","createImageData","getImageData","putImageData","addColorStop","direction","resize"]),x={},n={},s={},y={};u.prototype={save:function(){this.b();this.c();this.m();this.l();this.z();this.w();
-this.F.push([this.f,this.g,this.A,this.u,this.j,this.h,this.i,this.k,this.p,this.q,this.n,this.o,this.v,this.r,this.s]);this.a.push(e.save)},restore:function(){var a=this.F;if(a.length){a=a.pop();this.globalAlpha=a[0];this.globalCompositeOperation=a[1];this.strokeStyle=a[2];this.fillStyle=a[3];this.lineWidth=a[4];this.lineCap=a[5];this.lineJoin=a[6];this.miterLimit=a[7];this.shadowOffsetX=a[8];this.shadowOffsetY=a[9];this.shadowBlur=a[10];this.shadowColor=a[11];this.font=a[12];this.textAlign=a[13];
-this.textBaseline=a[14]}this.a.push(e.restore)},scale:function(a,b){this.a.push(e.scale,a,b)},rotate:function(a){this.a.push(e.rotate,a)},translate:function(a,b){this.a.push(e.translate,a,b)},transform:function(a,b,c,d,f,g){this.a.push(e.transform,a,b,c,d,f,g)},setTransform:function(a,b,c,d,f,g){this.a.push(e.setTransform,a,b,c,d,f,g)},b:function(){var a=this.a;if(this.f!==this.globalAlpha){this.f=this.globalAlpha;a.push(e.globalAlpha,this.f)}if(this.g!==this.globalCompositeOperation){this.g=this.globalCompositeOperation;
-a.push(e.globalCompositeOperation,this.g)}},m:function(){if(this.A!==this.strokeStyle){var a=this.A=this.strokeStyle;this.a.push(e.strokeStyle,typeof a==="object"?a.id:a)}},l:function(){if(this.u!==this.fillStyle){var a=this.u=this.fillStyle;this.a.push(e.fillStyle,typeof a==="object"?a.id:a)}},createLinearGradient:function(a,b,c,d){isFinite(a)&&isFinite(b)&&isFinite(c)&&isFinite(d)||i(9);this.a.push(e.createLinearGradient,a,b,c,d);return new t(this)},createRadialGradient:function(a,b,c,d,f,g){isFinite(a)&&
-isFinite(b)&&isFinite(c)&&isFinite(d)&&isFinite(f)&&isFinite(g)||i(9);if(c<0||g<0)i(1);this.a.push(e.createRadialGradient,a,b,c,d,f,g);return new t(this)},createPattern:function(a,b){a||i(17);var c=a.tagName,d,f=this.d;if(c){c=c.toLowerCase();if(c==="img")d=a.getAttribute("src",2);else if(c===r||c==="video")return;else i(17)}else if(a.src)d=a.src;else i(17);b==="repeat"||b==="no-repeat"||b==="repeat-x"||b==="repeat-y"||b===""||b===k||i(12);this.a.push(e.createPattern,v(d),b);if(x[f]){this.e();++n[f]}return new E(this)},
-z:function(){var a=this.a;if(this.j!==this.lineWidth){this.j=this.lineWidth;a.push(e.lineWidth,this.j)}if(this.h!==this.lineCap){this.h=this.lineCap;a.push(e.lineCap,this.h)}if(this.i!==this.lineJoin){this.i=this.lineJoin;a.push(e.lineJoin,this.i)}if(this.k!==this.miterLimit){this.k=this.miterLimit;a.push(e.miterLimit,this.k)}},c:function(){var a=this.a;if(this.p!==this.shadowOffsetX){this.p=this.shadowOffsetX;a.push(e.shadowOffsetX,this.p)}if(this.q!==this.shadowOffsetY){this.q=this.shadowOffsetY;
-a.push(e.shadowOffsetY,this.q)}if(this.n!==this.shadowBlur){this.n=this.shadowBlur;a.push(e.shadowBlur,this.n)}if(this.o!==this.shadowColor){this.o=this.shadowColor;a.push(e.shadowColor,this.o)}},clearRect:function(a,b,c,d){this.a.push(e.clearRect,a,b,c,d)},fillRect:function(a,b,c,d){this.b();this.c();this.l();this.a.push(e.fillRect,a,b,c,d)},strokeRect:function(a,b,c,d){this.b();this.c();this.m();this.z();this.a.push(e.strokeRect,a,b,c,d)},beginPath:function(){this.a.push(e.beginPath)},closePath:function(){this.a.push(e.closePath)},
-moveTo:function(a,b){this.a.push(e.moveTo,a,b)},lineTo:function(a,b){this.a.push(e.lineTo,a,b)},quadraticCurveTo:function(a,b,c,d){this.a.push(e.quadraticCurveTo,a,b,c,d)},bezierCurveTo:function(a,b,c,d,f,g){this.a.push(e.bezierCurveTo,a,b,c,d,f,g)},arcTo:function(a,b,c,d,f){f<0&&isFinite(f)&&i(1);this.a.push(e.arcTo,a,b,c,d,f)},rect:function(a,b,c,d){this.a.push(e.rect,a,b,c,d)},arc:function(a,b,c,d,f,g){c<0&&isFinite(c)&&i(1);this.a.push(e.arc,a,b,c,d,f,g?1:0)},fill:function(){this.b();this.c();
-this.l();this.a.push(e.fill)},stroke:function(){this.b();this.c();this.m();this.z();this.a.push(e.stroke)},clip:function(){this.a.push(e.clip)},w:function(){var a=this.a;if(this.v!==this.font)try{var b=y[this.d];b.style.font=this.v=this.font;var c=b.currentStyle;a.push(e.font,[c.fontStyle,c.fontWeight,b.offsetHeight,c.fontFamily].join(" "))}catch(d){}if(this.r!==this.textAlign){this.r=this.textAlign;a.push(e.textAlign,this.r)}if(this.s!==this.textBaseline){this.s=this.textBaseline;a.push(e.textBaseline,
-this.s)}if(this.t!==this.canvas.currentStyle.direction){this.t=this.canvas.currentStyle.direction;a.push(e.direction,this.t)}},fillText:function(a,b,c,d){this.b();this.l();this.c();this.w();this.a.push(e.fillText,v(a),b,c,d===void 0?Infinity:d)},strokeText:function(a,b,c,d){this.b();this.m();this.c();this.w();this.a.push(e.strokeText,v(a),b,c,d===void 0?Infinity:d)},measureText:function(a){var b=y[this.d];try{b.style.font=this.font}catch(c){}b.innerText=a.replace(/[ \n\f\r]/g,"\t");return new U(b.offsetWidth)},
-drawImage:function(a,b,c,d,f,g,o,l,z){a||i(17);var p=a.tagName,m,q=arguments.length,R=this.d;if(p){p=p.toLowerCase();if(p==="img")m=a.getAttribute("src",2);else if(p===r||p==="video")return;else i(17)}else if(a.src)m=a.src;else i(17);this.b();this.c();m=v(m);if(q===3)this.a.push(e.drawImage,q,m,b,c);else if(q===5)this.a.push(e.drawImage,q,m,b,c,d,f);else if(q===9){if(d===0||f===0)i(1);this.a.push(e.drawImage,q,m,b,c,d,f,g,o,l,z)}else return;if(x[R]){this.e();++n[R]}},D:function(){this.globalAlpha=
-this.f=1;this.globalCompositeOperation=this.g="source-over";this.fillStyle=this.u=this.strokeStyle=this.A="#000000";this.lineWidth=this.j=1;this.lineCap=this.h="butt";this.lineJoin=this.i="miter";this.miterLimit=this.k=10;this.shadowBlur=this.n=this.shadowOffsetY=this.q=this.shadowOffsetX=this.p=0;this.shadowColor=this.o="rgba(0, 0, 0, 0.0)";this.font=this.v="10px sans-serif";this.textAlign=this.r="start";this.textBaseline=this.s="alphabetic";this.a=[];this.F=[]},H:function(){var a=this.a;this.a=
-[];return a},e:function(){var a=this.H();if(a.length>0)return eval(this.B.CallFunction('<invoke name="executeCommand" returntype="javascript"><arguments><string>'+a.join("&#0;")+"</string></arguments></invoke>"))},I:function(a,b){this.e();this.D();if(a>0)this.B.width=a;if(b>0)this.B.height=b;this.a.push(e.resize,a,b)}};t.prototype={addColorStop:function(a,b){if(isNaN(a)||a<0||a>1)i(1);this.G.a.push(e.addColorStop,this.id,a,b)}};D.prototype=Error();var T={1:"INDEX_SIZE_ERR",9:"NOT_SUPPORTED_ERR",11:"INVALID_STATE_ERR",
-12:"SYNTAX_ERR",17:"TYPE_MISMATCH_ERR",18:"SECURITY_ERR"},B={initElement:function(a){if(a.getContext)return a;var b=a.uniqueID,c="external"+b;x[b]=false;n[b]=1;Q(a);a.innerHTML='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+location.protocol+'//fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" id="'+c+'"><param name="allowScriptAccess" value="always"><param name="flashvars" value="id='+c+'"><param name="wmode" value="transparent"></object><span style="margin:0;padding:0;border:0;display:inline-block;position:static;height:1em;overflow:visible;white-space:nowrap"></span>';
-s[b]=a;var d=a.firstChild;y[b]=a.lastChild;var f=j.body.contains;if(f(a))d.movie=w;else var g=setInterval(function(){if(f(a)){clearInterval(g);d.movie=w}},0);if(j.compatMode==="BackCompat"||!h.XMLHttpRequest)y[b].style.overflow="hidden";var o=new u(a,d);a.getContext=function(l){return l==="2d"?o:k};a.toDataURL=function(l,z){(""+l).replace(/[A-Z]+/g,W)==="image/jpeg"?o.a.push(e.toDataURL,l,typeof z==="number"?z:""):o.a.push(e.toDataURL,l);return o.e()};d.attachEvent(K,G);return a},saveImage:function(a){a.firstChild.saveImage()},
-setOptions:function(){},trigger:function(a,b){s[a].fireEvent("on"+b)},unlock:function(a,b){n[a]&&--n[a];if(b){var c=s[a],d=c.firstChild,f,g;Q(c);f=c.width;g=c.height;c.style.width=f+"px";c.style.height=g+"px";if(f>0)d.width=f;if(g>0)d.height=g;d.resize(f,g);c.attachEvent(L,H);x[a]=true}}};j.createElement(r);j.createStyleSheet().cssText=r+"{display:inline-block;overflow:hidden;width:300px;height:150px}";j.readyState==="complete"?A():j.attachEvent(F,A);h.attachEvent(J,I);if(w.indexOf(location.protocol+
-"//"+location.host+"/")===0){var S=new ActiveXObject("Microsoft.XMLHTTP");S.open("GET",w,false);S.send(k)}h[M]=u;h[N]=t;h[O]=E;h[C]=B;h[P]={init:function(){},init_:function(){},initElement:B.initElement};keep=u.measureText}(window,document);

html2canvas.sublime-project

@@ -1,57 +0,0 @@
-{
-	"folders":
-	[
-		{
-			"path": ".",
-			"folder_exclude_patterns": [".svn", ".git", ".hg", "CVS", "node_modules"],
-			"file_exclude_patterns": ["*.sublime-workspace"]
-		}
-	],
-	"settings":
-	{
-		// The number of spaces a tab is considered equal to
-		"tab_size": 4,
-
-		// Set to true to insert spaces when tab is pressed
-		"translate_tabs_to_spaces": true,
-
-		// If translate_tabs_to_spaces is true, use_tab_stops will make tab and
-		// backspace insert/delete up to the next tabstop
-		"use_tab_stops": false,
-
-		// Set to false to disable detection of tabs vs. spaces on load
-		"detect_indentation": false,
-
-		// Set to true to removing trailing white space on save
-		"trim_trailing_white_space_on_save": true,
-
-		// Set to true to ensure the last line of the file ends in a newline
-		// character when saving
-		"ensure_newline_at_eof_on_save": false,
-
-		// Linting
-		"jshint_options": {
-			"eqeqeq": false,
-
-			"laxbreak": true,
-			"undef": true,
-			"newcap": true,
-			"noarg": true,
-			"strict": false,
-			"trailing": true,
-			"onecase": true,
-
-			"boss": true,
-			"eqnull": true,
-
-			"onevar": false,
-
-			"evil": true,
-			"regexdash": true,
-			"browser": true,
-			"wsh": true,
-			"trailing": true,
-			"sub": true
-		}
-	}
-}

package.json

@@ -0,0 +1,54 @@
+{
+  "title": "html2canvas",
+  "name": "html2canvas",
+  "description": "Screenshots with JavaScript",
+  "main": "src/core.js",
+  "version": "0.5.0-alpha2",
+  "author": {
+    "name": "Niklas von Hertzen",
+    "email": "niklasvh@gmail.com",
+    "url": "http://hertzen.com"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "dependencies": {
+    "es6-promise": "^2.0.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:niklasvh/html2canvas.git"
+  },
+  "bugs": {
+    "url": "https://github.com/niklasvh/html2canvas/issues"
+  },
+  "devDependencies": {
+    "base64-arraybuffer": ">= 0.1.0",
+    "bluebird": "^2.7.1",
+    "bower": "^1.3.12",
+    "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-contrib-watch": "^0.6.1",
+    "grunt-execute": "^0.2.2",
+    "grunt-mocha-cli": "^1.12.0",
+    "grunt-mocha-phantomjs": "^0.6.0",
+    "html2canvas-proxy": "0.0.5",
+    "humanize-duration": "^2.0.1",
+    "lodash": "^2.4.1",
+    "png-js": ">= 0.1.1",
+    "wd": "^0.2.21"
+  },
+  "scripts": {
+    "test": "grunt travis --verbose",
+    "postpublish": "bower register html2canvas git://github.com/niklasvh/html2canvas.git"
+  },
+  "homepage": "http://html2canvas.hertzen.com",
+  "licenses": [
+    {
+      "type": "MIT"
+    }
+  ]
+}

readme.md

@@ -1,78 +1,86 @@
 html2canvas
 ===========
 
+[Homepage](http://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](http://stackoverflow.com/questions/tagged/html2canvas?sort=newest) | [Donate](https://www.gittip.com/niklasvh/)
+
+[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Build Status](https://travis-ci.org/niklasvh/html2canvas.png)](https://travis-ci.org/niklasvh/html2canvas)
+
 #### JavaScript HTML renderer ####
-       
- This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
+
+ The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
 
 
 ###How does it work?###
-The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements. However, as many elements are displayed differently on different browsers and operating systems (such as form elements such as radio buttons or checkboxes) as well as 
+The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.
 
-It does <b>not require any rendering from the server</b>, as the whole image is created on the <b>clients browser</b>. However, for browsers without <code>canvas</code> support alternatives such as <a href="http://flashcanvas.net/">flashcanvas</a> or <a href="http://excanvas.sourceforge.net/">ExplorerCanvas</a> are necessary to create the image. 
+It does **not require any rendering from the server**, as the whole image is created on the **clients browser**. However, as it is heavily dependent on the browser, this library is *not suitable* to be used in nodejs.
+It doesn't magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a [proxy](https://github.com/niklasvh/html2canvas/wiki/Proxies) to get the content to the [same origin](http://en.wikipedia.org/wiki/Same_origin_policy).
 
-Additionally, to render <code>iframe</code> content or images situated outside of the <a href="http://en.wikipedia.org/wiki/Same_origin_policy">same origin policy</a> a proxy will be necessary to load the content to the users browser.
+The script is still in a **very experimental state**, so I don't recommend using it in a production environment nor start building applications with it yet, as there will be still major changes made.
 
-The script is still in a very experimental state, so I don't recommend using it in a production environment nor start building applications with it yet, as there will be still major changes made. However, please do test it out and report your findings, especially if something should be working, but is displaying it incorrectly.
-        
 ###Browser compatibility###
 
 The script should work fine on the following browsers:
 
 * Firefox 3.5+
-* Google Chrome 
-* Newer versions of Opera (exactly how new is yet to be determined)
-* >=IE9 (Older versions compatible with the use of flashcanvas)
-        
-Note that the compatibility will most likely be increased in future builds, as many of the current restrictions have at least partial work arounds, which can be used with older browser versions.
+* Google Chrome
+* Opera 12+
+* IE9+
+* Safari 6+
 
-###So what isn't included yet?###
-    
-There are still a lot of CSS properties missing, including most CSS3 properties such as <code>text-shadow</code>, <code>box-radius</code> etc. as well as all elements created by the browser, such as radio and checkbox buttons and list icons. I will compile a full list of supported elements and CSS properties soon. 
- There is no support for <code>frame</code> and <code>object</code> content such as Flash.
+As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.
 
 ### Usage ###
+
+**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:
-` html2canvas( [ element ], options);`
+` html2canvas(element[, options]);`
 
-To access the created canvas, provide the `onrendered` event in the options which returns the canvas element as the first argument, as such:
+The function returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) containing the `<canvas>` element. Simply add a promise fullfillment handler to the promise using `then`:
 
-    html2canvas( [ document.body ], {
-        onrendered: function( canvas ) {
-            /* canvas is the actual canvas element, 
-               to append it to the page call for example 
-               document.body.appendChild( canvas );
-            */
-            }
+    html2canvas(document.body).then(function(canvas) {
+        document.body.appendChild(canvas);
     });
- 
+
+### Building ###
+
+The library uses [grunt](http://gruntjs.com/) for building. Alternatively, you can download the latest build from [here](https://github.com/niklasvh/html2canvas/blob/master/dist/html2canvas.js).
+
+Clone git repository with submodules:
+
+    $ git clone --recursive git://github.com/niklasvh/html2canvas.git
+
+Install Grunt and uglifyjs:
+
+    $ npm install -g grunt-cli uglify-js
+
+Run the full build process (including lint, qunit and webdriver tests):
+
+    $ grunt
+
+Skip lint and tests and simply build from source:
+
+    $ grunt build
+
+### Running tests ###
+
+The library has two sets of tests. The first set is a number of qunit tests that check that different values parsed by browsers are correctly converted in html2canvas. To run these tests with grunt you'll need [phantomjs](http://phantomjs.org/).
+
+The other set of tests run Firefox, Chrome and Internet Explorer with [webdriver](https://github.com/niklasvh/webdriver.js). The selenium standalone server (runs on Java) is required for these tests and can be downloaded from [here](http://code.google.com/p/selenium/downloads/list). They capture an actual screenshot from the test pages and compare the image to the screenshot created by html2canvas and calculate the percentage differences. These tests generally aren't expected to provide 100% matches, but while commiting changes, these should generally not go decrease from the baseline values.
+
+Start by downloading the dependencies:
+
+    $ npm install
+
+Run qunit tests:
+
+    $ grunt test
 
 ### Examples ###
 
-For more information and examples, please visit the <a href="http://html2canvas.hertzen.com">homepage</a> or try the <a href="http://html2canvas.hertzen.com/screenshots.html">test console</a>.
+For more information and examples, please visit the [homepage](http://html2canvas.hertzen.com) or try the [test console](http://html2canvas.hertzen.com/screenshots.html).
 
-### Changelog ###
+### Contributing ###
 
-v0.34 - 26.6.2012
-
-* Removed (last?) jQuery dependencies (<a href="https://github.com/niklasvh/html2canvas/commit/343b86705fe163766fcf735eb0217130e4bd5b17">niklasvh</a>)
-* SVG-powered rendering (<a href="https://github.com/niklasvh/html2canvas/commit/67d3e0d0f59a5a654caf71a2e3be6494ff146c75">niklasvh</a>)
-* Radial gradients (<a href="https://github.com/niklasvh/html2canvas/commit/4f22c18043a73c0c3bbf3b5e4d62714c56acd3c7">SunboX</a>)
-* Split renderers to their own objects (<a href="https://github.com/niklasvh/html2canvas/commit/94f2f799a457cd29a21cc56ef8c06f1697866739">niklasvh</a>)
-* Simplified API, cleaned up code (<a href="https://github.com/niklasvh/html2canvas/commit/c7d526c9eaa6a4abf4754d205fe1dee360c7660e">niklasvh</a>)
-
-v0.33 - 2.3.2012
-
-* SVG taint fix, and additional taint testing options for rendering (<a href="https://github.com/niklasvh/html2canvas/commit/2dc8b9385e656696cb019d615bdfa1d98b17d5d4">niklasvh</a>)
-* Added support for CORS images and option to create canvas as tainted (<a href="https://github.com/niklasvh/html2canvas/commit/3ad49efa0032cde25c6ed32a39e35d1505d3b2ef">niklasvh</a>)
-* Improved minification saved ~1K! (<a href="https://github.com/cobexer/html2canvas/commit/b82be022b2b9240bd503e078ac980bde2b953e43">cobexer</a>)
-* Added integrated support for Flashcanvas (<a href="https://github.com/niklasvh/html2canvas/commit/e9257191519f67d74fd5e364d8dee3c0963ba5fc">niklasvh</a>)
-* Fixed a variety of legacy IE bugs (<a href="https://github.com/niklasvh/html2canvas/commit/b65357c55d0701017bafcd357bc654b54d458f8f">niklasvh</a>)
-
-v0.32 - 20.2.2012
-
-* Added changelog!
-* Added bookmarklet (<a href="https://github.com/niklasvh/html2canvas/commit/b320dd306e1a2d32a3bc5a71b6ebf6d8c060cde5">cobexer</a>)
-* Option to select single element to render (<a href="https://github.com/niklasvh/html2canvas/commit/0cb252ada91c84ef411288b317c03e97da1f12ad">niklasvh</a>)
-* Fixed closure compiler warnings (<a href="https://github.com/niklasvh/html2canvas/commit/36ff1ec7aadcbdf66851a0b77f0b9e87e4a8e4a1">cobexer</a>)
-* Enable profiling in FF (<a href="https://github.com/niklasvh/html2canvas/commit/bbd75286a8406cf9e5aea01fdb7950d547edefb9">cobexer</a>)
+If you wish to contribute to the project, please send the pull requests to the develop branch. Before submitting any changes, try and test that the changes work with all the support browsers. If some CSS property isn't supported or is incomplete, please create appropriate tests for it as well before submitting any code changes.

src/Core.js

@@ -1,278 +0,0 @@
-/*
-  html2canvas @VERSION@ <http://html2canvas.hertzen.com>
-  Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
-  http://www.twitter.com/niklasvh
-
-  Released under MIT License
- */
-"use strict";
-
-var _html2canvas = {},
-previousElement,
-computedCSS,
-html2canvas;
-
-
-function h2clog(a) {
-    if (_html2canvas.logging && window.console && window.console.log) {
-        window.console.log(a);
-    }
-}
-
-_html2canvas.Util = {};
-
-_html2canvas.Util.backgroundImage = function (src) {
-
-    if (/data:image\/.*;base64,/i.test( src ) || /^(-webkit|-moz|linear-gradient|-o-)/.test( src )) {
-        return src;
-    }
-
-    if (src.toLowerCase().substr( 0, 5 ) === 'url("') {
-        src = src.substr( 5 );
-        src = src.substr( 0, src.length - 2 );
-    } else {
-        src = src.substr( 4 );
-        src = src.substr( 0, src.length - 1 );
-    }
-
-    return src;
-};
-
-_html2canvas.Util.Bounds = function getBounds (el) {
-    var clientRect,
-    bounds = {};
-
-    if (el.getBoundingClientRect){
-        clientRect = el.getBoundingClientRect();
-
-
-        // TODO add scroll position to bounds, so no scrolling of window necessary
-        bounds.top = clientRect.top;
-        bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height);
-        bounds.left = clientRect.left;
-
-        // older IE doesn't have width/height, but top/bottom instead
-        bounds.width = clientRect.width || (clientRect.right - clientRect.left);
-        bounds.height = clientRect.height || (clientRect.bottom - clientRect.top);
-
-        return bounds;
-
-    }
-};
-
-_html2canvas.Util.getCSS = function (el, attribute) {
-    // return $(el).css(attribute);
-
-    var val;
-
-    function toPX( attribute, val ) {
-        var rsLeft = el.runtimeStyle && el.runtimeStyle[ attribute ],
-        left,
-        style = el.style;
-
-        // Check if we are not dealing with pixels, (Opera has issues with this)
-        // Ported from jQuery css.js
-        // From the awesome hack by Dean Edwards
-        // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
-
-        // If we're not dealing with a regular pixel number
-        // but a number that has a weird ending, we need to convert it to pixels
-
-        if ( !/^-?[0-9]+\.?[0-9]*(?:px)?$/i.test( val ) && /^-?\d/.test( val ) ) {
-
-            // Remember the original values
-            left = style.left;
-
-            // Put in the new values to get a computed value out
-            if ( rsLeft ) {
-                el.runtimeStyle.left = el.currentStyle.left;
-            }
-            style.left = attribute === "fontSize" ? "1em" : (val || 0);
-            val = style.pixelLeft + "px";
-
-            // Revert the changed values
-            style.left = left;
-            if ( rsLeft ) {
-                el.runtimeStyle.left = rsLeft;
-            }
-
-        }
-
-        if (!/^(thin|medium|thick)$/i.test( val )) {
-            return Math.round(parseFloat( val )) + "px";
-        }
-
-        return val;
-
-    }
-
-
-    if ( window.getComputedStyle ) {
-        if ( previousElement !== el ) {
-            computedCSS = document.defaultView.getComputedStyle(el, null);
-        }
-        val = computedCSS[ attribute ];
-
-        if ( attribute === "backgroundPosition" ) {
-
-            val = (val.split(",")[0] || "0 0").split(" ");
-
-            val[ 0 ] = ( val[0].indexOf( "%" ) === -1 ) ? toPX(  attribute + "X", val[ 0 ] ) : val[ 0 ];
-            val[ 1 ] = ( val[1] === undefined ) ? val[0] : val[1]; // IE 9 doesn't return double digit always
-            val[ 1 ] = ( val[1].indexOf( "%" ) === -1 ) ? toPX(  attribute + "Y", val[ 1 ] ) : val[ 1 ];
-        } else if ( /border(Top|Bottom)(Left|Right)Radius/.test( attribute) ) {
-            var arr = val.split(" ");
-            if ( arr.length <= 1 ) {
-                arr[ 1 ] = arr[ 0 ];
-            }
-            arr[ 0 ] = parseInt( arr[ 0 ], 10 );
-            arr[ 1 ] = parseInt( arr[ 1 ], 10 );
-            val = arr;
-        }
-
-    } else if ( el.currentStyle ) {
-        // IE 9>
-        if (attribute === "backgroundPosition") {
-            // Older IE uses -x and -y
-            val = [ toPX(  attribute + "X", el.currentStyle[ attribute + "X" ]  ), toPX(  attribute + "Y", el.currentStyle[ attribute + "Y" ]  ) ];
-        } else {
-
-            val = toPX(  attribute, el.currentStyle[ attribute ]  );
-
-            if (/^(border)/i.test( attribute ) && /^(medium|thin|thick)$/i.test( val )) {
-                switch (val) {
-                    case "thin":
-                        val = "1px";
-                        break;
-                    case "medium":
-                        val = "0px"; // this is wrong, it should be 3px but IE uses medium for no border as well.. TODO find a work around
-                        break;
-                    case "thick":
-                        val = "5px";
-                        break;
-                }
-            }
-        }
-
-
-
-    }
-
-
-
-
-    return val;
-
-
-
-//return $(el).css(attribute);
-
-
-};
-
-
-_html2canvas.Util.BackgroundPosition = function ( el, bounds, image ) {
-    // TODO add support for multi image backgrounds
-
-    var bgposition =  _html2canvas.Util.getCSS( el, "backgroundPosition" ) ,
-    topPos,
-    left,
-    percentage,
-    val;
-
-    if (bgposition.length === 1){
-        val = bgposition;
-
-        bgposition = [];
-
-        bgposition[0] = val;
-        bgposition[1] = val;
-    }
-
-
-
-    if (bgposition[0].toString().indexOf("%") !== -1){
-        percentage = (parseFloat(bgposition[0])/100);
-        left =  ((bounds.width * percentage)-(image.width*percentage));
-
-    }else{
-        left = parseInt(bgposition[0],10);
-    }
-
-    if (bgposition[1].toString().indexOf("%") !== -1){
-
-        percentage = (parseFloat(bgposition[1])/100);
-        topPos =  ((bounds.height * percentage)-(image.height*percentage));
-    }else{
-        topPos = parseInt(bgposition[1],10);
-    }
-
-
-
-
-    return {
-        top: topPos,
-        left: left
-    };
-
-};
-
-_html2canvas.Util.Extend = function (options, defaults) {
-    for (var key in options) {
-        if (options.hasOwnProperty(key)) {
-            defaults[key] = options[key];
-        }
-    }
-    return defaults;
-};
-
-
-/*
- * Derived from jQuery.contents()
- * Copyright 2010, John Resig
- * Dual licensed under the MIT or GPL Version 2 licenses.
- * http://jquery.org/license
- */
-_html2canvas.Util.Children = function( elem ) {
-
-
-    var children;
-    try {
-
-        children = (elem.nodeName && elem.nodeName.toUpperCase() === "IFRAME") ?
-        elem.contentDocument || elem.contentWindow.document : (function( array ){
-            var ret = [];
-
-            if ( array !== null ) {
-
-                (function( first, second ) {
-                    var i = first.length,
-                    j = 0;
-
-                    if ( typeof second.length === "number" ) {
-                        for ( var l = second.length; j < l; j++ ) {
-                            first[ i++ ] = second[ j ];
-                        }
-
-                    } else {
-                        while ( second[j] !== undefined ) {
-                            first[ i++ ] = second[ j++ ];
-                        }
-                    }
-
-                    first.length = i;
-
-                    return first;
-                })( ret, array );
-
-            }
-
-            return ret;
-        })( elem.childNodes );
-
-    } catch (ex) {
-        h2clog("html2canvas.Util.Children failed with exception: " + ex.message);
-        children = [];
-    }
-    return children;
-};

src/Generate.js

@@ -1,454 +0,0 @@
-/*
-  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
- */
-
-(function(){
-
-_html2canvas.Generate = {};
-
-var reGradients = [
-    /^(-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-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z-]+)([\w\d\.\s,%\(\)]+)\)$/,
-    /^(-moz-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s?([a-z-]*)([\w\d\.\s,%\(\)]+)\)$/,
-    /^(-o-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z-]+)([\w\d\.\s,%\(\)]+)\)$/
-];
-
-/*
- * TODO: Add IE10 vendor prefix (-ms) support
- * TODO: Add W3C gradient (linear-gradient) support
- * TODO: Add old Webkit -webkit-gradient(radial, ...) support
- * 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;
-
-    for(i = 0; i < len; i+=1){
-        m1 = css.match(reGradients[i]);
-        if(m1) break;
-    }
-
-    if(m1) {
-        switch(m1[1]) {
-            case '-webkit-linear-gradient':
-            case '-o-linear-gradient':
-
-                gradient = {
-                    type: 'linear',
-                    x0: null,
-                    y0: null,
-                    x1: null,
-                    y1: null,
-                    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.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);
-                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})?(%|px)?/);
-                        if(m3[2]){
-                            stop = parseFloat(m3[2]);
-                            if(m3[3] === '%'){
-                                stop /= 100;
-                            } else { // px - stupid opera
-                                stop /= bounds.width;
-                            }
-                        } else {
-                            stop = i * step;
-                        }
-                        gradient.colorStops.push({
-                            color: m3[1],
-                            stop: stop
-                        });
-                    }
-                }
-                break;
-
-            case '-webkit-gradient':
-
-                gradient = {
-                    type: m1[2] === 'radial' ? 'circle' : m1[2], // TODO: Add radial gradient support for older mozilla definitions
-                    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;
-
-            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;
-                }
-
-                // 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;
-
-            case '-webkit-radial-gradient':
-            case '-moz-radial-gradient':
-            case '-o-radial-gradient':
-
-                gradient = {
-                    type: 'circle',
-                    x0: 0,
-                    y0: 0,
-                    x1: bounds.width,
-                    y1: bounds.height,
-                    cx: 0,
-                    cy: 0,
-                    rx: 0,
-                    ry: 0,
-                    colorStops: []
-                };
-
-                // center
-                m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);
-                if(m2){
-                    gradient.cx = (m2[1] * bounds.width) / 100;
-                    gradient.cy = (m2[2] * bounds.height) / 100;
-                }
-
-                // size
-                m2 = m1[3].match(/\w+/);
-                m3 = m1[4].match(/[a-z-]*/);
-                if(m2 && m3){
-                    switch(m3[0]){
-                        case 'farthest-corner':
-                        case 'cover': // is equivalent to farthest-corner
-                        case '': // mozilla removes "cover" from definition :(
-                            var tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));
-                            var tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
-                            var br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
-                            var bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));
-                            gradient.rx = gradient.ry = Math.max(tl, tr, br, bl);
-                            break;
-                        case 'closest-corner':
-                            var tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));
-                            var tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
-                            var br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
-                            var bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));
-                            gradient.rx = gradient.ry = Math.min(tl, tr, br, bl);
-                            break;
-                        case 'farthest-side':
-                            if(m2[0] === 'circle'){
-                                gradient.rx = gradient.ry = Math.max(
-                                    gradient.cx,
-                                    gradient.cy,
-                                    gradient.x1 - gradient.cx,
-                                    gradient.y1 - gradient.cy
-                                );
-                            } else { // ellipse
-
-                                gradient.type = m2[0];
-
-                                gradient.rx = Math.max(
-                                    gradient.cx,
-                                    gradient.x1 - gradient.cx
-                                );
-                                gradient.ry = Math.max(
-                                    gradient.cy,
-                                    gradient.y1 - gradient.cy
-                                );
-                            }
-                            break;
-                        case 'closest-side':
-                        case 'contain': // is equivalent to closest-side
-                            if(m2[0] === 'circle'){
-                                gradient.rx = gradient.ry = Math.min(
-                                    gradient.cx,
-                                    gradient.cy,
-                                    gradient.x1 - gradient.cx,
-                                    gradient.y1 - gradient.cy
-                                );
-                            } else { // ellipse
-
-                                gradient.type = m2[0];
-
-                                gradient.rx = Math.min(
-                                    gradient.cx,
-                                    gradient.x1 - gradient.cx
-                                );
-                                gradient.ry = Math.min(
-                                    gradient.cy,
-                                    gradient.y1 - gradient.cy
-                                );
-                            }
-                            break;
-
-                        // TODO: add support for "30px 40px" sizes (webkit only)
-                    }
-                }
-
-                // color stops
-                m2 = m1[5].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})?(%|px)?/);
-                        if(m3[2]){
-                            stop = parseFloat(m3[2]);
-                            if(m3[3] === '%'){
-                                stop /= 100;
-                            } else { // px - stupid opera
-                                stop /= bounds.width;
-                            }
-                        } else {
-                            stop = i * step;
-                        }
-                        gradient.colorStops.push({
-                            color: m3[1],
-                            stop: stop
-                        });
-                    }
-                }
-                break;
-        }
-    }
-
-    return gradient;
-};
-
-_html2canvas.Generate.Gradient = function(src, bounds) {
-    var canvas = document.createElement('canvas'),
-    ctx = canvas.getContext('2d'),
-    gradient, grad, i, len, img;
-
-    canvas.width = bounds.width;
-    canvas.height = bounds.height;
-
-    // TODO: add support for multi defined background gradients (like radial gradient example in background.html)
-    gradient = _html2canvas.Generate.parseGradient(src, bounds);
-
-    img = new Image();
-
-    if(gradient){
-        if(gradient.type === 'linear'){
-            grad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1);
-
-            for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {
-                try {
-                    grad.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 = grad;
-            ctx.fillRect(0, 0, bounds.width, bounds.height);
-
-            img.src = canvas.toDataURL();
-        } else if(gradient.type === 'circle'){
-
-            grad = ctx.createRadialGradient(gradient.cx, gradient.cy, 0, gradient.cx, gradient.cy, gradient.rx);
-
-            for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {
-                try {
-                    grad.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 = grad;
-            ctx.fillRect(0, 0, bounds.width, bounds.height);
-
-            img.src = canvas.toDataURL();
-        } else if(gradient.type === 'ellipse'){
-
-            // draw circle
-            var canvasRadial = document.createElement('canvas'),
-                ctxRadial = canvasRadial.getContext('2d'),
-                ri = Math.max(gradient.rx, gradient.ry),
-                di = ri * 2, imgRadial;
-
-            canvasRadial.width = canvasRadial.height = di;
-
-            grad = ctxRadial.createRadialGradient(gradient.rx, gradient.ry, 0, gradient.rx, gradient.ry, ri);
-
-            for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {
-                try {
-                    grad.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]);
-                }
-            }
-
-            ctxRadial.fillStyle = grad;
-            ctxRadial.fillRect(0, 0, di, di);
-
-            ctx.fillStyle = gradient.colorStops[i - 1].color;
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-            imgRadial = new Image();
-            imgRadial.onload = function() { // wait until the image is filled
-
-                // transform circle to ellipse
-                ctx.drawImage(imgRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry);
-
-                img.src = canvas.toDataURL();
-
-            }
-            imgRadial.src = canvasRadial.toDataURL();
-        }
-    }
-
-    return img;
-};
-
-_html2canvas.Generate.ListAlpha = function(number) {
-    var tmp = "",
-    modulus;
-
-    do {
-        modulus = number % 26;
-        tmp = String.fromCharCode((modulus) + 64) + tmp;
-        number = number / 26;
-    }while((number*26) > 26);
-
-    return tmp;
-};
-
-_html2canvas.Generate.ListRoman = function(number) {
-    var romanArray = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"],
-    decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1],
-    roman = "",
-    v,
-    len = romanArray.length;
-
-    if (number <= 0 || number >= 4000) {
-        return number;
-    }
-
-    for (v=0; v < len; v+=1) {
-        while (number >= decimal[v]) {
-            number -= decimal[v];
-            roman += romanArray[v];
-        }
-    }
-
-    return roman;
-
-};
-
-})();

src/LICENSE

@@ -1,7 +0,0 @@
-/**
-  @license html2canvas @VERSION@ <http://html2canvas.hertzen.com>
-  Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
-  http://www.twitter.com/niklasvh
-
-  Released under MIT License
- */

src/Preload.js

@@ -1,360 +0,0 @@
-/*
-  html2canvas @VERSION@ <http://html2canvas.hertzen.com>
-  Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
-  http://www.twitter.com/niklasvh
-
-  Released under MIT License
- */
-
-_html2canvas.Preload = function( options ) {
-
-    var images = {
-        numLoaded: 0,   // also failed are counted here
-        numFailed: 0,
-        numTotal: 0,
-        cleanupDone: false
-    },
-    pageOrigin,
-    methods,
-    i,
-    count = 0,
-    element = options.elements[0] || document.body,
-    doc = element.ownerDocument,
-    domImages = doc.images, // TODO probably should limit it to images present in the element only
-    imgLen = domImages.length,
-    link = doc.createElement("a"),
-    supportCORS = (function( img ){
-        return (img.crossOrigin !== undefined);
-    })(new Image()),
-    timeoutTimer;
-
-    link.href = window.location.href;
-    pageOrigin  = link.protocol + link.host;
-
-
-
-
-
-
-    function isSameOrigin(url){
-        link.href = url;
-        link.href = link.href; // YES, BELIEVE IT OR NOT, that is required for IE9 - http://jsfiddle.net/niklasvh/2e48b/
-        var origin = link.protocol + link.host;
-        return (origin === pageOrigin);
-    }
-
-    function start(){
-        h2clog("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")");
-        if (!images.firstRun && images.numLoaded >= images.numTotal){
-            h2clog("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
-
-            if (typeof options.complete === "function"){
-                options.complete(images);
-            }
-
-        }
-    }
-
-    // TODO modify proxy to serve images with CORS enabled, where available
-    function proxyGetImage(url, img, imageObj){
-        var callback_name,
-        scriptUrl = options.proxy,
-        script;
-
-        link.href = url;
-        url = link.href; // work around for pages with base href="" set - WARNING: this may change the url
-
-        callback_name = 'html2canvas_' + (count++);
-        imageObj.callbackname = callback_name;
-
-        if (scriptUrl.indexOf("?") > -1) {
-            scriptUrl += "&";
-        } else {
-            scriptUrl += "?";
-        }
-        scriptUrl += 'url=' + encodeURIComponent(url) + '&callback=' + callback_name;
-        script = doc.createElement("script");
-
-        window[callback_name] = function(a){
-            if (a.substring(0,6) === "error:"){
-                imageObj.succeeded = false;
-                images.numLoaded++;
-                images.numFailed++;
-                start();
-            } else {
-                setImageLoadHandlers(img, imageObj);
-                img.src = a;
-            }
-            window[callback_name] = undefined; // to work with IE<9  // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
-            try {
-                delete window[callback_name];  // for all browser that support this
-            } catch(ex) {}
-            script.parentNode.removeChild(script);
-            script = null;
-            delete imageObj.script;
-            delete imageObj.callbackname;
-        };
-
-        script.setAttribute("type", "text/javascript");
-        script.setAttribute("src", scriptUrl);
-        imageObj.script = script;
-        window.document.body.appendChild(script);
-
-    }
-
-    function getImages (el) {
-
-
-
-        // if (!this.ignoreRe.test(el.nodeName)){
-        //
-        
-        var contents = _html2canvas.Util.Children(el),
-        i,
-        background_image,
-        src,
-        img,
-        elNodeType = false;
-
-        // Firefox fails with permission denied on pages with iframes
-        try {
-            var contentsLen = contents.length;
-            for (i = 0;  i < contentsLen; i+=1 ){
-                // var ignRe = new RegExp("("+this.ignoreElements+")");
-                // if (!ignRe.test(element.nodeName)){
-                getImages(contents[i]);
-                // }
-            }
-        }
-        catch( e ) {}
-
-
-        // }
-        try {
-            elNodeType = el.nodeType;
-        } catch (ex) {
-            elNodeType = false;
-            h2clog("html2canvas: failed to access some element's nodeType - Exception: " + ex.message);
-        }
-
-        if (elNodeType === 1 || elNodeType === undefined){
-
-            // opera throws exception on external-content.html
-            try {
-                background_image = _html2canvas.Util.getCSS(el, 'backgroundImage');
-            }catch(e) {
-                h2clog("html2canvas: failed to get background-image - Exception: " + e.message);
-            }
-            if ( background_image && background_image !== "1" && background_image !== "none" ) {
-
-                // TODO add multi image background support
-
-                if (/^(-webkit|-o|-moz|-ms|linear)-/.test( background_image )) {
-
-                    img = _html2canvas.Generate.Gradient( background_image, _html2canvas.Util.Bounds( el ) );
-
-                    if ( img !== undefined ){
-                        images[background_image] = {
-                            img: img,
-                            succeeded: true
-                        };
-                        images.numTotal++;
-                        images.numLoaded++;
-                        start();
-
-                    }
-
-                } else {
-                    src = _html2canvas.Util.backgroundImage(background_image.match(/data:image\/.*;base64,/i) ? background_image : background_image.split(",")[0]);
-                    methods.loadImage(src);
-                }
-
-                /*
-            if (background_image && background_image !== "1" && background_image !== "none" && background_image.substring(0,7) !== "-webkit" && background_image.substring(0,3)!== "-o-" && background_image.substring(0,4) !== "-moz"){
-                // TODO add multi image background support
-                src = _html2canvas.Util.backgroundImage(background_image.split(",")[0]);
-                methods.loadImage(src);            */
-            }
-        }
-    }
-
-    function setImageLoadHandlers(img, imageObj) {
-        img.onload = function() {
-            if ( imageObj.timer !== undefined ) {
-                // CORS succeeded
-                window.clearTimeout( imageObj.timer );
-            }
-
-            images.numLoaded++;
-            imageObj.succeeded = true;
-            img.onerror = img.onload = null;
-            start();
-        };
-        img.onerror = function() {
-
-            if (img.crossOrigin === "anonymous") {
-                // CORS failed
-                window.clearTimeout( imageObj.timer );
-
-                // let's try with proxy instead
-                if ( options.proxy ) {
-                    var src = img.src;
-                    img = new Image();
-                    imageObj.img = img;
-                    img.src = src;
-
-                    proxyGetImage( img.src, img, imageObj );
-                    return;
-                }
-            }
-
-
-            images.numLoaded++;
-            images.numFailed++;
-            imageObj.succeeded = false;
-            img.onerror = img.onload = null;
-            start();
-
-        };
-
-        // TODO Opera has no load/error event for SVG images
-
-        // Opera ninja onload's cached images
-        /*
-        window.setTimeout(function(){
-            if ( img.width !== 0 && imageObj.succeeded === undefined ) {
-                img.onload();
-            }
-        }, 100); // needs a reflow for base64 encoded images? interestingly timeout of 0 doesn't work but 1 does.
-         */
-    }
-
-
-    methods = {
-        loadImage: function( src ) {
-            var img, imageObj;
-            if ( src && images[src] === undefined ) {
-                img = new Image();
-                if ( src.match(/data:image\/.*;base64,/i) ) {
-                    img.src = src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, '');
-                    imageObj = images[src] = {
-                        img: img
-                    };
-                    images.numTotal++;
-                    setImageLoadHandlers(img, imageObj);
-                } else if ( isSameOrigin( src ) || options.allowTaint ===  true ) {
-                    imageObj = images[src] = {
-                        img: img
-                    };
-                    images.numTotal++;
-                    setImageLoadHandlers(img, imageObj);
-                    img.src = src;
-                } else if ( supportCORS && !options.allowTaint && options.useCORS ) {
-                    // attempt to load with CORS
-
-                    img.crossOrigin = "anonymous";
-                    imageObj = images[src] = {
-                        img: img
-                    };
-                    images.numTotal++;
-                    setImageLoadHandlers(img, imageObj);
-                    img.src = src;
-
-                    // work around for https://bugs.webkit.org/show_bug.cgi?id=80028
-                    img.customComplete = function () {
-                        if (!this.img.complete) {
-                            this.timer = window.setTimeout(this.img.customComplete, 100);
-                        } else {
-                            this.img.onerror();
-                        }
-                    }.bind(imageObj);
-                    img.customComplete();
-
-                } else if ( options.proxy ) {
-                    imageObj = images[src] = {
-                        img: img
-                    };
-                    images.numTotal++;
-                    proxyGetImage( src, img, imageObj );
-                }
-            }
-
-        },
-        cleanupDOM: function(cause) {
-            var img, src;
-            if (!images.cleanupDone) {
-                if (cause && typeof cause === "string") {
-                    h2clog("html2canvas: Cleanup because: " + cause);
-                } else {
-                    h2clog("html2canvas: Cleanup after timeout: " + options.timeout + " ms.");
-                }
-
-                for (src in images) {
-                    if (images.hasOwnProperty(src)) {
-                        img = images[src];
-                        if (typeof img === "object" && img.callbackname && img.succeeded === undefined) {
-                            // cancel proxy image request
-                            window[img.callbackname] = undefined; // to work with IE<9  // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
-                            try {
-                                delete window[img.callbackname];  // for all browser that support this
-                            } catch(ex) {}
-                            if (img.script && img.script.parentNode) {
-                                img.script.setAttribute("src", "about:blank");  // try to cancel running request
-                                img.script.parentNode.removeChild(img.script);
-                            }
-                            images.numLoaded++;
-                            images.numFailed++;
-                            h2clog("html2canvas: Cleaned up failed img: '" + src + "' Steps: " + images.numLoaded + " / " + images.numTotal);
-                        }
-                    }
-                }
-
-                // cancel any pending requests
-                if(window.stop !== undefined) {
-                    window.stop();
-                } else if(document.execCommand !== undefined) {
-                    document.execCommand("Stop", false);
-                }
-                if (document.close !== undefined) {
-                    document.close();
-                }
-                images.cleanupDone = true;
-                if (!(cause && typeof cause === "string")) {
-                    start();
-                }
-            }
-        },
-        renderingDone: function() {
-            if (timeoutTimer) {
-                window.clearTimeout(timeoutTimer);
-            }
-        }
-
-    };
-
-    if (options.timeout > 0) {
-        timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout);
-    }
-    h2clog('html2canvas: Preload starts: finding background-images');
-    images.firstRun = true;
-
-    getImages( element );
-
-    h2clog('html2canvas: Preload: Finding images');
-    // load <img> images
-    for (i = 0; i < imgLen; i+=1){
-        methods.loadImage( domImages[i].getAttribute( "src" ) );
-    }
-
-    images.firstRun = false;
-    h2clog('html2canvas: Preload: Done.');
-    if ( images.numTotal === images.numLoaded ) {
-        start();
-    }
-
-    return methods;
-
-};
-
-
-

src/Queue.js

@@ -1,81 +0,0 @@
-/*
-  html2canvas @VERSION@ <http://html2canvas.hertzen.com>
-  Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
-  http://www.twitter.com/niklasvh
-
-  Released under MIT License
-*/
-function h2cRenderContext(width, height) {
-    var storage = [];
-    return {
-        storage: storage,
-        width: width,
-        height: height,
-        fillRect: function () {
-            storage.push({
-                type: "function",
-                name: "fillRect",
-                'arguments': arguments
-            });
-        },
-        drawShape: function() {
-          
-            var shape = [];
-            
-            storage.push({
-                type: "function",
-                name: "drawShape",
-                'arguments': shape
-            });
-          
-            return {
-                moveTo: function() {
-                    shape.push({
-                        name: "moveTo",
-                        'arguments': arguments
-                    });
-                },
-                lineTo: function() {
-                    shape.push({
-                        name: "lineTo",
-                        'arguments': arguments
-                    });
-                },
-                bezierCurveTo: function() {
-                    shape.push({
-                        name: "bezierCurveTo",
-                        'arguments': arguments
-                    });
-                },
-                quadraticCurveTo: function() {
-                    shape.push({
-                        name: "quadraticCurveTo",
-                        'arguments': arguments
-                    });
-                }
-            };
-          
-        },
-        drawImage: function () {
-            storage.push({
-                type: "function",
-                name: "drawImage",
-                'arguments': arguments
-            });
-        },
-        fillText: function () {
-            storage.push({
-                type: "function",
-                name: "fillText",
-                'arguments': arguments
-            });
-        },
-        setVariable: function (variable, value) {
-            storage.push({
-                type: "variable",
-                name: variable,
-                'arguments': value
-            });
-        }
-    };
-}

src/Renderer.js

@@ -1,66 +0,0 @@
-/*
-  html2canvas @VERSION@ <http://html2canvas.hertzen.com>
-  Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
-  http://www.twitter.com/niklasvh
-
-  Released under MIT License
-*/
-_html2canvas.Renderer = function(parseQueue, options){
-
-
-    var queue = [];
-
-    function sortZ(zStack){
-        var subStacks = [],
-        stackValues = [],
-        zStackChildren = zStack.children,
-        s,
-        i,
-        stackLen,
-        zValue,
-        zLen,
-        stackChild,
-        b,
-        subStackLen;
-
-
-        for (s = 0, zLen = zStackChildren.length; s < zLen; s+=1){
-
-            stackChild = zStackChildren[s];
-
-            if (stackChild.children && stackChild.children.length > 0){
-                subStacks.push(stackChild);
-                stackValues.push(stackChild.zindex);
-            }else{
-                queue.push(stackChild);
-            }
-
-        }
-
-        stackValues.sort(function(a, b) {
-            return a - b;
-        });
-
-        for (i = 0, stackLen = stackValues.length; i < stackLen; i+=1){
-            zValue = stackValues[i];
-            for (b = 0, subStackLen = subStacks.length; b <= subStackLen; b+=1){
-
-                if (subStacks[b].zindex === zValue){
-                    stackChild = subStacks.splice(b, 1);
-                    sortZ(stackChild[0]);
-                    break;
-
-                }
-            }
-        }
-
-    }
-
-
-    sortZ(parseQueue.zIndex);
-    if ( typeof options._renderer._create !== "function" ) {
-        throw new Error("Invalid renderer defined");
-    }
-    return options._renderer._create( parseQueue, options, document, queue, _html2canvas );
-
-};

src/Util.js

@@ -1,98 +0,0 @@
-/*
-  html2canvas @VERSION@ <http://html2canvas.hertzen.com>
-  Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
-  http://www.twitter.com/niklasvh
-
-  Released under MIT License
-*/
-
-
-html2canvas = function( elements, opts ) {
-
-    var queue,
-    canvas,
-    options = {
-        // general
-        logging: false,
-        elements: elements,
-
-        // preload options
-        proxy: "http://html2canvas.appspot.com/",
-        timeout: 0,    // no timeout
-        useCORS: false, // try to load images as CORS (where available), before falling back to proxy
-        allowTaint: false, // whether to allow images to taint the canvas, won't need proxy if set to true
-
-        // parse options
-        svgRendering: false, // use svg powered rendering where available (FF11+)
-        iframeDefault: "default",
-        ignoreElements: "IFRAME|OBJECT|PARAM",
-        useOverflow: true,
-        letterRendering: false,
-
-        // render options
-
-        flashcanvas: undefined, // path to flashcanvas
-        width: null,
-        height: null,
-        taintTest: true, // do a taint test with all images before applying to canvas
-		renderer: "Canvas"
-    }, renderer;
-
-    options = _html2canvas.Util.Extend(opts, options);
-
-	if (typeof options.renderer === "string" && _html2canvas.Renderer[options.renderer] !== undefined) {
-		options._renderer = _html2canvas.Renderer[options.renderer]( options );
-	} else if (typeof options.renderer === "function") {
-		options._renderer = options.renderer( options );
-	} else {
-		throw("Unknown renderer");
-	}
-
-    _html2canvas.logging = options.logging;
-    options.complete = function( images ) {
-
-        if (typeof options.onpreloaded === "function") {
-            if ( options.onpreloaded( images ) === false ) {
-                return;
-            }
-        }
-        queue = _html2canvas.Parse( images, options );
-
-        if (typeof options.onparsed === "function") {
-            if ( options.onparsed( queue ) === false ) {
-                return;
-            }
-        }
-
-        canvas = _html2canvas.Renderer( queue, options );
-
-        if (typeof options.onrendered === "function") {
-            options.onrendered( canvas );
-        }
-
-
-    };
-
-    // for pages without images, we still want this to be async, i.e. return methods before executing
-    window.setTimeout( function(){
-        _html2canvas.Preload( options );
-    }, 0 );
-
-    return {
-        render: function( queue, opts ) {
-            return _html2canvas.Renderer( queue, _html2canvas.Util.Extend(opts, options) );
-        },
-        parse: function( images, opts ) {
-            return _html2canvas.Parse( images, _html2canvas.Util.Extend(opts, options) );
-        },
-        preload: function( opts ) {
-            return _html2canvas.Preload( _html2canvas.Util.Extend(opts, options) );
-        },
-        log: h2clog
-    };
-};
-
-html2canvas.log = h2clog; // for renderers
-html2canvas.Renderer = {
-    Canvas: undefined // We are assuming this will be used
-};

src/clone.js

@@ -0,0 +1,125 @@
+var log = require('./log');
+var Promise = require('./promise');
+
+var html2canvasCanvasCloneAttribute = "data-html2canvas-canvas-clone";
+var html2canvasCanvasCloneIndex = 0;
+
+function cloneNodeValues(document, clone, nodeName) {
+    var originalNodes = document.getElementsByTagName(nodeName);
+    var clonedNodes = clone.getElementsByTagName(nodeName);
+    var count = originalNodes.length;
+    for (var i = 0; i < count; i++) {
+        clonedNodes[i].value = originalNodes[i].value;
+    }
+}
+
+function restoreOwnerScroll(ownerDocument, x, y) {
+    if (ownerDocument.defaultView && (x !== ownerDocument.defaultView.pageXOffset || y !== ownerDocument.defaultView.pageYOffset)) {
+        ownerDocument.defaultView.scrollTo(x, y);
+    }
+}
+
+function labelCanvasElements(ownerDocument) {
+    [].slice.call(ownerDocument.querySelectorAll("canvas"), 0).forEach(function(canvas) {
+        canvas.setAttribute(html2canvasCanvasCloneAttribute, "canvas-" + html2canvasCanvasCloneIndex++);
+    });
+}
+
+function cloneCanvasContents(ownerDocument, documentClone) {
+    [].slice.call(ownerDocument.querySelectorAll("[" + html2canvasCanvasCloneAttribute + "]"), 0).forEach(function(canvas) {
+        try {
+            var clonedCanvas = documentClone.querySelector('[' + html2canvasCanvasCloneAttribute + '="' + canvas.getAttribute(html2canvasCanvasCloneAttribute) + '"]');
+            if (clonedCanvas) {
+                clonedCanvas.width = canvas.width;
+                clonedCanvas.height = canvas.height;
+                clonedCanvas.getContext("2d").putImageData(canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height), 0, 0);
+            }
+        } catch(e) {
+            log("Unable to copy canvas content from", canvas, e);
+        }
+        canvas.removeAttribute(html2canvasCanvasCloneAttribute);
+    });
+}
+
+function removeScriptNodes(parent) {
+    [].slice.call(parent.childNodes, 0).filter(isElementNode).forEach(function(node) {
+        if (node.tagName === "SCRIPT") {
+            parent.removeChild(node);
+        } else {
+            removeScriptNodes(node);
+        }
+    });
+    return parent;
+}
+
+function isIE9() {
+    return document.documentMode && document.documentMode <= 9;
+}
+
+// https://github.com/niklasvh/html2canvas/issues/503
+function cloneNodeIE9(node, javascriptEnabled) {
+    var clone = node.nodeType === 3 ? document.createTextNode(node.nodeValue) : node.cloneNode(false);
+
+    var child = node.firstChild;
+    while(child) {
+        if (javascriptEnabled === true || child.nodeType !== 1 || child.nodeName !== 'SCRIPT') {
+            clone.appendChild(cloneNodeIE9(child, javascriptEnabled));
+        }
+        child = child.nextSibling;
+    }
+
+    return clone;
+}
+
+
+
+function isElementNode(node) {
+    return node.nodeType === Node.ELEMENT_NODE;
+}
+
+module.exports = function(ownerDocument, containerDocument, width, height, options, x ,y) {
+    labelCanvasElements(ownerDocument);
+    var documentElement = isIE9() ? cloneNodeIE9(ownerDocument.documentElement, options.javascriptEnabled) : ownerDocument.documentElement.cloneNode(true);
+    var container = containerDocument.createElement("iframe");
+
+    container.className = "html2canvas-container";
+    container.style.visibility = "hidden";
+    container.style.position = "fixed";
+    container.style.left = "-10000px";
+    container.style.top = "0px";
+    container.style.border = "0";
+    container.width = width;
+    container.height = height;
+    container.scrolling = "no"; // ios won't scroll without it
+    containerDocument.body.appendChild(container);
+
+    return new Promise(function(resolve) {
+        var documentClone = container.contentWindow.document;
+
+        cloneNodeValues(ownerDocument.documentElement, documentElement, "textarea");
+        cloneNodeValues(ownerDocument.documentElement, documentElement, "select");
+
+        /* Chrome doesn't detect relative background-images assigned in inline <style> sheets when fetched through getComputedStyle
+         if window url is about:blank, we can assign the url to current by writing onto the document
+         */
+        container.contentWindow.onload = container.onload = function() {
+            var interval = setInterval(function() {
+                if (documentClone.body.childNodes.length > 0) {
+                    cloneCanvasContents(ownerDocument, documentClone);
+                    clearInterval(interval);
+                    if (options.type === "view") {
+                        container.contentWindow.scrollTo(x, y);
+                    }
+                    resolve(container);
+                }
+            }, 50);
+        };
+
+        documentClone.open();
+        documentClone.write("<!DOCTYPE html><html></html>");
+        // Chrome scrolls the parent document for some reason after the write to the cloned window???
+        restoreOwnerScroll(ownerDocument, x, y);
+        documentClone.replaceChild(options.javascriptEnabled === true ? documentClone.adoptNode(documentElement) : removeScriptNodes(documentClone.adoptNode(documentElement)), documentClone.documentElement);
+        documentClone.close();
+    });
+};

src/color.js

@@ -0,0 +1,271 @@
+// http://dev.w3.org/csswg/css-color/
+
+function Color(value) {
+    this.r = 0;
+    this.g = 0;
+    this.b = 0;
+    this.a = null;
+    var result = this.fromArray(value) ||
+        this.namedColor(value) ||
+        this.rgb(value) ||
+        this.rgba(value) ||
+        this.hex6(value) ||
+        this.hex3(value);
+}
+
+Color.prototype.darken = function(amount) {
+    var a = 1 - amount;
+    return  new Color([
+        Math.round(this.r * a),
+        Math.round(this.g * a),
+        Math.round(this.b * a),
+        this.a
+    ]);
+};
+
+Color.prototype.isTransparent = function() {
+    return this.a === 0;
+};
+
+Color.prototype.isBlack = function() {
+    return this.r === 0 && this.g === 0 && this.b === 0;
+};
+
+Color.prototype.fromArray = function(array) {
+    if (Array.isArray(array)) {
+        this.r = Math.min(array[0], 255);
+        this.g = Math.min(array[1], 255);
+        this.b = Math.min(array[2], 255);
+        if (array.length > 3) {
+            this.a = array[3];
+        }
+    }
+
+    return (Array.isArray(array));
+};
+
+var _hex3 = /^#([a-f0-9]{3})$/i;
+
+Color.prototype.hex3 = function(value) {
+    var match = null;
+    if ((match = value.match(_hex3)) !== null) {
+        this.r = parseInt(match[1][0] + match[1][0], 16);
+        this.g = parseInt(match[1][1] + match[1][1], 16);
+        this.b = parseInt(match[1][2] + match[1][2], 16);
+    }
+    return match !== null;
+};
+
+var _hex6 = /^#([a-f0-9]{6})$/i;
+
+Color.prototype.hex6 = function(value) {
+    var match = null;
+    if ((match = value.match(_hex6)) !== null) {
+        this.r = parseInt(match[1].substring(0, 2), 16);
+        this.g = parseInt(match[1].substring(2, 4), 16);
+        this.b = parseInt(match[1].substring(4, 6), 16);
+    }
+    return match !== null;
+};
+
+
+var _rgb = /^rgb\((\d{1,3}) *, *(\d{1,3}) *, *(\d{1,3})\)$/;
+
+Color.prototype.rgb = function(value) {
+    var match = null;
+    if ((match = value.match(_rgb)) !== null) {
+        this.r = Number(match[1]);
+        this.g = Number(match[2]);
+        this.b = Number(match[3]);
+    }
+    return match !== null;
+};
+
+var _rgba = /^rgba\((\d{1,3}) *, *(\d{1,3}) *, *(\d{1,3}) *, *(\d+\.?\d*)\)$/;
+
+Color.prototype.rgba = function(value) {
+    var match = null;
+    if ((match = value.match(_rgba)) !== null) {
+        this.r = Number(match[1]);
+        this.g = Number(match[2]);
+        this.b = Number(match[3]);
+        this.a = Number(match[4]);
+    }
+    return match !== null;
+};
+
+Color.prototype.toString = function() {
+    return this.a !== null && this.a !== 1 ?
+    "rgba(" + [this.r, this.g, this.b, this.a].join(",") + ")" :
+    "rgb(" + [this.r, this.g, this.b].join(",") + ")";
+};
+
+Color.prototype.namedColor = function(value) {
+    var color = colors[value.toLowerCase()];
+    if (color) {
+        this.r = color[0];
+        this.g = color[1];
+        this.b = color[2];
+    } else if (value.toLowerCase() === "transparent") {
+        this.r = this.g = this.b = this.a = 0;
+        return true;
+    }
+
+    return !!color;
+};
+
+Color.prototype.isColor = true;
+
+// JSON.stringify([].slice.call($$('.named-color-table tr'), 1).map(function(row) { return [row.childNodes[3].textContent, row.childNodes[5].textContent.trim().split(",").map(Number)] }).reduce(function(data, row) {data[row[0]] = row[1]; return data}, {}))
+var colors = {
+    "aliceblue": [240, 248, 255],
+    "antiquewhite": [250, 235, 215],
+    "aqua": [0, 255, 255],
+    "aquamarine": [127, 255, 212],
+    "azure": [240, 255, 255],
+    "beige": [245, 245, 220],
+    "bisque": [255, 228, 196],
+    "black": [0, 0, 0],
+    "blanchedalmond": [255, 235, 205],
+    "blue": [0, 0, 255],
+    "blueviolet": [138, 43, 226],
+    "brown": [165, 42, 42],
+    "burlywood": [222, 184, 135],
+    "cadetblue": [95, 158, 160],
+    "chartreuse": [127, 255, 0],
+    "chocolate": [210, 105, 30],
+    "coral": [255, 127, 80],
+    "cornflowerblue": [100, 149, 237],
+    "cornsilk": [255, 248, 220],
+    "crimson": [220, 20, 60],
+    "cyan": [0, 255, 255],
+    "darkblue": [0, 0, 139],
+    "darkcyan": [0, 139, 139],
+    "darkgoldenrod": [184, 134, 11],
+    "darkgray": [169, 169, 169],
+    "darkgreen": [0, 100, 0],
+    "darkgrey": [169, 169, 169],
+    "darkkhaki": [189, 183, 107],
+    "darkmagenta": [139, 0, 139],
+    "darkolivegreen": [85, 107, 47],
+    "darkorange": [255, 140, 0],
+    "darkorchid": [153, 50, 204],
+    "darkred": [139, 0, 0],
+    "darksalmon": [233, 150, 122],
+    "darkseagreen": [143, 188, 143],
+    "darkslateblue": [72, 61, 139],
+    "darkslategray": [47, 79, 79],
+    "darkslategrey": [47, 79, 79],
+    "darkturquoise": [0, 206, 209],
+    "darkviolet": [148, 0, 211],
+    "deeppink": [255, 20, 147],
+    "deepskyblue": [0, 191, 255],
+    "dimgray": [105, 105, 105],
+    "dimgrey": [105, 105, 105],
+    "dodgerblue": [30, 144, 255],
+    "firebrick": [178, 34, 34],
+    "floralwhite": [255, 250, 240],
+    "forestgreen": [34, 139, 34],
+    "fuchsia": [255, 0, 255],
+    "gainsboro": [220, 220, 220],
+    "ghostwhite": [248, 248, 255],
+    "gold": [255, 215, 0],
+    "goldenrod": [218, 165, 32],
+    "gray": [128, 128, 128],
+    "green": [0, 128, 0],
+    "greenyellow": [173, 255, 47],
+    "grey": [128, 128, 128],
+    "honeydew": [240, 255, 240],
+    "hotpink": [255, 105, 180],
+    "indianred": [205, 92, 92],
+    "indigo": [75, 0, 130],
+    "ivory": [255, 255, 240],
+    "khaki": [240, 230, 140],
+    "lavender": [230, 230, 250],
+    "lavenderblush": [255, 240, 245],
+    "lawngreen": [124, 252, 0],
+    "lemonchiffon": [255, 250, 205],
+    "lightblue": [173, 216, 230],
+    "lightcoral": [240, 128, 128],
+    "lightcyan": [224, 255, 255],
+    "lightgoldenrodyellow": [250, 250, 210],
+    "lightgray": [211, 211, 211],
+    "lightgreen": [144, 238, 144],
+    "lightgrey": [211, 211, 211],
+    "lightpink": [255, 182, 193],
+    "lightsalmon": [255, 160, 122],
+    "lightseagreen": [32, 178, 170],
+    "lightskyblue": [135, 206, 250],
+    "lightslategray": [119, 136, 153],
+    "lightslategrey": [119, 136, 153],
+    "lightsteelblue": [176, 196, 222],
+    "lightyellow": [255, 255, 224],
+    "lime": [0, 255, 0],
+    "limegreen": [50, 205, 50],
+    "linen": [250, 240, 230],
+    "magenta": [255, 0, 255],
+    "maroon": [128, 0, 0],
+    "mediumaquamarine": [102, 205, 170],
+    "mediumblue": [0, 0, 205],
+    "mediumorchid": [186, 85, 211],
+    "mediumpurple": [147, 112, 219],
+    "mediumseagreen": [60, 179, 113],
+    "mediumslateblue": [123, 104, 238],
+    "mediumspringgreen": [0, 250, 154],
+    "mediumturquoise": [72, 209, 204],
+    "mediumvioletred": [199, 21, 133],
+    "midnightblue": [25, 25, 112],
+    "mintcream": [245, 255, 250],
+    "mistyrose": [255, 228, 225],
+    "moccasin": [255, 228, 181],
+    "navajowhite": [255, 222, 173],
+    "navy": [0, 0, 128],
+    "oldlace": [253, 245, 230],
+    "olive": [128, 128, 0],
+    "olivedrab": [107, 142, 35],
+    "orange": [255, 165, 0],
+    "orangered": [255, 69, 0],
+    "orchid": [218, 112, 214],
+    "palegoldenrod": [238, 232, 170],
+    "palegreen": [152, 251, 152],
+    "paleturquoise": [175, 238, 238],
+    "palevioletred": [219, 112, 147],
+    "papayawhip": [255, 239, 213],
+    "peachpuff": [255, 218, 185],
+    "peru": [205, 133, 63],
+    "pink": [255, 192, 203],
+    "plum": [221, 160, 221],
+    "powderblue": [176, 224, 230],
+    "purple": [128, 0, 128],
+    "rebeccapurple": [102, 51, 153],
+    "red": [255, 0, 0],
+    "rosybrown": [188, 143, 143],
+    "royalblue": [65, 105, 225],
+    "saddlebrown": [139, 69, 19],
+    "salmon": [250, 128, 114],
+    "sandybrown": [244, 164, 96],
+    "seagreen": [46, 139, 87],
+    "seashell": [255, 245, 238],
+    "sienna": [160, 82, 45],
+    "silver": [192, 192, 192],
+    "skyblue": [135, 206, 235],
+    "slateblue": [106, 90, 205],
+    "slategray": [112, 128, 144],
+    "slategrey": [112, 128, 144],
+    "snow": [255, 250, 250],
+    "springgreen": [0, 255, 127],
+    "steelblue": [70, 130, 180],
+    "tan": [210, 180, 140],
+    "teal": [0, 128, 128],
+    "thistle": [216, 191, 216],
+    "tomato": [255, 99, 71],
+    "turquoise": [64, 224, 208],
+    "violet": [238, 130, 238],
+    "wheat": [245, 222, 179],
+    "white": [255, 255, 255],
+    "whitesmoke": [245, 245, 245],
+    "yellow": [255, 255, 0],
+    "yellowgreen": [154, 205, 50]
+};
+
+module.exports = Color;

src/core.js

@@ -0,0 +1,147 @@
+var Promise = require('./promise');
+var Support = require('./support');
+var CanvasRenderer = require('./renderers/canvas');
+var ImageLoader = require('./imageloader');
+var NodeParser = require('./nodeparser');
+var NodeContainer = require('./nodecontainer');
+var log = require('./log');
+var utils = require('./utils');
+var createWindowClone = require('./clone');
+var loadUrlDocument = require('./proxy').loadUrlDocument;
+var getBounds = utils.getBounds;
+
+var html2canvasNodeAttribute = "data-html2canvas-node";
+var html2canvasCloneIndex = 0;
+
+function html2canvas(nodeList, options) {
+    var index = html2canvasCloneIndex++;
+    options = options || {};
+    if (options.logging) {
+        window.html2canvas.logging = true;
+        window.html2canvas.start = Date.now();
+    }
+
+    options.async = typeof(options.async) === "undefined" ? true : options.async;
+    options.allowTaint = typeof(options.allowTaint) === "undefined" ? false : options.allowTaint;
+    options.removeContainer = typeof(options.removeContainer) === "undefined" ? true : options.removeContainer;
+    options.javascriptEnabled = typeof(options.javascriptEnabled) === "undefined" ? false : options.javascriptEnabled;
+    options.imageTimeout = typeof(options.imageTimeout) === "undefined" ? 10000 : options.imageTimeout;
+    options.renderer = typeof(options.renderer) === "function" ? options.renderer : CanvasRenderer;
+    options.strict = !!options.strict;
+
+    if (typeof(nodeList) === "string") {
+        if (typeof(options.proxy) !== "string") {
+            return Promise.reject("Proxy must be used when rendering url");
+        }
+        var width = options.width != null ? options.width : window.innerWidth;
+        var height = options.height != null ? options.height : window.innerHeight;
+        return loadUrlDocument(absoluteUrl(nodeList), options.proxy, document, width, height, options).then(function(container) {
+            return renderWindow(container.contentWindow.document.documentElement, container, options, width, height);
+        });
+    }
+
+    var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];
+    node.setAttribute(html2canvasNodeAttribute + index, index);
+    return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
+        if (typeof(options.onrendered) === "function") {
+            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
+            options.onrendered(canvas);
+        }
+        return canvas;
+    });
+}
+
+html2canvas.Promise = Promise;
+html2canvas.CanvasRenderer = CanvasRenderer;
+html2canvas.NodeContainer = NodeContainer;
+html2canvas.log = log;
+html2canvas.utils = utils;
+
+module.exports = (typeof(document) === "undefined" || typeof(Object.create) !== "function" || typeof(document.createElement("canvas").getContext) !== "function") ? function() {
+    return Promise.reject("No canvas support");
+} : html2canvas;
+
+function renderDocument(document, options, windowWidth, windowHeight, html2canvasIndex) {
+    return createWindowClone(document, document, windowWidth, windowHeight, options, document.defaultView.pageXOffset, document.defaultView.pageYOffset).then(function(container) {
+        log("Document cloned");
+        var attributeName = html2canvasNodeAttribute + html2canvasIndex;
+        var selector = "[" + attributeName + "='" + html2canvasIndex + "']";
+        document.querySelector(selector).removeAttribute(attributeName);
+        var clonedWindow = container.contentWindow;
+        var node = clonedWindow.document.querySelector(selector);
+        var oncloneHandler = (typeof(options.onclone) === "function") ? Promise.resolve(options.onclone(clonedWindow.document)) : Promise.resolve(true);
+        return oncloneHandler.then(function() {
+            return renderWindow(node, container, options, windowWidth, windowHeight);
+        });
+    });
+}
+
+function renderWindow(node, container, options, windowWidth, windowHeight) {
+    var clonedWindow = container.contentWindow;
+    var support = new Support(clonedWindow.document);
+    var imageLoader = new ImageLoader(options, support);
+    var bounds = getBounds(node);
+    var width = options.type === "view" ? windowWidth : documentWidth(clonedWindow.document);
+    var height = options.type === "view" ? windowHeight : documentHeight(clonedWindow.document);
+    var renderer = new options.renderer(width, height, imageLoader, options, document);
+    var parser = new NodeParser(node, renderer, support, imageLoader, options);
+    return parser.ready.then(function() {
+        log("Finished rendering");
+        var canvas;
+
+        if (options.type === "view") {
+            canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
+        } else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {
+            canvas = renderer.canvas;
+        } else {
+            canvas = crop(renderer.canvas, {width:  options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: clonedWindow.pageXOffset, y: clonedWindow.pageYOffset});
+        }
+
+        cleanupContainer(container, options);
+        return canvas;
+    });
+}
+
+function cleanupContainer(container, options) {
+    if (options.removeContainer) {
+        container.parentNode.removeChild(container);
+        log("Cleaned up container");
+    }
+}
+
+function crop(canvas, bounds) {
+    var croppedCanvas = document.createElement("canvas");
+    var x1 = Math.min(canvas.width - 1, Math.max(0, bounds.left));
+    var x2 = Math.min(canvas.width, Math.max(1, bounds.left + bounds.width));
+    var y1 = Math.min(canvas.height - 1, Math.max(0, bounds.top));
+    var y2 = Math.min(canvas.height, Math.max(1, bounds.top + bounds.height));
+    croppedCanvas.width = bounds.width;
+    croppedCanvas.height =  bounds.height;
+    log("Cropping canvas at:", "left:", bounds.left, "top:", bounds.top, "width:", (x2-x1), "height:", (y2-y1));
+    log("Resulting crop with width", bounds.width, "and height", bounds.height, " with x", x1, "and y", y1);
+    croppedCanvas.getContext("2d").drawImage(canvas, x1, y1, x2-x1, y2-y1, bounds.x, bounds.y, x2-x1, y2-y1);
+    return croppedCanvas;
+}
+
+function documentWidth (doc) {
+    return Math.max(
+        Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),
+        Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),
+        Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)
+    );
+}
+
+function documentHeight (doc) {
+    return Math.max(
+        Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
+        Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
+        Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
+    );
+}
+
+function absoluteUrl(url) {
+    var link = document.createElement("a");
+    link.href = url;
+    link.href = link.href;
+    return link;
+}

src/dummyimagecontainer.js

@@ -0,0 +1,23 @@
+var Promise = require('./promise');
+var log = require('./log');
+var smallImage = require('./utils').smallImage;
+
+function DummyImageContainer(src) {
+    this.src = src;
+    log("DummyImageContainer for", src);
+    if (!this.promise || !this.image) {
+        log("Initiating DummyImageContainer");
+        DummyImageContainer.prototype.image = new Image();
+        var image = this.image;
+        DummyImageContainer.prototype.promise = new Promise(function(resolve, reject) {
+            image.onload = resolve;
+            image.onerror = reject;
+            image.src = smallImage();
+            if (image.complete === true) {
+                resolve(image);
+            }
+        });
+    }
+}
+
+module.exports = DummyImageContainer;

src/font.js

@@ -0,0 +1,52 @@
+var smallImage = require('./utils').smallImage;
+
+function Font(family, size) {
+    var container = document.createElement('div'),
+        img = document.createElement('img'),
+        span = document.createElement('span'),
+        sampleText = 'Hidden Text',
+        baseline,
+        middle;
+
+    container.style.visibility = "hidden";
+    container.style.fontFamily = family;
+    container.style.fontSize = size;
+    container.style.margin = 0;
+    container.style.padding = 0;
+
+    document.body.appendChild(container);
+
+    img.src = smallImage();
+    img.width = 1;
+    img.height = 1;
+
+    img.style.margin = 0;
+    img.style.padding = 0;
+    img.style.verticalAlign = "baseline";
+
+    span.style.fontFamily = family;
+    span.style.fontSize = size;
+    span.style.margin = 0;
+    span.style.padding = 0;
+
+    span.appendChild(document.createTextNode(sampleText));
+    container.appendChild(span);
+    container.appendChild(img);
+    baseline = (img.offsetTop - span.offsetTop) + 1;
+
+    container.removeChild(span);
+    container.appendChild(document.createTextNode(sampleText));
+
+    container.style.lineHeight = "normal";
+    img.style.verticalAlign = "super";
+
+    middle = (img.offsetTop-container.offsetTop) + 1;
+
+    document.body.removeChild(container);
+
+    this.baseline = baseline;
+    this.lineWidth = 1;
+    this.middle = middle;
+}
+
+module.exports = Font;

src/fontmetrics.js

@@ -0,0 +1,14 @@
+var Font = require('./font');
+
+function FontMetrics() {
+    this.data = {};
+}
+
+FontMetrics.prototype.getMetrics = function(family, size) {
+    if (this.data[family + "-" + size] === undefined) {
+        this.data[family + "-" + size] = new Font(family, size);
+    }
+    return this.data[family + "-" + size];
+};
+
+module.exports = FontMetrics;

src/framecontainer.js

@@ -0,0 +1,32 @@
+var utils = require('./utils');
+var Promise = require('./promise');
+var getBounds = utils.getBounds;
+var loadUrlDocument = require('./proxy').loadUrlDocument;
+
+function FrameContainer(container, sameOrigin, options) {
+    this.image = null;
+    this.src = container;
+    var self = this;
+    var bounds = getBounds(container);
+    this.promise = (!sameOrigin ? this.proxyLoad(options.proxy, bounds, options) : new Promise(function(resolve) {
+        if (container.contentWindow.document.URL === "about:blank" || container.contentWindow.document.documentElement == null) {
+            container.contentWindow.onload = container.onload = function() {
+                resolve(container);
+            };
+        } else {
+            resolve(container);
+        }
+    })).then(function(container) {
+        var html2canvas = require('./core');
+        return html2canvas(container.contentWindow.document.documentElement, {type: 'view', width: container.width, height: container.height, proxy: options.proxy, javascriptEnabled: options.javascriptEnabled, removeContainer: options.removeContainer, allowTaint: options.allowTaint, imageTimeout: options.imageTimeout / 2});
+    }).then(function(canvas) {
+        return self.image = canvas;
+    });
+}
+
+FrameContainer.prototype.proxyLoad = function(proxy, bounds, options) {
+    var container = this.src;
+    return loadUrlDocument(container.src, proxy, container.ownerDocument, bounds.width, bounds.height, options);
+};
+
+module.exports = FrameContainer;

src/gradientcontainer.js

@@ -0,0 +1,19 @@
+var Promise = require('./promise');
+
+function GradientContainer(imageData) {
+    this.src = imageData.value;
+    this.colorStops = [];
+    this.type = null;
+    this.x0 = 0.5;
+    this.y0 = 0.5;
+    this.x1 = 0.5;
+    this.y1 = 0.5;
+    this.promise = Promise.resolve(true);
+}
+
+GradientContainer.prototype.TYPES = {
+    LINEAR: 1,
+    RADIAL: 2
+};
+
+module.exports = GradientContainer;

src/html2canvas-post.txt

@@ -1,2 +0,0 @@
-window.html2canvas = html2canvas;
-}(window, document));

src/html2canvas-pre.txt

@@ -1 +0,0 @@
-(function(window, document, undefined){

src/imagecontainer.js

@@ -0,0 +1,21 @@
+var Promise = require('./promise');
+
+function ImageContainer(src, cors) {
+    this.src = src;
+    this.image = new Image();
+    var self = this;
+    this.tainted = null;
+    this.promise = new Promise(function(resolve, reject) {
+        self.image.onload = resolve;
+        self.image.onerror = reject;
+        if (cors) {
+            self.image.crossOrigin = "anonymous";
+        }
+        self.image.src = src;
+        if (self.image.complete === true) {
+            resolve(self.image);
+        }
+    });
+}
+
+module.exports = ImageContainer;

src/imageloader.js

@@ -0,0 +1,158 @@
+var Promise = require('./promise');
+var log = require('./log');
+var ImageContainer = require('./imagecontainer');
+var DummyImageContainer = require('./dummyimagecontainer');
+var ProxyImageContainer = require('./proxyimagecontainer');
+var FrameContainer = require('./framecontainer');
+var SVGContainer = require('./svgcontainer');
+var SVGNodeContainer = require('./svgnodecontainer');
+var LinearGradientContainer = require('./lineargradientcontainer');
+var WebkitGradientContainer = require('./webkitgradientcontainer');
+var bind = require('./utils').bind;
+
+function ImageLoader(options, support) {
+    this.link = null;
+    this.options = options;
+    this.support = support;
+    this.origin = this.getOrigin(window.location.href);
+}
+
+ImageLoader.prototype.findImages = function(nodes) {
+    var images = [];
+    nodes.reduce(function(imageNodes, container) {
+        switch(container.node.nodeName) {
+        case "IMG":
+            return imageNodes.concat([{
+                args: [container.node.src],
+                method: "url"
+            }]);
+        case "svg":
+        case "IFRAME":
+            return imageNodes.concat([{
+                args: [container.node],
+                method: container.node.nodeName
+            }]);
+        }
+        return imageNodes;
+    }, []).forEach(this.addImage(images, this.loadImage), this);
+    return images;
+};
+
+ImageLoader.prototype.findBackgroundImage = function(images, container) {
+    container.parseBackgroundImages().filter(this.hasImageBackground).forEach(this.addImage(images, this.loadImage), this);
+    return images;
+};
+
+ImageLoader.prototype.addImage = function(images, callback) {
+    return function(newImage) {
+        newImage.args.forEach(function(image) {
+            if (!this.imageExists(images, image)) {
+                images.splice(0, 0, callback.call(this, newImage));
+                log('Added image #' + (images.length), typeof(image) === "string" ? image.substring(0, 100) : image);
+            }
+        }, this);
+    };
+};
+
+ImageLoader.prototype.hasImageBackground = function(imageData) {
+    return imageData.method !== "none";
+};
+
+ImageLoader.prototype.loadImage = function(imageData) {
+    if (imageData.method === "url") {
+        var src = imageData.args[0];
+        if (this.isSVG(src) && !this.support.svg && !this.options.allowTaint) {
+            return new SVGContainer(src);
+        } else if (src.match(/data:image\/.*;base64,/i)) {
+            return new ImageContainer(src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, ''), false);
+        } else if (this.isSameOrigin(src) || this.options.allowTaint === true || this.isSVG(src)) {
+            return new ImageContainer(src, false);
+        } else if (this.support.cors && !this.options.allowTaint && this.options.useCORS) {
+            return new ImageContainer(src, true);
+        } else if (this.options.proxy) {
+            return new ProxyImageContainer(src, this.options.proxy);
+        } else {
+            return new DummyImageContainer(src);
+        }
+    } else if (imageData.method === "linear-gradient") {
+        return new LinearGradientContainer(imageData);
+    } else if (imageData.method === "gradient") {
+        return new WebkitGradientContainer(imageData);
+    } else if (imageData.method === "svg") {
+        return new SVGNodeContainer(imageData.args[0], this.support.svg);
+    } else if (imageData.method === "IFRAME") {
+        return new FrameContainer(imageData.args[0], this.isSameOrigin(imageData.args[0].src), this.options);
+    } else {
+        return new DummyImageContainer(imageData);
+    }
+};
+
+ImageLoader.prototype.isSVG = function(src) {
+    return src.substring(src.length - 3).toLowerCase() === "svg" || SVGContainer.prototype.isInline(src);
+};
+
+ImageLoader.prototype.imageExists = function(images, src) {
+    return images.some(function(image) {
+        return image.src === src;
+    });
+};
+
+ImageLoader.prototype.isSameOrigin = function(url) {
+    return (this.getOrigin(url) === this.origin);
+};
+
+ImageLoader.prototype.getOrigin = function(url) {
+    var link = this.link || (this.link = document.createElement("a"));
+    link.href = url;
+    link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/
+    return link.protocol + link.hostname + link.port;
+};
+
+ImageLoader.prototype.getPromise = function(container) {
+    return this.timeout(container, this.options.imageTimeout)['catch'](function() {
+        var dummy = new DummyImageContainer(container.src);
+        return dummy.promise.then(function(image) {
+            container.image = image;
+        });
+    });
+};
+
+ImageLoader.prototype.get = function(src) {
+    var found = null;
+    return this.images.some(function(img) {
+        return (found = img).src === src;
+    }) ? found : null;
+};
+
+ImageLoader.prototype.fetch = function(nodes) {
+    this.images = nodes.reduce(bind(this.findBackgroundImage, this), this.findImages(nodes));
+    this.images.forEach(function(image, index) {
+        image.promise.then(function() {
+            log("Succesfully loaded image #"+ (index+1), image);
+        }, function(e) {
+            log("Failed loading image #"+ (index+1), image, e);
+        });
+    });
+    this.ready = Promise.all(this.images.map(this.getPromise, this));
+    log("Finished searching images");
+    return this;
+};
+
+ImageLoader.prototype.timeout = function(container, timeout) {
+    var timer;
+    var promise = Promise.race([container.promise, new Promise(function(res, reject) {
+        timer = setTimeout(function() {
+            log("Timed out loading image", container);
+            reject(container);
+        }, timeout);
+    })]).then(function(container) {
+        clearTimeout(timer);
+        return container;
+    });
+    promise['catch'](function() {
+        clearTimeout(timer);
+    });
+    return promise;
+};
+
+module.exports = ImageLoader;

src/lineargradientcontainer.js

@@ -0,0 +1,78 @@
+var GradientContainer = require('./gradientcontainer');
+var Color = require('./color');
+
+function LinearGradientContainer(imageData) {
+    GradientContainer.apply(this, arguments);
+    this.type = this.TYPES.LINEAR;
+
+    var hasDirection = imageData.args[0].match(this.stepRegExp) === null;
+
+    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: new Color(colorStopMatch[1]),
+            stop: colorStopMatch[3] === "%" ? colorStopMatch[2] / 100 : null
+        };
+    }, this);
+
+    if (this.colorStops[0].stop === null) {
+        this.colorStops[0].stop = 0;
+    }
+
+    if (this.colorStops[this.colorStops.length - 1].stop === null) {
+        this.colorStops[this.colorStops.length - 1].stop = 1;
+    }
+
+    this.colorStops.forEach(function(colorStop, index) {
+        if (colorStop.stop === null) {
+            this.colorStops.slice(index).some(function(find, count) {
+                if (find.stop !== null) {
+                    colorStop.stop = ((find.stop - this.colorStops[index - 1].stop) / (count + 1)) + this.colorStops[index - 1].stop;
+                    return true;
+                } else {
+                    return false;
+                }
+            }, this);
+        }
+    }, this);
+}
+
+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)?/;
+
+module.exports = LinearGradientContainer;

src/log.js

@@ -0,0 +1,5 @@
+module.exports = function() {
+    if (window.html2canvas.logging && window.console && window.console.log) {
+        Function.prototype.bind.call(window.console.log, (window.console)).apply(window.console, [(Date.now() - window.html2canvas.start) + "ms", "html2canvas:"].concat([].slice.call(arguments, 0)));
+    }
+};

src/nodecontainer.js

@@ -0,0 +1,291 @@
+var Color = require('./color');
+var utils = require('./utils');
+var getBounds = utils.getBounds;
+var parseBackgrounds = utils.parseBackgrounds;
+var offsetBounds = utils.offsetBounds;
+
+function NodeContainer(node, parent) {
+    this.node = node;
+    this.parent = parent;
+    this.stack = null;
+    this.bounds = null;
+    this.borders = null;
+    this.clip = [];
+    this.backgroundClip = [];
+    this.offsetBounds = null;
+    this.visible = null;
+    this.computedStyles = null;
+    this.colors = {};
+    this.styles = {};
+    this.backgroundImages = null;
+    this.transformData = null;
+    this.transformMatrix = null;
+    this.isPseudoElement = false;
+    this.opacity = null;
+}
+
+NodeContainer.prototype.cloneTo = function(stack) {
+    stack.visible = this.visible;
+    stack.borders = this.borders;
+    stack.bounds = this.bounds;
+    stack.clip = this.clip;
+    stack.backgroundClip = this.backgroundClip;
+    stack.computedStyles = this.computedStyles;
+    stack.styles = this.styles;
+    stack.backgroundImages = this.backgroundImages;
+    stack.opacity = this.opacity;
+};
+
+NodeContainer.prototype.getOpacity = function() {
+    return this.opacity === null ? (this.opacity = this.cssFloat('opacity')) : this.opacity;
+};
+
+NodeContainer.prototype.assignStack = function(stack) {
+    this.stack = stack;
+    stack.children.push(this);
+};
+
+NodeContainer.prototype.isElementVisible = function() {
+    return this.node.nodeType === Node.TEXT_NODE ? this.parent.visible : (
+        this.css('display') !== "none" &&
+        this.css('visibility') !== "hidden" &&
+        !this.node.hasAttribute("data-html2canvas-ignore") &&
+        (this.node.nodeName !== "INPUT" || this.node.getAttribute("type") !== "hidden")
+    );
+};
+
+NodeContainer.prototype.css = function(attribute) {
+    if (!this.computedStyles) {
+        this.computedStyles = this.isPseudoElement ? this.parent.computedStyle(this.before ? ":before" : ":after") : this.computedStyle(null);
+    }
+
+    return this.styles[attribute] || (this.styles[attribute] = this.computedStyles[attribute]);
+};
+
+NodeContainer.prototype.prefixedCss = function(attribute) {
+    var prefixes = ["webkit", "moz", "ms", "o"];
+    var value = this.css(attribute);
+    if (value === undefined) {
+        prefixes.some(function(prefix) {
+            value = this.css(prefix + attribute.substr(0, 1).toUpperCase() + attribute.substr(1));
+            return value !== undefined;
+        }, this);
+    }
+    return value === undefined ? null : value;
+};
+
+NodeContainer.prototype.computedStyle = function(type) {
+    return this.node.ownerDocument.defaultView.getComputedStyle(this.node, type);
+};
+
+NodeContainer.prototype.cssInt = function(attribute) {
+    var value = parseInt(this.css(attribute), 10);
+    return (isNaN(value)) ? 0 : value; // borders in old IE are throwing 'medium' for demo.html
+};
+
+NodeContainer.prototype.color = function(attribute) {
+    return this.colors[attribute] || (this.colors[attribute] = new Color(this.css(attribute)));
+};
+
+NodeContainer.prototype.cssFloat = function(attribute) {
+    var value = parseFloat(this.css(attribute));
+    return (isNaN(value)) ? 0 : value;
+};
+
+NodeContainer.prototype.fontWeight = function() {
+    var weight = this.css("fontWeight");
+    switch(parseInt(weight, 10)){
+    case 401:
+        weight = "bold";
+        break;
+    case 400:
+        weight = "normal";
+        break;
+    }
+    return weight;
+};
+
+NodeContainer.prototype.parseClip = function() {
+    var matches = this.css('clip').match(this.CLIP);
+    if (matches) {
+        return {
+            top: parseInt(matches[1], 10),
+            right: parseInt(matches[2], 10),
+            bottom: parseInt(matches[3], 10),
+            left: parseInt(matches[4], 10)
+        };
+    }
+    return null;
+};
+
+NodeContainer.prototype.parseBackgroundImages = function() {
+    return this.backgroundImages || (this.backgroundImages = parseBackgrounds(this.css("backgroundImage")));
+};
+
+NodeContainer.prototype.cssList = function(property, index) {
+    var value = (this.css(property) || '').split(',');
+    value = value[index || 0] || value[0] || 'auto';
+    value = value.trim().split(' ');
+    if (value.length === 1) {
+        value = [value[0], isPercentage(value[0]) ? 'auto' : value[0]];
+    }
+    return value;
+};
+
+NodeContainer.prototype.parseBackgroundSize = function(bounds, image, index) {
+    var size = this.cssList("backgroundSize", index);
+    var width, height;
+
+    if (isPercentage(size[0])) {
+        width = bounds.width * parseFloat(size[0]) / 100;
+    } else if (/contain|cover/.test(size[0])) {
+        var targetRatio = bounds.width / bounds.height, currentRatio = image.width / image.height;
+        return (targetRatio < currentRatio ^ size[0] === 'contain') ?  {width: bounds.height * currentRatio, height: bounds.height} : {width: bounds.width, height: bounds.width / currentRatio};
+    } else {
+        width = parseInt(size[0], 10);
+    }
+
+    if (size[0] === 'auto' && size[1] === 'auto') {
+        height = image.height;
+    } else if (size[1] === 'auto') {
+        height = width / image.width * image.height;
+    } else if (isPercentage(size[1])) {
+        height =  bounds.height * parseFloat(size[1]) / 100;
+    } else {
+        height = parseInt(size[1], 10);
+    }
+
+    if (size[0] === 'auto') {
+        width = height / image.height * image.width;
+    }
+
+    return {width: width, height: height};
+};
+
+NodeContainer.prototype.parseBackgroundPosition = function(bounds, image, index, backgroundSize) {
+    var position = this.cssList('backgroundPosition', index);
+    var left, top;
+
+    if (isPercentage(position[0])){
+        left = (bounds.width - (backgroundSize || image).width) * (parseFloat(position[0]) / 100);
+    } else {
+        left = parseInt(position[0], 10);
+    }
+
+    if (position[1] === 'auto') {
+        top = left / image.width * image.height;
+    } else if (isPercentage(position[1])){
+        top =  (bounds.height - (backgroundSize || image).height) * parseFloat(position[1]) / 100;
+    } else {
+        top = parseInt(position[1], 10);
+    }
+
+    if (position[0] === 'auto') {
+        left = top / image.height * image.width;
+    }
+
+    return {left: left, top: top};
+};
+
+NodeContainer.prototype.parseBackgroundRepeat = function(index) {
+    return this.cssList("backgroundRepeat", index)[0];
+};
+
+NodeContainer.prototype.parseTextShadows = function() {
+    var textShadow = this.css("textShadow");
+    var results = [];
+
+    if (textShadow && textShadow !== 'none') {
+        var shadows = textShadow.match(this.TEXT_SHADOW_PROPERTY);
+        for (var i = 0; shadows && (i < shadows.length); i++) {
+            var s = shadows[i].match(this.TEXT_SHADOW_VALUES);
+            results.push({
+                color: new Color(s[0]),
+                offsetX: s[1] ? parseFloat(s[1].replace('px', '')) : 0,
+                offsetY: s[2] ? parseFloat(s[2].replace('px', '')) : 0,
+                blur: s[3] ? s[3].replace('px', '') : 0
+            });
+        }
+    }
+    return results;
+};
+
+NodeContainer.prototype.parseTransform = function() {
+    if (!this.transformData) {
+        if (this.hasTransform()) {
+            var offset = this.parseBounds();
+            var origin = this.prefixedCss("transformOrigin").split(" ").map(removePx).map(asFloat);
+            origin[0] += offset.left;
+            origin[1] += offset.top;
+            this.transformData = {
+                origin: origin,
+                matrix: this.parseTransformMatrix()
+            };
+        } else {
+            this.transformData = {
+                origin: [0, 0],
+                matrix: [1, 0, 0, 1, 0, 0]
+            };
+        }
+    }
+    return this.transformData;
+};
+
+NodeContainer.prototype.parseTransformMatrix = function() {
+    if (!this.transformMatrix) {
+        var transform = this.prefixedCss("transform");
+        var matrix = transform ? parseMatrix(transform.match(this.MATRIX_PROPERTY)) : null;
+        this.transformMatrix = matrix ? matrix : [1, 0, 0, 1, 0, 0];
+    }
+    return this.transformMatrix;
+};
+
+NodeContainer.prototype.parseBounds = function() {
+    return this.bounds || (this.bounds = this.hasTransform() ? offsetBounds(this.node) : getBounds(this.node));
+};
+
+NodeContainer.prototype.hasTransform = function() {
+    return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0" || (this.parent && this.parent.hasTransform());
+};
+
+NodeContainer.prototype.getValue = function() {
+    var value = this.node.value || "";
+    if (this.node.tagName === "SELECT") {
+        value = selectionValue(this.node);
+    } else if (this.node.type === "password") {
+        value = Array(value.length + 1).join('\u2022'); // jshint ignore:line
+    }
+    return value.length === 0 ? (this.node.placeholder || "") : value;
+};
+
+NodeContainer.prototype.MATRIX_PROPERTY = /(matrix)\((.+)\)/;
+NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
+NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
+NodeContainer.prototype.CLIP = /^rect\((\d+)px,? (\d+)px,? (\d+)px,? (\d+)px\)$/;
+
+function selectionValue(node) {
+    var option = node.options[node.selectedIndex || 0];
+    return option ? (option.text || "") : "";
+}
+
+function parseMatrix(match) {
+    if (match && match[1] === "matrix") {
+        return match[2].split(",").map(function(s) {
+            return parseFloat(s.trim());
+        });
+    }
+}
+
+function isPercentage(value) {
+    return value.toString().indexOf("%") !== -1;
+}
+
+function removePx(str) {
+    return str.replace("px", "");
+}
+
+function asFloat(str) {
+    return parseFloat(str);
+}
+
+module.exports = NodeContainer;

src/nodeparser.js

@@ -0,0 +1,870 @@
+var log = require('./log');
+var punycode = require('punycode');
+var NodeContainer = require('./nodecontainer');
+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;
+var getBounds = utils.getBounds;
+var parseBackgrounds = utils.parseBackgrounds;
+var offsetBounds = utils.offsetBounds;
+
+function NodeParser(element, renderer, support, imageLoader, options) {
+    log("Starting NodeParser");
+    this.renderer = renderer;
+    this.options = options;
+    this.range = null;
+    this.support = support;
+    this.renderQueue = [];
+    this.stack = new StackingContext(true, 1, element.ownerDocument, null);
+    var parent = new NodeContainer(element, null);
+    if (options.background) {
+        renderer.rectangle(0, 0, renderer.width, renderer.height, new Color(options.background));
+    }
+    if (element === element.ownerDocument.documentElement) {
+        // http://www.w3.org/TR/css3-background/#special-backgrounds
+        var canvasBackground = new NodeContainer(parent.color('backgroundColor').isTransparent() ? element.ownerDocument.body : element.ownerDocument.documentElement, null);
+        renderer.rectangle(0, 0, renderer.width, renderer.height, canvasBackground.color('backgroundColor'));
+    }
+    parent.visibile = parent.isElementVisible();
+    this.createPseudoHideStyles(element.ownerDocument);
+    this.disableAnimations(element.ownerDocument);
+    this.nodes = flatten([parent].concat(this.getChildren(parent)).filter(function(container) {
+        return container.visible = container.isElementVisible();
+    }).map(this.getPseudoElements, this));
+    this.fontMetrics = new FontMetrics();
+    log("Fetched nodes, total:", this.nodes.length);
+    log("Calculate overflow clips");
+    this.calculateOverflowClips();
+    log("Start fetching images");
+    this.images = imageLoader.fetch(this.nodes.filter(isElement));
+    this.ready = this.images.ready.then(bind(function() {
+        log("Images loaded, starting parsing");
+        log("Creating stacking contexts");
+        this.createStackingContexts();
+        log("Sorting stacking contexts");
+        this.sortStackingContexts(this.stack);
+        this.parse(this.stack);
+        log("Render queue created with " + this.renderQueue.length + " items");
+        return new Promise(bind(function(resolve) {
+            if (!options.async) {
+                this.renderQueue.forEach(this.paint, this);
+                resolve();
+            } else if (typeof(options.async) === "function") {
+                options.async.call(this, this.renderQueue, resolve);
+            } else if (this.renderQueue.length > 0){
+                this.renderIndex = 0;
+                this.asyncRenderer(this.renderQueue, resolve);
+            } else {
+                resolve();
+            }
+        }, this));
+    }, this));
+}
+
+NodeParser.prototype.calculateOverflowClips = function() {
+    this.nodes.forEach(function(container) {
+        if (isElement(container)) {
+            if (isPseudoElement(container)) {
+                container.appendToDOM();
+            }
+            container.borders = this.parseBorders(container);
+            var clip = (container.css('overflow') === "hidden") ? [container.borders.clip] : [];
+            var cssClip = container.parseClip();
+            if (cssClip && ["absolute", "fixed"].indexOf(container.css('position')) !== -1) {
+                clip.push([["rect",
+                        container.bounds.left + cssClip.left,
+                        container.bounds.top + cssClip.top,
+                        cssClip.right - cssClip.left,
+                        cssClip.bottom - cssClip.top
+                ]]);
+            }
+            container.clip = hasParentClip(container) ? container.parent.clip.concat(clip) : clip;
+            container.backgroundClip = (container.css('overflow') !== "hidden") ? container.clip.concat([container.borders.clip]) : container.clip;
+            if (isPseudoElement(container)) {
+                container.cleanDOM();
+            }
+        } else if (isTextNode(container)) {
+            container.clip = hasParentClip(container) ? container.parent.clip : [];
+        }
+        if (!isPseudoElement(container)) {
+            container.bounds = null;
+        }
+    }, this);
+};
+
+function hasParentClip(container) {
+    return container.parent && container.parent.clip.length;
+}
+
+NodeParser.prototype.asyncRenderer = function(queue, resolve, asyncTimer) {
+    asyncTimer = asyncTimer || Date.now();
+    this.paint(queue[this.renderIndex++]);
+    if (queue.length === this.renderIndex) {
+        resolve();
+    } else if (asyncTimer + 20 > Date.now()) {
+        this.asyncRenderer(queue, resolve, asyncTimer);
+    } else {
+        setTimeout(bind(function() {
+            this.asyncRenderer(queue, resolve);
+        }, this), 0);
+    }
+};
+
+NodeParser.prototype.createPseudoHideStyles = function(document) {
+    this.createStyles(document, '.' + PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + ':before { content: "" !important; display: none !important; }' +
+        '.' + PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_AFTER + ':after { content: "" !important; display: none !important; }');
+};
+
+NodeParser.prototype.disableAnimations = function(document) {
+    this.createStyles(document, '* { -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; animation: none !important; ' +
+        '-webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important;}');
+};
+
+NodeParser.prototype.createStyles = function(document, styles) {
+    var hidePseudoElements = document.createElement('style');
+    hidePseudoElements.innerHTML = styles;
+    document.body.appendChild(hidePseudoElements);
+};
+
+NodeParser.prototype.getPseudoElements = function(container) {
+    var nodes = [[container]];
+    if (container.node.nodeType === Node.ELEMENT_NODE) {
+        var before = this.getPseudoElement(container, ":before");
+        var after = this.getPseudoElement(container, ":after");
+
+        if (before) {
+            nodes.push(before);
+        }
+
+        if (after) {
+            nodes.push(after);
+        }
+    }
+    return flatten(nodes);
+};
+
+function toCamelCase(str) {
+    return str.replace(/(\-[a-z])/g, function(match){
+        return match.toUpperCase().replace('-','');
+    });
+}
+
+NodeParser.prototype.getPseudoElement = function(container, type) {
+    var style = container.computedStyle(type);
+    if(!style || !style.content || style.content === "none" || style.content === "-moz-alt-content" || style.display === "none") {
+        return null;
+    }
+
+    var content = stripQuotes(style.content);
+    var isImage = content.substr(0, 3) === 'url';
+    var pseudoNode = document.createElement(isImage ? 'img' : 'html2canvaspseudoelement');
+    var pseudoContainer = new PseudoElementContainer(pseudoNode, container, type);
+
+    for (var i = style.length-1; i >= 0; i--) {
+        var property = toCamelCase(style.item(i));
+        pseudoNode.style[property] = style[property];
+    }
+
+    pseudoNode.className = PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + " " + PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_AFTER;
+
+    if (isImage) {
+        pseudoNode.src = parseBackgrounds(content)[0].args[0];
+        return [pseudoContainer];
+    } else {
+        var text = document.createTextNode(content);
+        pseudoNode.appendChild(text);
+        return [pseudoContainer, new TextContainer(text, pseudoContainer)];
+    }
+};
+
+
+NodeParser.prototype.getChildren = function(parentContainer) {
+    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
+        var container = [node.nodeType === Node.TEXT_NODE ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
+        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
+    }, this));
+};
+
+NodeParser.prototype.newStackingContext = function(container, hasOwnStacking) {
+    var stack = new StackingContext(hasOwnStacking, container.getOpacity(), container.node, container.parent);
+    container.cloneTo(stack);
+    var parentStack = hasOwnStacking ? stack.getParentStack(this) : stack.parent.stack;
+    parentStack.contexts.push(stack);
+    container.stack = stack;
+};
+
+NodeParser.prototype.createStackingContexts = function() {
+    this.nodes.forEach(function(container) {
+        if (isElement(container) && (this.isRootElement(container) || hasOpacity(container) || isPositionedForStacking(container) || this.isBodyWithTransparentRoot(container) || container.hasTransform())) {
+            this.newStackingContext(container, true);
+        } else if (isElement(container) && ((isPositioned(container) && zIndex0(container)) || isInlineBlock(container) || isFloating(container))) {
+            this.newStackingContext(container, false);
+        } else {
+            container.assignStack(container.parent.stack);
+        }
+    }, this);
+};
+
+NodeParser.prototype.isBodyWithTransparentRoot = function(container) {
+    return container.node.nodeName === "BODY" && container.parent.color('backgroundColor').isTransparent();
+};
+
+NodeParser.prototype.isRootElement = function(container) {
+    return container.parent === null;
+};
+
+NodeParser.prototype.sortStackingContexts = function(stack) {
+    stack.contexts.sort(zIndexSort(stack.contexts.slice(0)));
+    stack.contexts.forEach(this.sortStackingContexts, this);
+};
+
+NodeParser.prototype.parseTextBounds = function(container) {
+    return function(text, index, textList) {
+        if (container.parent.css("textDecoration").substr(0, 4) !== "none" || text.trim().length !== 0) {
+            if (this.support.rangeBounds && !container.parent.hasTransform()) {
+                var offset = textList.slice(0, index).join("").length;
+                return this.getRangeBounds(container.node, offset, text.length);
+            } else if (container.node && typeof(container.node.data) === "string") {
+                var replacementNode = container.node.splitText(text.length);
+                var bounds = this.getWrapperBounds(container.node, container.parent.hasTransform());
+                container.node = replacementNode;
+                return bounds;
+            }
+        } else if(!this.support.rangeBounds || container.parent.hasTransform()){
+            container.node = container.node.splitText(text.length);
+        }
+        return {};
+    };
+};
+
+NodeParser.prototype.getWrapperBounds = function(node, transform) {
+    var wrapper = node.ownerDocument.createElement('html2canvaswrapper');
+    var parent = node.parentNode,
+        backupText = node.cloneNode(true);
+
+    wrapper.appendChild(node.cloneNode(true));
+    parent.replaceChild(wrapper, node);
+    var bounds = transform ? offsetBounds(wrapper) : getBounds(wrapper);
+    parent.replaceChild(backupText, wrapper);
+    return bounds;
+};
+
+NodeParser.prototype.getRangeBounds = function(node, offset, length) {
+    var range = this.range || (this.range = node.ownerDocument.createRange());
+    range.setStart(node, offset);
+    range.setEnd(node, offset + length);
+    return range.getBoundingClientRect();
+};
+
+function ClearTransform() {}
+
+NodeParser.prototype.parse = function(stack) {
+    // http://www.w3.org/TR/CSS21/visuren.html#z-index
+    var negativeZindex = stack.contexts.filter(negativeZIndex); // 2. the child stacking contexts with negative stack levels (most negative first).
+    var descendantElements = stack.children.filter(isElement);
+    var descendantNonFloats = descendantElements.filter(not(isFloating));
+    var nonInlineNonPositionedDescendants = descendantNonFloats.filter(not(isPositioned)).filter(not(inlineLevel)); // 3 the in-flow, non-inline-level, non-positioned descendants.
+    var nonPositionedFloats = descendantElements.filter(not(isPositioned)).filter(isFloating); // 4. the non-positioned floats.
+    var inFlow = descendantNonFloats.filter(not(isPositioned)).filter(inlineLevel); // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
+    var stackLevel0 = stack.contexts.concat(descendantNonFloats.filter(isPositioned)).filter(zIndex0); // 6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
+    var text = stack.children.filter(isTextNode).filter(hasText);
+    var positiveZindex = stack.contexts.filter(positiveZIndex); // 7. the child stacking contexts with positive stack levels (least positive first).
+    negativeZindex.concat(nonInlineNonPositionedDescendants).concat(nonPositionedFloats)
+        .concat(inFlow).concat(stackLevel0).concat(text).concat(positiveZindex).forEach(function(container) {
+            this.renderQueue.push(container);
+            if (isStackingContext(container)) {
+                this.parse(container);
+                this.renderQueue.push(new ClearTransform());
+            }
+        }, this);
+};
+
+NodeParser.prototype.paint = function(container) {
+    try {
+        if (container instanceof ClearTransform) {
+            this.renderer.ctx.restore();
+        } else if (isTextNode(container)) {
+            if (isPseudoElement(container.parent)) {
+                container.parent.appendToDOM();
+            }
+            this.paintText(container);
+            if (isPseudoElement(container.parent)) {
+                container.parent.cleanDOM();
+            }
+        } else {
+            this.paintNode(container);
+        }
+    } catch(e) {
+        log(e);
+        if (this.options.strict) {
+            throw e;
+        }
+    }
+};
+
+NodeParser.prototype.paintNode = function(container) {
+    if (isStackingContext(container)) {
+        this.renderer.setOpacity(container.opacity);
+        this.renderer.ctx.save();
+        if (container.hasTransform()) {
+            this.renderer.setTransform(container.parseTransform());
+        }
+    }
+
+    if (container.node.nodeName === "INPUT" && container.node.type === "checkbox") {
+        this.paintCheckbox(container);
+    } else if (container.node.nodeName === "INPUT" && container.node.type === "radio") {
+        this.paintRadio(container);
+    } else {
+        this.paintElement(container);
+    }
+};
+
+NodeParser.prototype.paintElement = function(container) {
+    var bounds = container.parseBounds();
+    this.renderer.clip(container.backgroundClip, function() {
+        this.renderer.renderBackground(container, bounds, container.borders.borders.map(getWidth));
+    }, this);
+
+    this.renderer.clip(container.clip, function() {
+        this.renderer.renderBorders(container.borders.borders);
+    }, this);
+
+    this.renderer.clip(container.backgroundClip, function() {
+        switch (container.node.nodeName) {
+        case "svg":
+        case "IFRAME":
+            var imgContainer = this.images.get(container.node);
+            if (imgContainer) {
+                this.renderer.renderImage(container, bounds, container.borders, imgContainer);
+            } else {
+                log("Error loading <" + container.node.nodeName + ">", container.node);
+            }
+            break;
+        case "IMG":
+            var imageContainer = this.images.get(container.node.src);
+            if (imageContainer) {
+                this.renderer.renderImage(container, bounds, container.borders, imageContainer);
+            } else {
+                log("Error loading <img>", container.node.src);
+            }
+            break;
+        case "CANVAS":
+            this.renderer.renderImage(container, bounds, container.borders, {image: container.node});
+            break;
+        case "SELECT":
+        case "INPUT":
+        case "TEXTAREA":
+            this.paintFormValue(container);
+            break;
+        }
+    }, this);
+};
+
+NodeParser.prototype.paintCheckbox = function(container) {
+    var b = container.parseBounds();
+
+    var size = Math.min(b.width, b.height);
+    var bounds = {width: size - 1, height: size - 1, top: b.top, left: b.left};
+    var r = [3, 3];
+    var radius = [r, r, r, r];
+    var borders = [1,1,1,1].map(function(w) {
+        return {color: new Color('#A5A5A5'), width: w};
+    });
+
+    var borderPoints = calculateCurvePoints(bounds, radius, borders);
+
+    this.renderer.clip(container.backgroundClip, function() {
+        this.renderer.rectangle(bounds.left + 1, bounds.top + 1, bounds.width - 2, bounds.height - 2, new Color("#DEDEDE"));
+        this.renderer.renderBorders(calculateBorders(borders, bounds, borderPoints, radius));
+        if (container.node.checked) {
+            this.renderer.font(new Color('#424242'), 'normal', 'normal', 'bold', (size - 3) + "px", 'arial');
+            this.renderer.text("\u2714", bounds.left + size / 6, bounds.top + size - 1);
+        }
+    }, this);
+};
+
+NodeParser.prototype.paintRadio = function(container) {
+    var bounds = container.parseBounds();
+
+    var size = Math.min(bounds.width, bounds.height) - 2;
+
+    this.renderer.clip(container.backgroundClip, function() {
+        this.renderer.circleStroke(bounds.left + 1, bounds.top + 1, size, new Color('#DEDEDE'), 1, new Color('#A5A5A5'));
+        if (container.node.checked) {
+            this.renderer.circle(Math.ceil(bounds.left + size / 4) + 1, Math.ceil(bounds.top + size / 4) + 1, Math.floor(size / 2), new Color('#424242'));
+        }
+    }, this);
+};
+
+NodeParser.prototype.paintFormValue = function(container) {
+    var value = container.getValue();
+    if (value.length > 0) {
+        var document = container.node.ownerDocument;
+        var wrapper = document.createElement('html2canvaswrapper');
+        var properties = ['lineHeight', 'textAlign', 'fontFamily', 'fontWeight', 'fontSize', 'color',
+            'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom',
+            'width', 'height', 'borderLeftStyle', 'borderTopStyle', 'borderLeftWidth', 'borderTopWidth',
+            'boxSizing', 'whiteSpace', 'wordWrap'];
+
+        properties.forEach(function(property) {
+            try {
+                wrapper.style[property] = container.css(property);
+            } catch(e) {
+                // Older IE has issues with "border"
+                log("html2canvas: Parse: Exception caught in renderFormValue: " + e.message);
+            }
+        });
+        var bounds = container.parseBounds();
+        wrapper.style.position = "fixed";
+        wrapper.style.left = bounds.left + "px";
+        wrapper.style.top = bounds.top + "px";
+        wrapper.textContent = value;
+        document.body.appendChild(wrapper);
+        this.paintText(new TextContainer(wrapper.firstChild, container));
+        document.body.removeChild(wrapper);
+    }
+};
+
+NodeParser.prototype.paintText = function(container) {
+    container.applyTextTransform();
+    var characters = punycode.ucs2.decode(container.node.data);
+    var textList = (!this.options.letterRendering || noLetterSpacing(container)) && !hasUnicode(container.node.data) ? getWords(characters) : characters.map(function(character) {
+        return punycode.ucs2.encode([character]);
+    });
+
+    var weight = container.parent.fontWeight();
+    var size = container.parent.css('fontSize');
+    var family = container.parent.css('fontFamily');
+    var shadows = container.parent.parseTextShadows();
+
+    this.renderer.font(container.parent.color('color'), container.parent.css('fontStyle'), container.parent.css('fontVariant'), weight, size, family);
+    if (shadows.length) {
+        // TODO: support multiple text shadows
+        this.renderer.fontShadow(shadows[0].color, shadows[0].offsetX, shadows[0].offsetY, shadows[0].blur);
+    } else {
+        this.renderer.clearShadow();
+    }
+
+    this.renderer.clip(container.parent.clip, function() {
+        textList.map(this.parseTextBounds(container), this).forEach(function(bounds, index) {
+            if (bounds) {
+                this.renderer.text(textList[index], bounds.left, bounds.bottom);
+                this.renderTextDecoration(container.parent, bounds, this.fontMetrics.getMetrics(family, size));
+            }
+        }, this);
+    }, this);
+};
+
+NodeParser.prototype.renderTextDecoration = function(container, bounds, metrics) {
+    switch(container.css("textDecoration").split(" ")[0]) {
+    case "underline":
+        // Draws a line at the baseline of the font
+        // TODO As some browsers display the line as more than 1px if the font-size is big, need to take that into account both in position and size
+        this.renderer.rectangle(bounds.left, Math.round(bounds.top + metrics.baseline + metrics.lineWidth), bounds.width, 1, container.color("color"));
+        break;
+    case "overline":
+        this.renderer.rectangle(bounds.left, Math.round(bounds.top), bounds.width, 1, container.color("color"));
+        break;
+    case "line-through":
+        // TODO try and find exact position for line-through
+        this.renderer.rectangle(bounds.left, Math.ceil(bounds.top + metrics.middle + metrics.lineWidth), bounds.width, 1, container.color("color"));
+        break;
+    }
+};
+
+var borderColorTransforms = {
+    inset: [
+        ["darken", 0.60],
+        ["darken", 0.10],
+        ["darken", 0.10],
+        ["darken", 0.60]
+    ]
+};
+
+NodeParser.prototype.parseBorders = function(container) {
+    var nodeBounds = container.parseBounds();
+    var radius = getBorderRadiusData(container);
+    var borders = ["Top", "Right", "Bottom", "Left"].map(function(side, index) {
+        var style = container.css('border' + side + 'Style');
+        var color = container.color('border' + side + 'Color');
+        if (style === "inset" && color.isBlack()) {
+            color = new Color([255, 255, 255, color.a]); // this is wrong, but
+        }
+        var colorTransform = borderColorTransforms[style] ? borderColorTransforms[style][index] : null;
+        return {
+            width: container.cssInt('border' + side + 'Width'),
+            color: colorTransform ? color[colorTransform[0]](colorTransform[1]) : color,
+            args: null
+        };
+    });
+    var borderPoints = calculateCurvePoints(nodeBounds, radius, borders);
+
+    return {
+        clip: this.parseBackgroundClip(container, borderPoints, borders, radius, nodeBounds),
+        borders: calculateBorders(borders, nodeBounds, borderPoints, radius)
+    };
+};
+
+function calculateBorders(borders, nodeBounds, borderPoints, radius) {
+    return borders.map(function(border, borderSide) {
+        if (border.width > 0) {
+            var bx = nodeBounds.left;
+            var by = nodeBounds.top;
+            var bw = nodeBounds.width;
+            var bh = nodeBounds.height - (borders[2].width);
+
+            switch(borderSide) {
+            case 0:
+                // top border
+                bh = borders[0].width;
+                border.args = drawSide({
+                        c1: [bx, by],
+                        c2: [bx + bw, by],
+                        c3: [bx + bw - borders[1].width, by + bh],
+                        c4: [bx + borders[3].width, by + bh]
+                    }, radius[0], radius[1],
+                    borderPoints.topLeftOuter, borderPoints.topLeftInner, borderPoints.topRightOuter, borderPoints.topRightInner);
+                break;
+            case 1:
+                // right border
+                bx = nodeBounds.left + nodeBounds.width - (borders[1].width);
+                bw = borders[1].width;
+
+                border.args = drawSide({
+                        c1: [bx + bw, by],
+                        c2: [bx + bw, by + bh + borders[2].width],
+                        c3: [bx, by + bh],
+                        c4: [bx, by + borders[0].width]
+                    }, radius[1], radius[2],
+                    borderPoints.topRightOuter, borderPoints.topRightInner, borderPoints.bottomRightOuter, borderPoints.bottomRightInner);
+                break;
+            case 2:
+                // bottom border
+                by = (by + nodeBounds.height) - (borders[2].width);
+                bh = borders[2].width;
+                border.args = drawSide({
+                        c1: [bx + bw, by + bh],
+                        c2: [bx, by + bh],
+                        c3: [bx + borders[3].width, by],
+                        c4: [bx + bw - borders[3].width, by]
+                    }, radius[2], radius[3],
+                    borderPoints.bottomRightOuter, borderPoints.bottomRightInner, borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner);
+                break;
+            case 3:
+                // left border
+                bw = borders[3].width;
+                border.args = drawSide({
+                        c1: [bx, by + bh + borders[2].width],
+                        c2: [bx, by],
+                        c3: [bx + bw, by + borders[0].width],
+                        c4: [bx + bw, by + bh]
+                    }, radius[3], radius[0],
+                    borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner, borderPoints.topLeftOuter, borderPoints.topLeftInner);
+                break;
+            }
+        }
+        return border;
+    });
+}
+
+NodeParser.prototype.parseBackgroundClip = function(container, borderPoints, borders, radius, bounds) {
+    var backgroundClip = container.css('backgroundClip'),
+        borderArgs = [];
+
+    switch(backgroundClip) {
+    case "content-box":
+    case "padding-box":
+        parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftInner, borderPoints.topRightInner, bounds.left + borders[3].width, bounds.top + borders[0].width);
+        parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightInner, borderPoints.bottomRightInner, bounds.left + bounds.width - borders[1].width, bounds.top + borders[0].width);
+        parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightInner, borderPoints.bottomLeftInner, bounds.left + bounds.width - borders[1].width, bounds.top + bounds.height - borders[2].width);
+        parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftInner, borderPoints.topLeftInner, bounds.left + borders[3].width, bounds.top + bounds.height - borders[2].width);
+        break;
+
+    default:
+        parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftOuter, borderPoints.topRightOuter, bounds.left, bounds.top);
+        parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightOuter, borderPoints.bottomRightOuter, bounds.left + bounds.width, bounds.top);
+        parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightOuter, borderPoints.bottomLeftOuter, bounds.left + bounds.width, bounds.top + bounds.height);
+        parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftOuter, borderPoints.topLeftOuter, bounds.left, bounds.top + bounds.height);
+        break;
+    }
+
+    return borderArgs;
+};
+
+function getCurvePoints(x, y, r1, r2) {
+    var kappa = 4 * ((Math.sqrt(2) - 1) / 3);
+    var ox = (r1) * kappa, // control point offset horizontal
+        oy = (r2) * kappa, // control point offset vertical
+        xm = x + r1, // x-middle
+        ym = y + r2; // y-middle
+    return {
+        topLeft: bezierCurve({x: x, y: ym}, {x: x, y: ym - oy}, {x: xm - ox, y: y}, {x: xm, y: y}),
+        topRight: bezierCurve({x: x, y: y}, {x: x + ox,y: y}, {x: xm, y: ym - oy}, {x: xm, y: ym}),
+        bottomRight: bezierCurve({x: xm, y: y}, {x: xm, y: y + oy}, {x: x + ox, y: ym}, {x: x, y: ym}),
+        bottomLeft: bezierCurve({x: xm, y: ym}, {x: xm - ox, y: ym}, {x: x, y: y + oy}, {x: x, y:y})
+    };
+}
+
+function calculateCurvePoints(bounds, borderRadius, borders) {
+    var x = bounds.left,
+        y = bounds.top,
+        width = bounds.width,
+        height = bounds.height,
+
+        tlh = borderRadius[0][0],
+        tlv = borderRadius[0][1],
+        trh = borderRadius[1][0],
+        trv = borderRadius[1][1],
+        brh = borderRadius[2][0],
+        brv = borderRadius[2][1],
+        blh = borderRadius[3][0],
+        blv = borderRadius[3][1];
+
+    var topWidth = width - trh,
+        rightHeight = height - brv,
+        bottomWidth = width - brh,
+        leftHeight = height - blv;
+
+    return {
+        topLeftOuter: getCurvePoints(x, y, tlh, tlv).topLeft.subdivide(0.5),
+        topLeftInner: getCurvePoints(x + borders[3].width, y + borders[0].width, Math.max(0, tlh - borders[3].width), Math.max(0, tlv - borders[0].width)).topLeft.subdivide(0.5),
+        topRightOuter: getCurvePoints(x + topWidth, y, trh, trv).topRight.subdivide(0.5),
+        topRightInner: getCurvePoints(x + Math.min(topWidth, width + borders[3].width), y + borders[0].width, (topWidth > width + borders[3].width) ? 0 :trh - borders[3].width, trv - borders[0].width).topRight.subdivide(0.5),
+        bottomRightOuter: getCurvePoints(x + bottomWidth, y + rightHeight, brh, brv).bottomRight.subdivide(0.5),
+        bottomRightInner: getCurvePoints(x + Math.min(bottomWidth, width - borders[3].width), y + Math.min(rightHeight, height + borders[0].width), Math.max(0, brh - borders[1].width),  brv - borders[2].width).bottomRight.subdivide(0.5),
+        bottomLeftOuter: getCurvePoints(x, y + leftHeight, blh, blv).bottomLeft.subdivide(0.5),
+        bottomLeftInner: getCurvePoints(x + borders[3].width, y + leftHeight, Math.max(0, blh - borders[3].width), blv - borders[2].width).bottomLeft.subdivide(0.5)
+    };
+}
+
+function bezierCurve(start, startControl, endControl, end) {
+    var lerp = function (a, b, t) {
+        return {
+            x: a.x + (b.x - a.x) * t,
+            y: a.y + (b.y - a.y) * t
+        };
+    };
+
+    return {
+        start: start,
+        startControl: startControl,
+        endControl: endControl,
+        end: end,
+        subdivide: function(t) {
+            var ab = lerp(start, startControl, t),
+                bc = lerp(startControl, endControl, t),
+                cd = lerp(endControl, end, t),
+                abbc = lerp(ab, bc, t),
+                bccd = lerp(bc, cd, t),
+                dest = lerp(abbc, bccd, t);
+            return [bezierCurve(start, ab, abbc, dest), bezierCurve(dest, bccd, cd, end)];
+        },
+        curveTo: function(borderArgs) {
+            borderArgs.push(["bezierCurve", startControl.x, startControl.y, endControl.x, endControl.y, end.x, end.y]);
+        },
+        curveToReversed: function(borderArgs) {
+            borderArgs.push(["bezierCurve", endControl.x, endControl.y, startControl.x, startControl.y, start.x, start.y]);
+        }
+    };
+}
+
+function drawSide(borderData, radius1, radius2, outer1, inner1, outer2, inner2) {
+    var borderArgs = [];
+
+    if (radius1[0] > 0 || radius1[1] > 0) {
+        borderArgs.push(["line", outer1[1].start.x, outer1[1].start.y]);
+        outer1[1].curveTo(borderArgs);
+    } else {
+        borderArgs.push([ "line", borderData.c1[0], borderData.c1[1]]);
+    }
+
+    if (radius2[0] > 0 || radius2[1] > 0) {
+        borderArgs.push(["line", outer2[0].start.x, outer2[0].start.y]);
+        outer2[0].curveTo(borderArgs);
+        borderArgs.push(["line", inner2[0].end.x, inner2[0].end.y]);
+        inner2[0].curveToReversed(borderArgs);
+    } else {
+        borderArgs.push(["line", borderData.c2[0], borderData.c2[1]]);
+        borderArgs.push(["line", borderData.c3[0], borderData.c3[1]]);
+    }
+
+    if (radius1[0] > 0 || radius1[1] > 0) {
+        borderArgs.push(["line", inner1[1].end.x, inner1[1].end.y]);
+        inner1[1].curveToReversed(borderArgs);
+    } else {
+        borderArgs.push(["line", borderData.c4[0], borderData.c4[1]]);
+    }
+
+    return borderArgs;
+}
+
+function parseCorner(borderArgs, radius1, radius2, corner1, corner2, x, y) {
+    if (radius1[0] > 0 || radius1[1] > 0) {
+        borderArgs.push(["line", corner1[0].start.x, corner1[0].start.y]);
+        corner1[0].curveTo(borderArgs);
+        corner1[1].curveTo(borderArgs);
+    } else {
+        borderArgs.push(["line", x, y]);
+    }
+
+    if (radius2[0] > 0 || radius2[1] > 0) {
+        borderArgs.push(["line", corner2[0].start.x, corner2[0].start.y]);
+    }
+}
+
+function negativeZIndex(container) {
+    return container.cssInt("zIndex") < 0;
+}
+
+function positiveZIndex(container) {
+    return container.cssInt("zIndex") > 0;
+}
+
+function zIndex0(container) {
+    return container.cssInt("zIndex") === 0;
+}
+
+function inlineLevel(container) {
+    return ["inline", "inline-block", "inline-table"].indexOf(container.css("display")) !== -1;
+}
+
+function isStackingContext(container) {
+    return (container instanceof StackingContext);
+}
+
+function hasText(container) {
+    return container.node.data.trim().length > 0;
+}
+
+function noLetterSpacing(container) {
+    return (/^(normal|none|0px)$/.test(container.parent.css("letterSpacing")));
+}
+
+function getBorderRadiusData(container) {
+    return ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map(function(side) {
+        var value = container.css('border' + side + 'Radius');
+        var arr = value.split(" ");
+        if (arr.length <= 1) {
+            arr[1] = arr[0];
+        }
+        return arr.map(asInt);
+    });
+}
+
+function renderableNode(node) {
+    return (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE);
+}
+
+function isPositionedForStacking(container) {
+    var position = container.css("position");
+    var zIndex = (["absolute", "relative", "fixed"].indexOf(position) !== -1) ? container.css("zIndex") : "auto";
+    return zIndex !== "auto";
+}
+
+function isPositioned(container) {
+    return container.css("position") !== "static";
+}
+
+function isFloating(container) {
+    return container.css("float") !== "none";
+}
+
+function isInlineBlock(container) {
+    return ["inline-block", "inline-table"].indexOf(container.css("display")) !== -1;
+}
+
+function not(callback) {
+    var context = this;
+    return function() {
+        return !callback.apply(context, arguments);
+    };
+}
+
+function isElement(container) {
+    return container.node.nodeType === Node.ELEMENT_NODE;
+}
+
+function isPseudoElement(container) {
+    return container.isPseudoElement === true;
+}
+
+function isTextNode(container) {
+    return container.node.nodeType === Node.TEXT_NODE;
+}
+
+function zIndexSort(contexts) {
+    return function(a, b) {
+        return (a.cssInt("zIndex") + (contexts.indexOf(a) / contexts.length)) - (b.cssInt("zIndex") + (contexts.indexOf(b) / contexts.length));
+    };
+}
+
+function hasOpacity(container) {
+    return container.getOpacity() < 1;
+}
+
+function asInt(value) {
+    return parseInt(value, 10);
+}
+
+function getWidth(border) {
+    return border.width;
+}
+
+function nonIgnoredElement(nodeContainer) {
+    return (nodeContainer.node.nodeType !== Node.ELEMENT_NODE || ["SCRIPT", "HEAD", "TITLE", "OBJECT", "BR", "OPTION"].indexOf(nodeContainer.node.nodeName) === -1);
+}
+
+function flatten(arrays) {
+    return [].concat.apply([], arrays);
+}
+
+function stripQuotes(content) {
+    var first = content.substr(0, 1);
+    return (first === content.substr(content.length - 1) && first.match(/'|"/)) ? content.substr(1, content.length - 2) : content;
+}
+
+function getWords(characters) {
+    var words = [], i = 0, onWordBoundary = false, word;
+    while(characters.length) {
+        if (isWordBoundary(characters[i]) === onWordBoundary) {
+            word = characters.splice(0, i);
+            if (word.length) {
+                words.push(punycode.ucs2.encode(word));
+            }
+            onWordBoundary =! onWordBoundary;
+            i = 0;
+        } else {
+            i++;
+        }
+
+        if (i >= characters.length) {
+            word = characters.splice(0, i);
+            if (word.length) {
+                words.push(punycode.ucs2.encode(word));
+            }
+        }
+    }
+    return words;
+}
+
+function isWordBoundary(characterCode) {
+    return [
+        32, // <space>
+        13, // \r
+        10, // \n
+        9, // \t
+        45 // -
+    ].indexOf(characterCode) !== -1;
+}
+
+function hasUnicode(string) {
+    return (/[^\u0000-\u00ff]/).test(string);
+}
+
+module.exports = NodeParser;

src/plugins/bookmarklet.js

@@ -1,76 +0,0 @@
-(function() {
-    /* options, customize to your needs */
-    var server = '//html2canvas.hertzen.com/js',
-    proxy = '//html2canvas.appspot.com',
-    debug = false,
-    profile = false;
-    //DEBUG: server = 'http://localhost/html2canvas'; debug = true;
-    var debugFiles = [
-        'external/jquery-1.6.2.min',
-        'src/Core',
-        'src/Generate',
-        'src/Parse',
-        'src/Preload',
-        'src/Queue',
-        'src/Renderer',
-        'src/Util',
-        'src/renderers/Canvas',
-        'src/plugins/jquery.plugin.html2canvas'
-    ],
-    relFiles = [
-        '//code.jquery.com/jquery-1.6.4.js',
-        'html2canvas',
-        'jquery.plugin.html2canvas'
-    ];
-    var loader = {
-        index: 0,
-        head: document.getElementsByTagName('head')[0],
-        statusline: document.createElement('div'),
-        files: (debug ? debugFiles : relFiles),
-        onload: function () {
-            var _ = this;
-            if (_.index < _.files.length) {
-                var el = document.createElement('script');
-                el.type = 'text/javascript';
-                el.onload = function() {
-                    _.onload();
-                };
-                el.onerror = function() {
-                    _.statusline.style.color = 'red';
-                    _.statusline.innerHTML = _.statusline.innerHTML + ' failed';
-                    _.statusline.onclick = function() {
-                        _.statusline.parentNode.removeChild(_.statusline);
-                    };
-                };
-                if (_.files[_.index].substr(0, 2) === '//') {
-                    el.src = _.files[_.index];
-                }
-                else {
-                    el.src = server + '/' + _.files[_.index] + '.js';
-                }
-                _.head.appendChild(el);
-                ++_.index;
-                _.statusline.innerHTML = 'html2canvas: loading "' + el.src + '" ' + _.index + ' / ' + _.files.length + '...';
-            }
-            else {
-                _.statusline.parentNode.removeChild(_.statusline);
-                delete _.statusline;
-                $(document.documentElement).html2canvas({
-                    logging: debug,
-                    profile: profile,
-                    proxy: proxy
-                });
-            }
-        }
-    }, statusline = loader.statusline;
-    statusline.style.position = 'fixed';
-    statusline.style.bottom = '0px';
-    statusline.style.right = '20px';
-    statusline.style.backgroundColor = 'white';
-    statusline.style.border = '1px solid black';
-    statusline.style.borderBottomWidth = '0px';
-    statusline.style.padding = '2px 5px';
-    statusline.style.zIndex = 9999999;
-    document.body.appendChild(statusline);
-    loader.onload();
-}());

src/plugins/jquery.plugin.html2canvas.js

@@ -1,80 +0,0 @@
-/*
- * jQuery helper plugin for examples and tests
- */
-(function( $ ){
-    $.fn.html2canvas = function(options) {
-        if (options && options.profile && window.console && window.console.profile) {
-            console.profile();
-        }
-        var date = new Date(),
-        html2obj,
-        $message = null,
-        timeoutTimer = false,
-        timer = date.getTime();
-        options = options || {};
-
-        options.onrendered = options.onrendered || function( canvas ) {
-            var $canvas = $(canvas),
-            finishTime = new Date();
-
-            if (options && options.profile && window.console && window.console.profileEnd) {
-                console.profileEnd();
-            }
-            $canvas.css({
-                position: 'absolute',
-                left: 0,
-                top: 0
-            }).appendTo(document.body);
-            $canvas.siblings().toggle();
-
-            $(window).click(function(){
-                $canvas.toggle().siblings().toggle();
-                throwMessage("Canvas Render " + ($canvas.is(':visible') ? "visible" : "hidden"));
-            });
-            throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)) + " ms<br />",4000);
-
-            // test if canvas is read-able
-            try {
-                $canvas[0].toDataURL();
-            } catch(e) {
-                if ($canvas[0].nodeName.toLowerCase() === "canvas") {
-                    // TODO, maybe add a bit less offensive way to present this, but still something that can easily be noticed
-                    alert("Canvas is tainted, unable to read data");
-                }
-            }
-        };
-
-        html2obj = html2canvas(this, options);
-
-        function throwMessage(msg,duration){
-            window.clearTimeout(timeoutTimer);
-            timeoutTimer = window.setTimeout(function(){
-                $message.fadeOut(function(){
-                    $message.remove();
-                    $message = null;
-                });
-            },duration || 2000);
-            if ($message)
-                $message.remove();
-            $message = $('<div />').html(msg).css({
-                margin:0,
-                padding:10,
-                background: "#000",
-                opacity:0.7,
-                position:"fixed",
-                top:10,
-                right:10,
-                fontFamily: 'Tahoma',
-                color:'#fff',
-                fontSize:12,
-                borderRadius:12,
-                width:'auto',
-                height:'auto',
-                textAlign:'center',
-                textDecoration:'none',
-                display:'none'
-            }).appendTo(document.body).fadeIn();
-            html2obj.log(msg);
-        }
-    };
-})( jQuery );

src/promise.js

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

src/proxy.js

@@ -0,0 +1,96 @@
+var Promise = require('./promise');
+var XHR = require('./xhr');
+var utils = require('./utils');
+var log = require('./log');
+var createWindowClone = require('./clone');
+var decode64 = utils.decode64;
+
+function Proxy(src, proxyUrl, document) {
+    var supportsCORS = ('withCredentials' in new XMLHttpRequest());
+    if (!proxyUrl) {
+        return Promise.reject("No proxy configured");
+    }
+    var callback = createCallback(supportsCORS);
+    var url = createProxyUrl(proxyUrl, src, callback);
+
+    return supportsCORS ? XHR(url) : (jsonp(document, url, callback).then(function(response) {
+        return decode64(response.content);
+    }));
+}
+var proxyCount = 0;
+
+function ProxyURL(src, proxyUrl, document) {
+    var supportsCORSImage = ('crossOrigin' in new Image());
+    var callback = createCallback(supportsCORSImage);
+    var url = createProxyUrl(proxyUrl, src, callback);
+    return (supportsCORSImage ? Promise.resolve(url) : jsonp(document, url, callback).then(function(response) {
+        return "data:" + response.type + ";base64," + response.content;
+    }));
+}
+
+function jsonp(document, url, callback) {
+    return new Promise(function(resolve, reject) {
+        var s = document.createElement("script");
+        var cleanup = function() {
+            delete window.html2canvas.proxy[callback];
+            document.body.removeChild(s);
+        };
+        window.html2canvas.proxy[callback] = function(response) {
+            cleanup();
+            resolve(response);
+        };
+        s.src = url;
+        s.onerror = function(e) {
+            cleanup();
+            reject(e);
+        };
+        document.body.appendChild(s);
+    });
+}
+
+function createCallback(useCORS) {
+    return !useCORS ? "html2canvas_" + Date.now() + "_" + (++proxyCount) + "_" + Math.round(Math.random() * 100000) : "";
+}
+
+function createProxyUrl(proxyUrl, src, callback) {
+    return proxyUrl + "?url=" + encodeURIComponent(src) + (callback.length ? "&callback=html2canvas.proxy." + callback : "");
+}
+
+function documentFromHTML(src) {
+    return function(html) {
+        var parser = new DOMParser(), doc;
+        try {
+            doc = parser.parseFromString(html, "text/html");
+        } catch(e) {
+            log("DOMParser not supported, falling back to createHTMLDocument");
+            doc = document.implementation.createHTMLDocument("");
+            try {
+                doc.open();
+                doc.write(html);
+                doc.close();
+            } catch(ee) {
+                log("createHTMLDocument write not supported, falling back to document.body.innerHTML");
+                doc.body.innerHTML = html; // ie9 doesnt support writing to documentElement
+            }
+        }
+
+        var b = doc.querySelector("base");
+        if (!b || !b.href.host) {
+            var base = doc.createElement("base");
+            base.href = src;
+            doc.head.insertBefore(base, doc.head.firstChild);
+        }
+
+        return doc;
+    };
+}
+
+function loadUrlDocument(src, proxy, document, width, height, options) {
+    return new Proxy(src, proxy, window.document).then(documentFromHTML(src)).then(function(doc) {
+        return createWindowClone(doc, document, width, height, options, 0, 0);
+    });
+}
+
+exports.Proxy = Proxy;
+exports.ProxyURL = ProxyURL;
+exports.loadUrlDocument = loadUrlDocument;

src/proxyimagecontainer.js

@@ -0,0 +1,22 @@
+var ProxyURL = require('./proxy').ProxyURL;
+var Promise = require('./promise');
+
+function ProxyImageContainer(src, proxy) {
+    var link = document.createElement("a");
+    link.href = src;
+    src = link.href;
+    this.src = src;
+    this.image = new Image();
+    var self = this;
+    this.promise = new Promise(function(resolve, reject) {
+        self.image.crossOrigin = "Anonymous";
+        self.image.onload = resolve;
+        self.image.onerror = reject;
+
+        new ProxyURL(src, proxy, document).then(function(url) {
+            self.image.src = url;
+        })['catch'](reject);
+    });
+}
+
+module.exports = ProxyImageContainer;

src/pseudoelementcontainer.js

@@ -0,0 +1,38 @@
+var NodeContainer = require('./nodecontainer');
+
+function PseudoElementContainer(node, parent, type) {
+    NodeContainer.call(this, node, parent);
+    this.isPseudoElement = true;
+    this.before = type === ":before";
+}
+
+PseudoElementContainer.prototype.cloneTo = function(stack) {
+    PseudoElementContainer.prototype.cloneTo.call(this, stack);
+    stack.isPseudoElement = true;
+    stack.before = this.before;
+};
+
+PseudoElementContainer.prototype = Object.create(NodeContainer.prototype);
+
+PseudoElementContainer.prototype.appendToDOM = function() {
+    if (this.before) {
+        this.parent.node.insertBefore(this.node, this.parent.node.firstChild);
+    } else {
+        this.parent.node.appendChild(this.node);
+    }
+    this.parent.node.className += " " + this.getHideClass();
+};
+
+PseudoElementContainer.prototype.cleanDOM = function() {
+    this.node.parentNode.removeChild(this.node);
+    this.parent.node.className = this.parent.node.className.replace(this.getHideClass(), "");
+};
+
+PseudoElementContainer.prototype.getHideClass = function() {
+    return this["PSEUDO_HIDE_ELEMENT_CLASS_" + (this.before ? "BEFORE" : "AFTER")];
+};
+
+PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_BEFORE = "___html2canvas___pseudoelement_before";
+PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_AFTER = "___html2canvas___pseudoelement_after";
+
+module.exports = PseudoElementContainer;

src/renderer.js

@@ -0,0 +1,108 @@
+var log = require('./log');
+
+function Renderer(width, height, images, options, document) {
+    this.width = width;
+    this.height = height;
+    this.images = images;
+    this.options = options;
+    this.document = document;
+}
+
+Renderer.prototype.renderImage = function(container, bounds, borderData, imageContainer) {
+    var paddingLeft = container.cssInt('paddingLeft'),
+        paddingTop = container.cssInt('paddingTop'),
+        paddingRight = container.cssInt('paddingRight'),
+        paddingBottom = container.cssInt('paddingBottom'),
+        borders = borderData.borders;
+
+    var width = bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight);
+    var height = bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom);
+    this.drawImage(
+        imageContainer,
+        0,
+        0,
+        imageContainer.image.width || width,
+        imageContainer.image.height || height,
+        bounds.left + paddingLeft + borders[3].width,
+        bounds.top + paddingTop + borders[0].width,
+        width,
+        height
+    );
+};
+
+Renderer.prototype.renderBackground = function(container, bounds, borderData) {
+    if (bounds.height > 0 && bounds.width > 0) {
+        this.renderBackgroundColor(container, bounds);
+        this.renderBackgroundImage(container, bounds, borderData);
+    }
+};
+
+Renderer.prototype.renderBackgroundColor = function(container, bounds) {
+    var color = container.color("backgroundColor");
+    if (!color.isTransparent()) {
+        this.rectangle(bounds.left, bounds.top, bounds.width, bounds.height, color);
+    }
+};
+
+Renderer.prototype.renderBorders = function(borders) {
+    borders.forEach(this.renderBorder, this);
+};
+
+Renderer.prototype.renderBorder = function(data) {
+    if (!data.color.isTransparent() && data.args !== null) {
+        this.drawShape(data.args, data.color);
+    }
+};
+
+Renderer.prototype.renderBackgroundImage = function(container, bounds, borderData) {
+    var backgroundImages = container.parseBackgroundImages();
+    backgroundImages.reverse().forEach(function(backgroundImage, index, arr) {
+        switch(backgroundImage.method) {
+        case "url":
+            var image = this.images.get(backgroundImage.args[0]);
+            if (image) {
+                this.renderBackgroundRepeating(container, bounds, image, arr.length - (index+1), borderData);
+            } else {
+                log("Error loading background-image", backgroundImage.args[0]);
+            }
+            break;
+        case "linear-gradient":
+        case "gradient":
+            var gradientImage = this.images.get(backgroundImage.value);
+            if (gradientImage) {
+                this.renderBackgroundGradient(gradientImage, bounds, borderData);
+            } else {
+                log("Error loading background-image", backgroundImage.args[0]);
+            }
+            break;
+        case "none":
+            break;
+        default:
+            log("Unknown background-image type", backgroundImage.args[0]);
+        }
+    }, this);
+};
+
+Renderer.prototype.renderBackgroundRepeating = function(container, bounds, imageContainer, index, borderData) {
+    var size = container.parseBackgroundSize(bounds, imageContainer.image, index);
+    var position = container.parseBackgroundPosition(bounds, imageContainer.image, index, size);
+    var repeat = container.parseBackgroundRepeat(index);
+    switch (repeat) {
+    case "repeat-x":
+    case "repeat no-repeat":
+        this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + borderData[3], bounds.top + position.top + borderData[0], 99999, size.height, borderData);
+        break;
+    case "repeat-y":
+    case "no-repeat repeat":
+        this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + borderData[0], size.width, 99999, borderData);
+        break;
+    case "no-repeat":
+        this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + position.top + borderData[0], size.width, size.height, borderData);
+        break;
+    default:
+        this.renderBackgroundRepeat(imageContainer, position, size, {top: bounds.top, left: bounds.left}, borderData[3], borderData[0]);
+        break;
+    }
+};
+
+module.exports = Renderer;

src/renderers/Canvas.js

@@ -1,242 +0,0 @@
-/*
-  html2canvas @VERSION@ <http://html2canvas.hertzen.com>
-  Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
-  http://www.twitter.com/niklasvh
-
-  Released under MIT License
-*/
-
-
-_html2canvas.Renderer.Canvas = function( options ) {
-
-    options = options || {};
-
-    var doc = document,
-    canvas = options.canvas || doc.createElement('canvas'),
-    usingFlashcanvas = false,
-    _createCalled = false,
-    canvasReadyToDraw = false,
-    methods,
-    flashMaxSize = 2880; // flash bitmap limited to 2880x2880px // http://stackoverflow.com/questions/2033792/argumenterror-error-2015-invalid-bitmapdata
-
-
-    if (canvas.getContext){
-        h2clog("html2canvas: Renderer: using canvas renderer");
-        canvasReadyToDraw = true;
-    } else if ( options.flashcanvas !== undefined ){
-        usingFlashcanvas = true;
-        h2clog("html2canvas: Renderer: canvas not available, using flashcanvas");
-        var script = doc.createElement("script");
-        script.src = options.flashcanvas;
-
-        script.onload = (function(script, func){
-            var intervalFunc;
-
-            if (script.onload === undefined) {
-                // IE lack of support for script onload
-
-                if( script.onreadystatechange !== undefined ) {
-
-                    intervalFunc = function() {
-                        if (script.readyState !== "loaded" && script.readyState !== "complete") {
-                            window.setTimeout( intervalFunc, 250 );
-
-                        } else {
-                            // it is loaded
-                            func();
-
-                        }
-
-                    };
-
-                    window.setTimeout( intervalFunc, 250 );
-
-                } else {
-                    h2clog("html2canvas: Renderer: Can't track when flashcanvas is loaded");
-                }
-
-            } else {
-                return func;
-            }
-
-        })(script, function(){
-
-            if (typeof window.FlashCanvas !== "undefined") {
-                h2clog("html2canvas: Renderer: Flashcanvas initialized");
-                window.FlashCanvas.initElement( canvas );
-
-                canvasReadyToDraw = true;
-                if ( _createCalled !== false ) {
-                    methods._create.apply( null, _createCalled );
-                }
-            }
-        });
-
-        doc.body.appendChild( script );
-
-    }
-
-    methods = {
-        _create: function( zStack, options, doc, queue, _html2canvas ) {
-
-            if ( !canvasReadyToDraw ) {
-                _createCalled = arguments;
-                return canvas;
-            }
-
-            var ctx = canvas.getContext("2d"),
-            storageContext,
-            i,
-            queueLen,
-            a,
-            newCanvas,
-            bounds,
-            testCanvas = document.createElement("canvas"),
-            hasCTX = ( testCanvas.getContext !== undefined ),
-            storageLen,
-            renderItem,
-            testctx = ( hasCTX ) ? testCanvas.getContext("2d") : {},
-            safeImages = [],
-            fstyle;
-
-            canvas.width = canvas.style.width = (!usingFlashcanvas) ? options.width || zStack.ctx.width : Math.min(flashMaxSize, (options.width || zStack.ctx.width) );
-            canvas.height = canvas.style.height = (!usingFlashcanvas) ? options.height || zStack.ctx.height : Math.min(flashMaxSize, (options.height || zStack.ctx.height) );
-
-            fstyle = ctx.fillStyle;
-            ctx.fillStyle = zStack.backgroundColor;
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            ctx.fillStyle = fstyle;
-
-            if ( options.svgRendering && zStack.svgRender !== undefined ) {
-                // TODO: enable async rendering to support this
-                ctx.drawImage( zStack.svgRender, 0, 0 );
-            } else {
-                for ( i = 0, queueLen = queue.length; i < queueLen; i+=1 ) {
-
-                    storageContext = queue.splice(0, 1)[0];
-                    storageContext.canvasPosition = storageContext.canvasPosition || {};
-
-                    //this.canvasRenderContext(storageContext,parentctx);
-
-                    // set common settings for canvas
-                    ctx.textBaseline = "bottom";
-
-                    if (storageContext.clip){
-                        ctx.save();
-                        ctx.beginPath();
-                        // console.log(storageContext);
-                        ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);
-                        ctx.clip();
-
-                    }
-
-                    if (storageContext.ctx.storage){
-
-                        for (a = 0, storageLen = storageContext.ctx.storage.length; a < storageLen; a+=1){
-
-                            renderItem = storageContext.ctx.storage[a];
-
-
-                            switch(renderItem.type){
-                                case "variable":
-                                    ctx[renderItem.name] = renderItem['arguments'];
-                                    break;
-                                case "function":
-                                    if (renderItem.name === "fillRect") {
-
-                                        if (!usingFlashcanvas || renderItem['arguments'][0] + renderItem['arguments'][2] < flashMaxSize  && renderItem['arguments'][1] + renderItem['arguments'][3] < flashMaxSize) {
-                                            ctx.fillRect.apply( ctx, renderItem['arguments'] );
-                                        }
-                                    } else if (renderItem.name === "drawShape") {
-                                        
-                                        ( function( args ) {
-                                          
-                                            var i, len = args.length;
-                                            ctx.beginPath();
-                                            for ( i = 0; i < len; i++ ) {   
-                                                ctx[ args[ i ].name ].apply( ctx, args[ i ]['arguments'] );
-                                            }
-                                            ctx.closePath();
-                                            ctx.fill();
-                                        })( renderItem['arguments'] );
-                                        
-                                    } else if (renderItem.name === "fillText") {
-                                        if (!usingFlashcanvas || renderItem['arguments'][1] < flashMaxSize  && renderItem['arguments'][2] < flashMaxSize) {
-                                            ctx.fillText.apply( ctx, renderItem['arguments'] );
-                                        }
-                                    } else if (renderItem.name === "drawImage") {
-
-                                        if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){
-                                            if ( hasCTX && options.taintTest ) {
-                                                if ( safeImages.indexOf( renderItem['arguments'][ 0 ].src ) === -1 ) {
-                                                    testctx.drawImage( renderItem['arguments'][ 0 ], 0, 0 );
-                                                    try {
-                                                        testctx.getImageData( 0, 0, 1, 1 );
-                                                    } catch(e) {
-                                                        testCanvas = doc.createElement("canvas");
-                                                        testctx = testCanvas.getContext("2d");
-                                                        continue;
-                                                    }
-
-                                                    safeImages.push( renderItem['arguments'][ 0 ].src );
-
-                                                }
-                                            }
-                                            ctx.drawImage.apply( ctx, renderItem['arguments'] );
-                                        }
-                                    }
-
-
-                                    break;
-                                default:
-
-                            }
-
-                        }
-
-                    }
-                    if (storageContext.clip){
-                        ctx.restore();
-                    }
-
-                }
-            }
-
-            h2clog("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
-
-            queueLen = options.elements.length;
-
-            if (queueLen === 1) {
-                if (typeof options.elements[ 0 ] === "object" && options.elements[ 0 ].nodeName !== "BODY" && usingFlashcanvas === false) {
-                    // crop image to the bounds of selected (single) element
-                    bounds = _html2canvas.Util.Bounds( options.elements[ 0 ] );
-                    newCanvas = doc.createElement('canvas');
-                    newCanvas.width = bounds.width;
-                    newCanvas.height = bounds.height;
-                    ctx = newCanvas.getContext("2d");
-
-                    ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );
-                    canvas = null;
-                    return newCanvas;
-                }
-            } /*else {
-        // TODO clip and resize multiple elements
-
-            for ( i = 0; i < queueLen; i+=1 ) {
-                if (options.elements[ i ] instanceof Element) {
-
-                }
-
-            }
-        }
-        */
-
-
-
-            return canvas;
-        }
-    };
-
-    return methods;
-
-};

src/renderers/SVG.js

@@ -1,206 +0,0 @@
-/*
-  html2canvas @VERSION@ <http://html2canvas.hertzen.com>
-  Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
-  http://www.twitter.com/niklasvh
-
-  Released under MIT License
-*/
-
-
-// WARNING THIS file is outdated, and hasn't been tested in quite a while
-
-_html2canvas.Renderer.SVG = function( options ) {
-
-    options = options || {};
-
-    var doc = document,
-    svgNS = "http://www.w3.org/2000/svg",
-    svg = doc.createElementNS(svgNS, "svg"),
-    xlinkNS = "http://www.w3.org/1999/xlink",
-    defs = doc.createElementNS(svgNS, "defs"),
-    i,
-    a,
-    queueLen,
-    storageLen,
-    storageContext,
-    renderItem,
-    el,
-    settings = {},
-    text,
-    fontStyle,
-    clipId = 0,
-    methods;
-
-
-    methods = {
-        _create: function( zStack, options, doc, queue, _html2canvas ) {
-            svg.setAttribute("version", "1.1");
-            svg.setAttribute("baseProfile", "full");
-
-            svg.setAttribute("viewBox", "0 0 " + Math.max(zStack.ctx.width, options.width) + " " + Math.max(zStack.ctx.height, options.height));
-            svg.setAttribute("width", Math.max(zStack.ctx.width, options.width) + "px");
-            svg.setAttribute("height", Math.max(zStack.ctx.height, options.height) + "px");
-            svg.setAttribute("preserveAspectRatio", "none");
-            svg.appendChild(defs);
-
-
-
-            for (i = 0, queueLen = queue.length; i < queueLen; i+=1){
-
-                storageContext = queue.splice(0, 1)[0];
-                storageContext.canvasPosition = storageContext.canvasPosition || {};
-
-                //this.canvasRenderContext(storageContext,parentctx);
-
-
-                /*
-            if (storageContext.clip){
-                ctx.save();
-                ctx.beginPath();
-                // console.log(storageContext);
-                ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);
-                ctx.clip();
-
-            }*/
-
-                if (storageContext.ctx.storage){
-
-                    for (a = 0, storageLen = storageContext.ctx.storage.length; a < storageLen; a+=1){
-
-                        renderItem = storageContext.ctx.storage[a];
-
-
-
-                        switch(renderItem.type){
-                            case "variable":
-                                settings[renderItem.name] = renderItem['arguments'];
-                                break;
-                            case "function":
-                                if (renderItem.name === "fillRect") {
-
-                                    el = doc.createElementNS(svgNS, "rect");
-                                    el.setAttribute("x", renderItem['arguments'][0]);
-                                    el.setAttribute("y", renderItem['arguments'][1]);
-                                    el.setAttribute("width", renderItem['arguments'][2]);
-                                    el.setAttribute("height", renderItem['arguments'][3]);
-                                    el.setAttribute("fill",  settings.fillStyle);
-                                    svg.appendChild(el);
-
-                                } else if(renderItem.name === "fillText") {
-                                    el = doc.createElementNS(svgNS, "text");
-
-                                    fontStyle = settings.font.split(" ");
-
-                                    el.style.fontVariant = fontStyle.splice(0, 1)[0];
-                                    el.style.fontWeight = fontStyle.splice(0, 1)[0];
-                                    el.style.fontStyle = fontStyle.splice(0, 1)[0];
-                                    el.style.fontSize = fontStyle.splice(0, 1)[0];
-
-                                    el.setAttribute("x", renderItem['arguments'][1]);
-                                    el.setAttribute("y", renderItem['arguments'][2] - (parseInt(el.style.fontSize, 10) + 3));
-
-                                    el.setAttribute("fill", settings.fillStyle);
-
-
-
-
-                                    // TODO get proper baseline
-                                    el.style.dominantBaseline = "text-before-edge";
-                                    el.style.fontFamily = fontStyle.join(" ");
-
-                                    text = doc.createTextNode(renderItem['arguments'][0]);
-                                    el.appendChild(text);
-
-
-                                    svg.appendChild(el);
-
-
-
-                                } else if(renderItem.name === "drawImage") {
-
-                                    if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){
-
-                                        // TODO check whether even any clipping is necessary for this particular image
-                                        el = doc.createElementNS(svgNS, "clipPath");
-                                        el.setAttribute("id", "clipId" + clipId);
-
-                                        text = doc.createElementNS(svgNS, "rect");
-                                        text.setAttribute("x",  renderItem['arguments'][5] );
-                                        text.setAttribute("y", renderItem['arguments'][6]);
-
-                                        text.setAttribute("width", renderItem['arguments'][3]);
-                                        text.setAttribute("height", renderItem['arguments'][4]);
-                                        el.appendChild(text);
-                                        defs.appendChild(el);
-
-                                        el = doc.createElementNS(svgNS, "image");
-                                        el.setAttributeNS(xlinkNS, "xlink:href", renderItem['arguments'][0].src);
-                                        el.setAttribute("width", renderItem['arguments'][7]);
-                                        el.setAttribute("height", renderItem['arguments'][8]);
-                                        el.setAttribute("x", renderItem['arguments'][5]);
-                                        el.setAttribute("y", renderItem['arguments'][6]);
-                                        el.setAttribute("clip-path", "url(#clipId" + clipId + ")");
-                                        // el.setAttribute("xlink:href", );
-
-
-                                        el.setAttribute("preserveAspectRatio", "none");
-
-                                        svg.appendChild(el);
-
-
-                                        clipId += 1;
-                                    /*
-                                    ctx.drawImage(
-                                        renderItem['arguments'][0],
-                                        renderItem['arguments'][1],
-                                        renderItem['arguments'][2],
-                                        renderItem['arguments'][3],
-                                        renderItem['arguments'][4],
-                                        renderItem['arguments'][5],
-                                        renderItem['arguments'][6],
-                                        renderItem['arguments'][7],
-                                        renderItem['arguments'][8]
-                                        );
-                                        */
-                                    }
-                                }
-
-
-
-                                break;
-                            default:
-
-                        }
-
-                    }
-
-                }
-            /*
-            if (storageContext.clip){
-                ctx.restore();
-            }
-    */
-
-
-
-            }
-
-
-
-
-
-
-
-
-
-
-            h2clog("html2canvas: Renderer: SVG Renderer done - returning SVG DOM obj");
-
-            return svg;
-        }
-    };
-
-    return methods;
-
-
-};

src/renderers/canvas.js

@@ -0,0 +1,181 @@
+var Renderer = require('../renderer');
+var LinearGradientContainer = require('../lineargradientcontainer');
+var log = require('../log');
+
+function CanvasRenderer(width, height) {
+    Renderer.apply(this, arguments);
+    this.canvas = this.options.canvas || this.document.createElement("canvas");
+    if (!this.options.canvas) {
+        this.canvas.width = width;
+        this.canvas.height = height;
+    }
+    this.ctx = this.canvas.getContext("2d");
+    this.taintCtx = this.document.createElement("canvas").getContext("2d");
+    this.ctx.textBaseline = "bottom";
+    this.variables = {};
+    log("Initialized CanvasRenderer with size", width, "x", height);
+}
+
+CanvasRenderer.prototype = Object.create(Renderer.prototype);
+
+CanvasRenderer.prototype.setFillStyle = function(fillStyle) {
+    this.ctx.fillStyle = typeof(fillStyle) === "object" && !!fillStyle.isColor ? fillStyle.toString() : fillStyle;
+    return this.ctx;
+};
+
+CanvasRenderer.prototype.rectangle = function(left, top, width, height, color) {
+    this.setFillStyle(color).fillRect(left, top, width, height);
+};
+
+CanvasRenderer.prototype.circle = function(left, top, size, color) {
+    this.setFillStyle(color);
+    this.ctx.beginPath();
+    this.ctx.arc(left + size / 2, top + size / 2, size / 2, 0, Math.PI*2, true);
+    this.ctx.closePath();
+    this.ctx.fill();
+};
+
+CanvasRenderer.prototype.circleStroke = function(left, top, size, color, stroke, strokeColor) {
+    this.circle(left, top, size, color);
+    this.ctx.strokeStyle = strokeColor.toString();
+    this.ctx.stroke();
+};
+
+CanvasRenderer.prototype.drawShape = function(shape, color) {
+    this.shape(shape);
+    this.setFillStyle(color).fill();
+};
+
+CanvasRenderer.prototype.taints = function(imageContainer) {
+    if (imageContainer.tainted === null) {
+        this.taintCtx.drawImage(imageContainer.image, 0, 0);
+        try {
+            this.taintCtx.getImageData(0, 0, 1, 1);
+            imageContainer.tainted = false;
+        } catch(e) {
+            this.taintCtx = document.createElement("canvas").getContext("2d");
+            imageContainer.tainted = true;
+        }
+    }
+
+    return imageContainer.tainted;
+};
+
+CanvasRenderer.prototype.drawImage = function(imageContainer, sx, sy, sw, sh, dx, dy, dw, dh) {
+    if (!this.taints(imageContainer) || this.options.allowTaint) {
+        this.ctx.drawImage(imageContainer.image, sx, sy, sw, sh, dx, dy, dw, dh);
+    }
+};
+
+CanvasRenderer.prototype.clip = function(shapes, callback, context) {
+    this.ctx.save();
+    shapes.filter(hasEntries).forEach(function(shape) {
+        this.shape(shape).clip();
+    }, this);
+    callback.call(context);
+    this.ctx.restore();
+};
+
+CanvasRenderer.prototype.shape = function(shape) {
+    this.ctx.beginPath();
+    shape.forEach(function(point, index) {
+        if (point[0] === "rect") {
+            this.ctx.rect.apply(this.ctx, point.slice(1));
+        } else {
+            this.ctx[(index === 0) ? "moveTo" : point[0] + "To" ].apply(this.ctx, point.slice(1));
+        }
+    }, this);
+    this.ctx.closePath();
+    return this.ctx;
+};
+
+CanvasRenderer.prototype.font = function(color, style, variant, weight, size, family) {
+    this.setFillStyle(color).font = [style, variant, weight, size, family].join(" ").split(",")[0];
+};
+
+CanvasRenderer.prototype.fontShadow = function(color, offsetX, offsetY, blur) {
+    this.setVariable("shadowColor", color.toString())
+        .setVariable("shadowOffsetY", offsetX)
+        .setVariable("shadowOffsetX", offsetY)
+        .setVariable("shadowBlur", blur);
+};
+
+CanvasRenderer.prototype.clearShadow = function() {
+    this.setVariable("shadowColor", "rgba(0,0,0,0)");
+};
+
+CanvasRenderer.prototype.setOpacity = function(opacity) {
+    this.ctx.globalAlpha = opacity;
+};
+
+CanvasRenderer.prototype.setTransform = function(transform) {
+    this.ctx.translate(transform.origin[0], transform.origin[1]);
+    this.ctx.transform.apply(this.ctx, transform.matrix);
+    this.ctx.translate(-transform.origin[0], -transform.origin[1]);
+};
+
+CanvasRenderer.prototype.setVariable = function(property, value) {
+    if (this.variables[property] !== value) {
+        this.variables[property] = this.ctx[property] = value;
+    }
+
+    return this;
+};
+
+CanvasRenderer.prototype.text = function(text, left, bottom) {
+    this.ctx.fillText(text, left, bottom);
+};
+
+CanvasRenderer.prototype.backgroundRepeatShape = function(imageContainer, backgroundPosition, size, bounds, left, top, width, height, borderData) {
+    var shape = [
+        ["line", Math.round(left), Math.round(top)],
+        ["line", Math.round(left + width), Math.round(top)],
+        ["line", Math.round(left + width), Math.round(height + top)],
+        ["line", Math.round(left), Math.round(height + top)]
+    ];
+    this.clip([shape], function() {
+        this.renderBackgroundRepeat(imageContainer, backgroundPosition, size, bounds, borderData[3], borderData[0]);
+    }, this);
+};
+
+CanvasRenderer.prototype.renderBackgroundRepeat = function(imageContainer, backgroundPosition, size, bounds, borderLeft, borderTop) {
+    var offsetX = Math.round(bounds.left + backgroundPosition.left + borderLeft), offsetY = Math.round(bounds.top + backgroundPosition.top + borderTop);
+    this.setFillStyle(this.ctx.createPattern(this.resizeImage(imageContainer, size), "repeat"));
+    this.ctx.translate(offsetX, offsetY);
+    this.ctx.fill();
+    this.ctx.translate(-offsetX, -offsetY);
+};
+
+CanvasRenderer.prototype.renderBackgroundGradient = function(gradientImage, bounds) {
+    if (gradientImage instanceof LinearGradientContainer) {
+        var gradient = this.ctx.createLinearGradient(
+            bounds.left + bounds.width * gradientImage.x0,
+            bounds.top + bounds.height * gradientImage.y0,
+            bounds.left +  bounds.width * gradientImage.x1,
+            bounds.top +  bounds.height * gradientImage.y1);
+        gradientImage.colorStops.forEach(function(colorStop) {
+            gradient.addColorStop(colorStop.stop, colorStop.color.toString());
+        });
+        this.rectangle(bounds.left, bounds.top, bounds.width, bounds.height, gradient);
+    }
+};
+
+CanvasRenderer.prototype.resizeImage = function(imageContainer, size) {
+    var image = imageContainer.image;
+    if(image.width === size.width && image.height === size.height) {
+        return image;
+    }
+
+    var ctx, canvas = document.createElement('canvas');
+    canvas.width = size.width;
+    canvas.height = size.height;
+    ctx = canvas.getContext("2d");
+    ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, size.width, size.height );
+    return canvas;
+};
+
+function hasEntries(array) {
+    return array.length > 0;
+}
+
+module.exports = CanvasRenderer;

src/stackingcontext.js

@@ -0,0 +1,18 @@
+var NodeContainer = require('./nodecontainer');
+
+function StackingContext(hasOwnStacking, opacity, element, parent) {
+    NodeContainer.call(this, element, parent);
+    this.ownStacking = hasOwnStacking;
+    this.contexts = [];
+    this.children = [];
+    this.opacity = (this.parent ? this.parent.stack.opacity : 1) * opacity;
+}
+
+StackingContext.prototype = Object.create(NodeContainer.prototype);
+
+StackingContext.prototype.getParentStack = function(context) {
+    var parentStack = (this.parent) ? this.parent.stack : null;
+    return parentStack ? (parentStack.ownStacking ? parentStack : parentStack.getParentStack(context)) : context.stack;
+};
+
+module.exports = StackingContext;

src/support.js

@@ -0,0 +1,51 @@
+function Support(document) {
+    this.rangeBounds = this.testRangeBounds(document);
+    this.cors = this.testCORS();
+    this.svg = this.testSVG();
+}
+
+Support.prototype.testRangeBounds = function(document) {
+    var range, testElement, rangeBounds, rangeHeight, support = false;
+
+    if (document.createRange) {
+        range = document.createRange();
+        if (range.getBoundingClientRect) {
+            testElement = document.createElement('boundtest');
+            testElement.style.height = "123px";
+            testElement.style.display = "block";
+            document.body.appendChild(testElement);
+
+            range.selectNode(testElement);
+            rangeBounds = range.getBoundingClientRect();
+            rangeHeight = rangeBounds.height;
+
+            if (rangeHeight === 123) {
+                support = true;
+            }
+            document.body.removeChild(testElement);
+        }
+    }
+
+    return support;
+};
+
+Support.prototype.testCORS = function() {
+    return typeof((new Image()).crossOrigin) !== "undefined";
+};
+
+Support.prototype.testSVG = function() {
+    var img = new Image();
+    var canvas = document.createElement("canvas");
+    var ctx =  canvas.getContext("2d");
+    img.src = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>";
+
+    try {
+        ctx.drawImage(img, 0, 0);
+        canvas.toDataURL();
+    } catch(e) {
+        return false;
+    }
+    return true;
+};
+
+module.exports = Support;

src/svgcontainer.js

@@ -0,0 +1,53 @@
+var Promise = require('./promise');
+var XHR = require('./xhr');
+var decode64 = require('./utils').decode64;
+
+function SVGContainer(src) {
+    this.src = src;
+    this.image = null;
+    var self = this;
+
+    this.promise = this.hasFabric().then(function() {
+        return (self.isInline(src) ? Promise.resolve(self.inlineFormatting(src)) : XHR(src));
+    }).then(function(svg) {
+        return new Promise(function(resolve) {
+            window.html2canvas.svg.fabric.loadSVGFromString(svg, self.createCanvas.call(self, resolve));
+        });
+    });
+}
+
+SVGContainer.prototype.hasFabric = function() {
+    return !window.html2canvas.svg || !window.html2canvas.svg.fabric ? Promise.reject(new Error("html2canvas.svg.js is not loaded, cannot render svg")) : Promise.resolve();
+};
+
+SVGContainer.prototype.inlineFormatting = function(src) {
+    return (/^data:image\/svg\+xml;base64,/.test(src)) ? this.decode64(this.removeContentType(src)) : this.removeContentType(src);
+};
+
+SVGContainer.prototype.removeContentType = function(src) {
+    return src.replace(/^data:image\/svg\+xml(;base64)?,/,'');
+};
+
+SVGContainer.prototype.isInline = function(src) {
+    return (/^data:image\/svg\+xml/i.test(src));
+};
+
+SVGContainer.prototype.createCanvas = function(resolve) {
+    var self = this;
+    return function (objects, options) {
+        var canvas = new window.html2canvas.svg.fabric.StaticCanvas('c');
+        self.image = canvas.lowerCanvasEl;
+        canvas
+            .setWidth(options.width)
+            .setHeight(options.height)
+            .add(window.html2canvas.svg.fabric.util.groupSVGElements(objects, options))
+            .renderAll();
+        resolve(canvas.lowerCanvasEl);
+    };
+};
+
+SVGContainer.prototype.decode64 = function(str) {
+    return (typeof(window.atob) === "function") ? window.atob(str) : decode64(str);
+};
+
+module.exports = SVGContainer;

src/svgnodecontainer.js

@@ -0,0 +1,26 @@
+var SVGContainer = require('./svgcontainer');
+var Promise = require('./promise');
+
+function SVGNodeContainer(node, _native) {
+    this.src = node;
+    this.image = null;
+    var self = this;
+
+    this.promise = _native ? new Promise(function(resolve, reject) {
+        self.image = new Image();
+        self.image.onload = resolve;
+        self.image.onerror = reject;
+        self.image.src = "data:image/svg+xml," + (new XMLSerializer()).serializeToString(node);
+        if (self.image.complete === true) {
+            resolve(self.image);
+        }
+    }) : this.hasFabric().then(function() {
+        return new Promise(function(resolve) {
+            window.html2canvas.svg.fabric.parseSVGDocument(node, self.createCanvas.call(self, resolve));
+        });
+    });
+}
+
+SVGNodeContainer.prototype = Object.create(SVGContainer.prototype);
+
+module.exports = SVGNodeContainer;

src/textcontainer.js

@@ -0,0 +1,33 @@
+var NodeContainer = require('./nodecontainer');
+
+function TextContainer(node, parent) {
+    NodeContainer.call(this, node, parent);
+}
+
+TextContainer.prototype = Object.create(NodeContainer.prototype);
+
+TextContainer.prototype.applyTextTransform = function() {
+    this.node.data = this.transform(this.parent.css("textTransform"));
+};
+
+TextContainer.prototype.transform = function(transform) {
+    var text = this.node.data;
+    switch(transform){
+        case "lowercase":
+            return text.toLowerCase();
+        case "capitalize":
+            return text.replace(/(^|\s|:|-|\(|\))([a-z])/g, capitalize);
+        case "uppercase":
+            return text.toUpperCase();
+        default:
+            return text;
+    }
+};
+
+function capitalize(m, p1, p2) {
+    if (m.length > 0) {
+        return p1 + p2.toUpperCase();
+    }
+}
+
+module.exports = TextContainer;

src/utils.js

@@ -0,0 +1,169 @@
+exports.smallImage = function smallImage() {
+    return "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+};
+
+exports.bind = function(callback, context) {
+    return function() {
+        return callback.apply(context, arguments);
+    };
+};
+
+/*
+ * base64-arraybuffer
+ * https://github.com/niklasvh/base64-arraybuffer
+ *
+ * Copyright (c) 2012 Niklas von Hertzen
+ * Licensed under the MIT license.
+ */
+
+exports.decode64 = function(base64) {
+    var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+    var len = base64.length, i, encoded1, encoded2, encoded3, encoded4, byte1, byte2, byte3;
+
+    var output = "";
+
+    for (i = 0; i < len; i+=4) {
+        encoded1 = chars.indexOf(base64[i]);
+        encoded2 = chars.indexOf(base64[i+1]);
+        encoded3 = chars.indexOf(base64[i+2]);
+        encoded4 = chars.indexOf(base64[i+3]);
+
+        byte1 = (encoded1 << 2) | (encoded2 >> 4);
+        byte2 = ((encoded2 & 15) << 4) | (encoded3 >> 2);
+        byte3 = ((encoded3 & 3) << 6) | encoded4;
+        if (encoded3 === 64) {
+            output += String.fromCharCode(byte1);
+        } else if (encoded4 === 64 || encoded4 === -1) {
+            output += String.fromCharCode(byte1, byte2);
+        } else{
+            output += String.fromCharCode(byte1, byte2, byte3);
+        }
+    }
+
+    return output;
+};
+
+exports.getBounds = function(node) {
+    if (node.getBoundingClientRect) {
+        var clientRect = node.getBoundingClientRect();
+        var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
+        return {
+            top: clientRect.top,
+            bottom: clientRect.bottom || (clientRect.top + clientRect.height),
+            right: clientRect.left + width,
+            left: clientRect.left,
+            width:  width,
+            height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
+        };
+    }
+    return {};
+};
+
+exports.offsetBounds = function(node) {
+    var parent = node.offsetParent ? exports.offsetBounds(node.offsetParent) : {top: 0, left: 0};
+
+    return {
+        top: node.offsetTop + parent.top,
+        bottom: node.offsetTop + node.offsetHeight + parent.top,
+        right: node.offsetLeft + parent.left + node.offsetWidth,
+        left: node.offsetLeft + parent.left,
+        width: node.offsetWidth,
+        height: node.offsetHeight
+    };
+};
+
+exports.parseBackgrounds = function(backgroundImage) {
+    var whitespace = ' \r\n\t',
+        method, definition, prefix, prefix_i, block, results = [],
+        mode = 0, numParen = 0, quote, args;
+    var appendResult = function() {
+        if(method) {
+            if (definition.substr(0, 1) === '"') {
+                definition = definition.substr(1, definition.length - 2);
+            }
+            if (definition) {
+                args.push(definition);
+            }
+            if (method.substr(0, 1) === '-' && (prefix_i = method.indexOf('-', 1 ) + 1) > 0) {
+                prefix = method.substr(0, prefix_i);
+                method = method.substr(prefix_i);
+            }
+            results.push({
+                prefix: prefix,
+                method: method.toLowerCase(),
+                value: block,
+                args: args,
+                image: null
+            });
+        }
+        args = [];
+        method = prefix = definition = block = '';
+    };
+    args = [];
+    method = prefix = definition = block = '';
+    backgroundImage.split("").forEach(function(c) {
+        if (mode === 0 && whitespace.indexOf(c) > -1) {
+            return;
+        }
+        switch(c) {
+        case '"':
+            if(!quote) {
+                quote = c;
+            } else if(quote === c) {
+                quote = null;
+            }
+            break;
+        case '(':
+            if(quote) {
+                break;
+            } else if(mode === 0) {
+                mode = 1;
+                block += c;
+                return;
+            } else {
+                numParen++;
+            }
+            break;
+        case ')':
+            if (quote) {
+                break;
+            } else if(mode === 1) {
+                if(numParen === 0) {
+                    mode = 0;
+                    block += c;
+                    appendResult();
+                    return;
+                } else {
+                    numParen--;
+                }
+            }
+            break;
+
+        case ',':
+            if (quote) {
+                break;
+            } else if(mode === 0) {
+                appendResult();
+                return;
+            } else if (mode === 1) {
+                if (numParen === 0 && !method.match(/^url$/i)) {
+                    args.push(definition);
+                    definition = '';
+                    block += c;
+                    return;
+                }
+            }
+            break;
+        }
+
+        block += c;
+        if (mode === 0) {
+            method += c;
+        } else {
+            definition += c;
+        }
+    });
+
+    appendResult();
+    return results;
+};

src/webkitgradientcontainer.js

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

src/xhr.js

@@ -0,0 +1,24 @@
+var Promise = require('./promise');
+
+function XHR(url) {
+    return new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', url);
+
+        xhr.onload = function() {
+            if (xhr.status === 200) {
+                resolve(xhr.responseText);
+            } else {
+                reject(new Error(xhr.statusText));
+            }
+        };
+
+        xhr.onerror = function() {
+            reject(new Error("Network Error"));
+        };
+
+        xhr.send();
+    });
+}
+
+module.exports = XHR;

tests/assets/iframe/frame1.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>frame 1</title>
+    <style>
+        body {
+            background: green;
+            color: red;
+        }
+    </style>
+</head>
+<body>
+this is the content of frame1
+</body>
+</html>

tests/background.html

@@ -1,278 +0,0 @@
-<!--
-* @author Niklas von Hertzen <niklas at hertzen.com>
-* @created 15.7.2011 
-* @website http://hertzen.com
--->
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Background attribute tests</title>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <script type="text/javascript" src="test.js"></script>
-        <style>
-            html {
-                background-color: red;
-            }
-            body {
-                background-color: lime;
-            }
-            .small div{
-                width:100px;
-                height:100px;     
-                float:left;
-                margin:10px;
-                border:1px solid #000;
-            }
-
-            .medium div{
-                width:200px;
-                height:200px;    
-                float:left;
-                margin:10px;
-                border:1px solid #000;
-            }
-
-            .small, .medium{
-                clear:both;
-            }
-
-            div{         
-                display:block;           
-            }
-
-            .encoded {
-                background:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCABLAEsDAREAAhEBAxEB/8QAHAAAAgMBAQEBAAAAAAAAAAAABQcEBggCAwAJ/8QANxAAAgECBQEHAQUIAwEAAAAAAQIDBBEABQYSITEHExQiQVFhcTKBkbHBCCNCUnLR4fAWYqLx/8QAGwEAAQUBAQAAAAAAAAAAAAAAAQIDBAUGAAf/xAAzEQACAgECAwQHCAMAAAAAAAAAAQIDEQQhEjFBIlFhcRMUgZGhsdEFFSNCUsHh8DKi8f/aAAwDAQACEQMRAD8AxREirbfKlv6rYxDz0R6mmj2eohpqrLKmGVTJTVsEpG65sHF8dBSakpLmn8hq5pxTXRo0DlaCn1dB7eJZfxxD0b/FiyFqVmmQ1Yo/KMaRFBIj5tCTFSG3SsgP/sf3x0t0JTJtLTlJa0FSP31+R/0TCcYG8nM0Q9sLAQJoRzgnECoiFjggB7RC5wsSZHTLaGCQpJBSq68EbQ1sUjst72bdU1dy9x1mlPQJlNQY0p+9Rd67YwDcG/HGBVK12JPOPMF1darbUVt4GgoazdmeW1YNxKaea/8AUoJxVafsTj4P9xm5cVcvJjjhljjlRZDtBPt1xqlzMu3tsNjSulMrziigkVUkUOHK9RcdD8Ys6owcStsnJMsFV2ZUrxVDRqQ0luSL9P8AH5YcdUWhtWtC91T2e1mWRPUQx740BLKt7/X6YhTqcd0S4WKWxQZhiOPA+ccYICAy3Y4UAyXS/uwFXLGFv5kX++KCWHu5m6i3y4SbI7y0k0bZbZHQqTtT2/qw3FRUk1P5/QVJtxa4X8PqNHIanxmndMzg+Z6KEc+6kqfyxG4MXuPiyFJ4qcn3F5o9RGrzPbI5aRz6np7D2GLpSbfiZ9xWMD20Fq5MlgpF72PdNIyGE8OFFvMPjn7/ALsWlE3FIrbYcTH5keaw11MtnVz063xZqWSvccMkZhRwT08m4KRY3BwibSW4uCeTJ+qKA5PnuYURBXuZmVQ/Xbe6n8CMVTWGWXQATOCCLjBAQXbzHphQkyTS5XE1HTXpttTtPfB5bruvxt+LdcUc7e08PY3dcez2luTIsm3GwjhF+OW/xhl3eLHuHwLpo1pn0lkrRh5no2qICkSGRmZJSQAo6khhxhmxS9azFc8P3kLsqiUZeQ3dPafhmrFkU7HUh3Exsyi9269LeuL2Me0ZWUsIM6p7EKjtkzTLXi1XVaWaEvfwSkmqJZdq7Qy9LdSeOeD6WlSRAm8YbNDN2f6ry6lpqXRGq6RqjLXjapgzaiM3i4woPdK6sCpYXs3NuOuJXBjkR3JNbjRy+KvkpF8bEaaV1tYi5/8AuI0k2tx1NLkYQ/aB1XmucdrGeHLNQ5jl+X07ikjiptiITGNrNfaSSWvyTf7gMUt2olGxxjyRe0Uw9GnOOWxXyVuoVLM+rc7kBvYeIC2/BcNeszew+qK1+UGTVmdGRj/yjPV+PGH+2HVqJ94PRV/pQtos+1SPs0WVi/S5kP64S9PpespfAlLUaz9Efj9QtkEmuc/roaajgycB2AaRo5NsY9WJB6DHeraVvCcm/Z9BM9Vq4rMlFL2/Dc0dp7L4dO5eKWl6k7pJtoVpGtyxA6dOgxIqpVawipuvldLMgtRzIjbDJsBYeW32sSlAiNkLtI7Y6nRkMcOWGeKYKqrMsO8Ru91Qkeo3bfKP1wpN8XDEXCtSWWGv2Le1nXk2qJn1VXjNVrHWJJpy3euIRtLcKAFAO0X6k8Di+Jzmk4xiQ5UWRUnYsGvO23thyvs60bUVIq0GcV1O4yykU3ldyNvegeiITck8XFuThOqvhRXxN7vkDSUTvsUUtlzPzdzqecS940zOzkvI7HlmuSxPyeuMfF5e/M1/CkerKFiaZQZIiN19wJ+oGE5T2Ow2QGkhc7u7fn6YWmDhYMnyDLGBanrp43JG8TQhx09CtrYs5aaPSTIEPtKf54L2PHzyXrRmVQZTlJZFQyyctIqlbj0HOHKqvRrfdkbUah3yzyXcWnK6lK4Ps+0h2snqDiXFZITeA/leTSV1ZGii537DZbgAjn64kRhljbkkhqt+zkmo6ekLx0s61ZNJJT1se5GABNn4IN/0BxIlpctSi8MajqOcZLKG32e9immtA6berly+nVqaF3ip4dyxR2UndybliR1J4Fhh6FSj2p7sZna32Y8jM+faKzjU2YNmWZ54tZmFSAZJ54mdiB0A6WUDoBYYoZ6C62XHZYm34MtofaNNceCFbS80B6jskrWRQmb0e8g3D07gLb7zfCPuufSa9zF/elfWD96Kzn2iZ8mjqFmmjd46hoN5tGsjKBu2BjubhlPAsAet8Vl+mlTlt9f7jr+xa1aiNuMLpn+9Clyaan3tt7vbfjzjEbLJWUUxqqxBtdR6e+NJgy/IZmlKiTMdPpO8RiuWsL/aAPUYUlsBvvO8glmi1LHGEURzAhh6gAXGFxW4mT2HbpOhTxSSOGWNrbghBJ+behxOgiLKRobSWo6fJKGE11YYYmO9TI/mP8J2jkkm1uP1xNTSW5F3b2CGp9UxHTGZVCkmnaMokbdTu8vP44alPIBCxkKFHJsStwfS5FsN5AfSSkpMyXEaAFiebLwCfxOCAomrshgGofFzw0UVPVoHlqJgu+NhZJG5IFhwbnnzcemKfVVQVnHJJZ69f748zQaO6cqlFNvG2Onev+chT1MEwqZfDyQdxuOwVDhZAL9CPjpjOvbkzQLxFk8TpIA6kpe7WHpjTYMrnI49KVVHmGX0cdOsnhwLI5Ujc3sB1Nr9elz64dSBkFZ+9To7PaatqwsNNFUhWk3G0YY28xP8PNyfS+OinGRzawa07E4IaySCaVVeOQdOoBHS/vixqIFnMtnb8tatHpxcpjgepjqHlKzOYwU2bSoYA26g9PTBtWcYG4y4XuU4Z9mE+TJl88cMUJ2FlDFzcG9gbDi+GEmFyT5AWSInvFFyFJHHXp/nBE5PHLA0Ek9M7EtNEYw59T8/76YMe46W+5W9dd+cm76IWMDhZbRxuAkg2tuDgggMFuBzyeuIesjmviXTwT2fmWOhklY4Pr5815Cxly+GRwxy+lclQdypMoPA5spKj7iR7YoJVtPHAv8AZfLK9xpI2Jr/ACfwItT2YTToVjCsTx5W639Mah0dxkVbgjZVojV+nqhXyeKOeON9yxzuFHwASeAOTb3OBGqaFemj1Gpn2VVuudD51kdRkcFDPWqIvE1dTG7qLLd1CX5JDDn64kcDwMuxE3sNoNWdnarltd3FZRx37mYVQOxFAsGH2r9eelrYEISiGVkZLI3M/wBRTallp5p9qLGuyNAb2FuTf5OHWskdsATRb1L2Fgf9/XCcHZIrRHxJHsdxHryPyIwMCiPLAwa9gHS4t7m/GOwcQ66natgqaSQeWqjaJSSP4hcG5vYggdQbH3wmUOOLj3jlcuCal3CIqWplqJAaWGNtxJSSdkYH1upVbG/wMZnixtlL2r+PkazhT33+P8jGy5iViYnzWBv841hjwplh3RwX9SXPyS2OQcBNpWpYZWiO096E6X8u61vwxyE9AplEjLPmLBjdQFHwOOMFdRL5BOjdmijJJJAU/wC/gMcgs6pnLIpJuTUAH6XtgndWjwy1Qc1qeP5fzwFzO6EOR28dSDcfPVhW56j93x+eB1CBdXVEtLmmWiJzGDOQbH03DCJbNBXJiU1zUyUGtc+p6dzDBFXzqkacBQJDYDGV1F9kLpxi9k38zbaaqE6ISkt2kf/Z");
-                background-position: center center;
-            }
-
-            .linearGradient {
-                /*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 0, 0)), to(rgb(0, 0, 255)));*/
-                background: -webkit-linear-gradient(top left, #f00, #00f, #BADA55, rgba(0, 0, 255,0.5)); 
-                background: -moz-linear-gradient(top right, #f00, #00f, #BADA55, rgba(0, 0, 255,0.5));
-            }
-
-            .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 {
-                /* 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%);
-            }
-            
-            .linearGradient5 {
-                /* 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%);
-            }
-            
-            .radialGradient {
-                /* FF 3.6+ */
-                background: -moz-radial-gradient(center, ellipse cover,  #959595 0%, #0d0d0d 48%, #2f7bd8 50%, #0a0a0a 64%, #4e4e4e 80%, #383838 87%, #1b1b1b 100%);
-                /* Chrome, Safari 4+ */
-                background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#959595), color-stop(48%,#0d0d0d), color-stop(50%,#2f7bd8), color-stop(64%,#0a0a0a), color-stop(80%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b));
-                /* Chrome 10+, Safari 5.1+ */
-                background: -webkit-radial-gradient(center, ellipse cover,  #959595 0%, #0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
-                /* Opera 12+ */
-                background: -o-radial-gradient(center, ellipse cover,  #959595 0%, #0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
-                /* IE 10+ */
-                background: -ms-radial-gradient(center, ellipse cover,  #959595 0%,#0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
-                /* W3C */
-                background: radial-gradient(center, ellipse cover,  #959595 0%,#0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
-            }
-            
-            .radialGradient2 {
-                /* thx to https://twitter.com/#!/markjmclaren/status/13067366701 */
-                
-                background-color: #FFF;
-                
-                background-image:
-                    -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
-                    -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
-                    -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
-                    -webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
-                
-                background-image:
-                    -moz-radial-gradient(42px 42px, circle farthest-corner, #A7D30C 0%, #A7D30C 3%, rgba(1,159,98,0) 11%),
-                    -moz-radial-gradient(45px 45px, circle farthest-corner, #019F62 0%, #019F62 13%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 100%),
-                    
-                    -moz-radial-gradient(102px 102px, circle farthest-corner, #ff5f98 0%, #ff5f98 15%,  rgba(255,1,136,0) 27%),
-                    -moz-radial-gradient(105px 105px, circle farthest-corner, #FF0188 0%, #FF0188 28%,  rgba(255,255,255,0) 32%, rgba(255,255,255,0) 100%),
-                    
-                    -moz-radial-gradient(92px 12px, circle farthest-corner, #00c9ff 0%, #00c9ff 10%, rgba(0,181,226,0) 26%),
-                    -moz-radial-gradient(95px 15px, circle farthest-corner, #00b5e2 0%, #00b5e2 28%, rgba(255,255,255,0) 31%, rgba(255,255,255,0) 100%),
-                    
-                    -moz-radial-gradient(0px 150px, circle farthest-corner, #f4f201 0%, #f4f201 25%, rgba(228,199,0,0) 45%),
-                    -moz-radial-gradient(0px 150px, circle farthest-corner, #e4c700 0%, #e4c700 47%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
-            }
-            
-            .radialGradient3 {
-                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%);
-                background: -o-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -ms-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
-                background: radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
-            }
-
-            .radialGradient4 {
-                background: -moz-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -webkit-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -o-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -ms-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
-                background: radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
-            }
-            .radialGradient5 {
-                background: -moz-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -webkit-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -o-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -ms-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
-                background: radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%)
-            }
-            .radialGradient6 {
-                background: -moz-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -webkit-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -o-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -ms-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
-                background: radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
-            }
-            .radialGradient7 {
-                background: -moz-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -webkit-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -o-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -ms-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
-                background: radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
-            }
-            .radialGradient8 {
-                background: -moz-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -webkit-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -o-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -ms-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
-            }
-            .radialGradient9 {
-                background: -moz-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -webkit-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -o-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -ms-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
-            }
-            .radialGradient10 {
-                background: -moz-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -webkit-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -o-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -ms-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
-            }
-            .radialGradient11 {
-                background: -moz-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -webkit-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -o-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: -ms-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
-                background: radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
-            }
-        </style>
-
-    </head>
-    <body>
-        <div class="medium">
-            <div class="linearGradient">&nbsp;</div>
-            <div class="linearGradient2">&nbsp;</div>
-            <div class="linearGradient3">&nbsp;</div>
-            <div class="linearGradient4">&nbsp;</div>
-            <div class="linearGradient5">&nbsp;</div>
-        </div>
-        <div class="medium">
-            <div class="radialGradient">&nbsp;</div>
-            <div class="radialGradient2">&nbsp;</div>
-            <div class="radialGradient3">&nbsp;</div>
-            <div class="radialGradient4">&nbsp;</div>
-            <div class="radialGradient5">&nbsp;</div>
-            <div class="radialGradient6">&nbsp;</div>
-            <div class="radialGradient7">&nbsp;</div>
-            <div class="radialGradient8">&nbsp;</div>
-            <div class="radialGradient9">&nbsp;</div>
-            <div class="radialGradient10">&nbsp;</div>
-            <div class="radialGradient11">&nbsp;</div>
-        </div>
-
-        <div class="medium">
-            <div style="background:url(image.jpg);"></div>
-            <div style="background:url(image.jpg) repeat-x;"></div>
-            <div style="background:url(image.jpg) repeat-y;"></div>
-            <div style="background:url(image.jpg) no-repeat;"></div>
-        </div>
-        <div class="small">
-            <div style="background:url(image.jpg);"></div>
-            <div style="background:url(image.jpg) repeat-x;"></div>
-            <div style="background:url(image.jpg) repeat-y;"></div>
-            <div style="background:url(image.jpg) no-repeat;"></div>
-        </div>
-
-
-        <div class="medium">
-            <div style="background:url(image.jpg) center center;"></div>
-            <div style="background:url(image.jpg) repeat-x center center;"></div>
-            <div style="background:url(image.jpg) repeat-y center center;"></div>
-            <div style="background:url(image.jpg) no-repeat center center;"></div>
-        </div>
-
-
-        <div class="small">
-            <div style="background:url(image.jpg) center center;"></div>
-            <div style="background:url(image.jpg) repeat-x center center;"></div>
-            <div style="background:url(image.jpg) repeat-y center center;"></div>
-            <div style="background:url(image.jpg) no-repeat center center;"></div>
-        </div>
-
-        <div class="medium">
-            <div style="background:url(image.jpg) 50px 50px;"></div>
-            <div style="background:url(image.jpg) repeat-x 50px 50px;"></div>
-            <div style="background:url(image.jpg) repeat-y 50px 50px;"></div>
-            <div style="background:url(image.jpg) no-repeat 50px 50px;"></div>
-        </div>
-
-        <div class="medium">
-            <div style="background:url(image.jpg) no-repeat -15% 25px;"></div>
-            <div style="background-image:url(image.jpg), url(image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 100px 100px;"></div>
-        </div>
-
-        <div class="medium">
-            <div class="encoded"></div>
-        </div>
-
-    </body>
-</html>

tests/borders.html

@@ -1,114 +0,0 @@
-<!--
-* @author Niklas von Hertzen <niklas at hertzen.com>
-* @created 15.7.2011 
-* @website http://hertzen.com
--->
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>border tests</title>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <link href="#" type="text/css" rel="stylesheet"> 
-        <script type="text/javascript" src="test.js"></script>
-        <style type="text/css">
-
-            div { font: 12px Arial; }
-
-            span.bold { font-weight: bold; }
-
-            #div2 { z-index: 2; }
-            #div3 { z-index: 1; }
-            #div4 { z-index: 10; }
-
-            #div1,#div3 {
-                height: 80px;
-                position: relative;
-                border: 23px double #669966;
-                background-color: #ccffcc;
-                padding-left: 5px;
-                                border-left-color:yellow;
-                                border-right-color: blueviolet;
-            }
-
-            #div2 {
-                opacity: 0.8;
-                position: absolute;
-                width: 150px;
-                height: 201px;
-                top: 20px;
-                left: 170px;
-                border: 20px solid #990000;
-                background-color: #ffdddd;
-                text-align: center;
-                border-radius: 50px/160px;
-                border-left-color: violet;
-                border-top-width:0px;
-            }
-
-            #div4 {
-                opacity: 0.8;
-                position: absolute;
-                width: 200px;
-                height: 70px;
-                top: 65px;
-                left: 50px;
-                border: 15px dashed #000099;
-                background-color: #ddddff;
-                text-align: left;
-                padding-left: 10px;
-            }
-
-            #div5{
-                border: 15px dashed  #669966;
-                background-color: #ccffcc;
-                padding-left: 5px;
-                position:relative;
-                margin-bottom:-15px;
-                height:50px;
-                margin-top:10px;
-               
-            }
-
-            #div6{
-                border: 1px dashed #000099;
-                background-color: #ddddff;
-                text-align: left;
-                padding-left: 10px;
-               
-            }
-
-        </style></head>
-
-    <body>
-
-        <br />
-
-        <div id="div1">
-            <br /><span class="bold">DIV #1</span>
-            <br />position: relative;
-            <div id="div2">
-                <br /><span class="bold">DIV #2</span>
-                <br />position: absolute;
-                <br />z-index: 2;
-            </div>
-        </div>
-
-        <br />
-
-        <div id="div3" style="background-image:url(image.jpg)">
-            <br /><span class="bold">DIV #3</span>
-            <br />position: relative;
-            <br />z-index: 1;
-            <div id="div4">
-                <br /><span class="bold">DIV #4</span>
-                <br />position: absolute;
-                <br />z-index: 10;
-            </div>
-        </div>
-
-        <div id="div5"><br />DIV #5<br />position:relative;<br /></div>
-
-        <div id ="div6"><br />DIV #6<br />position:static;<br /></div>
-
-    </body>
-</html>

tests/cases/background/clip.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Background attribute tests</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <script type="text/javascript" src="../../test.js"></script>
+        <style>
+            html {
+                background-color: red;
+            }
+            body {
+                background-color: lime;
+            }
+            .small div{
+                width:100px;
+                height:100px;
+                float:left;
+                margin:10px;
+                border:1px solid #000;
+            }
+
+            .medium div{
+                width:200px;
+                height:200px;
+                float:left;
+                margin:10px;
+                border:20px solid transparent;
+                border-width: 10px 20px 30px 40px;
+                background: green;
+            }
+
+            .small, .medium{
+                clear:both;
+            }
+
+            div{
+                display:block;
+            }
+
+        </style>
+
+    </head>
+    <body>
+        <div class="medium">
+            <div style="background:url(../../assets/image.jpg);background-clip: border-box;"></div>
+            <div style="background:url(../../assets/image.jpg);background-clip: padding-box;"></div>
+            <div style="background:url(../../assets/image.jpg);background-clip: content-box;"></div>
+            <div style="background:url(../../assets/image.jpg);"></div>
+        </div>
+
+        <div class="medium">
+            <div style="background:url(../../assets/image.jpg);background-clip: border-box; background-repeat: no-repeat;"></div>
+            <div style="background:url(../../assets/image.jpg);background-clip: padding-box; background-repeat: repeat-y;"></div>
+            <div style="background:url(../../assets/image.jpg);background-clip: content-box; background-repeat: repeat-x;"></div>
+            <div style="background:url(../../assets/image.jpg); background-repeat: no-repeat;"></div>
+        </div>
+
+        <div class="medium">
+            <div style="background-clip: border-box;"></div>
+            <div style="background-clip: padding-box;"></div>
+            <div style="background-clip: content-box;"></div>
+            <div style=""></div>
+        </div>
+
+    </body>
+</html>

tests/cases/background/encoded.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Background attribute tests</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <script type="text/javascript" src="../../test.js"></script>
+        <style>
+            html {
+                background-color: red;
+            }
+            body {
+                background-color: lime;
+            }
+            .small div{
+                width:100px;
+                height:100px;
+                float:left;
+                margin:10px;
+                border:1px solid #000;
+            }
+
+            .medium div{
+                width:200px;
+                height:200px;
+                float:left;
+                margin:10px;
+                border:1px solid #000;
+            }
+
+            .small, .medium{
+                clear:both;
+            }
+
+            div{
+                display:block;
+            }
+
+            .encoded {
+                background:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCABLAEsDAREAAhEBAxEB/8QAHAAAAgMBAQEBAAAAAAAAAAAABQcEBggCAwAJ/8QANxAAAgECBQEHAQUIAwEAAAAAAQIDBBEABQYSITEHExQiQVFhcTKBkbHBCCNCUnLR4fAWYqLx/8QAGwEAAQUBAQAAAAAAAAAAAAAAAQIDBAUGAAf/xAAzEQACAgECAwQHCAMAAAAAAAAAAQIDEQQhEjFBIlFhcRMUgZGhsdEFFSNCUsHh8DKi8f/aAAwDAQACEQMRAD8AxREirbfKlv6rYxDz0R6mmj2eohpqrLKmGVTJTVsEpG65sHF8dBSakpLmn8hq5pxTXRo0DlaCn1dB7eJZfxxD0b/FiyFqVmmQ1Yo/KMaRFBIj5tCTFSG3SsgP/sf3x0t0JTJtLTlJa0FSP31+R/0TCcYG8nM0Q9sLAQJoRzgnECoiFjggB7RC5wsSZHTLaGCQpJBSq68EbQ1sUjst72bdU1dy9x1mlPQJlNQY0p+9Rd67YwDcG/HGBVK12JPOPMF1darbUVt4GgoazdmeW1YNxKaea/8AUoJxVafsTj4P9xm5cVcvJjjhljjlRZDtBPt1xqlzMu3tsNjSulMrziigkVUkUOHK9RcdD8Ys6owcStsnJMsFV2ZUrxVDRqQ0luSL9P8AH5YcdUWhtWtC91T2e1mWRPUQx740BLKt7/X6YhTqcd0S4WKWxQZhiOPA+ccYICAy3Y4UAyXS/uwFXLGFv5kX++KCWHu5m6i3y4SbI7y0k0bZbZHQqTtT2/qw3FRUk1P5/QVJtxa4X8PqNHIanxmndMzg+Z6KEc+6kqfyxG4MXuPiyFJ4qcn3F5o9RGrzPbI5aRz6np7D2GLpSbfiZ9xWMD20Fq5MlgpF72PdNIyGE8OFFvMPjn7/ALsWlE3FIrbYcTH5keaw11MtnVz063xZqWSvccMkZhRwT08m4KRY3BwibSW4uCeTJ+qKA5PnuYURBXuZmVQ/Xbe6n8CMVTWGWXQATOCCLjBAQXbzHphQkyTS5XE1HTXpttTtPfB5bruvxt+LdcUc7e08PY3dcez2luTIsm3GwjhF+OW/xhl3eLHuHwLpo1pn0lkrRh5no2qICkSGRmZJSQAo6khhxhmxS9azFc8P3kLsqiUZeQ3dPafhmrFkU7HUh3Exsyi9269LeuL2Me0ZWUsIM6p7EKjtkzTLXi1XVaWaEvfwSkmqJZdq7Qy9LdSeOeD6WlSRAm8YbNDN2f6ry6lpqXRGq6RqjLXjapgzaiM3i4woPdK6sCpYXs3NuOuJXBjkR3JNbjRy+KvkpF8bEaaV1tYi5/8AuI0k2tx1NLkYQ/aB1XmucdrGeHLNQ5jl+X07ikjiptiITGNrNfaSSWvyTf7gMUt2olGxxjyRe0Uw9GnOOWxXyVuoVLM+rc7kBvYeIC2/BcNeszew+qK1+UGTVmdGRj/yjPV+PGH+2HVqJ94PRV/pQtos+1SPs0WVi/S5kP64S9PpespfAlLUaz9Efj9QtkEmuc/roaajgycB2AaRo5NsY9WJB6DHeraVvCcm/Z9BM9Vq4rMlFL2/Dc0dp7L4dO5eKWl6k7pJtoVpGtyxA6dOgxIqpVawipuvldLMgtRzIjbDJsBYeW32sSlAiNkLtI7Y6nRkMcOWGeKYKqrMsO8Ru91Qkeo3bfKP1wpN8XDEXCtSWWGv2Le1nXk2qJn1VXjNVrHWJJpy3euIRtLcKAFAO0X6k8Di+Jzmk4xiQ5UWRUnYsGvO23thyvs60bUVIq0GcV1O4yykU3ldyNvegeiITck8XFuThOqvhRXxN7vkDSUTvsUUtlzPzdzqecS940zOzkvI7HlmuSxPyeuMfF5e/M1/CkerKFiaZQZIiN19wJ+oGE5T2Ow2QGkhc7u7fn6YWmDhYMnyDLGBanrp43JG8TQhx09CtrYs5aaPSTIEPtKf54L2PHzyXrRmVQZTlJZFQyyctIqlbj0HOHKqvRrfdkbUah3yzyXcWnK6lK4Ps+0h2snqDiXFZITeA/leTSV1ZGii537DZbgAjn64kRhljbkkhqt+zkmo6ekLx0s61ZNJJT1se5GABNn4IN/0BxIlpctSi8MajqOcZLKG32e9immtA6berly+nVqaF3ip4dyxR2UndybliR1J4Fhh6FSj2p7sZna32Y8jM+faKzjU2YNmWZ54tZmFSAZJ54mdiB0A6WUDoBYYoZ6C62XHZYm34MtofaNNceCFbS80B6jskrWRQmb0e8g3D07gLb7zfCPuufSa9zF/elfWD96Kzn2iZ8mjqFmmjd46hoN5tGsjKBu2BjubhlPAsAet8Vl+mlTlt9f7jr+xa1aiNuMLpn+9Clyaan3tt7vbfjzjEbLJWUUxqqxBtdR6e+NJgy/IZmlKiTMdPpO8RiuWsL/aAPUYUlsBvvO8glmi1LHGEURzAhh6gAXGFxW4mT2HbpOhTxSSOGWNrbghBJ+behxOgiLKRobSWo6fJKGE11YYYmO9TI/mP8J2jkkm1uP1xNTSW5F3b2CGp9UxHTGZVCkmnaMokbdTu8vP44alPIBCxkKFHJsStwfS5FsN5AfSSkpMyXEaAFiebLwCfxOCAomrshgGofFzw0UVPVoHlqJgu+NhZJG5IFhwbnnzcemKfVVQVnHJJZ69f748zQaO6cqlFNvG2Onev+chT1MEwqZfDyQdxuOwVDhZAL9CPjpjOvbkzQLxFk8TpIA6kpe7WHpjTYMrnI49KVVHmGX0cdOsnhwLI5Ujc3sB1Nr9elz64dSBkFZ+9To7PaatqwsNNFUhWk3G0YY28xP8PNyfS+OinGRzawa07E4IaySCaVVeOQdOoBHS/vixqIFnMtnb8tatHpxcpjgepjqHlKzOYwU2bSoYA26g9PTBtWcYG4y4XuU4Z9mE+TJl88cMUJ2FlDFzcG9gbDi+GEmFyT5AWSInvFFyFJHHXp/nBE5PHLA0Ek9M7EtNEYw59T8/76YMe46W+5W9dd+cm76IWMDhZbRxuAkg2tuDgggMFuBzyeuIesjmviXTwT2fmWOhklY4Pr5815Cxly+GRwxy+lclQdypMoPA5spKj7iR7YoJVtPHAv8AZfLK9xpI2Jr/ACfwItT2YTToVjCsTx5W639Mah0dxkVbgjZVojV+nqhXyeKOeON9yxzuFHwASeAOTb3OBGqaFemj1Gpn2VVuudD51kdRkcFDPWqIvE1dTG7qLLd1CX5JDDn64kcDwMuxE3sNoNWdnarltd3FZRx37mYVQOxFAsGH2r9eelrYEISiGVkZLI3M/wBRTallp5p9qLGuyNAb2FuTf5OHWskdsATRb1L2Fgf9/XCcHZIrRHxJHsdxHryPyIwMCiPLAwa9gHS4t7m/GOwcQ66natgqaSQeWqjaJSSP4hcG5vYggdQbH3wmUOOLj3jlcuCal3CIqWplqJAaWGNtxJSSdkYH1upVbG/wMZnixtlL2r+PkazhT33+P8jGy5iViYnzWBv841hjwplh3RwX9SXPyS2OQcBNpWpYZWiO096E6X8u61vwxyE9AplEjLPmLBjdQFHwOOMFdRL5BOjdmijJJJAU/wC/gMcgs6pnLIpJuTUAH6XtgndWjwy1Qc1qeP5fzwFzO6EOR28dSDcfPVhW56j93x+eB1CBdXVEtLmmWiJzGDOQbH03DCJbNBXJiU1zUyUGtc+p6dzDBFXzqkacBQJDYDGV1F9kLpxi9k38zbaaqE6ISkt2kf/Z");
+            }
+
+        </style>
+
+    </head>
+    <body>
+
+        <div class="medium">
+            <div class="encoded"></div>
+        </div>
+
+    </body>
+</html>

tests/cases/background/linear-gradient.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Background attribute tests</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <script type="text/javascript" src="../../test.js"></script>
+        <style>
+            html {
+                background-color: red;
+            }
+            .small div{
+                width:100px;
+                height:100px;
+                float:left;
+                margin:10px;
+                border:1px solid #000;
+            }
+
+            .medium div{
+                width:200px;
+                height:200px;
+                float:left;
+                margin:10px;
+                border:1px solid #000;
+            }
+
+            .small, .medium{
+                clear:both;
+            }
+
+            div{
+                display:block;
+            }
+
+            .linearGradient {
+                /*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 0, 0)), to(rgb(0, 0, 255)));*/
+                background: -webkit-linear-gradient(top left, #f00, #00f, #BADA55, rgba(0, 0, 255,0.5));
+                background: -moz-linear-gradient(top right, #f00, #00f, #BADA55, rgba(0, 0, 255,0.5));
+            }
+
+            .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 {
+                /* 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%);
+            }
+
+            .linearGradient5 {
+                /* 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%);
+            }
+
+            .linearGradient6 {
+                /* FF 3.6+ */
+                background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
+                /* Chrome 10+, Safari 5.1+ */
+                background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
+                /* Opera 11.10+ */
+                background: -o-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
+                /* IE10+ */
+                background: -ms-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
+                /* 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>
+    <body>
+        <div class="medium">
+            <div class="linearGradient">&nbsp;</div>
+            <div class="linearGradient2">&nbsp;</div>
+            <div class="linearGradient3">&nbsp;</div>
+            <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>

tests/cases/background/multi.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Background attribute tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+      html {
+        background-color: red;
+      }
+      body {
+        background-color: lime;
+      }
+      .small div{
+        width:100px;
+        height:100px;
+        float:left;
+        margin:10px;
+        border:1px solid #000;
+      }
+
+      .medium div{
+        width:200px;
+        height:200px;
+        float:left;
+        margin:10px;
+        border:1px solid #000;
+      }
+
+      .small, .medium{
+        clear:both;
+      }
+
+      div{
+        display:block;
+      }
+
+    </style>
+
+  </head>
+  <body>
+
+    <div class="medium">
+      <div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 100px 130px;"></div>
+      <div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 20px -20px;"></div>
+      <div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 450px 100px;"></div>
+    </div>
+
+  </body>
+</html>

tests/cases/background/position.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Background attribute tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+      html {
+        background-color: red;
+      }
+      body {
+        background-color: lime;
+      }
+      .small div{
+        width:100px;
+        height:100px;
+        float:left;
+        margin:10px;
+        border:1px solid #000;
+      }
+
+      .medium div{
+        width:200px;
+        height:200px;
+        float:left;
+        margin:10px;
+        border:1px solid #000;
+      }
+
+      .small, .medium{
+        clear:both;
+      }
+
+      div{
+        display:block;
+      }
+
+    </style>
+
+  </head>
+  <body>
+
+    <div class="medium">
+      <div style='background:url("../../assets/image.jpg") center center;'></div>
+      <div style="background:url('../../assets/image.jpg') repeat-x center center;"></div>
+      <div style="background:url(../../assets/image.jpg) repeat-y center center;"></div>
+      <div style="background:url(../../assets/image.jpg) no-repeat center center;"></div>
+    </div>
+
+
+    <div class="small">
+      <div style="background:url(../../assets/image.jpg) center center;"></div>
+      <div style="background:url(../../assets/image.jpg) repeat-x center center;"></div>
+      <div style="background:url(../../assets/image.jpg) repeat-y center center;"></div>
+      <div style="background:url(../../assets/image.jpg) no-repeat center center;"></div>
+    </div>
+
+    <div class="medium">
+      <div style="background:url(../../assets/image.jpg) -15% 25px;"></div>
+      <div style="background:url(../../assets/image.jpg) repeat-x 50px 50px;"></div>
+      <div style="background:url(../../assets/image.jpg) repeat-y 50px 50px;"></div>
+      <div style="background:url(../../assets/image.jpg) no-repeat 50px 50px;"></div>
+    </div>
+
+  </body>
+</html>

tests/cases/background/radial-gradient.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Background attribute tests</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <script type="text/javascript" src="../../test.js"></script>
+        <style>
+            html {
+                background-color: red;
+            }
+            body {
+                background-color: lime;
+            }
+            .small div{
+                width:100px;
+                height:100px;
+                float:left;
+                margin:10px;
+                border:1px solid #000;
+            }
+
+            .medium div{
+                width:200px;
+                height:200px;
+                float:left;
+                margin:10px;
+                border:1px solid #000;
+            }
+
+            .small, .medium{
+                clear:both;
+            }
+
+            div{
+                display:block;
+            }
+
+            .radialGradient {
+                /* FF 3.6+ */
+                background: -moz-radial-gradient(center, ellipse cover,  #959595 0%, #0d0d0d 48%, #2f7bd8 50%, #0a0a0a 64%, #4e4e4e 80%, #383838 87%, #1b1b1b 100%);
+                /* Chrome, Safari 4+ */
+                background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#959595), color-stop(48%,#0d0d0d), color-stop(50%,#2f7bd8), color-stop(64%,#0a0a0a), color-stop(80%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b));
+                /* Chrome 10+, Safari 5.1+ */
+                background: -webkit-radial-gradient(center, ellipse cover,  #959595 0%, #0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
+                /* Opera 12+ */
+                background: -o-radial-gradient(center, ellipse cover,  #959595 0%, #0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
+                /* IE 10+ */
+                background: -ms-radial-gradient(center, ellipse cover,  #959595 0%,#0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
+                /* W3C */
+                background: radial-gradient(center, ellipse cover,  #959595 0%,#0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
+            }
+
+            .radialGradient2 {
+                /* thx to https://twitter.com/#!/markjmclaren/status/13067366701 */
+
+                background-color: #FFF;
+
+                background-image:
+                    -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
+                    -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
+                    -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
+                    -webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
+
+                background-image:
+                    -moz-radial-gradient(42px 42px, circle farthest-corner, #A7D30C 0%, #A7D30C 3%, rgba(1,159,98,0) 11%),
+                    -moz-radial-gradient(45px 45px, circle farthest-corner, #019F62 0%, #019F62 13%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 100%),
+
+                    -moz-radial-gradient(102px 102px, circle farthest-corner, #ff5f98 0%, #ff5f98 15%,  rgba(255,1,136,0) 27%),
+                    -moz-radial-gradient(105px 105px, circle farthest-corner, #FF0188 0%, #FF0188 28%,  rgba(255,255,255,0) 32%, rgba(255,255,255,0) 100%),
+
+                    -moz-radial-gradient(92px 12px, circle farthest-corner, #00c9ff 0%, #00c9ff 10%, rgba(0,181,226,0) 26%),
+                    -moz-radial-gradient(95px 15px, circle farthest-corner, #00b5e2 0%, #00b5e2 28%, rgba(255,255,255,0) 31%, rgba(255,255,255,0) 100%),
+
+                    -moz-radial-gradient(0px 150px, circle farthest-corner, #f4f201 0%, #f4f201 25%, rgba(228,199,0,0) 45%),
+                    -moz-radial-gradient(0px 150px, circle farthest-corner, #e4c700 0%, #e4c700 47%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
+            }
+
+            .radialGradient3 {
+                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%);
+                background: -o-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -ms-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
+                background: radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
+            }
+
+            .radialGradient4 {
+                background: -moz-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -webkit-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -o-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -ms-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
+                background: radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
+            }
+            .radialGradient5 {
+                background: -moz-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -webkit-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -o-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -ms-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
+                background: radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%)
+            }
+            .radialGradient6 {
+                background: -moz-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -webkit-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -o-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -ms-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
+                background: radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
+            }
+            .radialGradient7 {
+                background: -moz-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -webkit-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -o-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -ms-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
+                background: radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
+            }
+            .radialGradient8 {
+                background: -moz-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -webkit-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -o-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -ms-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
+            }
+            .radialGradient9 {
+                background: -moz-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -webkit-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -o-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -ms-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
+            }
+            .radialGradient10 {
+                background: -moz-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -webkit-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -o-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -ms-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
+            }
+            .radialGradient11 {
+                background: -moz-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -webkit-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -o-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: -ms-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
+                background: radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
+            }
+        </style>
+
+    </head>
+    <body>
+        <div class="medium">
+            <div class="radialGradient">&nbsp;</div>
+            <div class="radialGradient2">&nbsp;</div>
+            <div class="radialGradient3">&nbsp;</div>
+            <div class="radialGradient4">&nbsp;</div>
+            <div class="radialGradient5">&nbsp;</div>
+            <div class="radialGradient6">&nbsp;</div>
+            <div class="radialGradient7">&nbsp;</div>
+            <div class="radialGradient8">&nbsp;</div>
+            <div class="radialGradient9">&nbsp;</div>
+            <div class="radialGradient10">&nbsp;</div>
+            <div class="radialGradient11">&nbsp;</div>
+        </div>
+
+    </body>
+</html>

tests/cases/background/repeat.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Background attribute tests</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <script type="text/javascript" src="../../test.js"></script>
+        <style>
+            html {
+                background-color: red;
+            }
+            body {
+                background-color: lime;
+            }
+            .small div{
+                width:100px;
+                height:100px;
+                float:left;
+                margin:10px;
+                border:1px solid #000;
+            }
+
+            .medium div{
+                width:200px;
+                height:200px;
+                float:left;
+                margin:10px;
+                border:1px solid #000;
+            }
+
+            .small, .medium{
+                clear:both;
+            }
+
+            div{
+                display:block;
+            }
+
+        </style>
+
+    </head>
+    <body>
+
+        <div class="medium">
+            <div style="background:url(../../assets/image.jpg);"></div>
+            <div style="background:url(../../assets/image.jpg) repeat-x;"></div>
+            <div style="background:url(../../assets/image.jpg) repeat-y;"></div>
+            <div style="background:url(../../assets/image.jpg) no-repeat;"></div>
+        </div>
+        <div class="small">
+            <div style="background:url(../../assets/image.jpg);"></div>
+            <div style="background:url(../../assets/image.jpg) repeat-x;"></div>
+            <div style="background:url(../../assets/image.jpg) repeat-y;"></div>
+            <div style="background:url(../../assets/image.jpg) no-repeat;"></div>
+        </div>
+
+    </body>
+</html>

tests/cases/background/size.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Background size tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        .horizontal div, .vertical div {
+            display: block;
+            background:url("../../assets/image.jpg") center center;
+        }
+
+        .vertical {
+            float: right;
+        }
+
+        .horizontal {
+            float: left;
+        }
+
+        .horizontal div {
+            width: 400px; height: 100px;
+        }
+
+        .vertical div {
+            width: 200px; height: 200px;
+        }
+
+        .container {
+            float: left;
+            border: 1px solid black;
+            width: 150px;
+            height: 200px;
+            background-image: url(../../assets/image.jpg);
+            background-size: 34px;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+    </style>
+</head>
+<body>
+<div class="container"></div>
+<div class="container" style="background-repeat: repeat-y"></div>
+<div class="container" style="background-repeat: repeat-x"></div>
+<div class="container" style="background-size: 150% auto"></div>
+<div class="horizontal">
+    <div style='background-size: cover;'></div>
+    <div style='background-size: contain;'></div>
+    <div style='background-size: auto 100%;'></div>
+    <div style='background-size: auto;'></div>
+</div>
+
+<div class="vertical">
+    <div style='background-size: cover;'></div>
+    <div style='background-size: contain;'></div>
+    <div style='background-size: auto 100%;'></div>
+    <div style='background-size: auto;'></div>
+</div>
+
+</body>
+</html>

tests/cases/border/dashed.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Borders tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style type="text/css">
+      div {
+        width: 200px;
+        height: 200px;
+        display: inline-block;
+        margin: 10px;
+        background:#6F428C;
+        border-style: dashed;
+      }
+
+      .box1 {
+        border-width: 1px;
+        border-color: #00b5e2;
+      }
+
+      .box2 {
+        border-width: 3px;
+        border-color: red;
+      }
+
+      .box3 {
+        border-width: 10px;
+      }
+
+      .box4 {
+        border-width: 50px;
+        border-color: green;
+      }
+
+      html {
+        background: #3a84c3;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box1">&nbsp;</div>
+    <div class="box2">&nbsp;</div>
+    <div class="box3">&nbsp;</div>
+    <div class="box4">&nbsp;</div>
+  </body>
+</html>

tests/cases/border/dotted.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Borders tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style type="text/css">
+      div {
+        width: 200px;
+        height: 200px;
+        display: inline-block;
+        margin: 10px;
+        background:#6F428C;
+        border-style: dotted;
+      }
+
+      .box1 {
+        border-width: 1px;
+        border-color: #00b5e2;
+      }
+
+      .box2 {
+        border-width: 3px;
+        border-color: red;
+      }
+
+      .box3 {
+        border-width: 10px;
+      }
+
+      .box4 {
+        border-width: 50px;
+        border-color: green;
+      }
+
+      html {
+        background: #3a84c3;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box1">&nbsp;</div>
+    <div class="box2">&nbsp;</div>
+    <div class="box3">&nbsp;</div>
+    <div class="box4">&nbsp;</div>
+  </body>
+</html>

tests/cases/border/double.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Borders tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style type="text/css">
+      div {
+        width: 200px;
+        height: 200px;
+        display: inline-block;
+        margin: 10px;
+        background:#6F428C;
+        border-style:double;
+      }
+
+      .box1 {
+        border-width: 1px;
+        border-color: #00b5e2;
+      }
+
+      .box2 {
+        border-width: 3px;
+        border-color: red;
+      }
+
+      .box3 {
+        border-width: 10px;
+      }
+
+      .box4 {
+        border-width: 50px;
+        border-color: green;
+      }
+
+      html {
+        background: #3a84c3;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box1">&nbsp;</div>
+    <div class="box2">&nbsp;</div>
+    <div class="box3">&nbsp;</div>
+    <div class="box4">&nbsp;</div>
+  </body>
+</html>

tests/cases/border/inset.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Borders tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style type="text/css">
+        div {
+            width: 200px;
+            height: 200px;
+            display: inline-block;
+            margin: 10px;
+            background:#6F428C;
+            border-style: inset;
+        }
+
+        .box1 {
+            border-width: 1px;
+            border-color: #00b5e2;
+        }
+
+        .box2 {
+            border-width: 3px;
+            border-color: red;
+        }
+
+        .box3 {
+            border-width: 10px;
+        }
+
+        .box4 {
+            border-width: 50px;
+            border-color: green;
+        }
+
+        .box5 {
+            border-width: 50px;
+            border-color: rgb(0, 0, 0);
+        }
+
+        input {
+            border-width: 50px;
+        }
+
+        html {
+            background: #3a84c3;
+        }
+    </style>
+</head>
+<body>
+<div class="box1">&nbsp;</div>
+<div class="box2">&nbsp;</div>
+<div class="box3">&nbsp;</div>
+<div class="box4">&nbsp;</div>
+<div class="box5">&nbsp;</div>
+<input type="text" />
+</body>
+</html>

tests/cases/border/radius.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Borders tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style type="text/css">
+      div {
+        width: 200px;
+        height: 200px;
+        display: inline-block;
+        margin: 10px;
+        background:#6F428C;
+        border-style: solid;
+        border-radius: 50px;
+      }
+
+      .box1 {
+        border-width: 1px;
+        border-left-color: #00b5e2;
+        border-top-color: red;
+        border-right-color: green;
+      }
+
+      .box2 {
+        border-width: 3px;
+        border-left-color: #00b5e2;
+        border-top-color: red;
+        border-right-color: green;
+      }
+
+      .box3 {
+        border-width: 10px;
+        border-left-color: transparent;
+        border-top-color: red;
+        border-right-color: green;
+      }
+
+      .box4 {
+        border-width: 50px;
+        border-left-color: transparent;
+        border-top-color: red;
+        border-top-width: 10px;
+        border-right-color: green;
+        border-bottom-right-radius: 190px;
+        background-clip: padding-box;
+      }
+
+      .box5 {
+          margin: 100px;
+          border-width: 50px;
+          border-left-color: transparent;
+          border-top-color: red;
+          border-top-width: 10px;
+          border-right-color: green;
+          border-radius: 25px;
+          background-clip: padding-box;
+      }
+
+      html {
+        background: #3a84c3;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="box1">&nbsp;</div>
+    <div class="box2">&nbsp;</div>
+    <div class="box3">&nbsp;</div>
+    <div class="box4">&nbsp;</div>
+    <div class="box5">&nbsp;</div>
+  </body>
+</html>

tests/cases/border/solid.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Borders tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style type="text/css">
+      div {
+        width: 200px;
+        height: 200px;
+        display: inline-block;
+        margin: 10px;
+        background:#6F428C;
+        border-style: solid;
+      }
+
+      .box1 {
+        border-width: 1px;
+        border-color: #00b5e2;
+      }
+
+      .box2 {
+        border-width: 3px;
+        border-color: red;
+      }
+
+      .box3 {
+        border-width: 10px;
+      }
+
+      .box4 {
+        border-width: 50px;
+        border-color: green;
+      }
+
+      html {
+        background: #3a84c3;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box1">&nbsp;</div>
+    <div class="box2">&nbsp;</div>
+    <div class="box3">&nbsp;</div>
+    <div class="box4">&nbsp;</div>
+  </body>
+</html>

tests/cases/child-textnodes.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Inline text in the top element</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <script type="text/javascript" src="../test.js"></script>
+        <style>
+        span {
+            color:blue;
+        }
+        p {
+            background-color: green;
+        }
+        </style>
+
+    </head>
+    <body>
+        Some inline text <span> followed by text in span </span> followed by more inline text.
+        <p>Then a block level element.</p>
+        Then more inline text.
+    </body>
+</html>

tests/cases/clip.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Inline text in the top element</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../test.js"></script>
+    <style>
+        span {
+            color:blue;
+        }
+        p {
+            background-color: green;
+        }
+        div {
+            background: red;
+            border: 5px solid blue;
+        }
+    </style>
+
+</head>
+<body>
+<div style="clip: rect(0px, 400px, 50px, 200px); ">Some inline text <span> followed by text in span </span> followed by more inline text.
+    <p>Then a block level element.</p>
+    Then more inline text.</div>
+
+<div style="clip: rect(0px, 400px, 50px, 200px); position: relative; ">Some inline text <span> followed by text in span </span> followed by more inline text.
+    <p>Then a block level element.</p>
+    Then more inline text.</div>
+
+<div style="clip: rect(0px, 400px, 50px, 200px); position: fixed; ">Some inline text <span> followed by text in span </span> followed by more inline text.
+    <p>Then a block level element.</p>
+    Then more inline text.</div>
+
+<div style="clip: rect(0px, 400px, 50px, 200px); position: absolute; top: 250px; left: 500px;">Some inline text <span> followed by text in span </span> followed by more inline text.
+    <p>Then a block level element.</p>
+    Then more inline text.</div>
+</body>
+
+<div style="clip: rect(0px, 400px, 50px, 200px); position: absolute; top: 500px;">Some inline text <span> followed by text in span </span> followed by more inline text.
+    <p>Then a block level element.</p>
+    Then more inline text.</div>
+</body>
+</html>

tests/cases/crossorigin-iframe.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>cross-origin iframe test</title>
+    <script>
+        var h2cOptions = {proxy: "http://localhost:8082"};
+    </script>
+    <script type="text/javascript" src="../test.js"></script>
+</head>
+<body>
+<iframe src="http://hertzen.com/" width="800" height="800"></iframe>
+</body>
+</html>

tests/cases/forms.html

@@ -1,23 +1,21 @@
-<!--
-* @author Niklas von Hertzen <niklas at hertzen.com>
-* @created 16.7.2011 
-* @website http://hertzen.com
--->
 <!DOCTYPE html>
 <html>
     <head>
         <title>Form tests</title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <link href="#" type="text/css" rel="stylesheet"> 
-
-        <script type="text/javascript" src="test.js"></script>
+        <script type="text/javascript" src="../test.js"></script>
         <style>
-
+            input[type="radio"], input[type="checkbox"] {
+                margin: 10px;
+                display: inline-block;
+            }
         </style>
 
     </head>
-    <body>        
+    <body>
+        <input type="hidden" value="THIS SHOULD NOT BE VISIBLE!" />
         <input type="text" value="textbox" />
+        <input type="password" value="textbox" />
         <input type="text" value="textbox" style="border:5px solid navy;" />
         <input type="text" value="textbox" style="border:5px solid navy;height:40px;" />
 
@@ -53,13 +51,31 @@
         <input type="submit" value="Submit" style="width:200px;" />
         <input type="Button" value="Button" style="width:200px;height:50px;"  />
         <input type="Reset" value="Reset" style="width:200px;height:50px;text-align:left;"  />
-        
+
         <hr />
-        
+
         <textarea>  </textarea>
         <textarea style="border-width:10px;"></textarea>
-        
+
                 <textarea> text </textarea>
         <textarea style="border-width:10px;">text</textarea>
+        <hr />
+        <input type="radio" value="radio1" />
+        <input type="radio" value="radio2" style="transform:scale(3)" />
+        <input type="RADIO" value="radio3" checked />
+        <input type="radio" value="radio4" style="transform:scale(3)" checked />
+        <input type="radio" value="radio5" style="transform:scale(3); background: red;" />
+        <input type="radio" value="radio6" style="width: 200px;" />
+        <input type="radio" value="radio6" style="width: 200px; height: 200px;" />
+        <input type="radio" value="radio6" style="width: 200px; height: 200px;" checked />
+        <input type="checkbox" value="checkbox1" />
+        <input type="chECKbox" value="checkbox2" style="transform:scale(3)" />
+        <input type="checkbox" value="checkbox3" checked />
+        <input type="checkbox" value="checkbox4" style="transform:scale(3)" checked />
+        <input type="checkbox" value="checkbox5" style="transform:scale(3); background: red;" />
+        <input type="checkbox" value="checkbox6" style="width: 200px;" />
+        <input type="checkbox" value="checkbox6" style="width: 200px; height: 200px;" />
+        <input type="checkbox" value="checkbox6" style="width: 200px; height: 200px;" checked />
+        <div style="position: absolute; width: 10px; height: 10px; border:1px solid rgb(165,165,165); border-radius: 3px; background: rgb(222,222,222)"></div>
     </body>
 </html>

tests/cases/google-maps.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>google maps</title>
+    <script>
+        var dontRun = true;
+    </script>
+    <script type="text/javascript" src="../test.js"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
+    <style>
+        #map {
+            width: 100%;
+            height: 500px;
+            position: absolute;
+            top: 0;
+        }
+        body, html {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+<body>
+<div>
+    <h2>Google maps</h2>
+    <div id="map"></div>
+    <script>
+        var mapOptions = { zoom: 13, center: new google.maps.LatLng(60.1656623, 24.9477731) };
+        var map = new google.maps.Map(document.querySelector('#map'), mapOptions);
+        google.maps.event.addListenerOnce(map, 'idle', function(){
+            if (typeof(window.run) === "function") {
+                window.run();
+            } else {
+                dontRun = undefined;
+            }
+        });
+    </script>
+</div>
+</body>
+</html>

tests/cases/iframe.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>iframe test</title>
+    <script type="text/javascript" src="../test.js"></script>
+</head>
+<body>
+<iframe src="/tests/assets/iframe/frame1.html" width="500" height="500"></iframe>
+</body>
+</html>