Fix scroll positions for CanvasRenderer (Fix #1259)

Travis karma tests

.babelrc

@@ -0,0 +1,4 @@
+{
+    "plugins": ["transform-object-rest-spread"],
+    "presets": ["es2015", "flow"]
+}

.editorconfig

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

.eslintrc

@@ -0,0 +1,23 @@
+{
+    "parser": "babel-eslint",
+    "plugins": [
+        "flowtype",
+        "prettier"
+    ],
+    "rules": {
+        "no-console": ["error", { "allow": ["warn", "error"] }],
+        "flowtype/boolean-style": [
+            2,
+            "boolean"
+        ],
+        "flowtype/no-weak-types": 2,
+        "flowtype/delimiter-dangle": 2,
+        "prettier/prettier": ["error", {
+            "singleQuote": true,
+            "bracketSpacing": false,
+            "parser": "flow",
+            "tabWidth": 4,
+            "printWidth": 100
+        }]
+    }
+}

.flowconfig

@@ -0,0 +1,6 @@
+[ignore]
+[include]
+[libs]
+./flow-typed
+[options]
+[lints]

.gitignore

@@ -1,9 +1,17 @@
+/dist
+/build
 /nbproject/
-/images/
-/tests/templates/
-/tests/cache/
-/dist/
-/build/tmp.js
-index.html
 image.jpg
-screenshots_local.html
+/.project
+/.settings/
+node_modules/
+.envrc
+*.sublime-workspace
+*.baseline
+*.iml
+.idea/
+.DS_Store
+npm-debug.log
+debug.log
+tests/reftests.js
+*.log

.npmignore

@@ -0,0 +1,14 @@
+build/
+examples/
+scripts/
+src/
+tests/
+*.iml
+.babelrc
+.idea/
+.npmignore
+.jshintrc
+.travis.yml
+karma.js
+karma.config.js
+webpack.config.js

.travis.yml

@@ -0,0 +1,46 @@
+language: node_js
+node_js:
+- '7'
+env:
+  global:
+  - secure: eW41gIqOizwO4pTgWnAAbW75AP7F+CK9qfSed/fSh4sJ9HWMIY1YRIaY8gjr+6jV/f7XVHcXuym6ZxgINYSkVKbF1JKxBJNLOXtSgNbVHSic58pYFvUjwxIBI9aPig9uux1+DbnpWqXFDTcACJSevQZE0xwmjdrSkDLgB0G34v8=
+  - secure: Y2Av+Gd3z9uQEB36GwdOOuGka0hx0/HeitASEo59z934O8RxnmN9eNTXS7dDT3XtKtwxIyLTOEpS7qlRdWahH28hr/dS4xJj6ao58C+1xMcDs6NAPGmDxUlcJWpcGEsnjmXjQCc3fBioSTdpIBrK/gdvgpNh77UKG74Sk7Z+YGk=
+addons:
+  chrome: stable
+  firefox: latest
+dist: trusty
+sudo: false
+before_script:
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
+notifications:
+  webhooks:
+    urls:
+    - https://webhooks.gitter.im/e/2b007d4f86de89588804
+    on_success: always
+    on_failure: always
+    on_start: false
+script:
+  - npm run build
+  - npm test
+deploy:
+  - provider: npm
+    email: niklasvh@gmail.com
+    api_key:
+      secure: G/Szpr8q4/D6hp+H/Z9yyluUXtHAwf7LLa1Y07X59/Enlj1h7V5fQ7AW4/iAVM3XbIsrCPWR3dJU9g/ZxpxFg4OovIHVpS2Jr/mahtPYWdHR3pWuSmMW8QD+Twnq2VAFwSgg5Oumq3QxhX3YbCOnZox6+6Uviqk8FO7Z5B0RwW4=
+    skip_cleanup: true
+    on:
+      tags: true
+      branch: master
+      repo: niklasvh/html2canvas
+  - provider: releases
+    api_key:
+     secure: "PowO/Jat660k3gHcjgI6DlJz15RM7pLUu11UPsLCtYJ8ZwodppE6Keg0DfVkSFSIZttZor+UssDwP/WOEqfZNLqmXbcj3Gec4xolohet/GOe0KJKKuF/HgggbcxumopxMX6sMVePlMBpkLpHh7tgEAEHBWTlzC1c1a7Xa48fZ7k="
+    file:
+     - "dist/html2canvas.js"
+     - "dist/html2canvas.min.js"
+    skip_cleanup: true
+    on:
+      tags: true
+      branch: master
+      repo: niklasvh/html2canvas

CHANGELOG.md

@@ -0,0 +1,97 @@
+### Changelog ###
+
+#### v1.0.0-alpha2 - TBD ####
+ * Fix scroll positions for CanvasRenderer (#1259)
+ * Fix `data-html2canvas-ignore` attribute (#1253)
+ * Fix decimal `letter-spacing` values (#1293)
+
+#### v1.0.0-alpha1 - 5.12.2017 ####
+ * Complete rewrite of library
+ ##### Breaking Changes #####
+ * Remove deprecated onrendered callback, calling `html2canvas` returns a `Promise<HTMLCanvasElement>`
+ * Removed option `type`, same results can be achieved by assigning `x`, `y`, `scrollX`, `scrollY`, `width` and `height` properties.
+ 
+ ##### New featues / fixes #####
+ * Add support for scaling canvas (defaults to device pixel ratio)
+ * Add support for multiple text-shadows
+ * Add support for multiple text-decorations
+ * Add support for text-decoration-color
+ * Add support for percentage values for border-radius
+ * Correctly handle px and percentage values in linear-gradients
+ * Correctly support all angle types for linear-gradients
+ * Add support for multiple values for background-repeat, background-position and background-size
+ 
+#### v0.5.0-beta4 - 23.1.2016 ####
+ * Fix logger requiring access to window object
+ * Derequire browserify build
+ * Fix rendering of specific elements when window is scrolled and `type` isn't set to `view`
+
+#### v0.5.0-beta3 - 6.12.2015 ####
+ * Handle color names in linear gradients
+
+#### v0.5.0-beta2 - 20.10.2015 ####
+ * Remove Promise polyfill (use native or provide it yourself)
+
+#### v0.5.0-beta1 - 19.10.2015 ####
+ * Fix bug with unmatched color stops in gradients
+ * Fix scrolling issues with iOS
+ * Correctly handle named colors in gradients
+ * Accept matrix3d transforms
+ * Fix transparent colors breaking gradients
+ * Preserve scrolling positions on render
+
+#### 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>)

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.

README.md

@@ -0,0 +1,86 @@
+html2canvas
+===========
+
+[Homepage](https://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 ####
+
+ 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.
+
+It does **not require any rendering from the server**, as the whole image is created on the **client's 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).
+
+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.
+
+### Browser compatibility ###
+
+The library should work fine on the following browsers (with `Promise` polyfill):
+
+* Firefox 3.5+
+* Google Chrome
+* Opera 12+
+* IE9+
+* Safari 6+
+
+As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.
+
+### Usage ###
+
+The html2canvas library utilizes `Promise`s and expects them to be available in the global context. If you wish to
+support [older browsers](http://caniuse.com/#search=promise) that do not natively support `Promise`s, please include a polyfill such as
+[es6-promise](https://github.com/jakearchibald/es6-promise) before including `html2canvas`.
+
+**Note!** These instructions are for using the current dev version of 0.5, for the latest release version (0.4.1), checkout the [old readme](https://github.com/niklasvh/html2canvas/blob/v0.4/readme.md).
+
+To render an `element` with html2canvas, simply call:
+` html2canvas(element[, options]);`
+
+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).then(function(canvas) {
+        document.body.appendChild(canvas);
+    });
+
+### Building ###
+
+You can download ready builds [here](https://github.com/niklasvh/html2canvas/releases).
+
+Clone git repository:
+
+    $ git clone git://github.com/niklasvh/html2canvas.git
+
+Install dependencies:
+
+    $ npm install
+
+Build browser bundle
+
+    $ npm run 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 committing changes, these should generally not go decrease from the baseline values.
+
+Start by downloading the dependencies:
+
+    $ npm install
+
+Run tests:
+
+    $ npm test
+
+### Examples ###
+
+For more information and examples, please visit the [homepage](https://html2canvas.hertzen.com) or try the [test console](http://html2canvas.hertzen.com/screenshots.html).
+
+### Contributing ###
+
+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.

bower.json

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

build.xml

@@ -1,83 +0,0 @@
-<?xml version="1.0" encoding="ISO-8859-1"?>
-<project name="html2canvas" basedir=".">
-    <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"/>
-    
-
-    <path id="sourcefiles">
-        <fileset dir="${src.dir}" includes="LICENSE"/>
-        <fileset dir="." includes="LICENSE"/>
-        <fileset dir="${src.dir}" includes="Core.js"/>
-        <fileset dir="${src.dir}" includes="Background.js"/>
-        <fileset dir="${src.dir}" includes="Border.js"/>
-        <fileset dir="${src.dir}" includes="Draw.js"/>
-        <fileset dir="${src.dir}" includes="Forms.js"/>
-        <fileset dir="${src.dir}" includes="Images.js"/>
-        <fileset dir="${src.dir}" includes="Parse.js"/>
-        <fileset dir="${src.dir}" includes="Preload.js"/>
-        <fileset dir="${src.dir}" includes="Queue.js"/>
-        <fileset dir="${src.dir}" includes="Renderer.js"/>    
-        <fileset dir="${src.dir}" includes="Lists.js"/>   
-        <fileset dir="${src.dir}" includes="Text.js"/>
-        <fileset dir="${src.dir}" includes="Traversing.js"/>
-        <fileset dir="${src.dir}" includes="Util.js"/>       
-    </path>
-    
-    <path id="jquery-plugin">
-        <fileset dir="${src.dir}" includes="LICENSE"/>
-        <fileset dir="." includes="LICENSE"/>
-        <fileset dir="${src.dir}/plugins" includes="${JQUERY_PLUGIN_NAME}"/>    
-    </path>
- 
-    <path id="minified">
-        <fileset dir="${src.dir}" includes="LICENSE"/>
-        <fileset dir="${build.dir}" includes="tmp.js"/>    
-    </path>
-    
-    <target name="plugins">
-        <concat fixlastline="yes" destfile="${build.dir}/${JQUERY_PLUGIN_NAME}">
-            <path refid="jquery-plugin"/>
-        </concat>
-    </target>
- 
-    
-    <target name="source">
-        <concat fixlastline="yes" destfile="${build.dir}/${JS_NAME}">
-            <path refid="sourcefiles"/>
-        </concat>
-    </target>
-    
-    
-    <taskdef name="jscomp" classname="com.google.javascript.jscomp.ant.CompileTask"
-           classpath="${lib.dir}/compiler.jar"/>
-  
-    <target name="release">
-            
-        <jscomp compilationLevel="simple" warning="verbose" 
-            debug="false" 
-            output="${build.dir}/tmp.js">
-            <externs dir="${lib.dir}">
-                <file name="${jquery-externs}"/>
-            </externs>
-            <sources dir="${build.dir}">
-                <file name="${JS_NAME}" />
-            </sources>
-        </jscomp>
-        
-        <concat fixlastline="yes" destfile="${build.dir}/${JS_NAME_MIN}">
-            <path refid="minified"/>
-        </concat>  
-
-    </target>
-</project>
-

build/html2canvas.min.js

@@ -1,55 +0,0 @@
-/* 
- * html2canvas v0.27 <http://html2canvas.hertzen.com>
- * Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
- * http://www.twitter.com/niklasvh 
- * 
- * Released under MIT License
- */
-
-function html2canvas(a,b){this.opts=this.extendObj(b||{},{logging:!1,ready:function(a){document.body.appendChild(a.canvas)},storageReady:function(a){a.Renderer(a.contextStacks)},iframeDefault:"default",flashCanvasPath:"http://html2canvas.hertzen.com/external/flashcanvas/flashcanvas.js",renderViewport:!1,reorderZ:!0,throttle:!0,letterRendering:!1,proxyUrl:null,logger:function(a){window.console&&window.console.log?window.console.log(a):alert(a)},canvasWidth:0,canvasHeight:0,useOverflow:!0,renderOrder:"canvas flash html"});
-this.element=a;this.imagesLoaded=0;this.images=[];this.fontData=[];this.numDraws=0;this.contextStacks=[];this.ignoreElements="IFRAME|OBJECT|PARAM";this.needReorder=!1;this.blockElements=/(BR|PARAM)/;this.pageOrigin=window.location.protocol+window.location.host;this.queue=[];this.ignoreRe=RegExp("("+this.ignoreElements+")");this.support={rangeBounds:!1};if(document.createRange){var c=document.createRange();if(c.getBoundingClientRect){var d=document.createElement("boundtest");d.style.height="123px";
-d.style.display="block";document.getElementsByTagName("body")[0].appendChild(d);c.selectNode(d);if(c.getBoundingClientRect().height==123)this.support.rangeBounds=!0;document.getElementsByTagName("body")[0].removeChild(d)}}this.init();return this}
-html2canvas.prototype.init=function(){var a=this;this.log("Finding background-images");this.images.push("start");this.getImages(this.element);this.log("Finding images");this.each(this.element.ownerDocument.images,function(b,c){a.preloadImage(a.getAttr(c,"src"))});this.images.splice(0,1);this.images.length==0&&this.start()};
-html2canvas.prototype.start=function(){if(this.images.length==0||this.imagesLoaded==this.images.length/2){this.log("Finished loading "+this.imagesLoaded+" images, Started parsing");this.bodyOverflow=document.getElementsByTagName("body")[0].style.overflow;document.getElementsByTagName("body")[0].style.overflow="hidden";var a=new this.storageContext($(document).width(),$(document).height());a.opacity=this.getCSS(this.element,"opacity");this.parseElement(this.element,this.newElement(this.element,a))}};
-html2canvas.prototype.stackingContext=function(a){this.canvas=document.createElement("canvas");this.canvas.width=a;this.canvas.height=a;if(this.canvas.getContext)this.ctx=this.canvas.getContext("2d");this.ctx.textBaseline="bottom";return this.ctx};
-html2canvas.prototype.storageContext=function(a,b){this.storage=[];this.width=a;this.height=b;this.fillRect=function(a,b,e,f){this.storage.push({type:"function",name:"fillRect",arguments:[a,b,e,f]})};this.drawImage=function(a,b,e,f,g,h,i,j,m){this.storage.push({type:"function",name:"drawImage",arguments:[a,b,e,f,g,h,i,j,m]})};this.fillText=function(a,b,e){this.storage.push({type:"function",name:"fillText",arguments:[a,b,e]})};return this};
-html2canvas.prototype.finish=function(){this.log("Finished rendering");document.getElementsByTagName("body")[0].style.overflow=this.bodyOverflow;this.opts.ready(this)};
-html2canvas.prototype.drawBackground=function(a,b,c){var d=this.getCSS(a,"background-image").split(",")[0],e=this.getCSS(a,"background-repeat").split(",")[0];if(typeof d!="undefined"&&/^(1|none)$/.test(d)==!1&&/^(-webkit|-moz|linear-gradient|-o-)/.test(d)==!1){var d=this.backgroundImageUrl(d),f=this.loadImage(d),a=this.getBackgroundPosition(a,b,f);if(f)switch(e){case "repeat-x":this.drawbackgroundRepeatX(c,f,a,b.left,b.top,b.width,b.height);break;case "repeat-y":this.drawbackgroundRepeatY(c,f,a,b.left,
-b.top,b.width,b.height);break;case "no-repeat":var d=b.width-a.left,e=b.height-a.top,g=a.left,h=a.top,i=a.left+b.left,j=a.top+b.top;g<0?(g=Math.abs(g),i+=g,d=Math.min(b.width,f.width-g)):(d=Math.min(d,f.width),g=0);h<0?(h=Math.abs(h),j+=h,e=Math.min(b.height,f.height-h)):(e=Math.min(e,f.height),h=0);if(e>0&&d>0){this.drawImage(c,f,g,h,d,e,i,j,d,e);break}default:a.top-=Math.ceil(a.top/f.height)*f.height;for(d=b.top+a.top;d<b.height+b.top;)e=Math.min(f.height,b.height+b.top-d),e=Math.floor(d+f.height)>
-e+d?e+d-d:f.height,d<b.top?(g=b.top-d,d=b.top):g=0,this.drawbackgroundRepeatX(c,f,a,b.left,d,b.width,e),g>0&&(a.top+=g),d=Math.floor(d+f.height)-g}else this.log("Error loading background:"+d)}};html2canvas.prototype.backgroundImageUrl=function(a){a.substr(0,5)=='url("'?(a=a.substr(5),a=a.substr(0,a.length-2)):(a=a.substr(4),a=a.substr(0,a.length-1));return a};
-html2canvas.prototype.getBackgroundPosition=function(a,b,c){var d=(this.getCSS(a,"backgroundPosition").split(",")[0]||"0 0").split(" "),e;d.length==1&&(a=d,d=[],d[0]=a,d[1]=a);d[0].toString().indexOf("%")!=-1?(e=parseFloat(d[0])/100,a=b.width*e-c.width*e):a=parseInt(d[0],10);d[1].toString().indexOf("%")!=-1?(e=parseFloat(d[1])/100,b=b.height*e-c.height*e):b=parseInt(d[1],10);c={};c.top=b;c.left=a;return c};
-html2canvas.prototype.drawbackgroundRepeatY=function(a,b,c,d,e,f,g){var h=Math.min(b.width,f),i;c.top-=Math.ceil(c.top/b.height)*b.height;for(i=e+c.top;i<g+e;)f=Math.floor(i+b.height)>g+e?g+e-i:b.height,this.drawBackgroundRepeat(a,b,d+c.left,i,h,f,d,e),i=Math.floor(i+b.height)};
-html2canvas.prototype.drawbackgroundRepeatX=function(a,b,c,d,e,f,g){var g=Math.min(b.height,g),h,i;c.left-=Math.ceil(c.left/b.width)*b.width;for(i=d+c.left;i<f+d;)h=Math.floor(i+b.width)>f+d?f+d-i:b.width,this.drawBackgroundRepeat(a,b,i,e+c.top,h,g,d,e),i=Math.floor(i+b.width)};html2canvas.prototype.drawBackgroundRepeat=function(a,b,c,d,e,f,g,h){var i=0,j=0;g-c>0&&(i=g-c);h-d>0&&(j=h-d);this.drawImage(a,b,i,j,e-i,f-j,c+i,d+j,e-i,f-j)};
-html2canvas.prototype.getBorderData=function(a){var b=[],c=this;this.each(["top","right","bottom","left"],function(d,e){b.push({width:parseInt(c.getCSS(a,"border-"+e+"-width"),10),color:c.getCSS(a,"border-"+e+"-color")})});return b};
-html2canvas.prototype.drawBorders=function(a,b,c,d){var e=c.left,f=c.top,g=c.width,h=c.height,i=this.getBorderData(a),j=this;this.each(i,function(a,c){if(c.width>0){var k=e,o=f,n=g,p=h-i[2].width;switch(a){case 0:p=i[0].width;break;case 1:k=e+g-i[1].width;n=i[1].width;break;case 2:o=o+h-i[2].width;p=i[2].width;break;case 3:n=i[3].width}n={left:k,top:o,width:n,height:p};d&&(n=j.clipBounds(n,d));n.width>0&&n.height>0&&j.newRect(b,k,o,n.width,n.height,c.color)}});return i};
-html2canvas.prototype.newElement=function(a,b){var c=this.getBounds(a),d=c.left,e=c.top,f=c.width,g=c.height,h;h=this.getCSS(a,"background-color");var i=this.getCSS(a,"position"),b=b||{},j=this.setZ(this.getCSS(a,"zIndex"),i,b.zIndex,a.parentNode),m=this.getCSS(a,"opacity"),l={ctx:new this.storageContext,zIndex:j,opacity:m*b.opacity,cssPosition:i};if(b.clip)l.clip=$.extend({},b.clip),l.clip.height-=b.borders[2].width;if(this.opts.useOverflow&&/(hidden|scroll|auto)/.test(this.getCSS(a,"overflow"))&&
-!/(BODY)/i.test(a.nodeName))l.clip=l.clip?this.clipBounds(l.clip,c):c;i=j.children.push(l);m=j.children[i-1].ctx;this.setContextVariable(m,"globalAlpha",l.opacity);var k=this.drawBorders(a,m,c);l.borders=k;this.ignoreRe.test(a.nodeName)&&this.opts.iframeDefault!="transparent"&&(h=this.opts.iframeDefault=="default"?"#efefef":this.opts.iframeDefault);f={left:d+k[3].width,top:e+k[0].width,width:f-(k[1].width+k[3].width),height:g-(k[0].width+k[2].width)};l.clip&&(f=this.clipBounds(f,l.clip));f.height>
-0&&f.width>0&&(this.newRect(m,f.left,f.top,f.width,f.height,h),this.drawBackground(a,f,m));switch(a.nodeName){case "IMG":(h=this.loadImage(this.getAttr(a,"src")))?this.drawImage(m,h,0,0,h.width,h.height,d+parseInt(this.getCSS(a,"padding-left"),10)+k[3].width,e+parseInt(this.getCSS(a,"padding-top"),10)+k[0].width,c.width-(k[1].width+k[3].width+parseInt(this.getCSS(a,"padding-left"),10)+parseInt(this.getCSS(a,"padding-right"),10)),c.height-(k[0].width+k[2].width+parseInt(this.getCSS(a,"padding-top"),
-10)+parseInt(this.getCSS(a,"padding-bottom"),10))):this.log("Error loading <img>:"+this.getAttr(a,"src"));break;case "INPUT":/^(text|url|email|submit|button|reset)$/.test(a.type)&&a.value.length>0&&this.renderFormValue(a,c,l);break;case "TEXTAREA":a.value.length>0&&this.renderFormValue(a,c,l);break;case "SELECT":a.options.length>0&&this.renderFormValue(a,c,l);break;case "LI":this.drawListItem(a,l,f)}return j.children[i-1]};
-html2canvas.prototype.printText=function(a,b,c,d){this.trim(a).length>0&&(d.fillText(a,b,c),this.numDraws++)};html2canvas.prototype.newRect=function(a,b,c,d,e,f){f!="transparent"&&(this.setContextVariable(a,"fillStyle",f),a.fillRect(b,c,d,e),this.numDraws++)};html2canvas.prototype.drawImage=function(a,b,c,d,e,f,g,h,i,j){a.drawImage(b,c,d,e,f,g,h,i,j);this.numDraws++};
-html2canvas.prototype.renderFormValue=function(a,b,c){var d=document.createElement("valuewrap"),e=this;this.each(["lineHeight","textAlign","fontFamily","color","fontSize","paddingLeft","paddingTop","width","height","border","borderLeftWidth","borderTopWidth"],function(b,c){d.style[c]=e.getCSS(a,c)});d.style.borderColor="black";d.style.borderStyle="solid";d.style.display="block";d.style.position="absolute";if(/^(submit|reset|button|text|password)$/.test(a.type)||a.nodeName=="SELECT")d.style.lineHeight=
-e.getCSS(a,"height");d.style.top=b.top+"px";d.style.left=b.left+"px";b=document.createTextNode(a.nodeName=="SELECT"?a.options[a.selectedIndex].text:a.value);d.appendChild(b);$("body").append(d);this.newText(a,b,c);$(d).remove()};
-html2canvas.prototype.getImages=function(a){var b=this;this.ignoreRe.test(a.nodeName)||this.each($(a).contents(),function(a,d){RegExp("("+this.ignoreElements+")").test(d.nodeName)||b.getImages(d)});if(a.nodeType==1||typeof a.nodeType=="undefined")(a=this.getCSS(a,"background-image"))&&a!="1"&&a!="none"&&a.substring(0,7)!="-webkit"&&a.substring(0,3)!="-o-"&&a.substring(0,4)!="-moz"&&this.preloadImage(this.backgroundImageUrl(a.split(",")[0]))};
-html2canvas.prototype.loadImage=function(a){a=this.getIndex(this.images,a);return a!=-1?this.images[a+1]:!1};html2canvas.prototype.preloadImage=function(a){if(this.getIndex(this.images,a)==-1)if(this.isSameOrigin(a)){this.images.push(a);var b=new Image,c=this;$(b).load(function(){c.imagesLoaded++;c.start()});b.onerror=function(){c.images.splice(c.images.indexOf(b.src),2);c.start()};b.src=a;this.images.push(b)}else this.opts.proxyUrl&&(this.images.push(a),b=new Image,this.proxyGetImage(a,b),this.images.push(b))};
-html2canvas.prototype.proxyGetImage=function(a,b){var c=this,d=document.createElement("a");d.href=a;a=d.href;$.ajax({data:{xhr2:!1,url:a},url:this.opts.proxyUrl,dataType:"jsonp",success:function(d){d.substring(0,6)=="error:"?(c.images.splice(c.images.indexOf(a),2),c.start(),c.log("Proxy was unable to load "+a+" "+d)):(b.onload=function(){c.imagesLoaded++;c.start()},b.src=d)},error:function(){c.images.splice(c.images.indexOf(a),2);c.start()}})};
-html2canvas.prototype.Renderer=function(a){var b=this;this.log("Renderer initiated");this.each(this.opts.renderOrder.split(" "),function(c,d){switch(d){case "canvas":b.canvas=document.createElement("canvas");if(b.canvas.getContext)return b.canvasRenderer(a),b.log("Using canvas renderer"),!1;break;case "html":return b.log("Using HTML renderer"),!1}});return this};html2canvas.prototype.throttler=function(){};
-html2canvas.prototype.canvasRenderContext=function(a,b){b.textBaseline="bottom";var c=this;a.clip&&(b.save(),b.beginPath(),b.rect(a.clip.left,a.clip.top,a.clip.width,a.clip.height),b.clip());a.ctx.storage&&c.each(a.ctx.storage,function(a,e){switch(e.type){case "variable":b[e.name]=e.arguments;break;case "function":e.name=="fillRect"?b.fillRect(e.arguments[0],e.arguments[1],e.arguments[2],e.arguments[3]):e.name=="fillText"?b.fillText(e.arguments[0],e.arguments[1],e.arguments[2]):e.name=="drawImage"?
-e.arguments[8]>0&&e.arguments[7]&&b.drawImage(e.arguments[0],e.arguments[1],e.arguments[2],e.arguments[3],e.arguments[4],e.arguments[5],e.arguments[6],e.arguments[7],e.arguments[8]):c.log(e)}});a.clip&&b.restore()};html2canvas.prototype.canvasRenderStorage=function(a,b){for(;0<a.length;){var c=a.splice(0,1)[0];c.canvasPosition=c.canvasPosition||{};this.canvasRenderContext(c,b)}};
-html2canvas.prototype.canvasRenderer=function(a){this.sortZ(this.zStack);a=this.queue;this.canvas.width=Math.max($(document).width(),this.opts.canvasWidth);this.canvas.height=Math.max($(document).height(),this.opts.canvasHeight);this.ctx=this.canvas.getContext("2d");this.canvasRenderStorage(a,this.ctx)};html2canvas.prototype.setContextVariable=function(a,b,c){a.storage?a.storage.push({type:"variable",name:b,arguments:c}):a[b]=c};
-html2canvas.prototype.drawListItem=function(a,b,c){var d=this.getCSS(a,"list-style-position",!1);this.getListItem(a);var e=this.getCSS(a,"list-style-type",!1);if(/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(e)){var f=$(a).index()+1,g;e=="decimal"?g=f:e=="decimal-leading-zero"?g=f.toString().length==1?"0"+f.toString():f.toString():e=="upper-roman"?g=this.getListRoman(f):e=="lower-roman"?g=this.getListRoman(f).toLowerCase():
-e=="lower-alpha"?g=this.getListAlpha(f).toLowerCase():e=="upper-alpha"&&(g=this.getListAlpha(f));g+=". ";e=this.getListPosition(a,g);if(d=="inside")this.setFont(b.ctx,a,!1),a=c.left,c=e.bottom,this.printText(g,a,c,b.ctx)}};
-html2canvas.prototype.getListPosition=function(a,b){var c=document.createElement("boundelement");c.style.display="inline";var d=a.style.listStyleType;a.style.listStyleType="none";c.appendChild(document.createTextNode(b));a.insertBefore(c,a.firstChild);var e=this.getBounds(c);a.removeChild(c);a.style.listStyleType=d;return e};html2canvas.prototype.getListItem=function(){};html2canvas.prototype.getListAlpha=function(a){var b="";do b=String.fromCharCode(a%26+64)+b,a/=26;while(a*26>26);return b};
-html2canvas.prototype.getListRoman=function(a){var b=["M","CM","D","CD","C","XC","L","XL","X","IX","V","IV","I"],c=[1E3,900,500,400,100,90,50,40,10,9,5,4,1],d="";if(!(a<=0||a>=4E3)){for(var e=0;e<b.length;e++)for(;a>=c[e];)a-=c[e],d+=b[e];return d}};
-html2canvas.prototype.newText=function(a,b,c){var c=c.ctx,d=this.getCSS(a,"font-family"),e=this.getCSS(a,"font-size"),f=this.getCSS(a,"color"),g=this.getCSS(a,"text-decoration"),h=this.getCSS(a,"text-align"),i=this.getCSS(a,"letter-spacing");b.nodeValue=this.textTransform(b.nodeValue,this.getCSS(a,"text-transform"));if(this.trim(b.nodeValue).length>0){if(g!="none")var j=this.fontMetrics(d,e);h=h.replace(["-webkit-auto"],["auto"]);d=this.opts.letterRendering==!1&&/^(left|right|justify|auto)$/.test(h)&&
-/^(normal|none)$/.test(i)?b.nodeValue.split(/(\b| )/):b.nodeValue.split("");this.setFont(c,a,!1);a=b;for(b=0;b<d.length;b++)if(typeof a.nodeValue=="string"){e=a.splitText(d[b].length);if(g!="none"||this.trim(a.nodeValue).length!=0){if(this.support.rangeBounds)document.createRange?(h=document.createRange(),h.selectNode(a)):h=document.body.createTextRange(),h=h.getBoundingClientRect()?h.getBoundingClientRect():{};else{var i=a.parentNode,m=document.createElement("wrapper"),l=a.cloneNode(!0);m.appendChild(a.cloneNode(!0));
-i.replaceChild(m,a);h=this.getBounds(m);i.replaceChild(l,m)}this.printText(a.nodeValue,h.left,h.bottom,c);switch(g){case "underline":this.newRect(c,h.left,Math.round(h.top+j.baseline+j.lineWidth),h.width,1,f);break;case "overline":this.newRect(c,h.left,h.top,h.width,1,f);break;case "line-through":this.newRect(c,h.left,Math.ceil(h.top+j.middle+j.lineWidth),h.width,1,f)}}a=e}}};
-html2canvas.prototype.setFont=function(a,b,c){var d=this.getCSS(b,"font-family"),e=this.getCSS(b,"font-size"),f=this.getCSS(b,"color"),g=this.getCSS(b,"font-weight"),h=this.getCSS(b,"font-style"),b=this.getCSS(b,"font-variant");switch(g){case 401:g="bold";break;case 400:g="normal"}d=b+" "+g+" "+h+" "+e+" "+d;this.setContextVariable(a,"fillStyle",f);this.setContextVariable(a,"font",d);c?this.setContextVariable(a,"textAlign","right"):this.setContextVariable(a,"textAlign","left")};
-html2canvas.prototype.fontMetrics=function(a,b){var c=this.fontData.indexOf(a+"-"+b);if(c>-1)return this.fontData[c+1];c=document.createElement("div");document.getElementsByTagName("body")[0].appendChild(c);$(c).css({visibility:"hidden",fontFamily:a,fontSize:b,margin:0,padding:0});var d=document.createElement("img");d.src="http://html2canvas.hertzen.com/images/8.jpg";d.width=1;d.height=1;$(d).css({margin:0,padding:0});var e=document.createElement("span");$(e).css({fontFamily:a,fontSize:b,margin:0,
-padding:0});e.appendChild(document.createTextNode("Hidden Text"));c.appendChild(e);c.appendChild(d);var f=d.offsetTop-e.offsetTop+1;c.removeChild(e);c.appendChild(document.createTextNode("Hidden Text"));$(c).css("line-height","normal");$(d).css("vertical-align","super");d={baseline:f,lineWidth:1,middle:d.offsetTop-c.offsetTop+1};this.fontData.push(a+"-"+b);this.fontData.push(d);$(c).remove();return d};
-html2canvas.prototype.textTransform=function(a,b){switch(b){case "lowercase":return a.toLowerCase();case "capitalize":return a.replace(/(^|\s|:|-|\(|\))([a-z])/g,function(a,b,e){return b+e.toUpperCase()});case "uppercase":return a.toUpperCase();default:return a}};html2canvas.prototype.trim=function(a){return a.replace(/^\s*/,"").replace(/\s*$/,"")};
-html2canvas.prototype.parseElement=function(a,b){var c=this;this.each(a.children,function(a,e){c.parsing(e,b)});this.log("Render queue stored");this.opts.storageReady(this);this.finish()};html2canvas.prototype.parsing=function(a,b){if(this.getCSS(a,"display")!="none"&&this.getCSS(a,"visibility")!="hidden"){var c=this,b=this.newElement(a,b)||b;this.ignoreRe.test(a.nodeName)||this.each(this.contentsInZ(a),function(d,e){e.nodeType==1?c.parsing(e,b):e.nodeType==3&&c.newText(a,e,b)})}};
-html2canvas.prototype.log=function(a){this.opts.logging&&this.opts.logger(a)};html2canvas.prototype.withinBounds=function(a,b){return!a?!0:(a.left<=b.left||b.left+b.width<a.left)&&(a.top<=b.top||b.top+b.height<a.top)};html2canvas.prototype.clipBounds=function(a,b){var c=Math.max(a.left,b.left),d=Math.max(a.top,b.top);return{left:c,top:d,width:Math.min(a.left+a.width,b.left+b.width)-c,height:Math.min(a.top+a.height,b.top+b.height)-d}};
-html2canvas.prototype.getBounds=function(a){window.scroll(0,0);if(a.getBoundingClientRect){var a=a.getBoundingClientRect(),b={};b.top=a.top;b.bottom=a.bottom||a.top+a.height;b.left=a.left;b.width=a.width;b.height=a.height;return b}else return b=$(a).offset(),{left:b.left+this.getCSS(a,"border-left-width",!0),top:b.top+this.getCSS(a,"border-top-width",!0),width:$(a).innerWidth(),height:$(a).innerHeight()}};
-html2canvas.prototype.each=function(a,b){for(var b=b||function(){},c=0;c<a.length;c++)if(b(c,a[c])===!1)break};html2canvas.prototype.contentsInZ=function(a){return $(a).contents()};html2canvas.prototype.getAttr=function(a,b){return a.getAttribute(b)};html2canvas.prototype.extendObj=function(a,b){for(var c in a)b[c]=a[c];return b};html2canvas.prototype.zContext=function(a){return{zindex:a,children:[]}};
-html2canvas.prototype.setZ=function(a,b,c){return!c?this.zStack=new this.zContext(0):a!="auto"?(this.needReorder=!0,a=new this.zContext(a),c.children.push(a),a):c};html2canvas.prototype.sortZ=function(a){var b=[],c=[],d=this;this.each(a.children,function(a,f){f.children&&f.children.length>0?(b.push(f),c.push(f.zindex)):d.queue.push(f)});c.sort(function(a,b){return a-b});this.each(c,function(a,c){for(var g=0;g<=b.length;g++)if(b[g].zindex==c){g=b.splice(g,1);d.sortZ(g[0]);break}})};
-html2canvas.prototype.getContents=function(a){return a.nodeName=="iframe"?a.contentDocument||a.contentWindow.document:a.childNodes};html2canvas.prototype.getCSS=function(a,b,c){return c?parseInt($(a).css(b),10):$(a).css(b)};html2canvas.prototype.getIndex=function(a,b){if(a.indexOf)return a.indexOf(b);else{for(var c=0;c<a.length;c++)if(this[c]==b)return c;return-1}};html2canvas.prototype.isSameOrigin=function(a){var b=document.createElement("a");b.href=a;return b.protocol+b.host==this.pageOrigin};

build/jquery.plugin.html2canvas.js

@@ -1,118 +0,0 @@
-/* 
- * html2canvas v0.25 <http://html2canvas.hertzen.com>
- * Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
- * http://www.twitter.com/niklasvh 
- * 
- * Released under MIT License
- */
-
-/*
- * The MIT License
-
- * 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 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.
- */
-
-
-/*
- * jQuery helper plugin for examples and tests
- */
-			
-(function( $ ){
-    $.fn.html2canvas = function(options) {
-  
-        var date = new Date();
-        var message,
-        timeoutTimer,
-        timer = date.getTime();
-        
-        var object = $.extend({},{
-            logging: false,
-            proxyUrl: "http://html2canvas.appspot.com/", // running html2canvas-python proxy
-            ready: function(renderer) {
-                
-                var finishTime = new Date();
-               // console.log((finishTime.getTime()-timer)/1000);
-                
-
-                document.body.appendChild(renderer.canvas);
-                
-                
-                
-                var canvas = $(renderer.canvas);
-                canvas.css('position','absolute')
-                .css('left',0).css('top',0);
-                
-
-                
-               // $('body').append(canvas);
-                $(canvas).siblings().toggle();
-                
-                throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />Total of "+renderer.numDraws+" draws performed",4000);
-                
-                
-                $(window).click(function(){
-                    if (!canvas.is(':visible')){
-                        $(canvas).toggle().siblings().toggle();  
-                        throwMessage("Canvas Render visible");
-                    } else{
-                        $(canvas).siblings().toggle();  
-                        $(canvas).toggle();
-                        throwMessage("Canvas Render hidden");
-                    }
-                    
-          
-                });
-            }
-            
-        },options)
-        
-        new html2canvas(this.get(0), object);
-        
-        
-        function throwMessage(msg,duration){
-            
-            window.clearTimeout(timeoutTimer);
-            timeoutTimer = window.setTimeout(function(){
-                message.fadeOut(function(){
-                    message.remove();   
-                });                   
-            },duration || 2000);
-            $(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'
-            }).hide().fadeIn().appendTo('body');
-        }
-
-    };
-})( jQuery );
-	

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>

flow-typed/myLibDef.js

@@ -0,0 +1,11 @@
+declare var __DEV__: boolean;
+declare var __VERSION__: string;
+
+declare class SVGSVGElement extends Element {
+    className: string;
+    style: CSSStyleDeclaration;
+
+    getPresentationAttribute(name: string): any;
+}
+
+declare class HTMLBodyElement extends HTMLElement {}

karma.conf.js

@@ -0,0 +1,176 @@
+// Karma configuration
+// Generated on Sat Aug 05 2017 23:42:26 GMT+0800 (Malay Peninsula Standard Time)
+
+const port = 9876;
+module.exports = function(config) {
+    const slLaunchers = (!process.env.SAUCE_USERNAME || !process.env.SAUCE_ACCESS_KEY) ? {} : {
+        sl_beta_chrome: {
+            base: 'SauceLabs',
+            browserName: 'chrome',
+            platform: 'Windows 10',
+            version: 'beta'
+        },
+        sl_ie9: {
+            base: 'SauceLabs',
+            browserName: 'internet explorer',
+            version: '9.0',
+            platform: 'Windows 7'
+        },
+        sl_ie10: {
+            base: 'SauceLabs',
+            browserName: 'internet explorer',
+            version: '10.0',
+            platform: 'Windows 7'
+        },
+        sl_ie11: {
+            base: 'SauceLabs',
+            browserName: 'internet explorer',
+            version: '11.0',
+            platform: 'Windows 7'
+        },
+        sl_edge_15: {
+            base: 'SauceLabs',
+            browserName: 'MicrosoftEdge',
+            version: '15.15063',
+            platform: 'Windows 10'
+        },
+        sl_edge_14: {
+            base: 'SauceLabs',
+            browserName: 'MicrosoftEdge',
+            version: '14.14393',
+            platform: 'Windows 10'
+        },
+        sl_safari: {
+            base: 'SauceLabs',
+            browserName: 'safari',
+            version: '10.1',
+            platform: 'macOS 10.12'
+        },
+        'sl_android_4.4': {
+            base: 'SauceLabs',
+            browserName: 'Browser',
+            platform: 'Android',
+            version: '4.4',
+            device: 'Android Emulator',
+        },
+        'sl_ios_10.3_safari': {
+            base: 'SauceLabs',
+            browserName: 'Safari',
+            platform: 'iOS',
+            version: '10.3',
+            device: 'iPhone 7 Plus Simulator'
+        },
+        'sl_ios_9.3_safari': {
+            base: 'SauceLabs',
+            browserName: 'Safari',
+            platform: 'iOS',
+            version: '9.3',
+            device: 'iPhone 6 Plus Simulator'
+        },
+        'sl_ios_8.4_safari': {
+            base: 'SauceLabs',
+            browserName: 'Safari',
+            platform: 'iOS',
+            version: '8.4',
+            device: 'iPhone 5s Simulator'
+        }
+    };
+
+    const customLaunchers = Object.assign({}, slLaunchers, {
+        stable_chrome: {
+            base: 'Chrome'
+        },
+        stable_firefox: {
+            base: 'Firefox'
+        }
+    });
+
+    config.set({
+
+        // base path that will be used to resolve all patterns (eg. files, exclude)
+        basePath: '',
+
+
+        // frameworks to use
+        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+        frameworks: ['mocha'],
+
+
+        // list of files / patterns to load in the browser
+        files: [
+            'build/testrunner.js',
+            { pattern: './tests/**/*', 'watched': true, 'included': false, 'served': true},
+            { pattern: './dist/**/*', 'watched': true, 'included': false, 'served': true},
+            { pattern: './node_modules/**/*', 'watched': true, 'included': false, 'served': true}
+        ],
+
+
+        // list of files to exclude
+        exclude: [
+        ],
+
+
+        // preprocess matching files before serving them to the browser
+        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+        preprocessors: {
+        },
+
+
+        // test results reporter to use
+        // possible values: 'dots', 'progress'
+        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+        reporters: ['progress', 'saucelabs'],
+
+        // web server port
+        port,
+
+
+        // enable / disable colors in the output (reporters and logs)
+        colors: true,
+
+
+        // level of logging
+        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+        logLevel: config.LOG_INFO,
+
+
+        // enable / disable watching file and executing tests whenever any file changes
+        autoWatch: true,
+
+
+        // start these browsers
+        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+        browsers: Object.keys(customLaunchers),
+
+
+        customLaunchers,
+
+        // Continuous Integration mode
+        // if true, Karma captures browsers, runs the tests and exits
+        singleRun: true,
+
+        // Concurrency level
+        // how many browser should be started simultaneous
+        concurrency: 5,
+
+        proxies: {
+            '/dist': `http://localhost:${port}/base/dist`,
+            '/node_modules': `http://localhost:${port}/base/node_modules`,
+            '/tests': `http://localhost:${port}/base/tests`,
+            '/assets': `http://localhost:${port}/base/tests/assets`
+        },
+
+        client: {
+            mocha: {
+                // change Karma's debug.html to the mocha web reporter
+                reporter: 'html'
+            }
+        },
+
+        captureTimeout: 300000,
+
+        browserDisconnectTimeout: 60000,
+
+        browserNoActivityTimeout: 1200000
+    })
+};

karma.js

@@ -0,0 +1,112 @@
+const Server = require('karma').Server;
+const cfg = require('karma').config;
+const path = require('path');
+const proxy = require('html2canvas-proxy');
+const karmaConfig = cfg.parseConfig(path.resolve('./karma.conf.js'));
+const server = new Server(karmaConfig, (exitCode) => {
+    console.log('Karma has exited with ' + exitCode);
+    process.exit(exitCode)
+});
+
+const fs = require('fs');
+const express = require('express');
+const bodyParser = require('body-parser');
+const cors = require('cors');
+const filenamifyUrl = require('filenamify-url');
+
+const CORS_PORT = 8081;
+const corsApp = express();
+corsApp.use('/proxy', proxy());
+corsApp.use('/cors', cors(), express.static(path.resolve(__dirname)));
+corsApp.use('/', express.static(path.resolve(__dirname, '/tests')));
+corsApp.use((error, req, res, next) => {
+    console.error(error);
+    next();
+});
+
+process.on('uncaughtException', (err) => {
+    if(err.errno === 'EADDRINUSE') {
+        console.warn(err);
+    } else {
+        console.log(err);
+        process.exit(1);
+    }
+});
+
+corsApp.listen(CORS_PORT, () => {
+    console.log(`CORS server running on port ${CORS_PORT}`);
+});
+
+const app = express();
+app.use(cors());
+app.use((req, res, next) => {
+    // IE9 doesn't set headers for cross-domain ajax requests
+    if(typeof(req.headers['content-type']) === 'undefined'){
+        req.headers['content-type'] = "application/json";
+    }
+    next();
+});
+app.use(
+    bodyParser.json({
+        limit: '15mb',
+        type: '*/*'
+    })
+);
+
+const prefix = 'data:image/png;base64,';
+
+const writeScreenshot = (buffer, body) => {
+    const filename = `${filenamifyUrl(
+        body.test.replace(/^\/tests\/reftests\//, '').replace(/\.html$/, ''),
+        {replacement: '-'}
+    )}!${body.platform.name}-${body.platform.version}.png`;
+
+    fs.writeFileSync(path.resolve(__dirname, './tests/results/', filename), buffer);
+};
+
+app.post('/screenshot', (req, res) => {
+    if (!req.body || !req.body.screenshot) {
+        return res.sendStatus(400);
+    }
+
+    const buffer = new Buffer(req.body.screenshot.substring(prefix.length), 'base64');
+    writeScreenshot(buffer, req.body);
+    return res.sendStatus(200);
+});
+
+const chunks = {};
+
+app.post('/screenshot/chunk', (req, res) => {
+    if (!req.body || !req.body.screenshot) {
+        return res.sendStatus(400);
+    }
+
+    const key = `${req.body.platform.name}-${req.body.platform.version}-${req.body.test
+        .replace(/^\/tests\/reftests\//, '')
+        .replace(/\.html$/, '')}`;
+    if (!Array.isArray(chunks[key])) {
+        chunks[key] = Array.from(Array(req.body.totalCount));
+    }
+
+    chunks[key][req.body.part] = req.body.screenshot;
+
+    if (chunks[key].every(s => typeof s === 'string')) {
+        const str = chunks[key].reduce((acc, s) => acc + s, '');
+        const buffer = new Buffer(str.substring(prefix.length), 'base64');
+        delete chunks[key];
+        writeScreenshot(buffer, req.body);
+    }
+
+    return res.sendStatus(200);
+});
+
+app.use((error, req, res, next) => {
+    console.error(error);
+    next();
+});
+
+const listener = app.listen(8000, () => {
+    server.start();
+});
+
+

package.json

@@ -0,0 +1,82 @@
+{
+  "title": "html2canvas",
+  "name": "html2canvas",
+  "description": "Screenshots with JavaScript",
+  "main": "dist/npm/index.js",
+  "version": "1.0.0-alpha.2",
+  "author": {
+    "name": "Niklas von Hertzen",
+    "email": "niklasvh@gmail.com",
+    "url": "https://hertzen.com"
+  },
+  "engines": {
+    "node": ">=4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:niklasvh/html2canvas.git"
+  },
+  "bugs": {
+    "url": "https://github.com/niklasvh/html2canvas/issues"
+  },
+  "devDependencies": {
+    "babel-cli": "6.24.1",
+    "babel-core": "6.25.0",
+    "babel-eslint": "7.2.3",
+    "babel-loader": "7.1.1",
+    "babel-plugin-dev-expression": "0.2.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
+    "babel-plugin-transform-object-rest-spread": "6.23.0",
+    "babel-preset-es2015": "6.24.1",
+    "babel-preset-flow": "6.23.0",
+    "base64-arraybuffer": "0.1.5",
+    "body-parser": "1.17.2",
+    "chai": "4.1.1",
+    "chromeless": "1.2.0",
+    "cors": "2.8.4",
+    "eslint": "4.2.0",
+    "eslint-plugin-flowtype": "2.35.0",
+    "eslint-plugin-prettier": "2.1.2",
+    "express": "4.15.4",
+    "filenamify-url": "1.0.0",
+    "flow-bin": "0.56.0",
+    "glob": "7.1.2",
+    "html2canvas-proxy": "1.0.0",
+    "jquery": "3.2.1",
+    "karma": "1.7.0",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-edge-launcher": "0.4.1",
+    "karma-firefox-launcher": "1.0.1",
+    "karma-ie-launcher": "1.0.0",
+    "karma-mocha": "1.3.0",
+    "karma-sauce-launcher": "1.1.0",
+    "mocha": "3.5.0",
+    "platform": "1.3.4",
+    "prettier": "1.5.3",
+    "promise-polyfill": "6.0.2",
+    "replace-in-file": "^3.0.0",
+    "rimraf": "2.6.1",
+    "serve-index": "1.9.0",
+    "slash": "1.0.0",
+    "uglifyjs-webpack-plugin": "^1.1.2",
+    "webpack": "3.4.1"
+  },
+  "scripts": {
+    "build": "rimraf dist/ && node scripts/create-reftest-list && npm run build:npm && npm run build:browser",
+    "build:npm": "babel src/ -d dist/npm/ --plugins=dev-expression,transform-es2015-modules-commonjs && replace-in-file __VERSION__ '\"$npm_package_version\"' dist/npm/index.js",
+    "build:browser": "webpack",
+    "format": "prettier --single-quote --no-bracket-spacing --tab-width 4 --print-width 100 --write \"{src,tests,scripts}/**/*.js\"",
+    "flow": "flow",
+    "lint": "eslint src/**",
+    "test": "npm run flow && npm run lint && npm run test:node && npm run karma",
+    "test:node": "mocha tests/node/*.js",
+    "karma": "node karma",
+    "watch": "webpack --progress --colors --watch",
+    "start": "node tests/server"
+  },
+  "homepage": "https://html2canvas.hertzen.com",
+  "license": "MIT",
+  "dependencies": {
+    "punycode": "2.1.0"
+  }
+}

readme.md

@@ -1,36 +0,0 @@
-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.
-
-
-###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 
-
-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. 
-
-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. 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.
-
-###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.
-
-### 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>.

screenshots.html

@@ -1,326 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>JavaScript screenshot creator</title>
-
-        <style type="text/css">
-            a {
-                color: #0B0B0B;
-                background-color: #FDF9EE;
-                padding: 0 8px;
-                text-decoration: none;
-                font: normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
-            }
-
-            a:hover {
-                color: #0B0B0B;
-                background-color: #EFEBDE;
-                padding: 0 8px;
-                text-decoration: none;
-                font: normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
-            }
-            body {
-                font: normal 14px/19px Arial, Helvetica, sans-serif;
-                background-color: white;
-                color: #4E4628;
-            }
-
-            textarea {
-                background-color: #EFEBDE;
-                color: #0B0B0B;
-                border: #C3BCA4 1px solid;
-
-
-
-
-                font: normal 11px Arial, Helvetica, sans-serif;
-                width:300px;
-                height:150px;
-            }
-
-            h2 {
-                background-color: white;
-                color: #0B0B0B;
-                font: normal 28px/46px Georgia, "Times New Roman", Times, serif;
-                margin:0;
-                clear:both;
-            }
-
-            h3 {
-
-                color: #786E4E;
-                padding: 0 0 10px 55px;
-
-
-                height: 37px;
-                font: normal 24px/30px Georgia, "Times New Roman", Times, serif;
-            }
-            ul{
-                float:left;
-                margin:0;
-
-            }
-
-            table{
-                margin:0 auto;
-                width:400px;
-                border:1px solid black;
-            }
-            #content{
-                clear:both;
-                text-align:center;
-            }
-
-            #about{
-                padding:0 10px;
-                width:450px;
-                float:left;
-            }
-
-        </style>
-
-        <script type="text/javascript" src="external/jquery-1.6.2.min.js"></script>
-        <script type="text/javascript" src="build/html2canvas.js?221"></script>
-        <script type="text/javascript" src="build/jquery.plugin.html2canvas.js"></script>
-        <script type="text/javascript" src="http://www.hertzen.com/js/ganalytics-heatmap.js"></script>
-        <script type="text/javascript"> 
-            
-            var date = new Date();
-            var message,
-            timeoutTimer,
-            timer;
-            
-            var proxyUrl = "http://html2canvas.appspot.com";
-            
-            function addRow(table,field,val){
-                var tr = $('<tr />').appendTo( $(table));
-               
-                tr.append($('<td />').css('font-weight','bold').text(field)).append($('<td />').text(val));
-                
-                
-                
-            }
-            
-            function throwMessage(msg,duration){
-            
-                window.clearTimeout(timeoutTimer);
-                timeoutTimer = window.setTimeout(function(){
-                    message.fadeOut(function(){
-                        message.remove();   
-                    });                   
-                },duration || 2000);
-                $(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'
-                }).hide().fadeIn().appendTo('body');
-            }
-            
-            $(function(){
-                
-                $('ul li a').click(function(e){
-                    e.preventDefault();
-                    $('#url').val(this.href);
-                    $('button').click();                  
-                })
-                
-                var iframe,d;
-                
-                
-
-                
-                $('input[type="button"]').click(function(){
-                    $(iframe.contentWindow).unbind('load');
-                    $(iframe).contents().find('body').html2canvas({
-                        canvasHeight: d.body.scrollHeight,
-                        canvasWidth: d.body.scrollWidth,
-                        logging:true
-                                            
-                    });             
-                    
-                });
-                
-                $('button').click(function(){
-                    
-                    $(this).prop('disabled',true);
-                    var url = $('#url').val();
-                    $('#content').append($('<img />').attr('src','loading.gif').css('margin-top',40));
-                    
-                    var urlParts = document.createElement('a');
-                    urlParts.href = url;
-                    
-                    $.ajax({
-                        data: {
-                            xhr2:false,
-                            url:urlParts.href
-                            
-                        },
-                        url: proxyUrl,
-                        dataType: "jsonp",
-                        success: function(html){
-                            
-                            
-                            iframe = document.createElement('iframe');
-                            $(iframe).css({
-                                'visibility':'hidden'
-                            }).width($(window).width()).height($(window).height());
-                            $('#content').append(iframe);
-                            d = iframe.contentWindow.document; 
-                           
-                            d.open();
-                            
-                            $(iframe.contentWindow).load(function(){
-
-                                timer = date.getTime();
-                                
-                                $(iframe).contents().find('body').html2canvas({
-                                    canvasHeight: d.body.scrollHeight,
-                                    canvasWidth: d.body.scrollWidth,
-                                    logging:true,
-                                    proxyUrl: proxyUrl,
-                                    logger:function(msg){
-                                        $('#logger').val(function(e,i){
-                                            return i+"\n"+msg;
-                                        });
-                                        
-                                    },
-                                    ready: function(renderer) {
-                                        $('button').prop('disabled',false);
-                                        $("#content").empty();               
-                                        var finishTime = new Date();
-                      
-                                        var table = $('<table />');  
-                                        $('#content')
-                                        .append('<h2>Screenshot</h2>')
-                                        .append(renderer.canvas)
-                                        .append('<h3>Details</h3>')
-                                        .append(table);
-                                        
-                                        
-                                        
-                                        addRow(table,"Creation time",((finishTime.getTime()-timer)/1000) + " seconds");
-                                        addRow(table,"Total draws", renderer.numDraws);
-                                        addRow(table,"Context stacks", renderer.contextStacks.length);
-                                        addRow(table,"Loaded images", renderer.images.length/2);
-                                        addRow(table,"Performed z-index reorder", renderer.needReorder);
-                                        addRow(table,"Used rangeBounds", renderer.support.rangeBounds);
-                              
-
-
-                                        throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />Total of "+renderer.numDraws+" draws performed",4000);
-                
-                
-                                 
-                                    }
-                                            
-                                });
-
-                            });
-
-                            $('base').attr('href',urlParts.protocol+"//"+urlParts.hostname+"/");
-                            html = html.replace("<head>","<head><base href='"+urlParts.protocol+"//"+urlParts.hostname+"/' />");
-                            if ($("#disablejs").prop('checked')){
-                                html = html.replace(/\<script/gi,"<!--<script");
-                                html = html.replace(/\<\/script\>/gi,"<\/script>-->");
-                            }
-                            // console.log(html);
-                            d.write(html);
-
-                            d.close();
-                         
-                        }
-        
-        
-                    });
-                    
-
-                });
-                   
-               
-                    
-          
-            
-            });        
-        </script> 
-        <script type="text/javascript">
-            
-            
-            var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-188600-10']);_gaq.push(['_trackPageview']);(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();   
-
-        </script>
-        <base />
-    </head>
-    <body>
-    <!--    <div style="background:red;padding:10px;color:#fff">
-            App engine proxy is <a href="http://twitter.com/#!/Niklasvh/status/96265826713350144">temporarily out of use</a> due to exceeded bandwidth use. Please try again tomorrow or meanwhile check other examples <a href="http://html2canvas.hertzen.com/">here</a>.
-        </div>-->
-        
-        <div style="float:left;width:500px;">
-            <h1>JavaScript screenshot creator</h1>
-            <label for="url">Website URL:</label>
-            <input type="url" id="url" value="http://www.yahoo.com" /><button>Get screenshot!</button>
-            <!-- <input type="button" value="Try anyway" />--><br />
-
-
-            <label for="disablejs">Disable JavaScript (recommended, doesn't work well with the proxy)</label> <input type="checkbox" id="disablejs" checked /><br />
-            <small>Tested with Google Chrome 12, Firefox 4 and Opera 11.5</small>
-        </div>
-        <div style="float:right;">
-            <div style="margin-left:17px;float:right;"> 
-                <!-- Place this tag in your head or just before your close body tag --> 
-                <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 
-
-                <!-- Place this tag where you want the +1 button to render --> 
-                <g:plusone size="tall"></g:plusone> 
-            </div> 
-
-            <div style="float:right;"> 
-
-                <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://html2canvas.hertzen.com/" data-text="html2canvas - screenshots with #JavaScript" data-count="vertical" data-via="niklasvh">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
-            </div> 
-        </div>
-
-
-        <div style="clear:both;"></div>
-        <h3>Recommended (tested) pages:</h3>
-
-        <ul>
-
-            <li><a href="http://www.yahoo.com">yahoo.com</a></li>
-            <li><a href="http://www.google.com">google.com</a></li>
-            <li><a href="https://github.com/niklasvh/html2canvas">github.com</a></li>
-            <li><a href="http://www.smashingmagazine.com">smashingmagazine.com</a></li>
-            <li><a href="http://www.mashable.com">mashable.com</a></li>           
-            <li><a href="http://www.facebook.com/google">facebook.com/google</a></li>
-            <li><a href="http://www.youtube.com/">youtube.com</a></li>
-            <li><a href="http://www.cnn.com/">cnn.com</a></li>
-
-<li><a href="http://www.engadget.com/">engadget.com (lot of elements, very slow)</a></li>
-            <li><a href="http://eu.battle.net/en/">battle.net</a></li>
-
-
-        </ul>
-        <div style="float:left;">
-            <textarea id="logger"></textarea>
-        </div>
-        <div id="about"><b> About</b><br />
-            The whole screenshot is created with JavaScript. The only server interaction that is happening on this page is the proxy for loading the external pages/images into JSONP/CORS enabled page and onwards onto the JavaScript renderer script.
-            There are a lot of problems of loading external pages, even with a proxy, and as such many pages will not render at all. If you wish to try the script properly, I recommend you get a copy of the source from <a href="https://github.com/niklasvh/html2canvas">here</a> instead.
-        </div>
-        <div id="content"></div>
-
-    </body>
-</html>

scripts/create-reftest-list.js

@@ -0,0 +1,53 @@
+'use strict';
+
+const path = require('path');
+const glob = require('glob');
+const fs = require('fs');
+const slash = require('slash');
+const parseRefTest = require('./parse-reftest');
+const outputPath = 'tests/reftests.js';
+
+const ignoredTests = fs
+    .readFileSync(path.resolve(__dirname, `../tests/reftests/ignore.txt`))
+    .toString()
+    .split('\n')
+    .filter(l => l.length)
+    .reduce((acc, l) => {
+        const m = l.match(/^(\[(.+)\])?(.+)$/i);
+        acc[m[3]] = m[2] ? m[2].split(',') : [];
+        return acc;
+    }, {});
+
+glob(
+    '../tests/reftests/**/*.html',
+    {
+        cwd: __dirname,
+        root: path.resolve(__dirname, '../../')
+    },
+    (err, files) => {
+        if (err) {
+            console.error(err);
+            process.exit(1);
+        }
+
+        const testList = files.reduce((acc, filename) => {
+            const refTestFilename = path.resolve(__dirname, filename.replace(/\.html$/, '.txt'));
+            const name = `/${slash(path.relative('../', filename))}`;
+            if (!Array.isArray(ignoredTests[name]) || ignoredTests[name].length) {
+                acc[name] = fs.existsSync(refTestFilename)
+                    ? parseRefTest(fs.readFileSync(refTestFilename).toString())
+                    : null;
+            } else {
+                console.log(`IGNORED: ${name}`);
+            }
+
+            return acc;
+        }, {});
+        fs.writeFileSync(
+            path.resolve(__dirname, `../${outputPath}`),
+            `module.exports = ${JSON.stringify({testList, ignoredTests}, null, 4)};`
+        );
+
+        console.log(`${outputPath} updated`);
+    }
+);

scripts/create-reftests.js

@@ -0,0 +1,37 @@
+const {Chromeless} = require('chromeless');
+const path = require('path');
+const fs = require('fs');
+const express = require('express');
+const reftests = require('../tests/reftests');
+
+const app = express();
+app.use('/', express.static(path.resolve(__dirname, '../')));
+
+const listener = app.listen(0, () => {
+    async function run() {
+        const chromeless = new Chromeless();
+        const tests = Object.keys(reftests.testList);
+        let i = 0;
+        while (tests[i]) {
+            const filename = tests[i];
+            i++;
+            const reftest = await chromeless
+                .goto(`http://localhost:${listener.address().port}${filename}?reftest&run=false`)
+                .evaluate(() =>
+                    html2canvas(document.documentElement, {
+                        windowWidth: 800,
+                        windowHeight: 600,
+                        target: new RefTestRenderer()
+                    })
+                );
+            fs.writeFileSync(
+                path.resolve(__dirname, `..${filename.replace(/\.html$/i, '.txt')}`),
+                reftest
+            );
+        }
+
+        await chromeless.end();
+    }
+
+    run().catch(console.error.bind(console)).then(() => process.exit(0));
+});

scripts/parse-reftest.js

@@ -0,0 +1,155 @@
+const ACTION = /^\s*(\w+ ?\w*):\s+(.+)/;
+const TEXT = /^\s*\[(-?\d+), (-?\d+)\]:\s+(.+)/;
+const WINDOW_SIZE = /^\[(-?\d+), (-?\d+)\]$/;
+const RECTANGLE = /^\[(-?\d+), (-?\d+), (-?\d+), (-?\d+)\]\s+(.+)$/;
+const REPEAT = /^Image\s+\("(.+)"\)\s+\[(-?\d+), (-?\d+)\]\s+Size\s+\((-?\d+), (-?\d+)\)\s+(.+)$/;
+const PATH = /^Path \((.+)\)$/;
+const VECTOR = /^Vector\(x: (-?\d+), y: (-?\d+)\)$/;
+const BEZIER_CURVE = /^BezierCurve\(x0: (-?\d+), y0: (-?\d+), x1: (-?\d+), y1: (-?\d+), cx0: (-?\d+), cy0: (-?\d+), cx1: (-?\d+), cy1: (-?\d+)\)$/;
+const SHAPE = /^(rgba?\((:?.+)\)) (Path .+)$/;
+const CIRCLE = /^(rgba?\((:?.+)\)) Circle\(x: (-?\d+), y: (-?\d+), r: (-?\d+)\)$/;
+const IMAGE = /^Image\s+\("(.+)"\)\s+\(source:\s+\[(-?\d+), (-?\d+), (-?\d+), (-?\d+)\]\)\s+\(destination:\s+\[(-?\d+), (-?\d+), (-?\d+), (-?\d+)\]\)$/;
+const CANVAS = /^(Canvas)\s+\(source:\s+\[(-?\d+), (-?\d+), (-?\d+), (-?\d+)\]\)\s+\(destination:\s+\[(-?\d+), (-?\d+), (-?\d+), (-?\d+)\]\)$/;
+const GRADIENT = /^\[(-?\d+), (-?\d+), (-?\d+), (-?\d+)\]\s+linear-gradient\(x0: (-?\d+), x1: (-?\d+), y0: (-?\d+), y1: (-?\d+) (.+)\)$/;
+const TRANSFORM = /^\((-?\d+), (-?\d+)\) \[(.+)\]$/;
+
+function parsePath(path) {
+    const parts = path.match(PATH)[1];
+    return parts.split(' > ').map(p => {
+        const vector = p.match(VECTOR);
+        if (vector) {
+            return {
+                type: 'Vector',
+                x: parseInt(vector[1], 10),
+                y: parseInt(vector[2], 10)
+            };
+        } else {
+            const bezier = p.match(BEZIER_CURVE);
+            return {
+                type: 'BezierCurve',
+                x0: parseInt(bezier[1], 10),
+                y0: parseInt(bezier[2], 10),
+                x1: parseInt(bezier[3], 10),
+                y1: parseInt(bezier[4], 10),
+                cx0: parseInt(bezier[5], 10),
+                cy0: parseInt(bezier[6], 10),
+                cx1: parseInt(bezier[7], 10),
+                cy1: parseInt(bezier[8], 10)
+            };
+        }
+    });
+}
+
+function parseRefTest(txt) {
+    return txt.split(/\n/g).filter(l => l.length > 0).map((l, i) => {
+        const parseAction = l.match(ACTION);
+        if (!parseAction) {
+            const text = l.match(TEXT);
+            return {
+                action: 'T',
+                x: parseInt(text[1], 10),
+                y: parseInt(text[2], 10),
+                text: text[3],
+                line: i + 1
+            };
+        }
+        const args = parseAction[2];
+
+        const data = {
+            action: parseAction[1],
+            line: i + 1
+        };
+
+        switch (data.action) {
+            case 'Opacity':
+                data.opacity = parseFloat(args);
+                break;
+            case 'Fill':
+                data.color = args;
+                break;
+            case 'Clip':
+                data.path = args.split(' | ').map(path => parsePath(path));
+                break;
+            case 'Window':
+                const windowSize = args.match(WINDOW_SIZE);
+                data.width = parseInt(windowSize[1], 10);
+                data.height = parseInt(windowSize[2], 10);
+                break;
+            case 'Rectangle':
+                const rectangle = args.match(RECTANGLE);
+                data.x = parseInt(rectangle[1], 10);
+                data.y = parseInt(rectangle[2], 10);
+                data.width = parseInt(rectangle[3], 10);
+                data.height = parseInt(rectangle[4], 10);
+                data.color = rectangle[5];
+                break;
+            case 'Repeat':
+                const repeat = args.match(REPEAT);
+                data.imageSrc = repeat[1];
+                data.x = parseInt(repeat[2], 10);
+                data.y = parseInt(repeat[3], 10);
+                data.width = parseInt(repeat[4], 10);
+                data.height = parseInt(repeat[5], 10);
+                data.path = parsePath(repeat[6]);
+                break;
+            case 'Shape':
+                const shape = args.match(SHAPE);
+                if (!shape) {
+                    const circle = args.match(CIRCLE);
+                    data.color = circle[1];
+                    data.path = [
+                        {
+                            type: 'Circle',
+                            x: parseInt(circle[2], 10),
+                            y: parseInt(circle[3], 10),
+                            r: parseInt(circle[4], 10)
+                        }
+                    ];
+                } else {
+                    data.color = shape[1];
+                    data.path = parsePath(shape[3]);
+                }
+                break;
+            case 'Text':
+                data.font = args;
+                break;
+            case 'Draw image':
+                const image = args.match(IMAGE) ? args.match(IMAGE) : args.match(CANVAS);
+                data.imageSrc = image[1];
+                data.sx = parseInt(image[2], 10);
+                data.xy = parseInt(image[3], 10);
+                data.sw = parseInt(image[4], 10);
+                data.sh = parseInt(image[5], 10);
+                data.dx = parseInt(image[6], 10);
+                data.dy = parseInt(image[7], 10);
+                data.dw = parseInt(image[8], 10);
+                data.dh = parseInt(image[9], 10);
+                break;
+            case 'Gradient':
+                const gradient = args.match(GRADIENT);
+                data.x = parseInt(gradient[1], 10);
+                data.y = parseInt(gradient[2], 10);
+                data.width = parseInt(gradient[3], 10);
+                data.height = parseInt(gradient[4], 10);
+                data.x0 = parseInt(gradient[5], 10);
+                data.x1 = parseInt(gradient[6], 10);
+                data.y0 = parseInt(gradient[7], 10);
+                data.y1 = parseInt(gradient[8], 10);
+                data.stops = gradient[9];
+                break;
+            case 'Transform':
+                const transform = args.match(TRANSFORM);
+                data.x = parseInt(transform[1], 10);
+                data.y = parseInt(transform[2], 10);
+                data.matrix = transform[3];
+                break;
+            default:
+                console.log(args);
+                throw new Error('Unhandled action ' + data.action);
+        }
+
+        return data;
+    });
+}
+
+module.exports = parseRefTest;

src/Angle.js

@@ -0,0 +1,24 @@
+/* @flow */
+'use strict';
+
+const ANGLE = /([+-]?\d*\.?\d+)(deg|grad|rad|turn)/i;
+
+export const parseAngle = (angle: string): number | null => {
+    const match = angle.match(ANGLE);
+
+    if (match) {
+        const value = parseFloat(match[1]);
+        switch (match[2].toLowerCase()) {
+            case 'deg':
+                return Math.PI * value / 180;
+            case 'grad':
+                return Math.PI / 200 * value;
+            case 'rad':
+                return value;
+            case 'turn':
+                return Math.PI * 2 * value;
+        }
+    }
+
+    return null;
+};

src/Background.js

@@ -1,300 +0,0 @@
-
-    
-html2canvas.prototype.drawBackground = function(el,bounds,ctx){
-               
-    // TODO add support for multi background-images
-    var background_image = this.getCSS(el,"background-image").split(",")[0];
-    var background_repeat = this.getCSS(el,"background-repeat").split(",")[0];
-        
-    if (typeof background_image != "undefined" && /^(1|none)$/.test(background_image)==false && /^(-webkit|-moz|linear-gradient|-o-)/.test(background_image)==false){
-         
-        background_image = this.backgroundImageUrl(background_image);
-        var image = this.loadImage(background_image);
-					
-
-        var bgp = this.getBackgroundPosition(el,bounds,image),
-        bgy;
-
-        if (image){
-            switch(background_repeat){
-					
-                case "repeat-x":
-                    this.drawbackgroundRepeatX(ctx,image,bgp,bounds.left,bounds.top,bounds.width,bounds.height);                     
-                    break;
-                         
-                case "repeat-y":
-                    this.drawbackgroundRepeatY(ctx,image,bgp,bounds.left,bounds.top,bounds.width,bounds.height);                                             
-                    break;
-                          
-                case "no-repeat":
-                    /*
-                    this.drawBackgroundRepeat(
-                        ctx,
-                        image,
-                        bgp.left+bounds.left, // sx
-                        bgp.top+bounds.top, // sy
-                        Math.min(bounds.width,image.width),
-                        Math.min(bounds.height,image.height),
-                        bounds.left,
-                        bounds.top
-                        );*/
-                            
-      
-                    // console.log($(el).css('background-image'));
-                    var bgw = bounds.width-bgp.left,
-                    bgh = bounds.height-bgp.top,
-                    bgsx = bgp.left,
-                    bgsy = bgp.top,
-                    bgdx = bgp.left+bounds.left,
-                    bgdy = bgp.top+bounds.top;
-
-                    //
-                    //     bgw = Math.min(bgw,image.width);
-                    //  bgh = Math.min(bgh,image.height);     
-                    
-                    if (bgsx<0){
-                        bgsx = Math.abs(bgsx);
-                        bgdx += bgsx; 
-                        bgw = Math.min(bounds.width,image.width-bgsx);
-                    }else{
-                        bgw = Math.min(bgw,image.width);
-                        bgsx = 0;
-                    }
-                           
-                    if (bgsy<0){
-                        bgsy = Math.abs(bgsy);
-                        bgdy += bgsy; 
-                        // bgh = bgh-bgsy;
-                        bgh = Math.min(bounds.height,image.height-bgsy);
-                    }else{
-                        bgh = Math.min(bgh,image.height); 
-                        bgsy = 0;
-                    }    
-    
-                  
-                    //   bgh = Math.abs(bgh);
-                    //   bgw = Math.abs(bgw);
-                    if (bgh>0 && bgw > 0){        
-                        this.drawImage(
-                            ctx,
-                            image,
-                            bgsx, // source X : 0 
-                            bgsy, // source Y : 1695
-                            bgw, // source Width : 18
-                            bgh, // source Height : 1677
-                            bgdx, // destination X :906
-                            bgdy, // destination Y : 1020
-                            bgw, // destination width : 18
-                            bgh // destination height : 1677
-                            );
-                            
-                        // ctx.drawImage(image,(bounds.left+bgp.left),(bounds.top+bgp.top));	                      
-                        break;
-                    }
-                        
-                default:
-                    var height,
-                    add;
-                        
-                              
-                    bgp.top = bgp.top-Math.ceil(bgp.top/image.height)*image.height;                
-                        
-                        
-                    for(bgy=(bounds.top+bgp.top);bgy<bounds.height+bounds.top;){  
-           
-                        
-           
-                        var h = Math.min(image.height,(bounds.height+bounds.top)-bgy);
-                           
-                            
-                        if ( Math.floor(bgy+image.height)>h+bgy){
-                            height = (h+bgy)-bgy;
-                        }else{
-                            height = image.height;
-                        }
-                        // console.log(height);
-                            
-                        if (bgy<bounds.top){
-                            add = bounds.top-bgy;
-                            bgy = bounds.top;
-                                
-                        }else{
-                            add = 0;
-                        }
-                                              
-                        this.drawbackgroundRepeatX(ctx,image,bgp,bounds.left,bgy,bounds.width,height);  
-                        if (add>0){
-                            bgp.top += add;
-                        }
-                        bgy = Math.floor(bgy+image.height)-add; 
-                    }
-                    break;
-                        
-					
-            }	
-        }else{
-                    
-            this.log("Error loading background:" + background_image);
-        //console.log(images);
-        }
-					
-    }
-}
-   
-
-
-/*
- * Function to retrieve the actual src of a background-image
- */
-
-html2canvas.prototype.backgroundImageUrl = function(src){
-    if (src.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;            
-}
-    
-    
-/*
- * Function to retrieve background-position, both in pixels and %
- */
-    
-html2canvas.prototype.getBackgroundPosition = function(el,bounds,image){
-    // TODO add support for multi image backgrounds
-    
-    var bgpos = this.getCSS(el,"backgroundPosition").split(",")[0] || "0 0";
-   // var bgpos = $(el).css("backgroundPosition") || "0 0";
-    var bgposition = bgpos.split(" "),
-    topPos,
-    left,
-    percentage;
-
-    if (bgposition.length==1){
-        var 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);
-        
-    }
-    
-
-    
-    
-    var returnObj = {}
-    /*
-        "top": topPos,
-        "left": left
-    };*/
-    
-
-    returnObj.top = topPos;
-    returnObj.left = left;
-    
-
-          
-    return returnObj;
-         
-}
-
-
-
-    
-html2canvas.prototype.drawbackgroundRepeatY = function(ctx,image,bgp,x,y,w,h){
-        
-    var height,
-    width = Math.min(image.width,w),bgy;   
-            
-    bgp.top = bgp.top-Math.ceil(bgp.top/image.height)*image.height;                
-        
-        
-    for(bgy=(y+bgp.top);bgy<h+y;){   
-            
-         
-        if ( Math.floor(bgy+image.height)>h+y){
-            height = (h+y)-bgy;
-        }else{
-            height = image.height;
-        }
-        this.drawBackgroundRepeat(ctx,image,x+bgp.left,bgy,width,height,x,y);   
-      
-        bgy = Math.floor(bgy+image.height); 
-                              
-    } 
-}
-    
-html2canvas.prototype.drawbackgroundRepeatX = function(ctx,image,bgp,x,y,w,h){
-                           
-    var height = Math.min(image.height,h),
-    width,bgx;             
-        
-            
-    bgp.left = bgp.left-Math.ceil(bgp.left/image.width)*image.width;                
-        
-        
-    for(bgx=(x+bgp.left);bgx<w+x;){   
-
-        if (Math.floor(bgx+image.width)>w+x){
-            width = (w+x)-bgx;
-        }else{
-            width = image.width;
-        }
-                
-        this.drawBackgroundRepeat(ctx,image,bgx,(y+bgp.top),width,height,x,y);       
-             
-        bgx = Math.floor(bgx+image.width); 
-
-                                
-    } 
-}
-    
-html2canvas.prototype.drawBackgroundRepeat = function(ctx,image,x,y,width,height,elx,ely){
-    var sourceX = 0,
-    sourceY=0;
-    if (elx-x>0){
-        sourceX = elx-x;
-    }
-        
-    if (ely-y>0){
-        sourceY = ely-y;
-    }
-
-    this.drawImage(
-        ctx,
-        image,
-        sourceX, // source X
-        sourceY, // source Y 
-        width-sourceX, // source Width
-        height-sourceY, // source Height
-        x+sourceX, // destination X
-        y+sourceY, // destination Y
-        width-sourceX, // destination width
-        height-sourceY // destination height
-        );
-}

src/Border.js

@@ -1,85 +0,0 @@
-/*
- * Function to provide border details for an element
- */
-
-html2canvas.prototype.getBorderData = function(el){
-     
-    var borders = [];
-    var _ = this;
-    this.each(["top","right","bottom","left"],function(i,borderSide){
-        borders.push({
-            width: parseInt(_.getCSS(el,'border-'+borderSide+'-width'),10),
-            color: _.getCSS(el,'border-'+borderSide+'-color')
-        });
-    });
-            
-    return borders;
-            
-}
-
-html2canvas.prototype.drawBorders = function(el,ctx, bounds,clip){
-    
-    
-    var x = bounds.left;
-    var y = bounds.top;
-    var w = bounds.width;
-    var h = bounds.height;
-    
-    /*
-     *  TODO add support for different border-style's than solid   
-     */            
-    var borders = this.getBorderData(el);    
-    var _ = this;
-    
-    this.each(borders,function(borderSide,borderData){
-        if (borderData.width>0){
-            var bx = x,
-            by = y,
-            bw = w,
-            bh = h-(borders[2].width);
-            switch(borderSide){
-                case 0:
-                    // top border
-                    bh = borders[0].width;
-                    break;
-                case 1:
-                    // right border
-                    bx = x+w-(borders[1].width);
-                    bw = borders[1].width;                              
-                    break;
-                case 2:
-                    // bottom border
-                    by = (by+h)-(borders[2].width);
-                    bh = borders[2].width;
-                    break;
-                case 3:
-                    // left border
-                    bw = borders[3].width;  
-                    break;
-            }		
-                   
-            var borderBounds = {
-                left:bx,
-                top:by,
-                width: bw,
-                height:bh
-            };
-                   
-            if (clip){
-               borderBounds = _.clipBounds(borderBounds,clip);
-            }
-                   
-                   
-            if (borderBounds.width>0 && borderBounds.height>0){       
-            _.newRect(ctx,bx,by,borderBounds.width,borderBounds.height,borderData.color);
-            }
-                
-                    
-          
-        }
-                
-    });
-    
-    return borders;
-    
-};

src/Bounds.js

@@ -0,0 +1,378 @@
+/* @flow */
+'use strict';
+
+import type {Border, BorderSide} from './parsing/border';
+import type {BorderRadius} from './parsing/borderRadius';
+import type {Padding} from './parsing/padding';
+import type {Path} from './drawing/Path';
+
+import Vector from './drawing/Vector';
+import BezierCurve from './drawing/BezierCurve';
+
+const TOP = 0;
+const RIGHT = 1;
+const BOTTOM = 2;
+const LEFT = 3;
+
+const H = 0;
+const V = 1;
+
+export type BoundCurves = {
+    topLeftOuter: BezierCurve | Vector,
+    topLeftInner: BezierCurve | Vector,
+    topRightOuter: BezierCurve | Vector,
+    topRightInner: BezierCurve | Vector,
+    bottomRightOuter: BezierCurve | Vector,
+    bottomRightInner: BezierCurve | Vector,
+    bottomLeftOuter: BezierCurve | Vector,
+    bottomLeftInner: BezierCurve | Vector
+};
+
+export class Bounds {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+
+    constructor(x: number, y: number, w: number, h: number) {
+        this.left = x;
+        this.top = y;
+        this.width = w;
+        this.height = h;
+    }
+
+    static fromClientRect(clientRect: ClientRect, scrollX: number, scrollY: number): Bounds {
+        return new Bounds(
+            clientRect.left + scrollX,
+            clientRect.top + scrollY,
+            clientRect.width,
+            clientRect.height
+        );
+    }
+}
+
+export const parseBounds = (
+    node: HTMLElement | SVGSVGElement,
+    scrollX: number,
+    scrollY: number
+): Bounds => {
+    return Bounds.fromClientRect(node.getBoundingClientRect(), scrollX, scrollY);
+};
+
+export const calculatePaddingBox = (bounds: Bounds, borders: Array<Border>): Bounds => {
+    return new Bounds(
+        bounds.left + borders[LEFT].borderWidth,
+        bounds.top + borders[TOP].borderWidth,
+        bounds.width - (borders[RIGHT].borderWidth + borders[LEFT].borderWidth),
+        bounds.height - (borders[TOP].borderWidth + borders[BOTTOM].borderWidth)
+    );
+};
+
+export const calculateContentBox = (
+    bounds: Bounds,
+    padding: Padding,
+    borders: Array<Border>
+): Bounds => {
+    // TODO support percentage paddings
+    const paddingTop = padding[TOP].value;
+    const paddingRight = padding[RIGHT].value;
+    const paddingBottom = padding[BOTTOM].value;
+    const paddingLeft = padding[LEFT].value;
+
+    return new Bounds(
+        bounds.left + paddingLeft + borders[LEFT].borderWidth,
+        bounds.top + paddingTop + borders[TOP].borderWidth,
+        bounds.width -
+            (borders[RIGHT].borderWidth + borders[LEFT].borderWidth + paddingLeft + paddingRight),
+        bounds.height -
+            (borders[TOP].borderWidth + borders[BOTTOM].borderWidth + paddingTop + paddingBottom)
+    );
+};
+
+export const parseDocumentSize = (document: Document): Bounds => {
+    const body = document.body;
+    const documentElement = document.documentElement;
+
+    if (!body || !documentElement) {
+        throw new Error(__DEV__ ? `Unable to get document size` : '');
+    }
+    const width = Math.max(
+        Math.max(body.scrollWidth, documentElement.scrollWidth),
+        Math.max(body.offsetWidth, documentElement.offsetWidth),
+        Math.max(body.clientWidth, documentElement.clientWidth)
+    );
+
+    const height = Math.max(
+        Math.max(body.scrollHeight, documentElement.scrollHeight),
+        Math.max(body.offsetHeight, documentElement.offsetHeight),
+        Math.max(body.clientHeight, documentElement.clientHeight)
+    );
+
+    return new Bounds(0, 0, width, height);
+};
+
+export const parsePathForBorder = (curves: BoundCurves, borderSide: BorderSide): Path => {
+    switch (borderSide) {
+        case TOP:
+            return createPathFromCurves(
+                curves.topLeftOuter,
+                curves.topLeftInner,
+                curves.topRightOuter,
+                curves.topRightInner
+            );
+        case RIGHT:
+            return createPathFromCurves(
+                curves.topRightOuter,
+                curves.topRightInner,
+                curves.bottomRightOuter,
+                curves.bottomRightInner
+            );
+        case BOTTOM:
+            return createPathFromCurves(
+                curves.bottomRightOuter,
+                curves.bottomRightInner,
+                curves.bottomLeftOuter,
+                curves.bottomLeftInner
+            );
+        case LEFT:
+        default:
+            return createPathFromCurves(
+                curves.bottomLeftOuter,
+                curves.bottomLeftInner,
+                curves.topLeftOuter,
+                curves.topLeftInner
+            );
+    }
+};
+
+const createPathFromCurves = (
+    outer1: BezierCurve | Vector,
+    inner1: BezierCurve | Vector,
+    outer2: BezierCurve | Vector,
+    inner2: BezierCurve | Vector
+): Path => {
+    const path = [];
+    if (outer1 instanceof BezierCurve) {
+        path.push(outer1.subdivide(0.5, false));
+    } else {
+        path.push(outer1);
+    }
+
+    if (outer2 instanceof BezierCurve) {
+        path.push(outer2.subdivide(0.5, true));
+    } else {
+        path.push(outer2);
+    }
+
+    if (inner2 instanceof BezierCurve) {
+        path.push(inner2.subdivide(0.5, true).reverse());
+    } else {
+        path.push(inner2);
+    }
+
+    if (inner1 instanceof BezierCurve) {
+        path.push(inner1.subdivide(0.5, false).reverse());
+    } else {
+        path.push(inner1);
+    }
+
+    return path;
+};
+
+export const calculateBorderBoxPath = (curves: BoundCurves): Path => {
+    return [
+        curves.topLeftOuter,
+        curves.topRightOuter,
+        curves.bottomRightOuter,
+        curves.bottomLeftOuter
+    ];
+};
+
+export const calculatePaddingBoxPath = (curves: BoundCurves): Path => {
+    return [
+        curves.topLeftInner,
+        curves.topRightInner,
+        curves.bottomRightInner,
+        curves.bottomLeftInner
+    ];
+};
+
+export const parseBoundCurves = (
+    bounds: Bounds,
+    borders: Array<Border>,
+    borderRadius: Array<BorderRadius>
+): BoundCurves => {
+    const HALF_WIDTH = bounds.width / 2;
+    const HALF_HEIGHT = bounds.height / 2;
+    const tlh =
+        borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
+            ? borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width)
+            : HALF_WIDTH;
+    const tlv =
+        borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
+            ? borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height)
+            : HALF_HEIGHT;
+    const trh =
+        borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
+            ? borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width)
+            : HALF_WIDTH;
+    const trv =
+        borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
+            ? borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height)
+            : HALF_HEIGHT;
+    const brh =
+        borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
+            ? borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width)
+            : HALF_WIDTH;
+    const brv =
+        borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
+            ? borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height)
+            : HALF_HEIGHT;
+    const blh =
+        borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
+            ? borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width)
+            : HALF_WIDTH;
+    const blv =
+        borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
+            ? borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height)
+            : HALF_HEIGHT;
+
+    const topWidth = bounds.width - trh;
+    const rightHeight = bounds.height - brv;
+    const bottomWidth = bounds.width - brh;
+    const leftHeight = bounds.height - blv;
+
+    return {
+        topLeftOuter:
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(bounds.left, bounds.top, tlh, tlv, CORNER.TOP_LEFT)
+                : new Vector(bounds.left, bounds.top),
+        topLeftInner:
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + borders[LEFT].borderWidth,
+                      bounds.top + borders[TOP].borderWidth,
+                      Math.max(0, tlh - borders[LEFT].borderWidth),
+                      Math.max(0, tlv - borders[TOP].borderWidth),
+                      CORNER.TOP_LEFT
+                  )
+                : new Vector(
+                      bounds.left + borders[LEFT].borderWidth,
+                      bounds.top + borders[TOP].borderWidth
+                  ),
+        topRightOuter:
+            trh > 0 || trv > 0
+                ? getCurvePoints(bounds.left + topWidth, bounds.top, trh, trv, CORNER.TOP_RIGHT)
+                : new Vector(bounds.left + bounds.width, bounds.top),
+        topRightInner:
+            trh > 0 || trv > 0
+                ? getCurvePoints(
+                      bounds.left + Math.min(topWidth, bounds.width + borders[LEFT].borderWidth),
+                      bounds.top + borders[TOP].borderWidth,
+                      topWidth > bounds.width + borders[LEFT].borderWidth
+                          ? 0
+                          : trh - borders[LEFT].borderWidth,
+                      trv - borders[TOP].borderWidth,
+                      CORNER.TOP_RIGHT
+                  )
+                : new Vector(
+                      bounds.left + bounds.width - borders[RIGHT].borderWidth,
+                      bounds.top + borders[TOP].borderWidth
+                  ),
+        bottomRightOuter:
+            brh > 0 || brv > 0
+                ? getCurvePoints(
+                      bounds.left + bottomWidth,
+                      bounds.top + rightHeight,
+                      brh,
+                      brv,
+                      CORNER.BOTTOM_RIGHT
+                  )
+                : new Vector(bounds.left + bounds.width, bounds.top + bounds.height),
+        bottomRightInner:
+            brh > 0 || brv > 0
+                ? getCurvePoints(
+                      bounds.left + Math.min(bottomWidth, bounds.width - borders[LEFT].borderWidth),
+                      bounds.top + Math.min(rightHeight, bounds.height + borders[TOP].borderWidth),
+                      Math.max(0, brh - borders[RIGHT].borderWidth),
+                      brv - borders[BOTTOM].borderWidth,
+                      CORNER.BOTTOM_RIGHT
+                  )
+                : new Vector(
+                      bounds.left + bounds.width - borders[RIGHT].borderWidth,
+                      bounds.top + bounds.height - borders[BOTTOM].borderWidth
+                  ),
+        bottomLeftOuter:
+            blh > 0 || blv > 0
+                ? getCurvePoints(bounds.left, bounds.top + leftHeight, blh, blv, CORNER.BOTTOM_LEFT)
+                : new Vector(bounds.left, bounds.top + bounds.height),
+        bottomLeftInner:
+            blh > 0 || blv > 0
+                ? getCurvePoints(
+                      bounds.left + borders[LEFT].borderWidth,
+                      bounds.top + leftHeight,
+                      Math.max(0, blh - borders[LEFT].borderWidth),
+                      blv - borders[BOTTOM].borderWidth,
+                      CORNER.BOTTOM_LEFT
+                  )
+                : new Vector(
+                      bounds.left + borders[LEFT].borderWidth,
+                      bounds.top + bounds.height - borders[BOTTOM].borderWidth
+                  )
+    };
+};
+
+const CORNER = {
+    TOP_LEFT: 0,
+    TOP_RIGHT: 1,
+    BOTTOM_RIGHT: 2,
+    BOTTOM_LEFT: 3
+};
+
+type Corner = $Values<typeof CORNER>;
+
+const getCurvePoints = (
+    x: number,
+    y: number,
+    r1: number,
+    r2: number,
+    position: Corner
+): BezierCurve => {
+    const kappa = 4 * ((Math.sqrt(2) - 1) / 3);
+    const ox = r1 * kappa; // control point offset horizontal
+    const oy = r2 * kappa; // control point offset vertical
+    const xm = x + r1; // x-middle
+    const ym = y + r2; // y-middle
+
+    switch (position) {
+        case CORNER.TOP_LEFT:
+            return new BezierCurve(
+                new Vector(x, ym),
+                new Vector(x, ym - oy),
+                new Vector(xm - ox, y),
+                new Vector(xm, y)
+            );
+        case CORNER.TOP_RIGHT:
+            return new BezierCurve(
+                new Vector(x, y),
+                new Vector(x + ox, y),
+                new Vector(xm, ym - oy),
+                new Vector(xm, ym)
+            );
+        case CORNER.BOTTOM_RIGHT:
+            return new BezierCurve(
+                new Vector(xm, y),
+                new Vector(xm, y + oy),
+                new Vector(x + ox, ym),
+                new Vector(x, ym)
+            );
+        case CORNER.BOTTOM_LEFT:
+        default:
+            return new BezierCurve(
+                new Vector(xm, ym),
+                new Vector(xm - ox, ym),
+                new Vector(x, y + oy),
+                new Vector(x, y)
+            );
+    }
+};

src/Clone.js

@@ -0,0 +1,591 @@
+/* @flow */
+'use strict';
+import type {Bounds} from './Bounds';
+import type {Options} from './index';
+import type Logger from './Logger';
+
+import {parseBounds} from './Bounds';
+import {Proxy} from './Proxy';
+import ResourceLoader from './ResourceLoader';
+import {copyCSSStyles} from './Util';
+import {parseBackgroundImage} from './parsing/background';
+import CanvasRenderer from './renderer/CanvasRenderer';
+
+const IGNORE_ATTRIBUTE = 'data-html2canvas-ignore';
+
+export class DocumentCloner {
+    scrolledElements: Array<[HTMLElement, number, number]>;
+    referenceElement: HTMLElement;
+    clonedReferenceElement: HTMLElement;
+    documentElement: HTMLElement;
+    resourceLoader: ResourceLoader;
+    logger: Logger;
+    options: Options;
+    inlineImages: boolean;
+    copyStyles: boolean;
+    renderer: (element: HTMLElement, options: Options, logger: Logger) => Promise<*>;
+
+    constructor(
+        element: HTMLElement,
+        options: Options,
+        logger: Logger,
+        copyInline: boolean,
+        renderer: (element: HTMLElement, options: Options, logger: Logger) => Promise<*>
+    ) {
+        this.referenceElement = element;
+        this.scrolledElements = [];
+        this.copyStyles = copyInline;
+        this.inlineImages = copyInline;
+        this.logger = logger;
+        this.options = options;
+        this.renderer = renderer;
+        this.resourceLoader = new ResourceLoader(options, logger, window);
+        // $FlowFixMe
+        this.documentElement = this.cloneNode(element.ownerDocument.documentElement);
+    }
+
+    inlineAllImages(node: ?HTMLElement) {
+        if (this.inlineImages && node) {
+            const style = node.style;
+            Promise.all(
+                parseBackgroundImage(style.backgroundImage).map(backgroundImage => {
+                    if (backgroundImage.method === 'url') {
+                        return this.resourceLoader
+                            .inlineImage(backgroundImage.args[0])
+                            .then(
+                                img =>
+                                    img && typeof img.src === 'string'
+                                        ? `url("${img.src}")`
+                                        : 'none'
+                            )
+                            .catch(e => {
+                                if (__DEV__) {
+                                    this.logger.log(`Unable to load image`, e);
+                                }
+                            });
+                    }
+                    return Promise.resolve(
+                        `${backgroundImage.prefix}${backgroundImage.method}(${backgroundImage.args.join(
+                            ','
+                        )})`
+                    );
+                })
+            ).then(backgroundImages => {
+                if (backgroundImages.length > 1) {
+                    // TODO Multiple backgrounds somehow broken in Chrome
+                    style.backgroundColor = '';
+                }
+                style.backgroundImage = backgroundImages.join(',');
+            });
+
+            if (node instanceof HTMLImageElement) {
+                this.resourceLoader
+                    .inlineImage(node.src)
+                    .then(img => {
+                        if (img && node instanceof HTMLImageElement && node.parentNode) {
+                            const parentNode = node.parentNode;
+                            const clonedChild = copyCSSStyles(node.style, img.cloneNode(false));
+                            parentNode.replaceChild(clonedChild, node);
+                        }
+                    })
+                    .catch(e => {
+                        if (__DEV__) {
+                            this.logger.log(`Unable to load image`, e);
+                        }
+                    });
+            }
+        }
+    }
+
+    inlineFonts(document: Document): Promise<void> {
+        return Promise.all(
+            Array.from(document.styleSheets).map(sheet => {
+                if (sheet.href) {
+                    return fetch(sheet.href)
+                        .then(res => res.text())
+                        .then(text => createStyleSheetFontsFromText(text, sheet.href))
+                        .catch(e => {
+                            if (__DEV__) {
+                                this.logger.log(`Unable to load stylesheet`, e);
+                            }
+                            return [];
+                        });
+                }
+                return getSheetFonts(sheet, document);
+            })
+        )
+            .then(fonts => fonts.reduce((acc, font) => acc.concat(font), []))
+            .then(fonts =>
+                Promise.all(
+                    fonts.map(font =>
+                        fetch(font.formats[0].src)
+                            .then(response => response.blob())
+                            .then(
+                                blob =>
+                                    new Promise((resolve, reject) => {
+                                        const reader = new FileReader();
+                                        reader.onerror = reject;
+                                        reader.onload = () => {
+                                            // $FlowFixMe
+                                            const result: string = reader.result;
+                                            resolve(result);
+                                        };
+                                        reader.readAsDataURL(blob);
+                                    })
+                            )
+                            .then(dataUri => {
+                                font.fontFace.setProperty('src', `url("${dataUri}")`);
+                                return `@font-face {${font.fontFace.cssText} `;
+                            })
+                    )
+                )
+            )
+            .then(fontCss => {
+                const style = document.createElement('style');
+                style.textContent = fontCss.join('\n');
+                this.documentElement.appendChild(style);
+            });
+    }
+
+    createElementClone(node: Node) {
+        if (this.copyStyles && node instanceof HTMLCanvasElement) {
+            const img = node.ownerDocument.createElement('img');
+            try {
+                img.src = node.toDataURL();
+                return img;
+            } catch (e) {
+                if (__DEV__) {
+                    this.logger.log(`Unable to clone canvas contents, canvas is tainted`);
+                }
+            }
+        }
+
+        if (node instanceof HTMLIFrameElement) {
+            const tempIframe = node.cloneNode(false);
+            const iframeKey = generateIframeKey();
+            tempIframe.setAttribute('data-html2canvas-internal-iframe-key', iframeKey);
+
+            const {width, height} = parseBounds(node, 0, 0);
+
+            this.resourceLoader.cache[iframeKey] = getIframeDocumentElement(node, this.options)
+                .then(documentElement => {
+                    return this.renderer(
+                        documentElement,
+                        {
+                            async: this.options.async,
+                            allowTaint: this.options.allowTaint,
+                            backgroundColor: '#ffffff',
+                            canvas: null,
+                            imageTimeout: this.options.imageTimeout,
+                            proxy: this.options.proxy,
+                            removeContainer: this.options.removeContainer,
+                            scale: this.options.scale,
+                            foreignObjectRendering: this.options.foreignObjectRendering,
+                            target: new CanvasRenderer(),
+                            width,
+                            height,
+                            x: 0,
+                            y: 0,
+                            windowWidth: documentElement.ownerDocument.defaultView.innerWidth,
+                            windowHeight: documentElement.ownerDocument.defaultView.innerHeight,
+                            scrollX: documentElement.ownerDocument.defaultView.pageXOffset,
+                            scrollY: documentElement.ownerDocument.defaultView.pageYOffset
+                        },
+                        this.logger.child(iframeKey)
+                    );
+                })
+                .then(
+                    canvas =>
+                        new Promise((resolve, reject) => {
+                            const iframeCanvas = document.createElement('img');
+                            iframeCanvas.onload = () => resolve(canvas);
+                            iframeCanvas.onerror = reject;
+                            iframeCanvas.src = canvas.toDataURL();
+                            if (tempIframe.parentNode) {
+                                tempIframe.parentNode.replaceChild(
+                                    copyCSSStyles(
+                                        node.ownerDocument.defaultView.getComputedStyle(node),
+                                        iframeCanvas
+                                    ),
+                                    tempIframe
+                                );
+                            }
+                        })
+                );
+            return tempIframe;
+        }
+
+        return node.cloneNode(false);
+    }
+
+    cloneNode(node: Node): Node {
+        const clone =
+            node.nodeType === Node.TEXT_NODE
+                ? document.createTextNode(node.nodeValue)
+                : this.createElementClone(node);
+
+        const window = node.ownerDocument.defaultView;
+
+        if (this.referenceElement === node && clone instanceof window.HTMLElement) {
+            this.clonedReferenceElement = clone;
+        }
+
+        if (clone instanceof window.HTMLBodyElement) {
+            createPseudoHideStyles(clone);
+        }
+
+        for (let child = node.firstChild; child; child = child.nextSibling) {
+            if (
+                child.nodeType !== Node.ELEMENT_NODE ||
+                // $FlowFixMe
+                (child.nodeName !== 'SCRIPT' && !child.hasAttribute(IGNORE_ATTRIBUTE))
+            ) {
+                if (!this.copyStyles || child.nodeName !== 'STYLE') {
+                    clone.appendChild(this.cloneNode(child));
+                }
+            }
+        }
+        if (node instanceof window.HTMLElement && clone instanceof window.HTMLElement) {
+            this.inlineAllImages(inlinePseudoElement(node, clone, PSEUDO_BEFORE));
+            this.inlineAllImages(inlinePseudoElement(node, clone, PSEUDO_AFTER));
+            if (this.copyStyles && !(node instanceof HTMLIFrameElement)) {
+                copyCSSStyles(node.ownerDocument.defaultView.getComputedStyle(node), clone);
+            }
+            this.inlineAllImages(clone);
+            if (node.scrollTop !== 0 || node.scrollLeft !== 0) {
+                this.scrolledElements.push([clone, node.scrollLeft, node.scrollTop]);
+            }
+            switch (node.nodeName) {
+                case 'CANVAS':
+                    if (!this.copyStyles) {
+                        cloneCanvasContents(node, clone);
+                    }
+                    break;
+                case 'TEXTAREA':
+                case 'SELECT':
+                    clone.value = node.value;
+                    break;
+            }
+        }
+        return clone;
+    }
+}
+
+type Font = {
+    src: string,
+    format: string
+};
+
+type FontFamily = {
+    formats: Array<Font>,
+    fontFace: CSSStyleDeclaration
+};
+
+const getSheetFonts = (sheet: StyleSheet, document: Document): Array<FontFamily> => {
+    // $FlowFixMe
+    return (sheet.cssRules ? Array.from(sheet.cssRules) : [])
+        .filter(rule => rule.type === CSSRule.FONT_FACE_RULE)
+        .map(rule => {
+            const src = parseBackgroundImage(rule.style.getPropertyValue('src'));
+            const formats = [];
+            for (let i = 0; i < src.length; i++) {
+                if (src[i].method === 'url' && src[i + 1] && src[i + 1].method === 'format') {
+                    const a = document.createElement('a');
+                    a.href = src[i].args[0];
+                    if (document.body) {
+                        document.body.appendChild(a);
+                    }
+
+                    const font = {
+                        src: a.href,
+                        format: src[i + 1].args[0]
+                    };
+                    formats.push(font);
+                }
+            }
+
+            return {
+                // TODO select correct format for browser),
+
+                formats: formats.filter(font => /^woff/i.test(font.format)),
+                fontFace: rule.style
+            };
+        })
+        .filter(font => font.formats.length);
+};
+
+const createStyleSheetFontsFromText = (text: string, baseHref: string): Array<FontFamily> => {
+    const doc = document.implementation.createHTMLDocument('');
+    const base = document.createElement('base');
+    // $FlowFixMe
+    base.href = baseHref;
+    const style = document.createElement('style');
+
+    style.textContent = text;
+    if (doc.head) {
+        doc.head.appendChild(base);
+    }
+    if (doc.body) {
+        doc.body.appendChild(style);
+    }
+
+    return style.sheet ? getSheetFonts(style.sheet, doc) : [];
+};
+
+const restoreOwnerScroll = (ownerDocument: Document, x: number, y: number) => {
+    if (
+        ownerDocument.defaultView &&
+        (x !== ownerDocument.defaultView.pageXOffset || y !== ownerDocument.defaultView.pageYOffset)
+    ) {
+        ownerDocument.defaultView.scrollTo(x, y);
+    }
+};
+
+const cloneCanvasContents = (canvas: HTMLCanvasElement, clonedCanvas: HTMLCanvasElement) => {
+    try {
+        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) {}
+};
+
+const inlinePseudoElement = (
+    node: HTMLElement,
+    clone: HTMLElement,
+    pseudoElt: ':before' | ':after'
+): ?HTMLElement => {
+    const style = node.ownerDocument.defaultView.getComputedStyle(node, pseudoElt);
+    if (
+        !style ||
+        !style.content ||
+        style.content === 'none' ||
+        style.content === '-moz-alt-content' ||
+        style.display === 'none'
+    ) {
+        return;
+    }
+
+    const content = stripQuotes(style.content);
+    const image = content.match(URL_REGEXP);
+    const anonymousReplacedElement = clone.ownerDocument.createElement(
+        image ? 'img' : 'html2canvaspseudoelement'
+    );
+    if (image) {
+        // $FlowFixMe
+        anonymousReplacedElement.src = stripQuotes(image[1]);
+    } else {
+        anonymousReplacedElement.textContent = content;
+    }
+
+    copyCSSStyles(style, anonymousReplacedElement);
+
+    anonymousReplacedElement.className = `${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE} ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
+    clone.className +=
+        pseudoElt === PSEUDO_BEFORE
+            ? ` ${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}`
+            : ` ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
+    if (pseudoElt === PSEUDO_BEFORE) {
+        clone.insertBefore(anonymousReplacedElement, clone.firstChild);
+    } else {
+        clone.appendChild(anonymousReplacedElement);
+    }
+
+    return anonymousReplacedElement;
+};
+
+const stripQuotes = (content: string): string => {
+    const first = content.substr(0, 1);
+    return first === content.substr(content.length - 1) && first.match(/['"]/)
+        ? content.substr(1, content.length - 2)
+        : content;
+};
+
+const URL_REGEXP = /^url\((.+)\)$/i;
+const PSEUDO_BEFORE = ':before';
+const PSEUDO_AFTER = ':after';
+const PSEUDO_HIDE_ELEMENT_CLASS_BEFORE = '___html2canvas___pseudoelement_before';
+const PSEUDO_HIDE_ELEMENT_CLASS_AFTER = '___html2canvas___pseudoelement_after';
+
+const PSEUDO_HIDE_ELEMENT_STYLE = `{
+    content: "" !important;
+    display: none !important;
+}`;
+
+const createPseudoHideStyles = (body: HTMLElement) => {
+    createStyles(
+        body,
+        `.${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}${PSEUDO_BEFORE}${PSEUDO_HIDE_ELEMENT_STYLE}
+         .${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}${PSEUDO_AFTER}${PSEUDO_HIDE_ELEMENT_STYLE}`
+    );
+};
+
+const createStyles = (body: HTMLElement, styles) => {
+    const style = body.ownerDocument.createElement('style');
+    style.innerHTML = styles;
+    body.appendChild(style);
+};
+
+const initNode = ([element, x, y]: [HTMLElement, number, number]) => {
+    element.scrollLeft = x;
+    element.scrollTop = y;
+};
+
+const generateIframeKey = (): string =>
+    Math.ceil(Date.now() + Math.random() * 10000000).toString(16);
+
+const DATA_URI_REGEXP = /^data:text\/(.+);(base64)?,(.*)$/i;
+
+const getIframeDocumentElement = (
+    node: HTMLIFrameElement,
+    options: Options
+): Promise<HTMLElement> => {
+    try {
+        return Promise.resolve(node.contentWindow.document.documentElement);
+    } catch (e) {
+        return options.proxy
+            ? Proxy(node.src, options)
+                  .then(html => {
+                      const match = html.match(DATA_URI_REGEXP);
+                      if (!match) {
+                          return Promise.reject();
+                      }
+
+                      return match[2] === 'base64'
+                          ? window.atob(decodeURIComponent(match[3]))
+                          : decodeURIComponent(match[3]);
+                  })
+                  .then(html =>
+                      createIframeContainer(
+                          node.ownerDocument,
+                          parseBounds(node, 0, 0)
+                      ).then(cloneIframeContainer => {
+                          const cloneWindow = cloneIframeContainer.contentWindow;
+                          const documentClone = cloneWindow.document;
+
+                          documentClone.open();
+                          documentClone.write(html);
+                          const iframeLoad = iframeLoader(cloneIframeContainer).then(
+                              () => documentClone.documentElement
+                          );
+
+                          documentClone.close();
+                          return iframeLoad;
+                      })
+                  )
+            : Promise.reject();
+    }
+};
+
+const createIframeContainer = (
+    ownerDocument: Document,
+    bounds: Bounds
+): Promise<HTMLIFrameElement> => {
+    const cloneIframeContainer = ownerDocument.createElement('iframe');
+
+    cloneIframeContainer.className = 'html2canvas-container';
+    cloneIframeContainer.style.visibility = 'hidden';
+    cloneIframeContainer.style.position = 'fixed';
+    cloneIframeContainer.style.left = '-10000px';
+    cloneIframeContainer.style.top = '0px';
+    cloneIframeContainer.style.border = '0';
+    cloneIframeContainer.width = bounds.width.toString();
+    cloneIframeContainer.height = bounds.height.toString();
+    cloneIframeContainer.scrolling = 'no'; // ios won't scroll without it
+    cloneIframeContainer.setAttribute(IGNORE_ATTRIBUTE, 'true');
+    if (!ownerDocument.body) {
+        return Promise.reject(
+            __DEV__ ? `Body element not found in Document that is getting rendered` : ''
+        );
+    }
+
+    ownerDocument.body.appendChild(cloneIframeContainer);
+
+    return Promise.resolve(cloneIframeContainer);
+};
+
+const iframeLoader = (cloneIframeContainer: HTMLIFrameElement): Promise<HTMLIFrameElement> => {
+    const cloneWindow = cloneIframeContainer.contentWindow;
+    const documentClone = cloneWindow.document;
+
+    return new Promise((resolve, reject) => {
+        cloneWindow.onload = cloneIframeContainer.onload = documentClone.onreadystatechange = () => {
+            const interval = setInterval(() => {
+                if (
+                    documentClone.body.childNodes.length > 0 &&
+                    documentClone.readyState === 'complete'
+                ) {
+                    clearInterval(interval);
+                    resolve(cloneIframeContainer);
+                }
+            }, 50);
+        };
+    });
+};
+
+export const cloneWindow = (
+    ownerDocument: Document,
+    bounds: Bounds,
+    referenceElement: HTMLElement,
+    options: Options,
+    logger: Logger,
+    renderer: (element: HTMLElement, options: Options, logger: Logger) => Promise<*>
+): Promise<[HTMLIFrameElement, HTMLElement, ResourceLoader]> => {
+    const cloner = new DocumentCloner(referenceElement, options, logger, false, renderer);
+    const scrollX = ownerDocument.defaultView.pageXOffset;
+    const scrollY = ownerDocument.defaultView.pageYOffset;
+
+    return createIframeContainer(ownerDocument, bounds).then(cloneIframeContainer => {
+        const cloneWindow = cloneIframeContainer.contentWindow;
+        const documentClone = cloneWindow.document;
+
+        /* 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
+             */
+
+        const iframeLoad = iframeLoader(cloneIframeContainer).then(() => {
+            cloner.scrolledElements.forEach(initNode);
+            cloneWindow.scrollTo(bounds.left, bounds.top);
+            if (
+                /(iPad|iPhone|iPod)/g.test(navigator.userAgent) &&
+                (cloneWindow.scrollY !== bounds.top || cloneWindow.scrollX !== bounds.left)
+            ) {
+                documentClone.documentElement.style.top = -bounds.top + 'px';
+                documentClone.documentElement.style.left = -bounds.left + 'px';
+                documentClone.documentElement.style.position = 'absolute';
+            }
+            return cloner.clonedReferenceElement instanceof cloneWindow.HTMLElement ||
+            cloner.clonedReferenceElement instanceof ownerDocument.defaultView.HTMLElement ||
+            cloner.clonedReferenceElement instanceof HTMLElement
+                ? Promise.resolve([
+                      cloneIframeContainer,
+                      cloner.clonedReferenceElement,
+                      cloner.resourceLoader
+                  ])
+                : Promise.reject(
+                      __DEV__
+                          ? `Error finding the ${referenceElement.nodeName} in the cloned document`
+                          : ''
+                  );
+        });
+
+        documentClone.open();
+        documentClone.write('<!DOCTYPE html><html></html>');
+        // Chrome scrolls the parent document for some reason after the write to the cloned window???
+        restoreOwnerScroll(referenceElement.ownerDocument, scrollX, scrollY);
+        documentClone.replaceChild(
+            documentClone.adoptNode(cloner.documentElement),
+            documentClone.documentElement
+        );
+        documentClone.close();
+
+        return iframeLoad;
+    });
+};

src/Color.js

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

src/Core.js

@@ -1,260 +0,0 @@
-/**
- * Creates a render of the element el
- * @constructor
- */
-
-function html2canvas(el, userOptions) {
-
-    var options = userOptions || {};
-  
-    
-    this.opts = this.extendObj(options, {          
-        logging: false,
-        ready: function (stack) {
-            document.body.appendChild(stack.canvas);
-        },
-        storageReady: function(obj){
-            obj.Renderer(obj.contextStacks);
-        },
-        iframeDefault: "default",
-        flashCanvasPath: "http://html2canvas.hertzen.com/external/flashcanvas/flashcanvas.js",
-        renderViewport: false,
-        reorderZ: true,
-        throttle:true,
-        letterRendering:false,
-        proxyUrl: null,
-        logger: function(a){
-            if (window.console && window.console.log){
-                window.console.log(a);     
-            }else{
-                alert(a);
-            }
-        },
-        canvasWidth:0,
-        canvasHeight:0,
-        useOverflow: true,
-        renderOrder: "canvas flash html"
-    });
-
-    this.element = el;
-    
-    var imageLoaded,
-    canvas,
-    ctx,
-    bgx,
-    bgy,
-    image;
-    this.imagesLoaded = 0;
-    this.images = [];
-    this.fontData = [];
-    this.numDraws = 0;
-    this.contextStacks = [];
-    this.ignoreElements = "IFRAME|OBJECT|PARAM";
-    this.needReorder = false;
-    this.blockElements = new RegExp("(BR|PARAM)");
-    this.pageOrigin = window.location.protocol + window.location.host;
-    this.queue = [];
-
-    this.ignoreRe = new RegExp("("+this.ignoreElements+")");
-    
-    
-    this.support = {
-        rangeBounds: false
-        
-    };
-    
-    // Test whether we can use ranges to measure bounding boxes
-    // Opera doesn't provide valid bounds.height/bottom even though it supports the method.
-
-    
-    if (document.createRange){
-        var r = document.createRange();
-        //this.support.rangeBounds = new Boolean(r.getBoundingClientRect);
-        if (r.getBoundingClientRect){
-            var testElement = document.createElement('boundtest');
-            testElement.style.height = "123px";
-            testElement.style.display = "block";
-            document.getElementsByTagName('body')[0].appendChild(testElement);
-            
-            r.selectNode(testElement);
-            var rangeBounds = r.getBoundingClientRect();
-            var rangeHeight = rangeBounds.height;
-
-            if (rangeHeight==123){
-                this.support.rangeBounds = true;
-            }
-            document.getElementsByTagName('body')[0].removeChild(testElement);
-
-            
-        }
-        
-    }
-  
-   
-    
-    // Start script
-    this.init();
-    
-    return this;
-}
-	
-        
-        
-                                
-html2canvas.prototype.init = function(){
-     
-    var _ = this;
-    /*
-    this.ctx = new this.stackingContext($(document).width(),$(document).height());    
-              
-    if (!this.ctx){
-        // canvas not initialized, let's kill it here
-        this.log('Canvas not available');
-        return;
-    }
-       
-    this.canvas = this.ctx.canvas;
-        */
-    this.log('Finding background-images');
-        
-    this.images.push('start');
-    
-    this.getImages(this.element);
-            
-    this.log('Finding images');
-    // console.log(this.element.ownerDocument);
-   
-    
-   
-    this.each(this.element.ownerDocument.images,function(i,e){
-        _.preloadImage(_.getAttr(e,'src'));
-    });
-    this.images.splice(0,1);  
-    //  console.log(this.images);   
-    if (this.images.length == 0){
-        this.start();
-    }  
-        
-        
-}
-
-/*
- * Check whether all assets have been loaded and start traversing the DOM
- */
- 
-html2canvas.prototype.start = function(){
-    //     console.log(this.images);
-    if (this.images.length == 0 || this.imagesLoaded==this.images.length/2){    
-        
-        this.log('Finished loading '+this.imagesLoaded+' images, Started parsing');
-          this.bodyOverflow = document.getElementsByTagName('body')[0].style.overflow;
-           document.getElementsByTagName('body')[0].style.overflow = "hidden";
-        var rootStack = new this.storageContext($(document).width(),$(document).height());  
-        rootStack.opacity = this.getCSS(this.element,"opacity");
-        var stack = this.newElement(this.element,rootStack);
-        
-        
-        this.parseElement(this.element,stack);  
-    }
-        
-}
-
-
-html2canvas.prototype.stackingContext = function(width,height){
-    this.canvas = document.createElement('canvas');
-        
-
-    this.canvas.width = width;
-    this.canvas.height = width;
-    
-    if (!this.canvas.getContext){
-           
-    // TODO include Flashcanvas
-    /*
-        var script = document.createElement('script');
-        script.type = "text/javascript";
-        script.src = this.opts.flashCanvasPath;
-        var s = document.getElementsByTagName('script')[0]; 
-        s.parentNode.insertBefore(script, s);
-
-        if (typeof FlashCanvas != "undefined") {
-                
-            FlashCanvas.initElement(this.canvas);
-            this.ctx = this.canvas.getContext('2d');
-        }	*/
-            
-    }else{
-        this.ctx = this.canvas.getContext('2d');
-    }    
-    
-    // set common settings for canvas
-    this.ctx.textBaseline = "bottom";
-    
-    return this.ctx;
-          
-}
-
-html2canvas.prototype.storageContext = function(width,height){
-    this.storage = [];
-    this.width = width;
-    this.height = height;
-    //this.zIndex;
-    
-    // todo simplify this whole section
-    this.fillRect = function(x, y, w, h){
-        this.storage.push(
-        {
-            type: "function",
-            name:"fillRect",
-            arguments:[x,y,w,h]            
-        });
-        
-    };
-    
-
-        
-    this.drawImage = function(image,sx,sy,sw,sh,dx,dy,dw,dh){     
-        this.storage.push(
-        {
-            type: "function",
-            name:"drawImage",
-            arguments:[image,sx,sy,sw,sh,dx,dy,dw,dh]            
-        });
-    };
-    
-    this.fillText = function(currentText,x,y){
-        
-        this.storage.push(
-        {
-            type: "function",
-            name:"fillText",
-            arguments:[currentText,x,y]            
-        });      
-    }  
-    
-    return this;
-    
-}
-
-
-/*
-* Finished rendering, send callback
-*/ 
-
-html2canvas.prototype.finish = function(){
-    
-    this.log("Finished rendering");
-    
-    document.getElementsByTagName('body')[0].style.overflow = this.bodyOverflow;
-    /*
-    if (this.opts.renderViewport){
-        // let's crop it to viewport only then
-        var newCanvas = document.createElement('canvas');
-        var newctx = newCanvas.getContext('2d');
-        newCanvas.width = window.innerWidth;
-        newCanvas.height = window.innerHeight;
-            
-    }*/
-    this.opts.ready(this);          
-}
-

src/Draw.js

@@ -1,226 +0,0 @@
-html2canvas.prototype.newElement = function(el,parentStack){
-		
-    var bounds = this.getBounds(el);    
-            
-    var x = bounds.left;
-    var y = bounds.top;
-    var w = bounds.width;
-    var h = bounds.height;   
-    var _ = this,
-    image;       
-    var bgcolor = this.getCSS(el,"background-color");
-
-    var cssPosition = this.getCSS(el,"position");
-    parentStack = parentStack || {};
-
-    //var zindex = this.formatZ(this.getCSS(el,"zIndex"),cssPosition,parentStack.zIndex,el.parentNode);
-    
-    var zindex = this.setZ(this.getCSS(el,"zIndex"),cssPosition,parentStack.zIndex,el.parentNode);
-    
-    //console.log(el.nodeName+":"+zindex+":"+this.getCSS(el,"position")+":"+this.numDraws+":"+this.getCSS(el,"z-index"))
-    
-    var opacity = this.getCSS(el,"opacity");   
-
-
-    var stack = {
-        ctx: new this.storageContext(),
-        zIndex: zindex,
-        opacity: opacity*parentStack.opacity,
-        cssPosition: cssPosition
-    };
-    
-    
- 
-    // TODO correct overflow for absolute content residing under a static position
-    if (parentStack.clip){
-        stack.clip = $.extend({}, parentStack.clip);
-        //stack.clip = parentStack.clip;
-        stack.clip.height = stack.clip.height - parentStack.borders[2].width;
-    } 
- 
- 
-    if (this.opts.useOverflow && /(hidden|scroll|auto)/.test(this.getCSS(el,"overflow")) && !/(BODY)/i.test(el.nodeName)){
-        if (stack.clip){
-            stack.clip = this.clipBounds(stack.clip,bounds);
-        }else{
-            stack.clip = bounds;
-        }
-        
-
-
-    }   
-     /*  
-    var stackLength =  this.contextStacks.push(stack);
-        
-    var ctx = this.contextStacks[stackLength-1].ctx; 
-*/
-
-    var stackLength =  zindex.children.push(stack);
-        
-    var ctx = zindex.children[stackLength-1].ctx; 
-    
-    this.setContextVariable(ctx,"globalAlpha",stack.opacity);  
-
-    // draw element borders
-    var borders = this.drawBorders(el, ctx, bounds);
-    stack.borders = borders;
-    
-    // let's modify clip area for child elements, so borders dont get overwritten
-    
-    /*
-    if (stack.clip){
-        stack.clip.width = stack.clip.width-(borders[1].width); 
-        stack.clip.height = stack.clip.height-(borders[2].width); 
-    }
-     */
-    if (this.ignoreRe.test(el.nodeName) && this.opts.iframeDefault != "transparent"){ 
-        if (this.opts.iframeDefault=="default"){
-            bgcolor = "#efefef";
-        /*
-             * TODO write X over frame
-             */
-        }else{
-            bgcolor = this.opts.iframeDefault;           
-        }
-    }
-               
-    // draw base element bgcolor   
-
-    var bgbounds = {
-        left: x+borders[3].width,
-        top: y+borders[0].width,
-        width: w-(borders[1].width+borders[3].width),
-        height: h-(borders[0].width+borders[2].width)
-    };
-
-    //if (this.withinBounds(stack.clip,bgbounds)){  
-        
-    if (stack.clip){
-        bgbounds = this.clipBounds(bgbounds,stack.clip);
-        
-    //}    
-    
-    }
-    
-    if (bgbounds.height>0 && bgbounds.width>0){
-        this.newRect(
-            ctx,
-            bgbounds.left,
-            bgbounds.top,
-            bgbounds.width,
-            bgbounds.height,
-            bgcolor
-            );
-           
-        this.drawBackground(el,bgbounds,ctx);     
-    }
-        
-    switch(el.nodeName){
-        case "IMG":
-            image = _.loadImage(_.getAttr(el,'src'));
-            if (image){
-                //   console.log(image.width);
-                this.drawImage(
-                    ctx,
-                    image,
-                    0, //sx
-                    0, //sy
-                    image.width, //sw
-                    image.height, //sh
-                    x+parseInt(_.getCSS(el,'padding-left'),10) + borders[3].width, //dx
-                    y+parseInt(_.getCSS(el,'padding-top'),10) + borders[0].width, // dy
-                    bounds.width - (borders[1].width + borders[3].width + parseInt(_.getCSS(el,'padding-left'),10) + parseInt(_.getCSS(el,'padding-right'),10)), //dw
-                    bounds.height - (borders[0].width + borders[2].width + parseInt(_.getCSS(el,'padding-top'),10) + parseInt(_.getCSS(el,'padding-bottom'),10)) //dh       
-                    );
-           
-            }else {
-                this.log("Error loading <img>:" + _.getAttr(el,'src'));
-            }
-            break;
-        case "INPUT":
-            // TODO add all relevant type's, i.e. HTML5 new stuff
-            // todo add support for placeholder attribute for browsers which support it
-            if (/^(text|url|email|submit|button|reset)$/.test(el.type) && el.value.length > 0){
-                
-                this.renderFormValue(el,bounds,stack);
-                
-
-                /*
-                 this just doesn't work well enough
-                
-                this.newText(el,{
-                    nodeValue:el.value,
-                    splitText: function(){
-                        return this;
-                    },
-                    formValue:true
-                },stack);
-                 */
-            }
-            break;
-        case "TEXTAREA":
-            if (el.value.length > 0){
-            this.renderFormValue(el,bounds,stack);
-            }
-            break;
-                    case "SELECT":
-                         if (el.options.length > 0){
-            this.renderFormValue(el,bounds,stack);
-            }
-            break;
-        case "LI":
-            this.drawListItem(el,stack,bgbounds);
-            break;
-    }
-    
-         
-
-   // return this.contextStacks[stackLength-1];
-   return zindex.children[stackLength-1];
-			
-				
-}
-
-
-
-
-
-
-/*
-* Function to draw the text on the canvas
-*/ 
-               
-html2canvas.prototype.printText = function(currentText,x,y,ctx){
-    if (this.trim(currentText).length>0){	
-        
-        ctx.fillText(currentText,x,y);
-        this.numDraws++;
-    }           
-}
-
-
-// Drawing a rectangle 								
-html2canvas.prototype.newRect = function(ctx,x,y,w,h,bgcolor){
-    
-    if (bgcolor!="transparent"){
-        this.setContextVariable(ctx,"fillStyle",bgcolor);
-        ctx.fillRect (x, y, w, h);
-        this.numDraws++;
-    }
-}
-
-html2canvas.prototype.drawImage = function(ctx,image,sx,sy,sw,sh,dx,dy,dw,dh){
-    ctx.drawImage(
-        image,
-        sx, //sx
-        sy, //sy
-        sw, //sw
-        sh, //sh
-        dx, //dx
-        dy, // dy
-        dw, //dw
-        dh //dh      
-        );
-    this.numDraws++; 
-    
-}

src/Feature.js

@@ -0,0 +1,179 @@
+/* @flow */
+'use strict';
+
+import {createForeignObjectSVG, loadSerializedSVG} from './renderer/ForeignObjectRenderer';
+
+const testRangeBounds = document => {
+    const TEST_HEIGHT = 123;
+
+    if (document.createRange) {
+        const range = document.createRange();
+        if (range.getBoundingClientRect) {
+            const testElement = document.createElement('boundtest');
+            testElement.style.height = `${TEST_HEIGHT}px`;
+            testElement.style.display = 'block';
+            document.body.appendChild(testElement);
+
+            range.selectNode(testElement);
+            const rangeBounds = range.getBoundingClientRect();
+            const rangeHeight = Math.round(rangeBounds.height);
+            document.body.removeChild(testElement);
+            if (rangeHeight === TEST_HEIGHT) {
+                return true;
+            }
+        }
+    }
+
+    return false;
+};
+
+// iOS 10.3 taints canvas with base64 images unless crossOrigin = 'anonymous'
+const testBase64 = (document: Document, src: string): Promise<boolean> => {
+    const img = new Image();
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    return new Promise(resolve => {
+        // Single pixel base64 image renders fine on iOS 10.3???
+        img.src = src;
+
+        const onload = () => {
+            try {
+                ctx.drawImage(img, 0, 0);
+                canvas.toDataURL();
+            } catch (e) {
+                return resolve(false);
+            }
+
+            return resolve(true);
+        };
+
+        img.onload = onload;
+        img.onerror = () => resolve(false);
+
+        if (img.complete === true) {
+            setTimeout(() => {
+                onload();
+            }, 500);
+        }
+    });
+};
+
+const testCORS = () => typeof new Image().crossOrigin !== 'undefined';
+
+const testResponseType = () => typeof new XMLHttpRequest().responseType === 'string';
+
+const testSVG = document => {
+    const img = new Image();
+    const canvas = document.createElement('canvas');
+    const 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;
+};
+
+const isGreenPixel = data => data[0] === 0 && data[1] === 255 && data[2] === 0 && data[3] === 255;
+
+const testForeignObject = document => {
+    const canvas = document.createElement('canvas');
+    const size = 100;
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+    ctx.fillStyle = 'rgb(0, 255, 0)';
+    ctx.fillRect(0, 0, size, size);
+
+    const img = new Image();
+    const greenImageSrc = canvas.toDataURL();
+    img.src = greenImageSrc;
+    const svg = createForeignObjectSVG(size, size, 0, 0, img);
+    ctx.fillStyle = 'red';
+    ctx.fillRect(0, 0, size, size);
+
+    return loadSerializedSVG(svg)
+        .then(img => {
+            ctx.drawImage(img, 0, 0);
+            const data = ctx.getImageData(0, 0, size, size).data;
+            ctx.fillStyle = 'red';
+            ctx.fillRect(0, 0, size, size);
+
+            const node = document.createElement('div');
+            node.style.backgroundImage = `url(${greenImageSrc})`;
+            node.style.height = `${size}px`;
+            // Firefox 55 does not render inline <img /> tags
+            return isGreenPixel(data)
+                ? loadSerializedSVG(createForeignObjectSVG(size, size, 0, 0, node))
+                : Promise.reject(false);
+        })
+        .then(img => {
+            ctx.drawImage(img, 0, 0);
+            // Edge does not render background-images
+            return isGreenPixel(ctx.getImageData(0, 0, size, size).data);
+        })
+        .catch(e => false);
+};
+
+const FEATURES = {
+    // $FlowFixMe - get/set properties not yet supported
+    get SUPPORT_RANGE_BOUNDS() {
+        'use strict';
+        const value = testRangeBounds(document);
+        Object.defineProperty(FEATURES, 'SUPPORT_RANGE_BOUNDS', {value});
+        return value;
+    },
+    // $FlowFixMe - get/set properties not yet supported
+    get SUPPORT_SVG_DRAWING() {
+        'use strict';
+        const value = testSVG(document);
+        Object.defineProperty(FEATURES, 'SUPPORT_SVG_DRAWING', {value});
+        return value;
+    },
+    // $FlowFixMe - get/set properties not yet supported
+    get SUPPORT_BASE64_DRAWING() {
+        'use strict';
+        return (src: string) => {
+            const value = testBase64(document, src);
+            Object.defineProperty(FEATURES, 'SUPPORT_BASE64_DRAWING', {value: () => value});
+            return value;
+        };
+    },
+    // $FlowFixMe - get/set properties not yet supported
+    get SUPPORT_FOREIGNOBJECT_DRAWING() {
+        'use strict';
+        const value =
+            typeof Array.from === 'function' && typeof window.fetch === 'function'
+                ? testForeignObject(document)
+                : Promise.resolve(false);
+        Object.defineProperty(FEATURES, 'SUPPORT_FOREIGNOBJECT_DRAWING', {value});
+        return value;
+    },
+    // $FlowFixMe - get/set properties not yet supported
+    get SUPPORT_CORS_IMAGES() {
+        'use strict';
+        const value = testCORS();
+        Object.defineProperty(FEATURES, 'SUPPORT_CORS_IMAGES', {value});
+        return value;
+    },
+    // $FlowFixMe - get/set properties not yet supported
+    get SUPPORT_RESPONSE_TYPE() {
+        'use strict';
+        const value = testResponseType();
+        Object.defineProperty(FEATURES, 'SUPPORT_RESPONSE_TYPE', {value});
+        return value;
+    },
+    // $FlowFixMe - get/set properties not yet supported
+    get SUPPORT_CORS_XHR() {
+        'use strict';
+        const value = 'withCredentials' in new XMLHttpRequest();
+        Object.defineProperty(FEATURES, 'SUPPORT_CORS_XHR', {value});
+        return value;
+    }
+};
+
+export default FEATURES;

src/Font.js

@@ -0,0 +1,71 @@
+/* @flow */
+'use strict';
+
+import type {Font} from './parsing/font';
+
+const SAMPLE_TEXT = 'Hidden Text';
+import {SMALL_IMAGE} from './Util';
+
+export class FontMetrics {
+    _data: {};
+    _document: Document;
+
+    constructor(document: Document) {
+        this._data = {};
+        this._document = document;
+    }
+    _parseMetrics(font: Font) {
+        const container = this._document.createElement('div');
+        const img = this._document.createElement('img');
+        const span = this._document.createElement('span');
+
+        const body = this._document.body;
+        if (!body) {
+            throw new Error(__DEV__ ? 'No document found for font metrics' : '');
+        }
+
+        container.style.visibility = 'hidden';
+        container.style.fontFamily = font.fontFamily;
+        container.style.fontSize = font.fontSize;
+        container.style.margin = '0';
+        container.style.padding = '0';
+
+        body.appendChild(container);
+
+        img.src = SMALL_IMAGE;
+        img.width = 1;
+        img.height = 1;
+
+        img.style.margin = '0';
+        img.style.padding = '0';
+        img.style.verticalAlign = 'baseline';
+
+        span.style.fontFamily = font.fontFamily;
+        span.style.fontSize = font.fontSize;
+        span.style.margin = '0';
+        span.style.padding = '0';
+
+        span.appendChild(this._document.createTextNode(SAMPLE_TEXT));
+        container.appendChild(span);
+        container.appendChild(img);
+        const baseline = img.offsetTop - span.offsetTop + 2;
+
+        container.removeChild(span);
+        container.appendChild(this._document.createTextNode(SAMPLE_TEXT));
+
+        container.style.lineHeight = 'normal';
+        img.style.verticalAlign = 'super';
+
+        const middle = img.offsetTop - container.offsetTop + 2;
+
+        body.removeChild(container);
+
+        return {baseline, middle};
+    }
+    getMetrics(font: Font) {
+        if (this._data[`${font.fontFamily} ${font.fontSize}`] === undefined) {
+            this._data[`${font.fontFamily} ${font.fontSize}`] = this._parseMetrics(font);
+        }
+        return this._data[`${font.fontFamily} ${font.fontSize}`];
+    }
+}

src/Forms.js

@@ -1,38 +0,0 @@
-html2canvas.prototype.renderFormValue = function(el,bounds,stack){
-    
-    var valueWrap = document.createElement('valuewrap'),
-    _ = this;
-                
-    this.each(['lineHeight','textAlign','fontFamily','color','fontSize','paddingLeft','paddingTop','width','height','border','borderLeftWidth','borderTopWidth'],function(i,style){                 
-        valueWrap.style[style] = _.getCSS(el,style);
-    });
-                
-    valueWrap.style.borderColor = "black";            
-    valueWrap.style.borderStyle = "solid";  
-    valueWrap.style.display = "block";
-    valueWrap.style.position = "absolute";
-    if (/^(submit|reset|button|text|password)$/.test(el.type) || el.nodeName == "SELECT"){
-        valueWrap.style.lineHeight = _.getCSS(el,"height");
-    }
-  
-                
-    valueWrap.style.top = bounds.top+"px";
-    valueWrap.style.left = bounds.left+"px";
-    if (el.nodeName == "SELECT"){
-        // TODO increase accuracy of text position
-        var textValue = el.options[el.selectedIndex].text;
-    } else{   
-        var textValue = el.value;
-        
-    }
-    var textNode = document.createTextNode(textValue);
-    
-    valueWrap.appendChild(textNode);
-    $('body').append(valueWrap);
-                
-    this.newText(el,textNode,stack);
-                
-    $(valueWrap).remove();
-   
-    
-}

src/Gradient.js

@@ -0,0 +1,191 @@
+/* @flow */
+'use strict';
+
+import type {BackgroundSource} from './parsing/background';
+import type {Bounds} from './Bounds';
+import {parseAngle} from './Angle';
+import Color from './Color';
+import Length, {LENGTH_TYPE} from './Length';
+
+const SIDE_OR_CORNER = /^(to )?(left|top|right|bottom)( (left|top|right|bottom))?$/i;
+const PERCENTAGE_ANGLES = /^([+-]?\d*\.?\d+)% ([+-]?\d*\.?\d+)%$/i;
+const ENDS_WITH_LENGTH = /(px)|%|( 0)$/i;
+const FROM_TO = /^(from|to)\((.+)\)$/i;
+
+export type Direction = {
+    x0: number,
+    x1: number,
+    y0: number,
+    y1: number
+};
+
+export type ColorStop = {
+    color: Color,
+    stop: number
+};
+
+export type Gradient = {
+    direction: Direction,
+    colorStops: Array<ColorStop>
+};
+
+export const parseGradient = (
+    {args, method, prefix}: BackgroundSource,
+    bounds: Bounds
+): ?Gradient => {
+    if (method === 'linear-gradient') {
+        return parseLinearGradient(args, bounds);
+    } else if (method === 'gradient' && args[0] === 'linear') {
+        // TODO handle correct angle
+        return parseLinearGradient(
+            ['to bottom'].concat(
+                args
+                    .slice(3)
+                    .map(color => color.match(FROM_TO))
+                    .filter(v => v !== null)
+                    // $FlowFixMe
+                    .map(v => v[2])
+            ),
+            bounds
+        );
+    }
+};
+
+const parseLinearGradient = (args: Array<string>, bounds: Bounds): Gradient => {
+    const angle = parseAngle(args[0]);
+    const HAS_SIDE_OR_CORNER = SIDE_OR_CORNER.test(args[0]);
+    const HAS_DIRECTION = HAS_SIDE_OR_CORNER || angle !== null || PERCENTAGE_ANGLES.test(args[0]);
+    const direction = HAS_DIRECTION
+        ? angle !== null
+          ? calculateGradientDirection(angle, bounds)
+          : HAS_SIDE_OR_CORNER
+            ? parseSideOrCorner(args[0], bounds)
+            : parsePercentageAngle(args[0], bounds)
+        : calculateGradientDirection(Math.PI, bounds);
+    const colorStops = [];
+    const firstColorStopIndex = HAS_DIRECTION ? 1 : 0;
+
+    for (let i = firstColorStopIndex; i < args.length; i++) {
+        const value = args[i];
+        const HAS_LENGTH = ENDS_WITH_LENGTH.test(value);
+        const lastSpaceIndex = value.lastIndexOf(' ');
+        const color = new Color(HAS_LENGTH ? value.substring(0, lastSpaceIndex) : value);
+        const stop = HAS_LENGTH
+            ? new Length(value.substring(lastSpaceIndex + 1))
+            : i === firstColorStopIndex
+              ? new Length('0%')
+              : i === args.length - 1 ? new Length('100%') : null;
+        colorStops.push({color, stop});
+    }
+
+    // TODO: Fix some inaccuracy with color stops with px values
+    const lineLength = Math.min(
+        Math.sqrt(
+            Math.pow(Math.abs(direction.x0) + Math.abs(direction.x1), 2) +
+                Math.pow(Math.abs(direction.y0) + Math.abs(direction.y1), 2)
+        ),
+        bounds.width * 2,
+        bounds.height * 2
+    );
+
+    const absoluteValuedColorStops = colorStops.map(({color, stop}) => {
+        return {
+            color,
+            // $FlowFixMe
+            stop: stop ? stop.getAbsoluteValue(lineLength) / lineLength : null
+        };
+    });
+
+    let previousColorStop = absoluteValuedColorStops[0].stop;
+    for (let i = 0; i < absoluteValuedColorStops.length; i++) {
+        if (previousColorStop !== null) {
+            const stop = absoluteValuedColorStops[i].stop;
+            if (stop === null) {
+                let n = i;
+                while (absoluteValuedColorStops[n].stop === null) {
+                    n++;
+                }
+                const steps = n - i + 1;
+                const nextColorStep = absoluteValuedColorStops[n].stop;
+                const stepSize = (nextColorStep - previousColorStop) / steps;
+                for (; i < n; i++) {
+                    previousColorStop = absoluteValuedColorStops[i].stop =
+                        previousColorStop + stepSize;
+                }
+            } else {
+                previousColorStop = stop;
+            }
+        }
+    }
+
+    return {
+        direction,
+        colorStops: absoluteValuedColorStops
+    };
+};
+
+const calculateGradientDirection = (radian: number, bounds: Bounds): Direction => {
+    const width = bounds.width;
+    const height = bounds.height;
+    const HALF_WIDTH = width * 0.5;
+    const HALF_HEIGHT = height * 0.5;
+    const lineLength = Math.abs(width * Math.sin(radian)) + Math.abs(height * Math.cos(radian));
+    const HALF_LINE_LENGTH = lineLength / 2;
+
+    const x0 = HALF_WIDTH + Math.sin(radian) * HALF_LINE_LENGTH;
+    const y0 = HALF_HEIGHT - Math.cos(radian) * HALF_LINE_LENGTH;
+    const x1 = width - x0;
+    const y1 = height - y0;
+
+    return {x0, x1, y0, y1};
+};
+
+const parseTopRight = (bounds: Bounds) =>
+    Math.acos(
+        bounds.width / 2 / (Math.sqrt(Math.pow(bounds.width, 2) + Math.pow(bounds.height, 2)) / 2)
+    );
+
+const parseSideOrCorner = (side: string, bounds: Bounds): Direction => {
+    switch (side) {
+        case 'bottom':
+        case 'to top':
+            return calculateGradientDirection(0, bounds);
+        case 'left':
+        case 'to right':
+            return calculateGradientDirection(Math.PI / 2, bounds);
+        case 'right':
+        case 'to left':
+            return calculateGradientDirection(3 * Math.PI / 2, bounds);
+        case 'top right':
+        case 'right top':
+        case 'to bottom left':
+        case 'to left bottom':
+            return calculateGradientDirection(Math.PI + parseTopRight(bounds), bounds);
+        case 'top left':
+        case 'left top':
+        case 'to bottom right':
+        case 'to right bottom':
+            return calculateGradientDirection(Math.PI - parseTopRight(bounds), bounds);
+        case 'bottom left':
+        case 'left bottom':
+        case 'to top right':
+        case 'to right top':
+            return calculateGradientDirection(parseTopRight(bounds), bounds);
+        case 'bottom right':
+        case 'right bottom':
+        case 'to top left':
+        case 'to left top':
+            return calculateGradientDirection(2 * Math.PI - parseTopRight(bounds), bounds);
+        case 'top':
+        case 'to bottom':
+        default:
+            return calculateGradientDirection(Math.PI, bounds);
+    }
+};
+
+const parsePercentageAngle = (angle: string, bounds: Bounds): Direction => {
+    const [left, top] = angle.split(' ').map(parseFloat);
+    const ratio = left / 100 * bounds.width / (top / 100 * bounds.height);
+
+    return calculateGradientDirection(Math.atan(isNaN(ratio) ? 1 : ratio) + Math.PI / 2, bounds);
+};

src/Images.js

@@ -1,129 +0,0 @@
-/*
- * Function to find all images from <img> and background-image   
- */            
-html2canvas.prototype.getImages = function(el) {
-        
-    var self = this;
-    
-    if (!this.ignoreRe.test(el.nodeName)){
-        // TODO remove jQuery dependancy
-        this.each($(el).contents(),function(i,element){    
-            var ignRe = new RegExp("("+this.ignoreElements+")");
-            if (!ignRe.test(element.nodeName)){
-                self.getImages(element);
-            }
-        })
-    }
-          
-    if (el.nodeType==1 || typeof el.nodeType == "undefined"){
-        var background_image = this.getCSS(el,'background-image');
-           
-        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
-            var src = this.backgroundImageUrl(background_image.split(",")[0]);                    
-            this.preloadImage(src);                    
-        }
-    }
-}  
-
-
-/*
- * Load image from storage
- */
-    
-html2canvas.prototype.loadImage = function(src){	
-        
-    var imgIndex = this.getIndex(this.images,src);
-    if (imgIndex!=-1){
-        return this.images[imgIndex+1];
-    }else{
-        return false;
-    }
-				
-}
-
-
-
-
-        
-html2canvas.prototype.preloadImage = function(src){
-
-
-    if (this.getIndex(this.images,src)==-1){
-        if (this.isSameOrigin(src)){
-            this.images.push(src);
-            //     console.log('a'+src);
-            var img = new Image();   
-            // TODO remove jQuery dependancy
-            var _ = this;
-            $(img).load(function(){
-                _.imagesLoaded++;               
-                _.start();        
-                
-            });	
-            img.onerror = function(){
-                _.images.splice(_.images.indexOf(img.src),2);
-                //  _.imagesLoaded++;
-                _.start();                           
-            }
-            img.src = src; 
-            this.images.push(img);
-        }else if (this.opts.proxyUrl){
-            //    console.log('b'+src);
-            this.images.push(src);
-            var img = new Image();   
-            this.proxyGetImage(src,img);
-            this.images.push(img);
-        }
-    }     
-          
-}
-
-html2canvas.prototype.proxyGetImage = function(url,img){
-    var _ = this;
-    
-    var link = document.createElement("a");
-    link.href = url;
-    url = link.href; // work around for pages with base href="" set
-
-    
-    // todo remove jQuery dependency and enable xhr2 requests where available (no need for base64 / json)
-    $.ajax({
-        data:{
-            xhr2:false,
-            url:url
-        },
-        url: this.opts.proxyUrl,
-        dataType: "jsonp",
-        success: function(a){
-            
-            if (a.substring(0,6)=="error:"){
-                _.images.splice(_.images.indexOf(url),2);
-                _.start();  
-                _.log('Proxy was unable to load '+url+' '+a);
-            }else{
-                // document.createElement(a);
-                // console.log(img);
-                img.onload = function(){
-                    //   console.log('w'+img.width);
-                    _.imagesLoaded++;               
-                    _.start();   
-               
-                }
-            
-                img.src = a; 
-            }
-
-
-        },
-        error: function(){
-           
-            _.images.splice(_.images.indexOf(url),2);
-            //  _.imagesLoaded++;
-            _.start();          
-        }
-        
-        
-    });
-    
-}

src/Input.js

@@ -0,0 +1,155 @@
+/* @flow */
+'use strict';
+import type NodeContainer from './NodeContainer';
+import TextContainer from './TextContainer';
+
+import {BACKGROUND_CLIP, BACKGROUND_ORIGIN} from './parsing/background';
+import {BORDER_STYLE} from './parsing/border';
+
+import Circle from './drawing/Circle';
+import Vector from './drawing/Vector';
+import Color from './Color';
+import Length from './Length';
+import {Bounds} from './Bounds';
+import {TextBounds} from './TextBounds';
+import {copyCSSStyles} from './Util';
+
+export const INPUT_COLOR = new Color([42, 42, 42]);
+const INPUT_BORDER_COLOR = new Color([165, 165, 165]);
+const INPUT_BACKGROUND_COLOR = new Color([222, 222, 222]);
+const INPUT_BORDER = {
+    borderWidth: 1,
+    borderColor: INPUT_BORDER_COLOR,
+    borderStyle: BORDER_STYLE.SOLID
+};
+export const INPUT_BORDERS = [INPUT_BORDER, INPUT_BORDER, INPUT_BORDER, INPUT_BORDER];
+export const INPUT_BACKGROUND = {
+    backgroundColor: INPUT_BACKGROUND_COLOR,
+    backgroundImage: [],
+    backgroundClip: BACKGROUND_CLIP.PADDING_BOX,
+    backgroundOrigin: BACKGROUND_ORIGIN.PADDING_BOX
+};
+
+const RADIO_BORDER_RADIUS = new Length('50%');
+const RADIO_BORDER_RADIUS_TUPLE = [RADIO_BORDER_RADIUS, RADIO_BORDER_RADIUS];
+const INPUT_RADIO_BORDER_RADIUS = [
+    RADIO_BORDER_RADIUS_TUPLE,
+    RADIO_BORDER_RADIUS_TUPLE,
+    RADIO_BORDER_RADIUS_TUPLE,
+    RADIO_BORDER_RADIUS_TUPLE
+];
+
+const CHECKBOX_BORDER_RADIUS = new Length('3px');
+const CHECKBOX_BORDER_RADIUS_TUPLE = [CHECKBOX_BORDER_RADIUS, CHECKBOX_BORDER_RADIUS];
+const INPUT_CHECKBOX_BORDER_RADIUS = [
+    CHECKBOX_BORDER_RADIUS_TUPLE,
+    CHECKBOX_BORDER_RADIUS_TUPLE,
+    CHECKBOX_BORDER_RADIUS_TUPLE,
+    CHECKBOX_BORDER_RADIUS_TUPLE
+];
+
+export const getInputBorderRadius = (node: HTMLInputElement) => {
+    return node.type === 'radio' ? INPUT_RADIO_BORDER_RADIUS : INPUT_CHECKBOX_BORDER_RADIUS;
+};
+
+export const inlineInputElement = (node: HTMLInputElement, container: NodeContainer): void => {
+    if (node.type === 'radio' || node.type === 'checkbox') {
+        if (node.checked) {
+            const size = Math.min(container.bounds.width, container.bounds.height);
+            container.childNodes.push(
+                node.type === 'checkbox'
+                    ? [
+                          new Vector(
+                              container.bounds.left + size * 0.39363,
+                              container.bounds.top + size * 0.79
+                          ),
+                          new Vector(
+                              container.bounds.left + size * 0.16,
+                              container.bounds.top + size * 0.5549
+                          ),
+                          new Vector(
+                              container.bounds.left + size * 0.27347,
+                              container.bounds.top + size * 0.44071
+                          ),
+                          new Vector(
+                              container.bounds.left + size * 0.39694,
+                              container.bounds.top + size * 0.5649
+                          ),
+                          new Vector(
+                              container.bounds.left + size * 0.72983,
+                              container.bounds.top + size * 0.23
+                          ),
+                          new Vector(
+                              container.bounds.left + size * 0.84,
+                              container.bounds.top + size * 0.34085
+                          ),
+                          new Vector(
+                              container.bounds.left + size * 0.39363,
+                              container.bounds.top + size * 0.79
+                          )
+                      ]
+                    : new Circle(
+                          container.bounds.left + size / 4,
+                          container.bounds.top + size / 4,
+                          size / 4
+                      )
+            );
+        }
+    } else {
+        inlineFormElement(getInputValue(node), node, container, false);
+    }
+};
+
+export const inlineTextAreaElement = (
+    node: HTMLTextAreaElement,
+    container: NodeContainer
+): void => {
+    inlineFormElement(node.value, node, container, true);
+};
+
+export const inlineSelectElement = (node: HTMLSelectElement, container: NodeContainer): void => {
+    const option = node.options[node.selectedIndex || 0];
+    inlineFormElement(option ? option.text || '' : '', node, container, false);
+};
+
+export const reformatInputBounds = (bounds: Bounds): Bounds => {
+    if (bounds.width > bounds.height) {
+        bounds.left += (bounds.width - bounds.height) / 2;
+        bounds.width = bounds.height;
+    } else if (bounds.width < bounds.height) {
+        bounds.top += (bounds.height - bounds.width) / 2;
+        bounds.height = bounds.width;
+    }
+    return bounds;
+};
+
+const inlineFormElement = (
+    value: string,
+    node: HTMLElement,
+    container: NodeContainer,
+    allowLinebreak: boolean
+): void => {
+    const body = node.ownerDocument.body;
+    if (value.length > 0 && body) {
+        const wrapper = node.ownerDocument.createElement('html2canvaswrapper');
+        copyCSSStyles(node.ownerDocument.defaultView.getComputedStyle(node, null), wrapper);
+        wrapper.style.position = 'fixed';
+        wrapper.style.left = `${container.bounds.left}px`;
+        wrapper.style.top = `${container.bounds.top}px`;
+        if (!allowLinebreak) {
+            wrapper.style.whiteSpace = 'nowrap';
+        }
+        const text = node.ownerDocument.createTextNode(value);
+        wrapper.appendChild(text);
+        body.appendChild(wrapper);
+        container.childNodes.push(TextContainer.fromTextNode(text, container));
+        body.removeChild(wrapper);
+    }
+};
+
+const getInputValue = (node: HTMLInputElement): string => {
+    const value =
+        node.type === 'password' ? new Array(node.value.length + 1).join('\u2022') : node.value;
+
+    return value.length === 0 ? node.placeholder || '' : value;
+};

src/LICENSE

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

src/Length.js

@@ -0,0 +1,36 @@
+/* @flow */
+'use strict';
+
+export const LENGTH_TYPE = {
+    PX: 0,
+    PERCENTAGE: 1
+};
+
+export type LengthType = $Values<typeof LENGTH_TYPE>;
+
+export default class Length {
+    type: LengthType;
+    value: number;
+
+    constructor(value: string) {
+        this.type =
+            value.substr(value.length - 1) === '%' ? LENGTH_TYPE.PERCENTAGE : LENGTH_TYPE.PX;
+        const parsedValue = parseFloat(value);
+        if (__DEV__ && isNaN(parsedValue)) {
+            console.error(`Invalid value given for Length: "${value}"`);
+        }
+        this.value = isNaN(parsedValue) ? 0 : parsedValue;
+    }
+
+    isPercentage(): boolean {
+        return this.type === LENGTH_TYPE.PERCENTAGE;
+    }
+
+    getAbsoluteValue(parentLength: number): number {
+        return this.isPercentage() ? parentLength * (this.value / 100) : this.value;
+    }
+
+    static create(v): Length {
+        return new Length(v);
+    }
+}

src/Lists.js

@@ -1,121 +0,0 @@
-html2canvas.prototype.drawListItem = function(element,stack,elBounds){
-    
-  
-    var position = this.getCSS(element,"list-style-position",false);
-    
-
-    var item = this.getListItem(element),
-    x,
-    y;
-        
-    var type = this.getCSS(element,"list-style-type",false);
-    
-    if (/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(type)){
-        // TODO remove jQuery dependency
-        var currentIndex = $(element).index()+1,
-        text;       
-        
-        if (type == "decimal"){
-            text = currentIndex;
-        }else if (type == "decimal-leading-zero"){
-            if (currentIndex.toString().length == 1){
-                text = currentIndex = "0" + currentIndex.toString();
-            }else{
-                text = currentIndex.toString();   
-            }
-                   
-        }else if (type == "upper-roman"){
-            text = this.getListRoman(currentIndex);
-        }else if (type == "lower-roman"){
-            text = this.getListRoman(currentIndex).toLowerCase();
-        }else if (type == "lower-alpha"){
-            text = this.getListAlpha(currentIndex).toLowerCase();
-        }else if (type == "upper-alpha"){
-            text = this.getListAlpha(currentIndex);
-        }
-           
-        text += ". ";
-        var  listBounds = this.getListPosition(element,text);
-        
-        if (position == "inside"){
-            this.setFont(stack.ctx,element,false);     
-            x = elBounds.left;
-        }else{
-            return; /* TODO really need to figure out some more accurate way to try and find the position. 
-             as defined in http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position, it does not even have a specified "correct" position, so each browser 
-             may display it whatever way it feels like. 
-            "The position of the list-item marker adjacent to floats is undefined in CSS 2.1. CSS 2.1 does not specify the precise location of the marker box or its position in the painting order"
- */
-            this.setFont(stack.ctx,element,true);
-            x = elBounds.left-10;
-        }
-        
-        y = listBounds.bottom;
-        
-        
-        this.printText(text, x, y, stack.ctx);   
-        
-    }
-    
-    
-    
-}
-
-html2canvas.prototype.getListPosition = function(element,val){
-    var boundElement = document.createElement("boundelement");
-    boundElement.style.display = "inline";
-    //boundElement.style.width = "1px";
-    //boundElement.style.height = "1px";
-    
-    var type = element.style.listStyleType;
-    element.style.listStyleType = "none";
-    
-    boundElement.appendChild(document.createTextNode(val));
-    
-
-    element.insertBefore(boundElement,element.firstChild);
-
-    
-    var bounds = this.getBounds(boundElement);
-    element.removeChild(boundElement);
-    element.style.listStyleType = type;
-    return bounds;
-    
-    
-}
-
-html2canvas.prototype.getListItem = function(element){
-    
-
-    
-    }
-
-    
-html2canvas.prototype.getListAlpha = function(number){
-    var tmp = "";
-    do{
-        var modulus = number % 26; 
-        tmp = String.fromCharCode((modulus) + 64) + tmp;
-        number = number / 26;
-    }while((number*26) > 26);
-   
-    return tmp;  
-}
-
-html2canvas.prototype.getListRoman = 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 = "";
-
-    if (number <= 0 || number >= 4000) return;
-    for (var v=0; v<romanArray.length; v++) {
-        while (number >= decimal[v]) { 
-            number -= decimal[v];
-            roman += romanArray[v];
-        }
-    }
-        
-    return roman;
-    
-    
-}

src/Logger.js

@@ -0,0 +1,46 @@
+/* @flow */
+'use strict';
+
+export default class Logger {
+    start: number;
+    id: ?string;
+
+    constructor(id: ?string, start: ?number) {
+        this.start = start ? start : Date.now();
+        this.id = id;
+    }
+
+    child(id: string) {
+        return new Logger(id, this.start);
+    }
+
+    // eslint-disable-next-line flowtype/no-weak-types
+    log(...args: any) {
+        if (window.console && window.console.log) {
+            Function.prototype.bind
+                .call(window.console.log, window.console)
+                .apply(
+                    window.console,
+                    [
+                        Date.now() - this.start + 'ms',
+                        this.id ? `html2canvas (${this.id}):` : 'html2canvas:'
+                    ].concat([].slice.call(args, 0))
+                );
+        }
+    }
+
+    // eslint-disable-next-line flowtype/no-weak-types
+    error(...args: any) {
+        if (window.console && window.console.error) {
+            Function.prototype.bind
+                .call(window.console.error, window.console)
+                .apply(
+                    window.console,
+                    [
+                        Date.now() - this.start + 'ms',
+                        this.id ? `html2canvas (${this.id}):` : 'html2canvas:'
+                    ].concat([].slice.call(args, 0))
+                );
+        }
+    }
+}

src/NodeContainer.js

@@ -0,0 +1,254 @@
+/* @flow */
+'use strict';
+
+import type {Background} from './parsing/background';
+import type {Border} from './parsing/border';
+import type {BorderRadius} from './parsing/borderRadius';
+import type {DisplayBit} from './parsing/display';
+import type {Float} from './parsing/float';
+import type {Font} from './parsing/font';
+import type {Overflow} from './parsing/overflow';
+import type {Padding} from './parsing/padding';
+import type {Position} from './parsing/position';
+import type {TextShadow} from './parsing/textShadow';
+import type {TextTransform} from './parsing/textTransform';
+import type {TextDecoration} from './parsing/textDecoration';
+import type {Transform} from './parsing/transform';
+import type {Visibility} from './parsing/visibility';
+import type {zIndex} from './parsing/zIndex';
+
+import type {Bounds, BoundCurves} from './Bounds';
+import type ResourceLoader, {ImageElement} from './ResourceLoader';
+import type {Path} from './drawing/Path';
+import type TextContainer from './TextContainer';
+
+import Color from './Color';
+
+import {contains} from './Util';
+import {parseBackground} from './parsing/background';
+import {parseBorder} from './parsing/border';
+import {parseBorderRadius} from './parsing/borderRadius';
+import {parseDisplay, DISPLAY} from './parsing/display';
+import {parseCSSFloat, FLOAT} from './parsing/float';
+import {parseFont} from './parsing/font';
+import {parseLetterSpacing} from './parsing/letterSpacing';
+import {parseOverflow, OVERFLOW} from './parsing/overflow';
+import {parsePadding} from './parsing/padding';
+import {parsePosition, POSITION} from './parsing/position';
+import {parseTextDecoration} from './parsing/textDecoration';
+import {parseTextShadow} from './parsing/textShadow';
+import {parseTextTransform} from './parsing/textTransform';
+import {parseTransform} from './parsing/transform';
+import {parseVisibility, VISIBILITY} from './parsing/visibility';
+import {parseZIndex} from './parsing/zIndex';
+
+import {parseBounds, parseBoundCurves, calculatePaddingBoxPath} from './Bounds';
+import {
+    INPUT_BACKGROUND,
+    INPUT_BORDERS,
+    INPUT_COLOR,
+    getInputBorderRadius,
+    reformatInputBounds
+} from './Input';
+
+type StyleDeclaration = {
+    background: Background,
+    border: Array<Border>,
+    borderRadius: Array<BorderRadius>,
+    color: Color,
+    display: DisplayBit,
+    float: Float,
+    font: Font,
+    letterSpacing: number,
+    opacity: number,
+    overflow: Overflow,
+    padding: Padding,
+    position: Position,
+    textDecoration: TextDecoration | null,
+    textShadow: Array<TextShadow> | null,
+    textTransform: TextTransform,
+    transform: Transform,
+    visibility: Visibility,
+    zIndex: zIndex
+};
+
+const INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];
+
+export default class NodeContainer {
+    name: ?string;
+    parent: ?NodeContainer;
+    style: StyleDeclaration;
+    childNodes: Array<TextContainer | Path>;
+    bounds: Bounds;
+    curvedBounds: BoundCurves;
+    image: ?string;
+    index: number;
+
+    constructor(
+        node: HTMLElement | SVGSVGElement,
+        parent: ?NodeContainer,
+        resourceLoader: ResourceLoader,
+        index: number
+    ) {
+        this.parent = parent;
+        this.index = index;
+        this.childNodes = [];
+        const defaultView = node.ownerDocument.defaultView;
+        const scrollX = defaultView.pageXOffset;
+        const scrollY = defaultView.pageYOffset;
+        const style = defaultView.getComputedStyle(node, null);
+        const display = parseDisplay(style.display);
+
+        const IS_INPUT = node.type === 'radio' || node.type === 'checkbox';
+
+        const position = parsePosition(style.position);
+
+        this.style = {
+            background: IS_INPUT ? INPUT_BACKGROUND : parseBackground(style, resourceLoader),
+            border: IS_INPUT ? INPUT_BORDERS : parseBorder(style),
+            borderRadius:
+                (node instanceof defaultView.HTMLInputElement ||
+                    node instanceof HTMLInputElement) &&
+                IS_INPUT
+                    ? getInputBorderRadius(node)
+                    : parseBorderRadius(style),
+            color: IS_INPUT ? INPUT_COLOR : new Color(style.color),
+            display: display,
+            float: parseCSSFloat(style.float),
+            font: parseFont(style),
+            letterSpacing: parseLetterSpacing(style.letterSpacing),
+            opacity: parseFloat(style.opacity),
+            overflow:
+                INPUT_TAGS.indexOf(node.tagName) === -1
+                    ? parseOverflow(style.overflow)
+                    : OVERFLOW.HIDDEN,
+            padding: parsePadding(style),
+            position: position,
+            textDecoration: parseTextDecoration(style),
+            textShadow: parseTextShadow(style.textShadow),
+            textTransform: parseTextTransform(style.textTransform),
+            transform: parseTransform(style),
+            visibility: parseVisibility(style.visibility),
+            zIndex: parseZIndex(position !== POSITION.STATIC ? style.zIndex : 'auto')
+        };
+
+        if (this.isTransformed()) {
+            // getBoundingClientRect provides values post-transform, we want them without the transformation
+            node.style.transform = 'matrix(1,0,0,1,0,0)';
+        }
+
+        // TODO move bound retrieval for all nodes to a later stage?
+        if (node.tagName === 'IMG') {
+            node.addEventListener('load', () => {
+                this.bounds = parseBounds(node, scrollX, scrollY);
+                this.curvedBounds = parseBoundCurves(
+                    this.bounds,
+                    this.style.border,
+                    this.style.borderRadius
+                );
+            });
+        }
+        this.image = getImage(node, resourceLoader);
+        this.bounds = IS_INPUT
+            ? reformatInputBounds(parseBounds(node, scrollX, scrollY))
+            : parseBounds(node, scrollX, scrollY);
+        this.curvedBounds = parseBoundCurves(
+            this.bounds,
+            this.style.border,
+            this.style.borderRadius
+        );
+
+        if (__DEV__) {
+            this.name = `${node.tagName.toLowerCase()}${node.id
+                ? `#${node.id}`
+                : ''}${node.className
+                .toString()
+                .split(' ')
+                .map(s => (s.length ? `.${s}` : ''))
+                .join('')}`;
+        }
+    }
+    getClipPaths(): Array<Path> {
+        const parentClips = this.parent ? this.parent.getClipPaths() : [];
+        const isClipped =
+            this.style.overflow === OVERFLOW.HIDDEN || this.style.overflow === OVERFLOW.SCROLL;
+
+        return isClipped
+            ? parentClips.concat([calculatePaddingBoxPath(this.curvedBounds)])
+            : parentClips;
+    }
+    isInFlow(): boolean {
+        return this.isRootElement() && !this.isFloating() && !this.isAbsolutelyPositioned();
+    }
+    isVisible(): boolean {
+        return (
+            !contains(this.style.display, DISPLAY.NONE) &&
+            this.style.opacity > 0 &&
+            this.style.visibility === VISIBILITY.VISIBLE
+        );
+    }
+    isAbsolutelyPositioned(): boolean {
+        return this.style.position !== POSITION.STATIC && this.style.position !== POSITION.RELATIVE;
+    }
+    isPositioned(): boolean {
+        return this.style.position !== POSITION.STATIC;
+    }
+    isFloating(): boolean {
+        return this.style.float !== FLOAT.NONE;
+    }
+    isRootElement(): boolean {
+        return this.parent === null;
+    }
+    isTransformed(): boolean {
+        return this.style.transform !== null;
+    }
+    isPositionedWithZIndex(): boolean {
+        return this.isPositioned() && !this.style.zIndex.auto;
+    }
+    isInlineLevel(): boolean {
+        return (
+            contains(this.style.display, DISPLAY.INLINE) ||
+            contains(this.style.display, DISPLAY.INLINE_BLOCK) ||
+            contains(this.style.display, DISPLAY.INLINE_FLEX) ||
+            contains(this.style.display, DISPLAY.INLINE_GRID) ||
+            contains(this.style.display, DISPLAY.INLINE_LIST_ITEM) ||
+            contains(this.style.display, DISPLAY.INLINE_TABLE)
+        );
+    }
+    isInlineBlockOrInlineTable(): boolean {
+        return (
+            contains(this.style.display, DISPLAY.INLINE_BLOCK) ||
+            contains(this.style.display, DISPLAY.INLINE_TABLE)
+        );
+    }
+}
+
+const getImage = (node: HTMLElement | SVGSVGElement, resourceLoader: ResourceLoader): ?string => {
+    if (
+        node instanceof node.ownerDocument.defaultView.SVGSVGElement ||
+        node instanceof SVGSVGElement
+    ) {
+        const s = new XMLSerializer();
+        return resourceLoader.loadImage(
+            `data:image/svg+xml,${encodeURIComponent(s.serializeToString(node))}`
+        );
+    }
+    switch (node.tagName) {
+        case 'IMG':
+            // $FlowFixMe
+            const img: HTMLImageElement = node;
+            return resourceLoader.loadImage(img.currentSrc || img.src);
+        case 'CANVAS':
+            // $FlowFixMe
+            const canvas: HTMLCanvasElement = node;
+            return resourceLoader.loadCanvas(canvas);
+        case 'IFRAME':
+            const iframeKey = node.getAttribute('data-html2canvas-internal-iframe-key');
+            if (iframeKey) {
+                return iframeKey;
+            }
+            break;
+    }
+
+    return null;
+};

src/NodeParser.js

@@ -0,0 +1,158 @@
+/* @flow */
+'use strict';
+import type ResourceLoader, {ImageElement} from './ResourceLoader';
+import type Logger from './Logger';
+import StackingContext from './StackingContext';
+import NodeContainer from './NodeContainer';
+import TextContainer from './TextContainer';
+import {inlineInputElement, inlineTextAreaElement, inlineSelectElement} from './Input';
+
+export const NodeParser = (
+    node: HTMLElement,
+    resourceLoader: ResourceLoader,
+    logger: Logger
+): StackingContext => {
+    if (__DEV__) {
+        logger.log(`Starting node parsing`);
+    }
+
+    let index = 0;
+
+    const container = new NodeContainer(node, null, resourceLoader, index++);
+    const stack = new StackingContext(container, null, true);
+
+    parseNodeTree(node, container, stack, resourceLoader, index);
+
+    if (__DEV__) {
+        logger.log(`Finished parsing node tree`);
+    }
+
+    return stack;
+};
+
+const IGNORED_NODE_NAMES = ['SCRIPT', 'HEAD', 'TITLE', 'OBJECT', 'BR', 'OPTION'];
+
+const parseNodeTree = (
+    node: HTMLElement,
+    parent: NodeContainer,
+    stack: StackingContext,
+    resourceLoader: ResourceLoader,
+    index: number
+): void => {
+    if (__DEV__ && index > 50000) {
+        throw new Error(`Recursion error while parsing node tree`);
+    }
+
+    for (let childNode = node.firstChild, nextNode; childNode; childNode = nextNode) {
+        nextNode = childNode.nextSibling;
+        const defaultView = childNode.ownerDocument.defaultView;
+        if (
+            childNode instanceof defaultView.Text ||
+            childNode instanceof Text ||
+            (defaultView.parent && childNode instanceof defaultView.parent.Text)
+        ) {
+            if (childNode.data.trim().length > 0) {
+                parent.childNodes.push(TextContainer.fromTextNode(childNode, parent));
+            }
+        } else if (
+            childNode instanceof defaultView.HTMLElement ||
+            childNode instanceof HTMLElement ||
+            (defaultView.parent && childNode instanceof defaultView.parent.HTMLElement)
+        ) {
+            if (IGNORED_NODE_NAMES.indexOf(childNode.nodeName) === -1) {
+                const container = new NodeContainer(childNode, parent, resourceLoader, index++);
+                if (container.isVisible()) {
+                    if (childNode.tagName === 'INPUT') {
+                        // $FlowFixMe
+                        inlineInputElement(childNode, container);
+                    } else if (childNode.tagName === 'TEXTAREA') {
+                        // $FlowFixMe
+                        inlineTextAreaElement(childNode, container);
+                    } else if (childNode.tagName === 'SELECT') {
+                        // $FlowFixMe
+                        inlineSelectElement(childNode, container);
+                    }
+
+                    const SHOULD_TRAVERSE_CHILDREN = childNode.tagName !== 'TEXTAREA';
+                    const treatAsRealStackingContext = createsRealStackingContext(
+                        container,
+                        childNode
+                    );
+                    if (treatAsRealStackingContext || createsStackingContext(container)) {
+                        // for treatAsRealStackingContext:false, any positioned descendants and descendants
+                        // which actually create a new stacking context should be considered part of the parent stacking context
+                        const parentStack =
+                            treatAsRealStackingContext || container.isPositioned()
+                                ? stack.getRealParentStackingContext()
+                                : stack;
+                        const childStack = new StackingContext(
+                            container,
+                            parentStack,
+                            treatAsRealStackingContext
+                        );
+                        parentStack.contexts.push(childStack);
+                        if (SHOULD_TRAVERSE_CHILDREN) {
+                            parseNodeTree(childNode, container, childStack, resourceLoader, index);
+                        }
+                    } else {
+                        stack.children.push(container);
+                        if (SHOULD_TRAVERSE_CHILDREN) {
+                            parseNodeTree(childNode, container, stack, resourceLoader, index);
+                        }
+                    }
+                }
+            }
+        } else if (
+            childNode instanceof defaultView.SVGSVGElement ||
+            childNode instanceof SVGSVGElement ||
+            (defaultView.parent && childNode instanceof defaultView.parent.SVGSVGElement)
+        ) {
+            const container = new NodeContainer(childNode, parent, resourceLoader, index++);
+            const treatAsRealStackingContext = createsRealStackingContext(container, childNode);
+            if (treatAsRealStackingContext || createsStackingContext(container)) {
+                // for treatAsRealStackingContext:false, any positioned descendants and descendants
+                // which actually create a new stacking context should be considered part of the parent stacking context
+                const parentStack =
+                    treatAsRealStackingContext || container.isPositioned()
+                        ? stack.getRealParentStackingContext()
+                        : stack;
+                const childStack = new StackingContext(
+                    container,
+                    parentStack,
+                    treatAsRealStackingContext
+                );
+                parentStack.contexts.push(childStack);
+            } else {
+                stack.children.push(container);
+            }
+        }
+    }
+};
+
+const createsRealStackingContext = (
+    container: NodeContainer,
+    node: HTMLElement | SVGSVGElement
+): boolean => {
+    return (
+        container.isRootElement() ||
+        container.isPositionedWithZIndex() ||
+        container.style.opacity < 1 ||
+        container.isTransformed() ||
+        isBodyWithTransparentRoot(container, node)
+    );
+};
+
+const createsStackingContext = (container: NodeContainer): boolean => {
+    return container.isPositioned() || container.isFloating();
+};
+
+const isBodyWithTransparentRoot = (
+    container: NodeContainer,
+    node: HTMLElement | SVGSVGElement
+): boolean => {
+    return (
+        node.nodeName === 'BODY' &&
+        container.parent instanceof NodeContainer &&
+        container.parent.style.background.backgroundColor.isTransparent()
+    );
+};

src/Proxy.js

@@ -0,0 +1,62 @@
+/* @flow */
+'use strict';
+
+import type Options from './index';
+
+import FEATURES from './Feature';
+
+export const Proxy = (src: string, options: Options): Promise<string> => {
+    if (!options.proxy) {
+        return Promise.reject(__DEV__ ? 'No proxy defined' : null);
+    }
+    const proxy = options.proxy;
+
+    return new Promise((resolve, reject) => {
+        const responseType =
+            FEATURES.SUPPORT_CORS_XHR && FEATURES.SUPPORT_RESPONSE_TYPE ? 'blob' : 'text';
+        const xhr = FEATURES.SUPPORT_CORS_XHR ? new XMLHttpRequest() : new XDomainRequest();
+        xhr.onload = () => {
+            if (xhr instanceof XMLHttpRequest) {
+                if (xhr.status === 200) {
+                    if (responseType === 'text') {
+                        resolve(xhr.response);
+                    } else {
+                        const reader = new FileReader();
+                        // $FlowFixMe
+                        reader.addEventListener('load', () => resolve(reader.result), false);
+                        // $FlowFixMe
+                        reader.addEventListener('error', e => reject(e), false);
+                        reader.readAsDataURL(xhr.response);
+                    }
+                } else {
+                    reject(
+                        __DEV__
+                            ? `Failed to proxy resource ${src.substring(
+                                  0,
+                                  256
+                              )} with status code ${xhr.status}`
+                            : ''
+                    );
+                }
+            } else {
+                resolve(xhr.responseText);
+            }
+        };
+
+        xhr.onerror = reject;
+        xhr.open('GET', `${proxy}?url=${encodeURIComponent(src)}&responseType=${responseType}`);
+
+        if (responseType !== 'text' && xhr instanceof XMLHttpRequest) {
+            xhr.responseType = responseType;
+        }
+
+        if (options.imageTimeout) {
+            const timeout = options.imageTimeout;
+            xhr.timeout = timeout;
+            xhr.ontimeout = () =>
+                reject(__DEV__ ? `Timed out (${timeout}ms) proxying ${src.substring(0, 256)}` : '');
+        }
+
+        xhr.send();
+    });
+};

src/Renderer.js

@@ -1,348 +1,413 @@
-html2canvas.prototype.Renderer = function(queue){
-     
-    var _ = this;
-    
-    this.log('Renderer initiated');
-    
-    this.each(this.opts.renderOrder.split(" "),function(i,renderer){
-        
-        switch(renderer){
-            case "canvas":
-                _.canvas = document.createElement('canvas');
-                if (_.canvas.getContext){
-                    _.canvasRenderer(queue);
-                    _.log('Using canvas renderer');
-                    return false;
-                }               
-                break;
-            case "flash":
-                /*
-                var script = document.createElement('script');
-                script.type = "text/javascript";
-                script.src = _.opts.flashCanvasPath;
-                var s = document.getElementsByTagName('script')[0]; 
-                s.parentNode.insertBefore(script, s);
-                        
-                    
-                if (typeof FlashCanvas != "undefined") {  
-                    _.canvas = initCanvas(document.getElementById("testflash"));
-                    FlashCanvas.initElement(_.canvas);
-                    _.ctx = _.canvas.getContext("2d");
-                    // _.canvas = document.createElement('canvas');
-                    //
-                    _.log('Using Flashcanvas renderer');
-                    _.canvasRenderer(queue);
-                    
-                    return false;
-                }  
-                     */    
-                
-                break;
-            case "html":
-                // TODO add renderer
-                _.log("Using HTML renderer");
-                return false;
-                break;
-             
-             
-        }
-         
-         
-         
-    });
-    
-    //    this.log('No renderer chosen, rendering quit');
-    return this;
-     
-// this.canvasRenderer(queue);
-     
-/*
-     if (!this.canvas.getContext){
-           
-           
-     }*/
-// TODO include Flashcanvas
-/*
-        var script = document.createElement('script');
-        script.type = "text/javascript";
-        script.src = this.opts.flashCanvasPath;
-        var s = document.getElementsByTagName('script')[0]; 
-        s.parentNode.insertBefore(script, s);
+/* @flow */
+'use strict';
 
-        if (typeof FlashCanvas != "undefined") {
-                
-            FlashCanvas.initElement(this.canvas);
-            this.ctx = this.canvas.getContext('2d');
-        }	*/ 
-    
+import type Color from './Color';
+import type {Path} from './drawing/Path';
+import type Size from './drawing/Size';
+import type Logger from './Logger';
+
+import type {BackgroundImage} from './parsing/background';
+import type {Border, BorderSide} from './parsing/border';
+import type {Font} from './parsing/font';
+import type {TextDecoration} from './parsing/textDecoration';
+import type {TextShadow} from './parsing/textShadow';
+import type {Matrix} from './parsing/transform';
+
+import type {BoundCurves} from './Bounds';
+import type {Gradient} from './Gradient';
+import type {ResourceStore, ImageElement} from './ResourceLoader';
+import type NodeContainer from './NodeContainer';
+import type StackingContext from './StackingContext';
+import type {TextBounds} from './TextBounds';
+
+import {
+    Bounds,
+    parsePathForBorder,
+    calculateContentBox,
+    calculatePaddingBox,
+    calculatePaddingBoxPath
+} from './Bounds';
+import {FontMetrics} from './Font';
+import {parseGradient} from './Gradient';
+import TextContainer from './TextContainer';
+
+import {
+    BACKGROUND_ORIGIN,
+    calculateBackgroungPaintingArea,
+    calculateBackgroundPosition,
+    calculateBackgroundRepeatPath,
+    calculateBackgroundSize
+} from './parsing/background';
+import {BORDER_STYLE} from './parsing/border';
+
+export type RenderOptions = {
+    scale: number,
+    backgroundColor: ?Color,
+    imageStore: ResourceStore,
+    fontMetrics: FontMetrics,
+    logger: Logger,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+};
+
+export interface RenderTarget<Output> {
+    clip(clipPaths: Array<Path>, callback: () => void): void,
+
+    drawImage(image: ImageElement, source: Bounds, destination: Bounds): void,
+
+    drawShape(path: Path, color: Color): void,
+
+    fill(color: Color): void,
+
+    getTarget(): Promise<Output>,
+
+    rectangle(x: number, y: number, width: number, height: number, color: Color): void,
+
+    render(options: RenderOptions): void,
+
+    renderLinearGradient(bounds: Bounds, gradient: Gradient): void,
+
+    renderRepeat(
+        path: Path,
+        image: ImageElement,
+        imageSize: Size,
+        offsetX: number,
+        offsetY: number
+    ): void,
+
+    renderTextNode(
+        textBounds: Array<TextBounds>,
+        color: Color,
+        font: Font,
+        textDecoration: TextDecoration | null,
+        textShadows: Array<TextShadow> | null
+    ): void,
+
+    setOpacity(opacity: number): void,
+
+    transform(offsetX: number, offsetY: number, matrix: Matrix, callback: () => void): void
 }
 
+export default class Renderer {
+    target: RenderTarget<*>;
+    options: RenderOptions;
+    _opacity: ?number;
 
-html2canvas.prototype.throttler = function(queue){
-    
-    
-    };
-
-
-html2canvas.prototype.canvasRenderContext = function(storageContext,ctx){
-    
-    // set common settings for canvas
-    ctx.textBaseline = "bottom";
-    var _ = this;
-     
-     
-    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();
-        
+    constructor(target: RenderTarget<*>, options: RenderOptions) {
+        this.target = target;
+        this.options = options;
+        target.render(options);
     }
-        
-    if (storageContext.ctx.storage){
-        _.each(storageContext.ctx.storage,function(a,renderItem){
 
-          
-            switch(renderItem.type){
-                case "variable":
-                    ctx[renderItem.name] = renderItem.arguments;              
-                    break;
-                case "function":
-                    if (renderItem.name=="fillRect"){
-                        
-                        ctx.fillRect(
-                            renderItem.arguments[0],
-                            renderItem.arguments[1],
-                            renderItem.arguments[2],
-                            renderItem.arguments[3]
-                            );
-                    }else if(renderItem.name=="fillText"){
-                        // console.log(renderItem.arguments[0]);
-                        ctx.fillText(renderItem.arguments[0],renderItem.arguments[1],renderItem.arguments[2]);
-                    
-                    }else if(renderItem.name=="drawImage"){
-                        //  console.log(renderItem);
-                        // console.log(renderItem.arguments[0].width);    
-                        if (renderItem.arguments[8] > 0 && renderItem.arguments[7]){
-                            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]
-                                );
-                        }      
-                    }else{
-                        _.log(renderItem);
+    renderNode(container: NodeContainer) {
+        if (container.isVisible()) {
+            this.renderNodeBackgroundAndBorders(container);
+            this.renderNodeContent(container);
+        }
+    }
+
+    renderNodeContent(container: NodeContainer) {
+        const callback = () => {
+            if (container.childNodes.length) {
+                container.childNodes.forEach(child => {
+                    if (child instanceof TextContainer) {
+                        const style = child.parent.style;
+                        this.target.renderTextNode(
+                            child.bounds,
+                            style.color,
+                            style.font,
+                            style.textDecoration,
+                            style.textShadow
+                        );
+                    } else {
+                        this.target.drawShape(child, container.style.color);
                     }
-                       
-  
-                    break;
-                default:
-                               
+                });
             }
-                
-                
-        });
 
-    }  
-    if (storageContext.clip){
-        ctx.restore();
-    }
-    
-}
-
-/*
-html2canvas.prototype.canvasRenderContextChildren = function(storageContext,parentctx){
-    var ctx = storageContext.canvas.getContext('2d');         
-
-    storageContext.canvasPosition = storageContext.canvasPosition || {};             
-    this.canvasRenderContext(storageContext,ctx);
-    
-    
-    for (var s = 0; s<this.queue.length;){
-        if (storageContext.parentStack && this.queue[s].canvas === storageContext.parentStack.canvas){
-            var substorageContext = this.queue.splice(s,1)[0]; 
-            
-            if (substorageContext.ctx.storage[5] && substorageContext.ctx.storage[5].arguments[0]=="Highlights"){    
-               console.log('ssssssadasda');
-            }    
-            
-            this.canvasRenderContextChildren(substorageContext,ctx);
-        //   this.canvasRenderContext(substorageContext,ctx);
-        //    this.canvasRenderStorage(this.queue,ctx);
-            
-                    
-        }else{
-            s++;
-        }
-                  
-    }
-    
-    
-    
-            
-    if (storageContext.ctx.storage[5] && storageContext.ctx.storage[5].arguments[0]=="Highlights"){    
-        $('body').append(parentctx.canvas);
-    }    
-    //var parentctx = this.canvas.getContext("2d");
-            
-    if (storageContext.canvas.width>0 && storageContext.canvas.height > 0){
-        parentctx.drawImage(storageContext.canvas,(storageContext.canvasPosition.x || 0),(storageContext.canvasPosition.y || 0));
-    }
-    
-    
-}
-*/
-html2canvas.prototype.canvasRenderStorage = function(queue,parentctx){
-    
-
-    
-  
-    for (var i = 0; i<queue.length;){
-        var storageContext = queue.splice(0,1)[0];
-        
-       
-       
-        // storageContext.removeOverflow = storageContext.removeOverflow || {};
-        /*
-        if (storageContext.canvas){
-            this.canvasRenderContextChildren(storageContext,parentctx);
-        
-            var ctx = storageContext.canvas.getContext('2d');         
-
-            storageContext.canvasPosition = storageContext.canvasPosition || {};             
-            this.canvasRenderContext(storageContext,ctx);
-            
-            for (var s = 0; s<this.queue.length;){
-                if (this.queue[s].canvas === storageContext.canvas){
-                    var substorageContext = this.queue.splice(s,1)[0];
-                    substorageContext.canvasPosition = storageContext.canvasPosition || {};     
-                    
-                    this.canvasRenderContext(substorageContext,ctx);
-                // this.canvasRenderStorage(this.queue,ctx);
-                    
-                }else{
-                    s++;
+            if (container.image) {
+                const image = this.options.imageStore.get(container.image);
+                if (image) {
+                    const contentBox = calculateContentBox(
+                        container.bounds,
+                        container.style.padding,
+                        container.style.border
+                    );
+                    const width =
+                        typeof image.width === 'number' && image.width > 0
+                            ? image.width
+                            : contentBox.width;
+                    const height =
+                        typeof image.height === 'number' && image.height > 0
+                            ? image.height
+                            : contentBox.height;
+                    if (width > 0 && height > 0) {
+                        this.target.clip([calculatePaddingBoxPath(container.curvedBounds)], () => {
+                            this.target.drawImage(
+                                image,
+                                new Bounds(0, 0, width, height),
+                                contentBox
+                            );
+                        });
+                    }
                 }
-                  
             }
-            
-            
-            //var parentctx = this.canvas.getContext("2d");
-            
-            if (storageContext.canvas.width>0 && storageContext.canvas.height > 0){
-                parentctx.drawImage(storageContext.canvas,(storageContext.canvasPosition.x || 0),(storageContext.canvasPosition.y || 0));
-            }
-            ctx = parentctx;
-            
-        }else{
-        */
-        storageContext.canvasPosition = storageContext.canvasPosition || {};             
-        this.canvasRenderContext(storageContext,parentctx);           
-    //  }
-        
-        
-    /*
-        if (storageContext.newCanvas){
-            var ctx = _.canvas.getContext("2d");
-            ctx.drawImage(canvas,(storageContext.removeOverflow.left || 0),(storageContext.removeOverflow.top || 0));
-            _.ctx = ctx;
-        }*/
-       
-       
-   
+        };
+        const paths = container.getClipPaths();
+        if (paths.length) {
+            this.target.clip(paths, callback);
+        } else {
+            callback();
+        }
     }
-}
 
+    renderNodeBackgroundAndBorders(container: NodeContainer) {
+        const HAS_BACKGROUND =
+            !container.style.background.backgroundColor.isTransparent() ||
+            container.style.background.backgroundImage.length;
 
+        const renderableBorders = container.style.border.filter(
+            border =>
+                border.borderStyle !== BORDER_STYLE.NONE && !border.borderColor.isTransparent()
+        );
 
-html2canvas.prototype.canvasRenderer = function(queue){
-    var _ = this;
-    this.sortZ(this.zStack);
-    queue = this.queue;
-    //console.log(queue);
+        const callback = () => {
+            const backgroundPaintingArea = calculateBackgroungPaintingArea(
+                container.curvedBounds,
+                container.style.background.backgroundClip
+            );
 
-    //queue = this.sortQueue(queue);
-    
-    
-    
-        
-  
-    this.canvas.width = Math.max($(document).width(),this.opts.canvasWidth);   
-    this.canvas.height = Math.max($(document).height(),this.opts.canvasHeight);
-    
-    this.ctx = this.canvas.getContext("2d");
-    
-    this.canvasRenderStorage(queue,this.ctx);
-    
+            if (HAS_BACKGROUND) {
+                this.target.clip([backgroundPaintingArea], () => {
+                    if (!container.style.background.backgroundColor.isTransparent()) {
+                        this.target.fill(container.style.background.backgroundColor);
+                    }
 
-    
-};     
+                    this.renderBackgroundImage(container);
+                });
+            }
 
-/*
- * Sort elements based on z-index and position attributes
- */
+            renderableBorders.forEach((border, side) => {
+                this.renderBorder(border, side, container.curvedBounds);
+            });
+        };
 
-/*
-html2canvas.prototype.sortQueue = function(queue){
-    if (!this.opts.reorderZ || !this.needReorder) return queue;
-    
-    var longest = 0;
-    this.each(queue,function(i,e){
-        if (longest<e.zIndex.length){
-            longest = e.zIndex.length;
+        if (HAS_BACKGROUND || renderableBorders.length) {
+            const paths = container.parent ? container.parent.getClipPaths() : [];
+            if (paths.length) {
+                this.target.clip(paths, callback);
+            } else {
+                callback();
+            }
         }
-    });
-    
-    var counter = 0;
-    //console.log(((queue.length).toString().length)-(count.length).toString().length);
-    this.each(queue,function(i,e){
-        
-        var more = ((queue.length).toString().length)-((counter).toString().length);
-        while(longest>e.zIndex.length){
-            e.zIndex += "0";
-        }
-        e.zIndex = e.zIndex+counter;
-        
-        while((longest+more+(counter).toString().length)>e.zIndex.length){
-            e.zIndex += "0";
-        }
-        counter++;
-    //     console.log(e.zIndex);
-    });
-    
-   
-    
-    queue = queue.sort(function(a,b){
-        
-        if (a.zIndex < b.zIndex) return -1; 
-        if (a.zIndex > b.zIndex) return 1;
-        return 0; 
-    });
-    
-    
+    }
 
-    
-    return queue;
-}
-*/
-
-html2canvas.prototype.setContextVariable = function(ctx,variable,value){
-    if (!ctx.storage){
-        ctx[variable] = value;
-    }else{
-        ctx.storage.push(
-        {
-            type: "variable",
-            name:variable,
-            arguments:value            
+    renderBackgroundImage(container: NodeContainer) {
+        container.style.background.backgroundImage.slice(0).reverse().forEach(backgroundImage => {
+            if (backgroundImage.source.method === 'url' && backgroundImage.source.args.length) {
+                this.renderBackgroundRepeat(container, backgroundImage);
+            } else {
+                const gradient = parseGradient(backgroundImage.source, container.bounds);
+                if (gradient) {
+                    const bounds = container.bounds;
+                    this.target.renderLinearGradient(bounds, gradient);
+                }
+            }
         });
     }
-  
-}
+
+    renderBackgroundRepeat(container: NodeContainer, background: BackgroundImage) {
+        const image = this.options.imageStore.get(background.source.args[0]);
+        if (image) {
+            const bounds = container.bounds;
+            const paddingBox = calculatePaddingBox(bounds, container.style.border);
+            const backgroundImageSize = calculateBackgroundSize(background, image, bounds);
+
+            // TODO support CONTENT_BOX
+            const backgroundPositioningArea =
+                container.style.background.backgroundOrigin === BACKGROUND_ORIGIN.BORDER_BOX
+                    ? bounds
+                    : paddingBox;
+
+            const position = calculateBackgroundPosition(
+                background.position,
+                backgroundImageSize,
+                backgroundPositioningArea
+            );
+            const path = calculateBackgroundRepeatPath(
+                background,
+                position,
+                backgroundImageSize,
+                backgroundPositioningArea,
+                bounds
+            );
+
+            const offsetX = Math.round(paddingBox.left + position.x);
+            const offsetY = Math.round(paddingBox.top + position.y);
+            this.target.renderRepeat(path, image, backgroundImageSize, offsetX, offsetY);
+        }
+    }
+
+    renderBorder(border: Border, side: BorderSide, curvePoints: BoundCurves) {
+        this.target.drawShape(parsePathForBorder(curvePoints, side), border.borderColor);
+    }
+
+    renderStack(stack: StackingContext) {
+        if (stack.container.isVisible()) {
+            const opacity = stack.getOpacity();
+            if (opacity !== this._opacity) {
+                this.target.setOpacity(stack.getOpacity());
+                this._opacity = opacity;
+            }
+
+            const transform = stack.container.style.transform;
+            if (transform !== null) {
+                this.target.transform(
+                    stack.container.bounds.left + transform.transformOrigin[0].value,
+                    stack.container.bounds.top + transform.transformOrigin[1].value,
+                    transform.transform,
+                    () => this.renderStackContent(stack)
+                );
+            } else {
+                this.renderStackContent(stack);
+            }
+        }
+    }
+
+    renderStackContent(stack: StackingContext) {
+        const [
+            negativeZIndex,
+            zeroOrAutoZIndexOrTransformedOrOpacity,
+            positiveZIndex,
+            nonPositionedFloats,
+            nonPositionedInlineLevel
+        ] = splitStackingContexts(stack);
+        const [inlineLevel, nonInlineLevel] = splitDescendants(stack);
+
+        // https://www.w3.org/TR/css-position-3/#painting-order
+        // 1. the background and borders of the element forming the stacking context.
+        this.renderNodeBackgroundAndBorders(stack.container);
+        // 2. the child stacking contexts with negative stack levels (most negative first).
+        negativeZIndex.sort(sortByZIndex).forEach(this.renderStack, this);
+        // 3. For all its in-flow, non-positioned, block-level descendants in tree order:
+        this.renderNodeContent(stack.container);
+        nonInlineLevel.forEach(this.renderNode, this);
+        // 4. All non-positioned floating descendants, in tree order. For each one of these,
+        // treat the element as if it created a new stacking context, but any positioned descendants and descendants
+        // which actually create a new stacking context should be considered part of the parent stacking context,
+        // not this new one.
+        nonPositionedFloats.forEach(this.renderStack, this);
+        // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
+        nonPositionedInlineLevel.forEach(this.renderStack, this);
+        inlineLevel.forEach(this.renderNode, this);
+        // 6. All positioned, opacity or transform descendants, in tree order that fall into the following categories:
+        //  All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
+        //  For those with 'z-index: auto', treat the element as if it created a new stacking context,
+        //  but any positioned descendants and descendants which actually create a new stacking context should be
+        //  considered part of the parent stacking context, not this new one. For those with 'z-index: 0',
+        //  treat the stacking context generated atomically.
+        //
+        //  All opacity descendants with opacity less than 1
+        //
+        //  All transform descendants with transform other than none
+        zeroOrAutoZIndexOrTransformedOrOpacity.forEach(this.renderStack, this);
+        // 7. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index
+        // order (smallest first) then tree order.
+        positiveZIndex.sort(sortByZIndex).forEach(this.renderStack, this);
+    }
+
+    render(stack: StackingContext): Promise<*> {
+        if (this.options.backgroundColor) {
+            this.target.rectangle(
+                0,
+                0,
+                this.options.width,
+                this.options.height,
+                this.options.backgroundColor
+            );
+        }
+        this.renderStack(stack);
+        const target = this.target.getTarget();
+        if (__DEV__) {
+            return target.then(output => {
+                this.options.logger.log(`Render completed`);
+                return output;
+            });
+        }
+        return target;
+    }
+}
+
+const splitDescendants = (stack: StackingContext): [Array<NodeContainer>, Array<NodeContainer>] => {
+    const inlineLevel = [];
+    const nonInlineLevel = [];
+
+    const length = stack.children.length;
+    for (let i = 0; i < length; i++) {
+        let child = stack.children[i];
+        if (child.isInlineLevel()) {
+            inlineLevel.push(child);
+        } else {
+            nonInlineLevel.push(child);
+        }
+    }
+    return [inlineLevel, nonInlineLevel];
+};
+
+const splitStackingContexts = (
+    stack: StackingContext
+): [
+    Array<StackingContext>,
+    Array<StackingContext>,
+    Array<StackingContext>,
+    Array<StackingContext>,
+    Array<StackingContext>
+] => {
+    const negativeZIndex = [];
+    const zeroOrAutoZIndexOrTransformedOrOpacity = [];
+    const positiveZIndex = [];
+    const nonPositionedFloats = [];
+    const nonPositionedInlineLevel = [];
+    const length = stack.contexts.length;
+    for (let i = 0; i < length; i++) {
+        let child = stack.contexts[i];
+        if (
+            child.container.isPositioned() ||
+            child.container.style.opacity < 1 ||
+            child.container.isTransformed()
+        ) {
+            if (child.container.style.zIndex.order < 0) {
+                negativeZIndex.push(child);
+            } else if (child.container.style.zIndex.order > 0) {
+                positiveZIndex.push(child);
+            } else {
+                zeroOrAutoZIndexOrTransformedOrOpacity.push(child);
+            }
+        } else {
+            if (child.container.isFloating()) {
+                nonPositionedFloats.push(child);
+            } else {
+                nonPositionedInlineLevel.push(child);
+            }
+        }
+    }
+    return [
+        negativeZIndex,
+        zeroOrAutoZIndexOrTransformedOrOpacity,
+        positiveZIndex,
+        nonPositionedFloats,
+        nonPositionedInlineLevel
+    ];
+};
+
+const sortByZIndex = (a: StackingContext, b: StackingContext): number => {
+    if (a.container.style.zIndex.order > b.container.style.zIndex.order) {
+        return 1;
+    } else if (a.container.style.zIndex.order < b.container.style.zIndex.order) {
+        return -1;
+    }
+
+    return a.container.index > b.container.index ? 1 : -1;
+};

src/ResourceLoader.js

@@ -0,0 +1,249 @@
+/* @flow */
+'use strict';
+
+import type Options from './index';
+import type Logger from './Logger';
+
+export type ImageElement = Image | HTMLCanvasElement;
+export type Resource = ImageElement;
+type ResourceCache = {[string]: Promise<Resource>};
+
+import FEATURES from './Feature';
+import {Proxy} from './Proxy';
+
+export default class ResourceLoader {
+    origin: string;
+    options: Options;
+    _link: HTMLAnchorElement;
+    cache: ResourceCache;
+    logger: Logger;
+    _index: number;
+    _window: WindowProxy;
+
+    constructor(options: Options, logger: Logger, window: WindowProxy) {
+        this.options = options;
+        this._window = window;
+        this.origin = this.getOrigin(window.location.href);
+        this.cache = {};
+        this.logger = logger;
+        this._index = 0;
+    }
+
+    loadImage(src: string): ?string {
+        if (this.hasResourceInCache(src)) {
+            return src;
+        }
+
+        if (isSVG(src)) {
+            if (this.options.allowTaint === true || FEATURES.SUPPORT_SVG_DRAWING) {
+                return this.addImage(src, src, false);
+            }
+        } else {
+            if (
+                this.options.allowTaint === true ||
+                isInlineBase64Image(src) ||
+                this.isSameOrigin(src)
+            ) {
+                return this.addImage(src, src, false);
+            } else if (!this.isSameOrigin(src)) {
+                if (typeof this.options.proxy === 'string') {
+                    this.cache[src] = Proxy(src, this.options).then(src =>
+                        loadImage(src, this.options.imageTimeout || 0)
+                    );
+                    return src;
+                } else if (this.options.useCORS === true && FEATURES.SUPPORT_CORS_IMAGES) {
+                    return this.addImage(src, src, true);
+                }
+            }
+        }
+    }
+
+    inlineImage(src: string): Promise<Resource> {
+        if (isInlineImage(src)) {
+            return loadImage(src, this.options.imageTimeout || 0);
+        }
+        if (this.hasResourceInCache(src)) {
+            return this.cache[src];
+        }
+        if (!this.isSameOrigin(src) && typeof this.options.proxy === 'string') {
+            return (this.cache[src] = Proxy(src, this.options).then(src =>
+                loadImage(src, this.options.imageTimeout || 0)
+            ));
+        }
+
+        return this.xhrImage(src);
+    }
+
+    xhrImage(src: string): Promise<Resource> {
+        this.cache[src] = new Promise((resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = () => {
+                if (xhr.readyState === 4) {
+                    if (xhr.status !== 200) {
+                        reject(
+                            `Failed to fetch image ${src.substring(
+                                0,
+                                256
+                            )} with status code ${xhr.status}`
+                        );
+                    } else {
+                        const reader = new FileReader();
+                        reader.addEventListener(
+                            'load',
+                            () => {
+                                // $FlowFixMe
+                                const result: string = reader.result;
+                                resolve(result);
+                            },
+                            false
+                        );
+                        reader.addEventListener('error', (e: Event) => reject(e), false);
+                        reader.readAsDataURL(xhr.response);
+                    }
+                }
+            };
+            xhr.responseType = 'blob';
+            if (this.options.imageTimeout) {
+                const timeout = this.options.imageTimeout;
+                xhr.timeout = timeout;
+                xhr.ontimeout = () =>
+                    reject(
+                        __DEV__ ? `Timed out (${timeout}ms) fetching ${src.substring(0, 256)}` : ''
+                    );
+            }
+            xhr.open('GET', src, true);
+            xhr.send();
+        }).then(src => loadImage(src, this.options.imageTimeout || 0));
+
+        return this.cache[src];
+    }
+
+    loadCanvas(node: HTMLCanvasElement): string {
+        const key = String(this._index++);
+        this.cache[key] = Promise.resolve(node);
+        return key;
+    }
+
+    hasResourceInCache(key: string): boolean {
+        return typeof this.cache[key] !== 'undefined';
+    }
+
+    addImage(key: string, src: string, useCORS: boolean): string {
+        if (__DEV__) {
+            this.logger.log(`Added image ${key.substring(0, 256)}`);
+        }
+
+        const imageLoadHandler = (supportsDataImages: boolean): Promise<Image> =>
+            new Promise((resolve, reject) => {
+                const img = new Image();
+                img.onload = () => resolve(img);
+                //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous
+                if (!supportsDataImages || useCORS) {
+                    img.crossOrigin = 'anonymous';
+                }
+
+                img.onerror = reject;
+                img.src = src;
+                if (img.complete === true) {
+                    // Inline XML images may fail to parse, throwing an Error later on
+                    setTimeout(() => {
+                        resolve(img);
+                    }, 500);
+                }
+                if (this.options.imageTimeout) {
+                    const timeout = this.options.imageTimeout;
+                    setTimeout(
+                        () =>
+                            reject(
+                                __DEV__
+                                    ? `Timed out (${timeout}ms) fetching ${src.substring(0, 256)}`
+                                    : ''
+                            ),
+                        timeout
+                    );
+                }
+            });
+
+        this.cache[key] =
+            isInlineBase64Image(src) && !isSVG(src)
+                ? // $FlowFixMe
+                  FEATURES.SUPPORT_BASE64_DRAWING(src).then(imageLoadHandler)
+                : imageLoadHandler(true);
+        return key;
+    }
+
+    isSameOrigin(url: string): boolean {
+        return this.getOrigin(url) === this.origin;
+    }
+
+    getOrigin(url: string): string {
+        const link = this._link || (this._link = this._window.document.createElement('a'));
+        link.href = url;
+        link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/
+        return link.protocol + link.hostname + link.port;
+    }
+
+    ready(): Promise<ResourceStore> {
+        const keys: Array<string> = Object.keys(this.cache);
+        const values: Array<Promise<?Resource>> = keys.map(str =>
+            this.cache[str].catch(e => {
+                if (__DEV__) {
+                    this.logger.log(`Unable to load image`, e);
+                }
+                return null;
+            })
+        );
+        return Promise.all(values).then((images: Array<?Resource>) => {
+            if (__DEV__) {
+                this.logger.log(`Finished loading ${images.length} images`, images);
+            }
+            return new ResourceStore(keys, images);
+        });
+    }
+}
+
+export class ResourceStore {
+    _keys: Array<string>;
+    _resources: Array<?Resource>;
+
+    constructor(keys: Array<string>, resources: Array<?Resource>) {
+        this._keys = keys;
+        this._resources = resources;
+    }
+
+    get(key: string): ?Resource {
+        const index = this._keys.indexOf(key);
+        return index === -1 ? null : this._resources[index];
+    }
+}
+
+const INLINE_SVG = /^data:image\/svg\+xml/i;
+const INLINE_BASE64 = /^data:image\/.*;base64,/i;
+const INLINE_IMG = /^data:image\/.*/i;
+
+const isInlineImage = (src: string): boolean => INLINE_IMG.test(src);
+const isInlineBase64Image = (src: string): boolean => INLINE_BASE64.test(src);
+
+const isSVG = (src: string): boolean =>
+    src.substr(-3).toLowerCase() === 'svg' || INLINE_SVG.test(src);
+
+const loadImage = (src: string, timeout: number): Promise<Image> => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+        img.src = src;
+        if (img.complete === true) {
+            // Inline XML images may fail to parse, throwing an Error later on
+            setTimeout(() => {
+                resolve(img);
+            }, 500);
+        }
+        if (timeout) {
+            setTimeout(
+                () => reject(__DEV__ ? `Timed out (${timeout}ms) loading image` : ''),
+                timeout
+            );
+        }
+    });
+};

src/StackingContext.js

@@ -0,0 +1,37 @@
+/* @flow */
+'use strict';
+
+import NodeContainer from './NodeContainer';
+import {POSITION} from './parsing/position';
+
+export default class StackingContext {
+    container: NodeContainer;
+    parent: ?StackingContext;
+    contexts: Array<StackingContext>;
+    children: Array<NodeContainer>;
+    treatAsRealStackingContext: boolean;
+
+    constructor(
+        container: NodeContainer,
+        parent: ?StackingContext,
+        treatAsRealStackingContext: boolean
+    ) {
+        this.container = container;
+        this.parent = parent;
+        this.contexts = [];
+        this.children = [];
+        this.treatAsRealStackingContext = treatAsRealStackingContext;
+    }
+
+    getOpacity(): number {
+        return this.parent
+            ? this.container.style.opacity * this.parent.getOpacity()
+            : this.container.style.opacity;
+    }
+
+    getRealParentStackingContext(): StackingContext {
+        return !this.parent || this.treatAsRealStackingContext
+            ? this
+            : this.parent.getRealParentStackingContext();
+    }
+}

src/Text.js

@@ -1,288 +0,0 @@
-            
-html2canvas.prototype.newText = function(el,textNode,stack,form){
-    var ctx = stack.ctx;
-    var family = this.getCSS(el,"font-family");
-    var size = this.getCSS(el,"font-size");
-    var color = this.getCSS(el,"color");
-  
-
-     
-    var text_decoration = this.getCSS(el,"text-decoration");
-    var text_align = this.getCSS(el,"text-align");  
-    
-    
-    var letter_spacing = this.getCSS(el,"letter-spacing");
-
-    // apply text-transform:ation to the text
-    textNode.nodeValue = this.textTransform(textNode.nodeValue,this.getCSS(el,"text-transform"));
-    var text = this.trim(textNode.nodeValue);		
-	
-    //text = $.trim(text);
-    if (text.length>0){
-
-            
-            
-        if (text_decoration!="none"){
-            var metrics = this.fontMetrics(family,size);
-            
-        }    
-        
-        var renderList,
-        renderWords = false;
-        
-        	
-        text_align = text_align.replace(["-webkit-auto"],["auto"])
-        
-        
-        if (this.opts.letterRendering == false && /^(left|right|justify|auto)$/.test(text_align) && /^(normal|none)$/.test(letter_spacing)){
-            // this.setContextVariable(ctx,"textAlign",text_align);  
-            renderWords = true;
-            renderList = textNode.nodeValue.split(/(\b| )/);
-            
-        }else{
-            //  this.setContextVariable(ctx,"textAlign","left");
-            renderList = textNode.nodeValue.split("");
-        }
-       
-        this.setFont(ctx,el,false);
-
-        
-        /*
-        if (stack.clip){
-        ctx.rect (stack.clip.left, stack.clip.top, stack.clip.width, stack.clip.height);
-        ctx.clip();
-        }
-*/
-        
-
-            
-         
-        var oldTextNode = textNode;
-        for(var c=0;c<renderList.length;c++){
-            
-                        
-            // IE 9 bug
-            if (typeof oldTextNode.nodeValue != "string"){
-                continue;
-            }
-                
-            // TODO only do the splitting for non-range prints
-            var newTextNode = oldTextNode.splitText(renderList[c].length);
-           
-            if (text_decoration!="none" || this.trim(oldTextNode.nodeValue).length != 0){
-                
-               
-           
-
-                if (this.support.rangeBounds){
-                    // getBoundingClientRect is supported for ranges
-                    if (document.createRange){
-                        var range = document.createRange();
-                        range.selectNode(oldTextNode);
-                    }else{
-                        // TODO add IE support
-                        var range = document.body.createTextRange();
-                    }
-                    if (range.getBoundingClientRect()){
-                        var bounds = range.getBoundingClientRect();
-                    }else{
-                        var bounds = {};
-                    }
-                }else{
-                    // it isn't supported, so let's wrap it inside an element instead and the bounds there
-               
-                    var parent = oldTextNode.parentNode;
-                    var wrapElement = document.createElement('wrapper');
-                    var backupText = oldTextNode.cloneNode(true);
-                    wrapElement.appendChild(oldTextNode.cloneNode(true));
-                    parent.replaceChild(wrapElement,oldTextNode);
-                                    
-                    var bounds = this.getBounds(wrapElement);
-    
-                    parent.replaceChild(backupText,wrapElement);      
-                }
-               
-               
-       
-
-                //   console.log(range);
-                //      console.log("'"+oldTextNode.nodeValue+"'"+bounds.left)
-                this.printText(oldTextNode.nodeValue,bounds.left,bounds.bottom,ctx);
-                    
-                switch(text_decoration) {
-                    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.newRect(ctx,bounds.left,Math.round(bounds.top+metrics.baseline+metrics.lineWidth),bounds.width,1,color);
-                        break;
-                    case "overline":
-                        this.newRect(ctx,bounds.left,bounds.top,bounds.width,1,color);
-                        break;
-                    case "line-through":
-                        // TODO try and find exact position for line-through
-                        this.newRect(ctx,bounds.left,Math.ceil(bounds.top+metrics.middle+metrics.lineWidth),bounds.width,1,color);
-                        break;
-                    
-                }	
-                
-            }
-            
-            oldTextNode = newTextNode;
-                  
-                  
-                  
-        }
-        
-         
-					
-    }
-			
-}
-
-html2canvas.prototype.setFont = function(ctx,el,align){
-    
-    var family = this.getCSS(el,"font-family");
-    var size = this.getCSS(el,"font-size");
-    var color = this.getCSS(el,"color");
-  
-    var bold = this.getCSS(el,"font-weight");
-    var font_style = this.getCSS(el,"font-style");
-    var font_variant = this.getCSS(el,"font-variant");
-    
-    switch(bold){
-        case 401:
-            bold = "bold";
-            break;
-        case 400:
-            bold = "normal";
-            break;
-    }
-    
-    var font = font_variant+" "+bold+" "+font_style+" "+size+" "+family;
-       
-        
-    this.setContextVariable(ctx,"fillStyle",color);  
-    this.setContextVariable(ctx,"font",font);
-    if (align){
-        this.setContextVariable(ctx,"textAlign","right");
-    }else{
-        this.setContextVariable(ctx,"textAlign","left");
-    }
-    
-}
-
-
-/*
- * Function to find baseline for font with a specicic size
- */
-html2canvas.prototype.fontMetrics = function(font,fontSize){
-    
-    
-    var findMetrics = this.fontData.indexOf(font+"-"+fontSize);
-    
-    if (findMetrics>-1){
-        return this.fontData[findMetrics+1];
-    }
-    
-    var container = document.createElement('div');
-    document.getElementsByTagName('body')[0].appendChild(container);
-    
-    // jquery to speed this up, TODO remove jquery dependancy
-    $(container).css({
-        visibility:'hidden',
-        fontFamily:font,
-        fontSize:fontSize,
-        margin:0,
-        padding:0
-    });
-    
-
-    
-    var img = document.createElement('img');
-    
-    // TODO add another image
-    img.src = "http://html2canvas.hertzen.com/images/8.jpg";
-    img.width = 1;
-    img.height = 1;
-    
-    $(img).css({
-        margin:0,
-        padding:0
-    });
-    var span = document.createElement('span');
-    
-    $(span).css({
-        fontFamily:font,
-        fontSize:fontSize,
-        margin:0,
-        padding:0
-    });
-    
-    
-    span.appendChild(document.createTextNode('Hidden Text'));
-    container.appendChild(span);
-    container.appendChild(img);
-    var baseline = (img.offsetTop-span.offsetTop)+1;
-    
-    container.removeChild(span);
-    container.appendChild(document.createTextNode('Hidden Text'));
-    
-    $(container).css('line-height','normal');
-    $(img).css("vertical-align","super");
-    var middle = (img.offsetTop-container.offsetTop)+1;  
-    
-    var metricsObj = {
-        baseline: baseline,
-        lineWidth: 1,
-        middle: middle
-    };
-    
-    
-    this.fontData.push(font+"-"+fontSize);
-    this.fontData.push(metricsObj);
-    
-    $(container).remove();
-    
-    
-    
-    return metricsObj;
-    
-}
-
-
-
-
-
-/*
- * Function to apply text-transform attribute to text
- */    
-html2canvas.prototype.textTransform = function(text,transform){
-    switch(transform){
-        case "lowercase":
-            return text.toLowerCase();
-            break;
-					
-        case "capitalize":
-            return text.replace( /(^|\s|:|-|\(|\))([a-z])/g , function(m,p1,p2){
-                return p1+p2.toUpperCase();
-            } );
-            break;
-					
-        case "uppercase":
-            return text.toUpperCase();
-            break;
-        default:
-            return text;
-				
-    }
-        
-}
-     
-     
-     
-/*
- *Function to trim whitespace from text
- */
-html2canvas.prototype.trim = function(text) {
-    return text.replace(/^\s*/, "").replace(/\s*$/, "");
-}

src/TextBounds.js

@@ -0,0 +1,129 @@
+/* @flow */
+'use strict';
+
+import {ucs2} from 'punycode';
+import type NodeContainer from './NodeContainer';
+import {Bounds, parseBounds} from './Bounds';
+import {TEXT_DECORATION} from './parsing/textDecoration';
+
+import FEATURES from './Feature';
+
+const UNICODE = /[^\u0000-\u00ff]/;
+
+const hasUnicodeCharacters = (text: string): boolean => UNICODE.test(text);
+
+const encodeCodePoint = (codePoint: number): string => ucs2.encode([codePoint]);
+
+export class TextBounds {
+    text: string;
+    bounds: Bounds;
+
+    constructor(text: string, bounds: Bounds) {
+        this.text = text;
+        this.bounds = bounds;
+    }
+}
+
+export const parseTextBounds = (
+    value: string,
+    parent: NodeContainer,
+    node: Text
+): Array<TextBounds> => {
+    const codePoints = ucs2.decode(value);
+    const letterRendering = parent.style.letterSpacing !== 0 || hasUnicodeCharacters(value);
+    const textList = letterRendering ? codePoints.map(encodeCodePoint) : splitWords(codePoints);
+    const length = textList.length;
+    const defaultView = node.parentNode ? node.parentNode.ownerDocument.defaultView : null;
+    const scrollX = defaultView ? defaultView.pageXOffset : 0;
+    const scrollY = defaultView ? defaultView.pageYOffset : 0;
+    const textBounds = [];
+    let offset = 0;
+    for (let i = 0; i < length; i++) {
+        let text = textList[i];
+        if (parent.style.textDecoration !== TEXT_DECORATION.NONE || text.trim().length > 0) {
+            if (FEATURES.SUPPORT_RANGE_BOUNDS) {
+                textBounds.push(
+                    new TextBounds(
+                        text,
+                        getRangeBounds(node, offset, text.length, scrollX, scrollY)
+                    )
+                );
+            } else {
+                const replacementNode = node.splitText(text.length);
+                textBounds.push(new TextBounds(text, getWrapperBounds(node, scrollX, scrollY)));
+                node = replacementNode;
+            }
+        } else if (!FEATURES.SUPPORT_RANGE_BOUNDS) {
+            node = node.splitText(text.length);
+        }
+        offset += text.length;
+    }
+    return textBounds;
+};
+
+const getWrapperBounds = (node: Text, scrollX: number, scrollY: number): Bounds => {
+    const wrapper = node.ownerDocument.createElement('html2canvaswrapper');
+    wrapper.appendChild(node.cloneNode(true));
+    const parentNode = node.parentNode;
+    if (parentNode) {
+        parentNode.replaceChild(wrapper, node);
+        const bounds = parseBounds(wrapper, scrollX, scrollY);
+        if (wrapper.firstChild) {
+            parentNode.replaceChild(wrapper.firstChild, wrapper);
+        }
+        return bounds;
+    }
+    return new Bounds(0, 0, 0, 0);
+};
+
+const getRangeBounds = (
+    node: Text,
+    offset: number,
+    length: number,
+    scrollX: number,
+    scrollY: number
+): Bounds => {
+    const range = node.ownerDocument.createRange();
+    range.setStart(node, offset);
+    range.setEnd(node, offset + length);
+    return Bounds.fromClientRect(range.getBoundingClientRect(), scrollX, scrollY);
+};
+
+const splitWords = (codePoints: Array<number>): Array<string> => {
+    const words = [];
+    let i = 0;
+    let onWordBoundary = false;
+    let word;
+    while (codePoints.length) {
+        if (isWordBoundary(codePoints[i]) === onWordBoundary) {
+            word = codePoints.splice(0, i);
+            if (word.length) {
+                words.push(ucs2.encode(word));
+            }
+            onWordBoundary = !onWordBoundary;
+            i = 0;
+        } else {
+            i++;
+        }
+
+        if (i >= codePoints.length) {
+            word = codePoints.splice(0, i);
+            if (word.length) {
+                words.push(ucs2.encode(word));
+            }
+        }
+    }
+    return words;
+};
+
+const isWordBoundary = (characterCode: number): boolean => {
+    return (
+        [
+            32, // <space>
+            13, // \r
+            10, // \n
+            9, // \t
+            45 // -
+        ].indexOf(characterCode) !== -1
+    );
+};

src/TextContainer.js

@@ -0,0 +1,48 @@
+/* @flow */
+'use strict';
+
+import type NodeContainer from './NodeContainer';
+import type {TextTransform} from './parsing/textTransform';
+import type {TextBounds} from './TextBounds';
+import {TEXT_TRANSFORM} from './parsing/textTransform';
+import {parseTextBounds} from './TextBounds';
+
+export default class TextContainer {
+    text: string;
+    parent: NodeContainer;
+    bounds: Array<TextBounds>;
+
+    constructor(text: string, parent: NodeContainer, bounds: Array<TextBounds>) {
+        this.text = text;
+        this.parent = parent;
+        this.bounds = bounds;
+    }
+
+    static fromTextNode(node: Text, parent: NodeContainer) {
+        const text = transform(node.data, parent.style.textTransform);
+        return new TextContainer(text, parent, parseTextBounds(text, parent, node));
+    }
+}
+
+const CAPITALIZE = /(^|\s|:|-|\(|\))([a-z])/g;
+
+const transform = (text: string, transform: TextTransform) => {
+    switch (transform) {
+        case TEXT_TRANSFORM.LOWERCASE:
+            return text.toLowerCase();
+        case TEXT_TRANSFORM.CAPITALIZE:
+            return text.replace(CAPITALIZE, capitalize);
+        case TEXT_TRANSFORM.UPPERCASE:
+            return text.toUpperCase();
+        default:
+            return text;
+    }
+};
+
+function capitalize(m, p1, p2) {
+    if (m.length > 0) {
+        return p1 + p2.toUpperCase();
+    }
+
+    return m;
+}

src/Traversing.js

@@ -1,46 +0,0 @@
- 
-    
-html2canvas.prototype.parseElement = function(element,stack){
-    var _ = this;    
-    this.each(element.children,function(index,el){	      
-        _.parsing(el,stack);	     
-    });
-    
-    this.log('Render queue stored');
-    this.opts.storageReady(this);
-    this.finish();
-}
-
-
-        
-html2canvas.prototype.parsing = function(el,stack){
-   
-    if (this.getCSS(el,'display') != "none" && this.getCSS(el,'visibility')!="hidden"){ 
-
-        var _ = this;
-      
-        stack = this.newElement(el,stack) || stack;
-        
-        var ctx = stack.ctx;
-      
-        if (!this.ignoreRe.test(el.nodeName)){
-            // TODO remove jQuery dependancy	
-            this.each(this.contentsInZ(el),function(cid,node){
-					
-                if (node.nodeType==1){
-                    // element
-                    _.parsing(node,stack);								
-                }else if (node.nodeType==3){   
-                    _.newText(el,node,stack);
-                }              
-						
-            });
-                
-        }	
-        
-
-        
-    }
-// }
-}
-    

src/Util.js

@@ -1,285 +1,19 @@
+/* @flow */
+'use strict';
 
-// Simple logger
-html2canvas.prototype.log = function(a){    
-    if (this.opts.logging){
-        
-        this.opts.logger(a);
+export const contains = (bit: number, value: number): boolean => (bit & value) !== 0;
 
-    }
-}                    
-
-html2canvas.prototype.withinBounds = function(src,dst){
-    if (!src) return true;
-    // return true; 
-    return (
-        (src.left <= dst.left || dst.left+dst.width < src.left) &&
-        (src.top <= dst.top || dst.top+dst.height < src.top)
-        );
- 
-    
-}
-
-
-html2canvas.prototype.clipBounds = function(src,dst){
- 
-    var x = Math.max(src.left,dst.left);
-    var y = Math.max(src.top,dst.top);
- 
-    var x2 = Math.min((src.left+src.width),(dst.left+dst.width));
-    var y2 = Math.min((src.top+src.height),(dst.top+dst.height));
- 
-    return {
-        left:x,
-        top:y,
-        width:x2-x,
-        height:y2-y
-    };
- 
-}
-
-
-/**
- * Function to provide bounds for element
- * @return {Bounds} object with position and dimension information
- */
-html2canvas.prototype.getBounds = function(el){
-        
-    window.scroll(0,0);
-        
-    if (el.getBoundingClientRect){	
-        var clientRect = el.getBoundingClientRect();	
-        var bounds = {};
-        // need to create new object, as clientrect bounds can't be modified, thanks pufuwozu
-        // 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;
-        bounds.width = clientRect.width;
-        bounds.height = clientRect.height;
-        
-        
-        
-        return bounds;
-    }else{
-            
-        // TODO remove jQuery dependancy
-        var p = $(el).offset();       
-          
-        return {               
-            left: p.left + this.getCSS(el,"border-left-width",true),
-            top: p.top + this.getCSS(el,"border-top-width",true),
-            width:$(el).innerWidth(),
-            height:$(el).innerHeight()                
-        }
-
-    }           
-}
-    
-     
-     
-/*
- * Function for looping through array
- */
-html2canvas.prototype.each = function(arrayLoop,callbackFunc){
-    callbackFunc = callbackFunc || function(){};
-    for (var i=0;i<arrayLoop.length;i++){       
-        if (callbackFunc(i,arrayLoop[i]) === false) return;
-    }
-}
-
-
-/*
- * Function to get childNodes of an element in the order they should be rendered (based on z-index)
- * reference http://www.w3.org/TR/CSS21/zindex.html
- */
-
-html2canvas.prototype.contentsInZ = function(el){
-    
-    // TODO remove jQuery dependency
-    
-    var contents = $(el).contents();
-    
-    return contents;
- 
-}
-
-    
-/*
- * Function for fetching the element attribute
- */  
-html2canvas.prototype.getAttr = function(el,attribute){
-    return el.getAttribute(attribute);
-//return $(el).attr(attribute);
-}
-
-/*
- * Function to extend object
- */
-html2canvas.prototype.extendObj = function(options,defaults){
-    for (var key in options){              
-        defaults[key] = options[key];
-    }
-    return defaults;           
-}
-
-/*
- *todo remove this function
-html2canvas.prototype.leadingZero = function(num,size){
-    
-    var s = "000000000" + num;
-    return s.substr(s.length-size);    
-}    
-*/
-
-html2canvas.prototype.zContext = function(zindex){
-    return {
-        zindex: zindex,
-        children: []
-    }
-    
-}
-
-html2canvas.prototype.setZ = function(zindex,position,parentZ,parentNode){
-    // TODO fix static elements overlapping relative/absolute elements under same stack, if they are defined after them
-    if (!parentZ){
-        this.zStack = new this.zContext(0);
-        return this.zStack;
-    }
-    
-    if (zindex!="auto"){
-        this.needReorder = true;
-        var newContext = new this.zContext(zindex);
-        parentZ.children.push(newContext);
-        
-        return newContext;
-        
-    }else {
-        return parentZ;
-    }
-    
-}
-
-html2canvas.prototype.sortZ = function(zStack){
-    var subStacks = [];
-    var stackValues = [];
-    var _ = this;
-
-    this.each(zStack.children, function(i,stackChild){
-        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
-        });
-    
-    this.each(stackValues, function(i,zValue){
-        for (var s = 0;s<=subStacks.length;s++){
-            if (subStacks[s].zindex == zValue){
-                var stackChild = subStacks.splice(s,1);
-                _.sortZ(stackChild[0]);
-                break;
-                  
-            }
-        }
-
-    });
- 
-    
-}
-
-/*
- *todo remove this function
-
-html2canvas.prototype.formatZ = function(zindex,position,parentZ,parentNode){
-    
-    if (!parentZ){
-        parentZ = "0";
-    }
-
-
-    if (position!="static" && parentZ.charAt(0)=="0"){
-        this.needReorder = true;
-        parentZ = "1"+parentZ.slice(1);        
-    }
-
-    if (zindex=="auto"){
-        var parentPosition = this.getCSS(parentNode,"position");
-        if (parentPosition!="static" && typeof parentPosition != "undefined"){
-            zindex = 0;
-        }
-    else{
-            return parentZ;
+export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement): HTMLElement => {
+    // Edge does not provide value for cssText
+    for (let i = style.length - 1; i >= 0; i--) {
+        const property = style.item(i);
+        // Safari shows pseudoelements if content is set
+        if (property !== 'content') {
+            target.style.setProperty(property, style.getPropertyValue(property));
         }
     }
-    
-    var b = this.leadingZero(this.numDraws,9);  
-    
-    
-    var s = this.leadingZero(zindex+1,9);
+    return target;
+};
 
-    // var s = "000000000" + num;
-    return parentZ+""+""+s+""+b;
-    
-    
-    
-}
-    */
-    
-    
-    
-/*
- * Get element childNodes
- */
-    
-html2canvas.prototype.getContents = function(el){
-    return (el.nodeName ==  "iframe" ) ?
-    el.contentDocument || el.contentWindow.document :
-    el.childNodes;
-}
-
-    
-/*
- * Function for fetching the css attribute
- * TODO remove jQuery dependancy
- */
-html2canvas.prototype.getCSS = function(el,attribute,intOnly){
-    if (intOnly){
-        return parseInt($(el).css(attribute),10); 
-    }else{
-        return $(el).css(attribute);
-    }
-}
-
-
-html2canvas.prototype.getIndex = function(array,src){
-    
-    if (array.indexOf){
-        return array.indexOf(src);
-    }else{
-        for(var i = 0; i < array.length; i++){
-            if(this[i] == src) return i;
-        }
-        return -1;
-    }
-    
-}
-
-
-html2canvas.prototype.isSameOrigin = function(url){
-    var link = document.createElement("a");
-    link.href = url;
-
-    return ((link.protocol + link.host) == this.pageOrigin);
-}
+export const SMALL_IMAGE =
+    'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';

src/Window.js

@@ -0,0 +1,141 @@
+/* @flow */
+'use strict';
+
+import type {Options} from './index';
+
+import Logger from './Logger';
+
+import {NodeParser} from './NodeParser';
+import Renderer from './Renderer';
+import ForeignObjectRenderer from './renderer/ForeignObjectRenderer';
+
+import Feature from './Feature';
+import {Bounds} from './Bounds';
+import {cloneWindow, DocumentCloner} from './Clone';
+import {FontMetrics} from './Font';
+import Color, {TRANSPARENT} from './Color';
+
+export const renderElement = (
+    element: HTMLElement,
+    options: Options,
+    logger: Logger
+): Promise<*> => {
+    const ownerDocument = element.ownerDocument;
+
+    const windowBounds = new Bounds(
+        options.scrollX,
+        options.scrollY,
+        options.windowWidth,
+        options.windowHeight
+    );
+
+    // http://www.w3.org/TR/css3-background/#special-backgrounds
+    const documentBackgroundColor = ownerDocument.documentElement
+        ? new Color(getComputedStyle(ownerDocument.documentElement).backgroundColor)
+        : TRANSPARENT;
+    const bodyBackgroundColor = ownerDocument.body
+        ? new Color(getComputedStyle(ownerDocument.body).backgroundColor)
+        : TRANSPARENT;
+
+    const backgroundColor =
+        element === ownerDocument.documentElement
+            ? documentBackgroundColor.isTransparent()
+              ? bodyBackgroundColor.isTransparent()
+                ? options.backgroundColor ? new Color(options.backgroundColor) : null
+                : bodyBackgroundColor
+              : documentBackgroundColor
+            : options.backgroundColor ? new Color(options.backgroundColor) : null;
+
+    return (options.foreignObjectRendering
+        ? // $FlowFixMe
+          Feature.SUPPORT_FOREIGNOBJECT_DRAWING
+        : Promise.resolve(false)).then(
+        supportForeignObject =>
+            supportForeignObject
+                ? (cloner => {
+                      if (__DEV__) {
+                          logger.log(`Document cloned, using foreignObject rendering`);
+                      }
+
+                      return cloner
+                          .inlineFonts(ownerDocument)
+                          .then(() => cloner.resourceLoader.ready())
+                          .then(() => {
+                              const renderer = new ForeignObjectRenderer(cloner.documentElement);
+                              return renderer.render({
+                                  backgroundColor,
+                                  logger,
+                                  scale: options.scale,
+                                  x: options.x,
+                                  y: options.y,
+                                  width: options.width,
+                                  height: options.height,
+                                  windowWidth: options.windowWidth,
+                                  windowHeight: options.windowHeight,
+                                  scrollX: options.scrollX,
+                                  scrollY: options.scrollY
+                              });
+                          });
+                  })(new DocumentCloner(element, options, logger, true, renderElement))
+                : cloneWindow(
+                      ownerDocument,
+                      windowBounds,
+                      element,
+                      options,
+                      logger,
+                      renderElement
+                  ).then(([container, clonedElement, resourceLoader]) => {
+                      if (__DEV__) {
+                          logger.log(`Document cloned, using computed rendering`);
+                      }
+
+                      const stack = NodeParser(clonedElement, resourceLoader, logger);
+                      const clonedDocument = clonedElement.ownerDocument;
+
+                      if (backgroundColor === stack.container.style.background.backgroundColor) {
+                          stack.container.style.background.backgroundColor = TRANSPARENT;
+                      }
+
+                      return resourceLoader.ready().then(imageStore => {
+                          if (options.removeContainer === true) {
+                              if (container.parentNode) {
+                                  container.parentNode.removeChild(container);
+                              } else if (__DEV__) {
+                                  logger.log(
+                                      `Cannot detach cloned iframe as it is not in the DOM anymore`
+                                  );
+                              }
+                          }
+
+                          const fontMetrics = new FontMetrics(clonedDocument);
+                          if (__DEV__) {
+                              logger.log(`Starting renderer`);
+                          }
+
+                          const renderOptions = {
+                              backgroundColor,
+                              fontMetrics,
+                              imageStore,
+                              logger,
+                              scale: options.scale,
+                              x: options.x,
+                              y: options.y,
+                              width: options.width,
+                              height: options.height
+                          };
+
+                          if (Array.isArray(options.target)) {
+                              return Promise.all(
+                                  options.target.map(target => {
+                                      const renderer = new Renderer(target, renderOptions);
+                                      return renderer.render(stack);
+                                  })
+                              );
+                          } else {
+                              const renderer = new Renderer(options.target, renderOptions);
+                              return renderer.render(stack);
+                          }
+                      });
+                  })
+    );
+};

src/drawing/BezierCurve.js

@@ -0,0 +1,41 @@
+/* @flow */
+'use strict';
+import type {Drawable} from './Path';
+import {PATH} from './Path';
+import Vector from './Vector';
+
+const lerp = (a: Vector, b: Vector, t: number): Vector => {
+    return new Vector(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t);
+};
+
+export default class BezierCurve implements Drawable<1> {
+    type: 1;
+    start: Vector;
+    startControl: Vector;
+    endControl: Vector;
+    end: Vector;
+
+    constructor(start: Vector, startControl: Vector, endControl: Vector, end: Vector) {
+        this.type = PATH.BEZIER_CURVE;
+        this.start = start;
+        this.startControl = startControl;
+        this.endControl = endControl;
+        this.end = end;
+    }
+
+    subdivide(t: number, firstHalf: boolean): BezierCurve {
+        const ab = lerp(this.start, this.startControl, t);
+        const bc = lerp(this.startControl, this.endControl, t);
+        const cd = lerp(this.endControl, this.end, t);
+        const abbc = lerp(ab, bc, t);
+        const bccd = lerp(bc, cd, t);
+        const dest = lerp(abbc, bccd, t);
+        return firstHalf
+            ? new BezierCurve(this.start, ab, abbc, dest)
+            : new BezierCurve(dest, bccd, cd, this.end);
+    }
+
+    reverse(): BezierCurve {
+        return new BezierCurve(this.end, this.endControl, this.startControl, this.start);
+    }
+}

src/drawing/Circle.js

@@ -0,0 +1,29 @@
+/* @flow */
+'use strict';
+import type {Drawable} from './Path';
+import {PATH} from './Path';
+
+export default class Circle implements Drawable<2> {
+    type: 2;
+    x: number;
+    y: number;
+    radius: number;
+
+    constructor(x: number, y: number, radius: number) {
+        this.type = PATH.CIRCLE;
+        this.x = x;
+        this.y = y;
+        this.radius = radius;
+        if (__DEV__) {
+            if (isNaN(x)) {
+                console.error(`Invalid x value given for Circle`);
+            }
+            if (isNaN(y)) {
+                console.error(`Invalid y value given for Circle`);
+            }
+            if (isNaN(radius)) {
+                console.error(`Invalid radius value given for Circle`);
+            }
+        }
+    }
+}

src/drawing/Path.js

@@ -0,0 +1,20 @@
+/* @flow */
+'use strict';
+
+import type Vector from './Vector';
+import type BezierCurve from './BezierCurve';
+import type Circle from './Circle';
+
+export const PATH = {
+    VECTOR: 0,
+    BEZIER_CURVE: 1,
+    CIRCLE: 2
+};
+
+export type PathType = $Values<typeof PATH>;
+
+export interface Drawable<A> {
+    type: A
+}
+
+export type Path = Array<Vector | BezierCurve> | Circle;

src/drawing/Size.js

@@ -0,0 +1,12 @@
+/* @flow */
+'use strict';
+
+export default class Size {
+    width: number;
+    height: number;
+
+    constructor(width: number, height: number) {
+        this.width = width;
+        this.height = height;
+    }
+}

src/drawing/Vector.js

@@ -0,0 +1,24 @@
+/* @flow */
+'use strict';
+import type {Drawable} from './Path';
+import {PATH} from './Path';
+
+export default class Vector implements Drawable<0> {
+    type: 0;
+    x: number;
+    y: number;
+
+    constructor(x: number, y: number) {
+        this.type = PATH.VECTOR;
+        this.x = x;
+        this.y = y;
+        if (__DEV__) {
+            if (isNaN(x)) {
+                console.error(`Invalid x value given for Vector`);
+            }
+            if (isNaN(y)) {
+                console.error(`Invalid y value given for Vector`);
+            }
+        }
+    }
+}

src/index.js

@@ -0,0 +1,95 @@
+/* @flow */
+'use strict';
+
+import type {RenderTarget} from './Renderer';
+
+import CanvasRenderer from './renderer/CanvasRenderer';
+import Logger from './Logger';
+import {renderElement} from './Window';
+import {parseBounds, parseDocumentSize} from './Bounds';
+
+export type Options = {
+    async: ?boolean,
+    allowTaint: ?boolean,
+    backgroundColor: string,
+    canvas: ?HTMLCanvasElement,
+    foreignObjectRendering: boolean,
+    imageTimeout: number,
+    proxy: ?string,
+    removeContainer: ?boolean,
+    scale: number,
+    target: RenderTarget<*>,
+    width: number,
+    height: number,
+    x: number,
+    y: number,
+    scrollX: number,
+    scrollY: number,
+    windowWidth: number,
+    windowHeight: number
+};
+
+const html2canvas = (element: HTMLElement, conf: ?Options): Promise<*> => {
+    // eslint-disable-next-line no-console
+    if (typeof console === 'object' && typeof console.log === 'function') {
+        // eslint-disable-next-line no-console
+        console.log(`html2canvas ${__VERSION__}`);
+    }
+
+    const config = conf || {};
+    const logger = new Logger();
+
+    if (__DEV__ && typeof config.onrendered === 'function') {
+        logger.error(
+            `onrendered option is deprecated, html2canvas returns a Promise with the canvas as the value`
+        );
+    }
+
+    const ownerDocument = element.ownerDocument;
+    if (!ownerDocument) {
+        return Promise.reject(`Provided element is not within a Document`);
+    }
+    const defaultView = ownerDocument.defaultView;
+
+    const scrollX = defaultView.pageXOffset;
+    const scrollY = defaultView.pageYOffset;
+
+    const isDocument = element.tagName === 'HTML' || element.tagName === 'BODY';
+
+    const {width, height, left, top} = isDocument
+        ? parseDocumentSize(ownerDocument)
+        : parseBounds(element, scrollX, scrollY);
+
+    const defaultOptions = {
+        async: true,
+        allowTaint: false,
+        imageTimeout: 15000,
+        proxy: null,
+        removeContainer: true,
+        foreignObjectRendering: true,
+        scale: defaultView.devicePixelRatio || 1,
+        target: new CanvasRenderer(config.canvas),
+        x: left,
+        y: top,
+        width: Math.ceil(width),
+        height: Math.ceil(height),
+        windowWidth: defaultView.innerWidth,
+        windowHeight: defaultView.innerHeight,
+        scrollX: defaultView.pageXOffset,
+        scrollY: defaultView.pageYOffset
+    };
+
+    const result = renderElement(element, {...defaultOptions, ...config}, logger);
+
+    if (__DEV__) {
+        return result.catch(e => {
+            logger.error(e);
+            throw e;
+        });
+    }
+    return result;
+};
+
+html2canvas.CanvasRenderer = CanvasRenderer;
+
+module.exports = html2canvas;

src/parsing/background.js

@@ -0,0 +1,427 @@
+/* @flow */
+'use strict';
+import type {Path} from '../drawing/Path';
+import type {Bounds, BoundCurves} from '../Bounds';
+import type ResourceLoader, {ImageElement} from '../ResourceLoader';
+
+import Color from '../Color';
+import Length from '../Length';
+import Size from '../drawing/Size';
+import Vector from '../drawing/Vector';
+import {calculateBorderBoxPath, calculatePaddingBoxPath} from '../Bounds';
+
+export type Background = {
+    backgroundImage: Array<BackgroundImage>,
+    backgroundClip: BackgroundClip,
+    backgroundColor: Color,
+    backgroundOrigin: BackgroundOrigin
+};
+
+export type BackgroundClip = $Values<typeof BACKGROUND_CLIP>;
+export type BackgroundOrigin = $Values<typeof BACKGROUND_ORIGIN>;
+export type BackgroundRepeat = $Values<typeof BACKGROUND_REPEAT>;
+export type BackgroundSizeTypes = $Values<typeof BACKGROUND_SIZE>;
+
+export type BackgroundSource = {
+    prefix: string,
+    method: string,
+    args: Array<string>
+};
+
+export type BackgroundImage = {
+    source: BackgroundSource,
+    position: [Length, Length],
+    size: [BackgroundSize, BackgroundSize],
+    repeat: BackgroundRepeat
+};
+
+export const BACKGROUND_REPEAT = {
+    REPEAT: 0,
+    NO_REPEAT: 1,
+    REPEAT_X: 2,
+    REPEAT_Y: 3
+};
+
+export const BACKGROUND_SIZE = {
+    AUTO: 0,
+    CONTAIN: 1,
+    COVER: 2,
+    LENGTH: 3
+};
+
+export const BACKGROUND_CLIP = {
+    BORDER_BOX: 0,
+    PADDING_BOX: 1,
+    CONTENT_BOX: 2
+};
+
+export const BACKGROUND_ORIGIN = BACKGROUND_CLIP;
+
+const AUTO = 'auto';
+
+class BackgroundSize {
+    size: ?BackgroundSizeTypes;
+    value: ?Length;
+
+    constructor(size: string) {
+        switch (size) {
+            case 'contain':
+                this.size = BACKGROUND_SIZE.CONTAIN;
+                break;
+            case 'cover':
+                this.size = BACKGROUND_SIZE.COVER;
+                break;
+            case 'auto':
+                this.size = BACKGROUND_SIZE.AUTO;
+                break;
+            default:
+                this.value = new Length(size);
+        }
+    }
+}
+
+export const calculateBackgroundSize = (
+    backgroundImage: BackgroundImage,
+    image: ImageElement,
+    bounds: Bounds
+): Size => {
+    let width = 0;
+    let height = 0;
+    const size = backgroundImage.size;
+    if (size[0].size === BACKGROUND_SIZE.CONTAIN || size[0].size === BACKGROUND_SIZE.COVER) {
+        const targetRatio = bounds.width / bounds.height;
+        const currentRatio = image.width / image.height;
+        return targetRatio < currentRatio !== (size[0].size === BACKGROUND_SIZE.COVER)
+            ? new Size(bounds.width, bounds.width / currentRatio)
+            : new Size(bounds.height * currentRatio, bounds.height);
+    }
+
+    if (size[0].value) {
+        width = size[0].value.getAbsoluteValue(bounds.width);
+    }
+
+    if (size[0].size === BACKGROUND_SIZE.AUTO && size[1].size === BACKGROUND_SIZE.AUTO) {
+        height = image.height;
+    } else if (size[1].size === BACKGROUND_SIZE.AUTO) {
+        height = width / image.width * image.height;
+    } else if (size[1].value) {
+        height = size[1].value.getAbsoluteValue(bounds.height);
+    }
+
+    if (size[0].size === BACKGROUND_SIZE.AUTO) {
+        width = height / image.height * image.width;
+    }
+
+    return new Size(width, height);
+};
+
+const AUTO_SIZE = new BackgroundSize(AUTO);
+
+export const calculateBackgroungPaintingArea = (
+    curves: BoundCurves,
+    clip: BackgroundClip
+): Path => {
+    // TODO support CONTENT_BOX
+    switch (clip) {
+        case BACKGROUND_CLIP.BORDER_BOX:
+            return calculateBorderBoxPath(curves);
+        case BACKGROUND_CLIP.PADDING_BOX:
+        default:
+            return calculatePaddingBoxPath(curves);
+    }
+};
+
+export const calculateBackgroundPosition = (
+    position: [Length, Length],
+    size: Size,
+    bounds: Bounds
+): Vector => {
+    return new Vector(
+        position[0].getAbsoluteValue(bounds.width - size.width),
+        position[1].getAbsoluteValue(bounds.height - size.height)
+    );
+};
+
+export const calculateBackgroundRepeatPath = (
+    background: BackgroundImage,
+    position: Vector,
+    size: Size,
+    backgroundPositioningArea: Bounds,
+    bounds: Bounds
+) => {
+    const repeat = background.repeat;
+    switch (repeat) {
+        case BACKGROUND_REPEAT.REPEAT_X:
+            return [
+                new Vector(
+                    Math.round(bounds.left),
+                    Math.round(backgroundPositioningArea.top + position.y)
+                ),
+                new Vector(
+                    Math.round(bounds.left + bounds.width),
+                    Math.round(backgroundPositioningArea.top + position.y)
+                ),
+                new Vector(
+                    Math.round(bounds.left + bounds.width),
+                    Math.round(size.height + backgroundPositioningArea.top + position.y)
+                ),
+                new Vector(
+                    Math.round(bounds.left),
+                    Math.round(size.height + backgroundPositioningArea.top + position.y)
+                )
+            ];
+        case BACKGROUND_REPEAT.REPEAT_Y:
+            return [
+                new Vector(
+                    Math.round(backgroundPositioningArea.left + position.x),
+                    Math.round(bounds.top)
+                ),
+                new Vector(
+                    Math.round(backgroundPositioningArea.left + position.x + size.width),
+                    Math.round(bounds.top)
+                ),
+                new Vector(
+                    Math.round(backgroundPositioningArea.left + position.x + size.width),
+                    Math.round(bounds.height + bounds.top)
+                ),
+                new Vector(
+                    Math.round(backgroundPositioningArea.left + position.x),
+                    Math.round(bounds.height + bounds.top)
+                )
+            ];
+        case BACKGROUND_REPEAT.NO_REPEAT:
+            return [
+                new Vector(
+                    Math.round(backgroundPositioningArea.left + position.x),
+                    Math.round(backgroundPositioningArea.top + position.y)
+                ),
+                new Vector(
+                    Math.round(backgroundPositioningArea.left + position.x + size.width),
+                    Math.round(backgroundPositioningArea.top + position.y)
+                ),
+                new Vector(
+                    Math.round(backgroundPositioningArea.left + position.x + size.width),
+                    Math.round(backgroundPositioningArea.top + position.y + size.height)
+                ),
+                new Vector(
+                    Math.round(backgroundPositioningArea.left + position.x),
+                    Math.round(backgroundPositioningArea.top + position.y + size.height)
+                )
+            ];
+        default:
+            return [
+                new Vector(Math.round(bounds.left), Math.round(bounds.top)),
+                new Vector(Math.round(bounds.left + bounds.width), Math.round(bounds.top)),
+                new Vector(
+                    Math.round(bounds.left + bounds.width),
+                    Math.round(bounds.height + bounds.top)
+                ),
+                new Vector(Math.round(bounds.left), Math.round(bounds.height + bounds.top))
+            ];
+    }
+};
+
+export const parseBackground = (
+    style: CSSStyleDeclaration,
+    resourceLoader: ResourceLoader
+): Background => {
+    return {
+        backgroundColor: new Color(style.backgroundColor),
+        backgroundImage: parseBackgroundImages(style, resourceLoader),
+        backgroundClip: parseBackgroundClip(style.backgroundClip),
+        backgroundOrigin: parseBackgroundOrigin(style.backgroundOrigin)
+    };
+};
+
+const parseBackgroundClip = (backgroundClip: string): BackgroundClip => {
+    switch (backgroundClip) {
+        case 'padding-box':
+            return BACKGROUND_CLIP.PADDING_BOX;
+        case 'content-box':
+            return BACKGROUND_CLIP.CONTENT_BOX;
+    }
+    return BACKGROUND_CLIP.BORDER_BOX;
+};
+
+const parseBackgroundOrigin = (backgroundOrigin: string): BackgroundOrigin => {
+    switch (backgroundOrigin) {
+        case 'padding-box':
+            return BACKGROUND_ORIGIN.PADDING_BOX;
+        case 'content-box':
+            return BACKGROUND_ORIGIN.CONTENT_BOX;
+    }
+    return BACKGROUND_ORIGIN.BORDER_BOX;
+};
+
+const parseBackgroundRepeat = (backgroundRepeat: string): BackgroundRepeat => {
+    switch (backgroundRepeat.trim()) {
+        case 'no-repeat':
+            return BACKGROUND_REPEAT.NO_REPEAT;
+        case 'repeat-x':
+        case 'repeat no-repeat':
+            return BACKGROUND_REPEAT.REPEAT_X;
+        case 'repeat-y':
+        case 'no-repeat repeat':
+            return BACKGROUND_REPEAT.REPEAT_Y;
+        case 'repeat':
+            return BACKGROUND_REPEAT.REPEAT;
+    }
+
+    if (__DEV__) {
+        console.error(`Invalid background-repeat value "${backgroundRepeat}"`);
+    }
+
+    return BACKGROUND_REPEAT.REPEAT;
+};
+
+const parseBackgroundImages = (
+    style: CSSStyleDeclaration,
+    resourceLoader: ResourceLoader
+): Array<BackgroundImage> => {
+    const sources: Array<BackgroundSource> = parseBackgroundImage(
+        style.backgroundImage
+    ).map(backgroundImage => {
+        if (backgroundImage.method === 'url') {
+            const key = resourceLoader.loadImage(backgroundImage.args[0]);
+            backgroundImage.args = key ? [key] : [];
+        }
+        return backgroundImage;
+    });
+    const positions = style.backgroundPosition.split(',');
+    const repeats = style.backgroundRepeat.split(',');
+    const sizes = style.backgroundSize.split(',');
+
+    return sources.map((source, index) => {
+        const size = (sizes[index] || AUTO).trim().split(' ').map(parseBackgroundSize);
+        const position = (positions[index] || AUTO).trim().split(' ').map(parseBackgoundPosition);
+
+        return {
+            source,
+            repeat: parseBackgroundRepeat(
+                typeof repeats[index] === 'string' ? repeats[index] : repeats[0]
+            ),
+            size: size.length < 2 ? [size[0], AUTO_SIZE] : [size[0], size[1]],
+            position: position.length < 2 ? [position[0], position[0]] : [position[0], position[1]]
+        };
+    });
+};
+
+const parseBackgroundSize = (size: string): BackgroundSize =>
+    size === 'auto' ? AUTO_SIZE : new BackgroundSize(size);
+
+const parseBackgoundPosition = (position: string): Length => {
+    switch (position) {
+        case 'bottom':
+        case 'right':
+            return new Length('100%');
+        case 'left':
+        case 'top':
+            return new Length('0%');
+        case 'auto':
+            return new Length('0');
+    }
+    return new Length(position);
+};
+
+export const parseBackgroundImage = (image: string): Array<BackgroundSource> => {
+    const whitespace = /^\s$/;
+    const results = [];
+
+    let args = [];
+    let method = '';
+    let quote = null;
+    let definition = '';
+    let mode = 0;
+    let numParen = 0;
+
+    const appendResult = () => {
+        let prefix = '';
+        if (method) {
+            if (definition.substr(0, 1) === '"') {
+                definition = definition.substr(1, definition.length - 2);
+            }
+
+            if (definition) {
+                args.push(definition.trim());
+            }
+
+            const prefix_i = method.indexOf('-', 1) + 1;
+            if (method.substr(0, 1) === '-' && prefix_i > 0) {
+                prefix = method.substr(0, prefix_i).toLowerCase();
+                method = method.substr(prefix_i);
+            }
+            method = method.toLowerCase();
+            if (method !== 'none') {
+                results.push({
+                    prefix,
+                    method,
+                    args
+                });
+            }
+        }
+        args = [];
+        method = definition = '';
+    };
+
+    image.split('').forEach(c => {
+        if (mode === 0 && whitespace.test(c)) {
+            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;
+                    return;
+                } else {
+                    numParen++;
+                }
+                break;
+            case ')':
+                if (quote) {
+                    break;
+                } else if (mode === 1) {
+                    if (numParen === 0) {
+                        mode = 0;
+                        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.trim());
+                        definition = '';
+                        return;
+                    }
+                }
+                break;
+        }
+
+        if (mode === 0) {
+            method += c;
+        } else {
+            definition += c;
+        }
+    });
+
+    appendResult();
+    return results;
+};

src/parsing/border.js

@@ -0,0 +1,49 @@
+/* @flow */
+'use strict';
+
+import Color from '../Color';
+
+export const BORDER_STYLE = {
+    NONE: 0,
+    SOLID: 1
+};
+
+export type BorderStyle = $Values<typeof BORDER_STYLE>;
+
+export type Border = {
+    borderColor: Color,
+    borderStyle: BorderStyle,
+    borderWidth: number
+};
+
+export const BORDER_SIDES = {
+    TOP: 0,
+    RIGHT: 1,
+    BOTTOM: 2,
+    LEFT: 3
+};
+
+export type BorderSide = $Values<typeof BORDER_SIDES>;
+
+const SIDES = Object.keys(BORDER_SIDES).map(s => s.toLowerCase());
+
+const parseBorderStyle = (style: string): BorderStyle => {
+    switch (style) {
+        case 'none':
+            return BORDER_STYLE.NONE;
+    }
+    return BORDER_STYLE.SOLID;
+};
+
+export const parseBorder = (style: CSSStyleDeclaration): Array<Border> => {
+    return SIDES.map(side => {
+        const borderColor = new Color(style.getPropertyValue(`border-${side}-color`));
+        const borderStyle = parseBorderStyle(style.getPropertyValue(`border-${side}-style`));
+        const borderWidth = parseFloat(style.getPropertyValue(`border-${side}-width`));
+        return {
+            borderColor,
+            borderStyle,
+            borderWidth: isNaN(borderWidth) ? 0 : borderWidth
+        };
+    });
+};

src/parsing/borderRadius.js

@@ -0,0 +1,15 @@
+/* @flow */
+'use strict';
+import Length from '../Length';
+
+const SIDES = ['top-left', 'top-right', 'bottom-right', 'bottom-left'];
+
+export type BorderRadius = [Length, Length];
+
+export const parseBorderRadius = (style: CSSStyleDeclaration): Array<BorderRadius> => {
+    return SIDES.map(side => {
+        const value = style.getPropertyValue(`border-${side}-radius`);
+        const [horizontal, vertical] = value.split(' ').map(Length.create);
+        return typeof vertical === 'undefined' ? [horizontal, horizontal] : [horizontal, vertical];
+    });
+};

src/parsing/display.js

@@ -0,0 +1,111 @@
+/* @flow */
+'use strict';
+
+export const DISPLAY = {
+    NONE: 1 << 0,
+    BLOCK: 1 << 1,
+    INLINE: 1 << 2,
+    RUN_IN: 1 << 3,
+    FLOW: 1 << 4,
+    FLOW_ROOT: 1 << 5,
+    TABLE: 1 << 6,
+    FLEX: 1 << 7,
+    GRID: 1 << 8,
+    RUBY: 1 << 9,
+    SUBGRID: 1 << 10,
+    LIST_ITEM: 1 << 11,
+    TABLE_ROW_GROUP: 1 << 12,
+    TABLE_HEADER_GROUP: 1 << 13,
+    TABLE_FOOTER_GROUP: 1 << 14,
+    TABLE_ROW: 1 << 15,
+    TABLE_CELL: 1 << 16,
+    TABLE_COLUMN_GROUP: 1 << 17,
+    TABLE_COLUMN: 1 << 18,
+    TABLE_CAPTION: 1 << 19,
+    RUBY_BASE: 1 << 20,
+    RUBY_TEXT: 1 << 21,
+    RUBY_BASE_CONTAINER: 1 << 22,
+    RUBY_TEXT_CONTAINER: 1 << 23,
+    CONTENTS: 1 << 24,
+    INLINE_BLOCK: 1 << 25,
+    INLINE_LIST_ITEM: 1 << 26,
+    INLINE_TABLE: 1 << 27,
+    INLINE_FLEX: 1 << 28,
+    INLINE_GRID: 1 << 29
+};
+
+export type Display = $Values<typeof DISPLAY>;
+export type DisplayBit = number;
+
+const parseDisplayValue = (display: string): Display => {
+    switch (display) {
+        case 'block':
+            return DISPLAY.BLOCK;
+        case 'inline':
+            return DISPLAY.INLINE;
+        case 'run-in':
+            return DISPLAY.RUN_IN;
+        case 'flow':
+            return DISPLAY.FLOW;
+        case 'flow-root':
+            return DISPLAY.FLOW_ROOT;
+        case 'table':
+            return DISPLAY.TABLE;
+        case 'flex':
+            return DISPLAY.FLEX;
+        case 'grid':
+            return DISPLAY.GRID;
+        case 'ruby':
+            return DISPLAY.RUBY;
+        case 'subgrid':
+            return DISPLAY.SUBGRID;
+        case 'list-item':
+            return DISPLAY.LIST_ITEM;
+        case 'table-row-group':
+            return DISPLAY.TABLE_ROW_GROUP;
+        case 'table-header-group':
+            return DISPLAY.TABLE_HEADER_GROUP;
+        case 'table-footer-group':
+            return DISPLAY.TABLE_FOOTER_GROUP;
+        case 'table-row':
+            return DISPLAY.TABLE_ROW;
+        case 'table-cell':
+            return DISPLAY.TABLE_CELL;
+        case 'table-column-group':
+            return DISPLAY.TABLE_COLUMN_GROUP;
+        case 'table-column':
+            return DISPLAY.TABLE_COLUMN;
+        case 'table-caption':
+            return DISPLAY.TABLE_CAPTION;
+        case 'ruby-base':
+            return DISPLAY.RUBY_BASE;
+        case 'ruby-text':
+            return DISPLAY.RUBY_TEXT;
+        case 'ruby-base-container':
+            return DISPLAY.RUBY_BASE_CONTAINER;
+        case 'ruby-text-container':
+            return DISPLAY.RUBY_TEXT_CONTAINER;
+        case 'contents':
+            return DISPLAY.CONTENTS;
+        case 'inline-block':
+            return DISPLAY.INLINE_BLOCK;
+        case 'inline-list-item':
+            return DISPLAY.INLINE_LIST_ITEM;
+        case 'inline-table':
+            return DISPLAY.INLINE_TABLE;
+        case 'inline-flex':
+            return DISPLAY.INLINE_FLEX;
+        case 'inline-grid':
+            return DISPLAY.INLINE_GRID;
+    }
+
+    return DISPLAY.NONE;
+};
+
+const setDisplayBit = (bit: DisplayBit, display: string): DisplayBit => {
+    return bit | parseDisplayValue(display);
+};
+
+export const parseDisplay = (display: string): Display => {
+    return display.split(' ').reduce(setDisplayBit, 0);
+};

src/parsing/float.js

@@ -0,0 +1,26 @@
+/* @flow */
+'use strict';
+
+export const FLOAT = {
+    NONE: 0,
+    LEFT: 1,
+    RIGHT: 2,
+    INLINE_START: 3,
+    INLINE_END: 4
+};
+
+export type Float = $Values<typeof FLOAT>;
+
+export const parseCSSFloat = (float: string): Float => {
+    switch (float) {
+        case 'left':
+            return FLOAT.LEFT;
+        case 'right':
+            return FLOAT.RIGHT;
+        case 'inline-start':
+            return FLOAT.INLINE_START;
+        case 'inline-end':
+            return FLOAT.INLINE_END;
+    }
+    return FLOAT.NONE;
+};

src/parsing/font.js

@@ -0,0 +1,38 @@
+/* @flow */
+'use strict';
+
+export type Font = {
+    fontFamily: string,
+    fontSize: string,
+    fontStyle: string,
+    fontVariant: string,
+    fontWeight: number
+};
+
+const parseFontWeight = (weight: string): number => {
+    switch (weight) {
+        case 'normal':
+            return 400;
+        case 'bold':
+            return 700;
+    }
+
+    const value = parseInt(weight, 10);
+    return isNaN(value) ? 400 : value;
+};
+
+export const parseFont = (style: CSSStyleDeclaration): Font => {
+    const fontFamily = style.fontFamily;
+    const fontSize = style.fontSize;
+    const fontStyle = style.fontStyle;
+    const fontVariant = style.fontVariant;
+    const fontWeight = parseFontWeight(style.fontWeight);
+
+    return {
+        fontFamily,
+        fontSize,
+        fontStyle,
+        fontVariant,
+        fontWeight
+    };
+};

src/parsing/letterSpacing.js

@@ -0,0 +1,10 @@
+/* @flow */
+'use strict';
+
+export const parseLetterSpacing = (letterSpacing: string): number => {
+    if (letterSpacing === 'normal') {
+        return 0;
+    }
+    const value = parseFloat(letterSpacing);
+    return isNaN(value) ? 0 : value;
+};

src/parsing/overflow.js

@@ -0,0 +1,25 @@
+/* @flow */
+'use strict';
+
+export const OVERFLOW = {
+    VISIBLE: 0,
+    HIDDEN: 1,
+    SCROLL: 2,
+    AUTO: 3
+};
+
+export type Overflow = $Values<typeof OVERFLOW>;
+
+export const parseOverflow = (overflow: string): Overflow => {
+    switch (overflow) {
+        case 'hidden':
+            return OVERFLOW.HIDDEN;
+        case 'scroll':
+            return OVERFLOW.SCROLL;
+        case 'auto':
+            return OVERFLOW.AUTO;
+        case 'visible':
+        default:
+            return OVERFLOW.VISIBLE;
+    }
+};

src/parsing/padding.js

@@ -0,0 +1,11 @@
+/* @flow */
+'use strict';
+import Length from '../Length';
+
+const SIDES = ['top', 'right', 'bottom', 'left'];
+
+export type Padding = Array<Length>;
+
+export const parsePadding = (style: CSSStyleDeclaration): Padding => {
+    return SIDES.map(side => new Length(style.getPropertyValue(`padding-${side}`)));
+};

src/parsing/position.js

@@ -0,0 +1,27 @@
+/* @flow */
+'use strict';
+
+export const POSITION = {
+    STATIC: 0,
+    RELATIVE: 1,
+    ABSOLUTE: 2,
+    FIXED: 3,
+    STICKY: 4
+};
+
+export type Position = $Values<typeof POSITION>;
+
+export const parsePosition = (position: string): Position => {
+    switch (position) {
+        case 'relative':
+            return POSITION.RELATIVE;
+        case 'absolute':
+            return POSITION.ABSOLUTE;
+        case 'fixed':
+            return POSITION.FIXED;
+        case 'sticky':
+            return POSITION.STICKY;
+    }
+
+    return POSITION.STATIC;
+};

src/parsing/textDecoration.js

@@ -0,0 +1,86 @@
+/* @flow */
+'use strict';
+
+import Color from '../Color';
+
+export const TEXT_DECORATION_STYLE = {
+    SOLID: 0,
+    DOUBLE: 1,
+    DOTTED: 2,
+    DASHED: 3,
+    WAVY: 4
+};
+
+export const TEXT_DECORATION = {
+    NONE: null
+};
+
+export const TEXT_DECORATION_LINE = {
+    UNDERLINE: 1,
+    OVERLINE: 2,
+    LINE_THROUGH: 3,
+    BLINK: 4
+};
+
+export type TextDecorationStyle = $Values<typeof TEXT_DECORATION_STYLE>;
+export type TextDecorationLine = $Values<typeof TEXT_DECORATION_LINE>;
+type TextDecorationLineType = Array<TextDecorationLine> | null;
+export type TextDecoration = {
+    textDecorationLine: Array<TextDecorationLine>,
+    textDecorationStyle: TextDecorationStyle,
+    textDecorationColor: Color | null
+};
+
+const parseLine = (line: string): TextDecorationLine => {
+    switch (line) {
+        case 'underline':
+            return TEXT_DECORATION_LINE.UNDERLINE;
+        case 'overline':
+            return TEXT_DECORATION_LINE.OVERLINE;
+        case 'line-through':
+            return TEXT_DECORATION_LINE.LINE_THROUGH;
+    }
+    return TEXT_DECORATION_LINE.BLINK;
+};
+
+const parseTextDecorationLine = (line: string): TextDecorationLineType => {
+    if (line === 'none') {
+        return null;
+    }
+
+    return line.split(' ').map(parseLine);
+};
+
+const parseTextDecorationStyle = (style: string): TextDecorationStyle => {
+    switch (style) {
+        case 'double':
+            return TEXT_DECORATION_STYLE.DOUBLE;
+        case 'dotted':
+            return TEXT_DECORATION_STYLE.DOTTED;
+        case 'dashed':
+            return TEXT_DECORATION_STYLE.DASHED;
+        case 'wavy':
+            return TEXT_DECORATION_STYLE.WAVY;
+    }
+    return TEXT_DECORATION_STYLE.SOLID;
+};
+
+export const parseTextDecoration = (style: CSSStyleDeclaration): TextDecoration | null => {
+    const textDecorationLine = parseTextDecorationLine(
+        style.textDecorationLine ? style.textDecorationLine : style.textDecoration
+    );
+    if (textDecorationLine === null) {
+        return TEXT_DECORATION.NONE;
+    }
+
+    const textDecorationColor = style.textDecorationColor
+        ? new Color(style.textDecorationColor)
+        : null;
+    const textDecorationStyle = parseTextDecorationStyle(style.textDecorationStyle);
+
+    return {
+        textDecorationLine,
+        textDecorationColor,
+        textDecorationStyle
+    };
+};

src/parsing/textShadow.js

@@ -0,0 +1,94 @@
+/* @flow */
+'use strict';
+
+import Color from '../Color';
+
+export type TextShadow = {
+    color: Color,
+    offsetX: number,
+    offsetY: number,
+    blur: number
+};
+
+const NUMBER = /^([+-]|\d|\.)$/i;
+
+export const parseTextShadow = (textShadow: ?string): Array<TextShadow> | null => {
+    if (textShadow === 'none' || typeof textShadow !== 'string') {
+        return null;
+    }
+
+    let currentValue = '';
+    let isLength = false;
+    const values = [];
+    const shadows = [];
+    let numParens = 0;
+    let color = null;
+
+    const appendValue = () => {
+        if (currentValue.length) {
+            if (isLength) {
+                values.push(parseFloat(currentValue));
+            } else {
+                color = new Color(currentValue);
+            }
+        }
+        isLength = false;
+        currentValue = '';
+    };
+
+    const appendShadow = () => {
+        if (values.length && color !== null) {
+            shadows.push({
+                color,
+                offsetX: values[0] || 0,
+                offsetY: values[1] || 0,
+                blur: values[2] || 0
+            });
+        }
+        values.splice(0, values.length);
+        color = null;
+    };
+
+    for (let i = 0; i < textShadow.length; i++) {
+        const c = textShadow[i];
+        switch (c) {
+            case '(':
+                currentValue += c;
+                numParens++;
+                break;
+            case ')':
+                currentValue += c;
+                numParens--;
+                break;
+            case ',':
+                if (numParens === 0) {
+                    appendValue();
+                    appendShadow();
+                } else {
+                    currentValue += c;
+                }
+                break;
+            case ' ':
+                if (numParens === 0) {
+                    appendValue();
+                } else {
+                    currentValue += c;
+                }
+                break;
+            default:
+                if (currentValue.length === 0 && NUMBER.test(c)) {
+                    isLength = true;
+                }
+                currentValue += c;
+        }
+    }
+
+    appendValue();
+    appendShadow();
+
+    if (shadows.length === 0) {
+        return null;
+    }
+
+    return shadows;
+};

src/parsing/textTransform.js

@@ -0,0 +1,24 @@
+/* @flow */
+'use strict';
+
+export const TEXT_TRANSFORM = {
+    NONE: 0,
+    LOWERCASE: 1,
+    UPPERCASE: 2,
+    CAPITALIZE: 3
+};
+
+export type TextTransform = $Values<typeof TEXT_TRANSFORM>;
+
+export const parseTextTransform = (textTransform: string): TextTransform => {
+    switch (textTransform) {
+        case 'uppercase':
+            return TEXT_TRANSFORM.UPPERCASE;
+        case 'lowercase':
+            return TEXT_TRANSFORM.LOWERCASE;
+        case 'capitalize':
+            return TEXT_TRANSFORM.CAPITALIZE;
+    }
+
+    return TEXT_TRANSFORM.NONE;
+};

src/parsing/transform.js

@@ -0,0 +1,71 @@
+/* @flow */
+'use strict';
+import Length from '../Length';
+
+const toFloat = (s: string): number => parseFloat(s.trim());
+
+export type Matrix = [number, number, number, number, number, number];
+export type TransformOrigin = [Length, Length];
+export type Transform = {
+    transform: Matrix,
+    transformOrigin: TransformOrigin
+} | null;
+
+const MATRIX = /(matrix|matrix3d)\((.+)\)/;
+
+export const parseTransform = (style: CSSStyleDeclaration): Transform => {
+    const transform = parseTransformMatrix(
+        style.transform ||
+            style.webkitTransform ||
+            style.mozTransform ||
+            // $FlowFixMe
+            style.msTransform ||
+            // $FlowFixMe
+            style.oTransform
+    );
+    if (transform === null) {
+        return null;
+    }
+
+    return {
+        transform,
+        transformOrigin: parseTransformOrigin(
+            style.transformOrigin ||
+                style.webkitTransformOrigin ||
+                style.mozTransformOrigin ||
+                // $FlowFixMe
+                style.msTransformOrigin ||
+                // $FlowFixMe
+                style.oTransformOrigin
+        )
+    };
+};
+
+// $FlowFixMe
+const parseTransformOrigin = (origin: ?string): TransformOrigin => {
+    if (typeof origin !== 'string') {
+        const v = new Length('0');
+        return [v, v];
+    }
+    const values = origin.split(' ').map(Length.create);
+    return [values[0], values[1]];
+};
+
+// $FlowFixMe
+const parseTransformMatrix = (transform: ?string): Matrix | null => {
+    if (transform === 'none' || typeof transform !== 'string') {
+        return null;
+    }
+
+    const match = transform.match(MATRIX);
+    if (match) {
+        if (match[1] === 'matrix') {
+            const matrix = match[2].split(',').map(toFloat);
+            return [matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]];
+        } else {
+            const matrix3d = match[2].split(',').map(toFloat);
+            return [matrix3d[0], matrix3d[1], matrix3d[4], matrix3d[5], matrix3d[12], matrix3d[13]];
+        }
+    }
+    return null;
+};

src/parsing/visibility.js

@@ -0,0 +1,22 @@
+/* @flow */
+'use strict';
+
+export const VISIBILITY = {
+    VISIBLE: 0,
+    HIDDEN: 1,
+    COLLAPSE: 2
+};
+
+export type Visibility = $Values<typeof VISIBILITY>;
+
+export const parseVisibility = (visibility: string): Visibility => {
+    switch (visibility) {
+        case 'hidden':
+            return VISIBILITY.HIDDEN;
+        case 'collapse':
+            return VISIBILITY.COLLAPSE;
+        case 'visible':
+        default:
+            return VISIBILITY.VISIBLE;
+    }
+};

src/parsing/zIndex.js

@@ -0,0 +1,15 @@
+/* @flow */
+'use strict';
+
+export type zIndex = {
+    auto: boolean,
+    order: number
+};
+
+export const parseZIndex = (zIndex: string): zIndex => {
+    const auto = zIndex === 'auto';
+    return {
+        auto,
+        order: auto ? 0 : parseInt(zIndex, 10)
+    };
+};

src/plugins/jquery.plugin.html2canvas.js

@@ -1,88 +0,0 @@
-
-/*
- * jQuery helper plugin for examples and tests
- */
-			
-(function( $ ){
-    $.fn.html2canvas = function(options) {
-  
-        var date = new Date();
-        var message,
-        timeoutTimer,
-        timer = date.getTime();
-        
-        var object = $.extend({},{
-            logging: false,
-            proxyUrl: "http://html2canvas.appspot.com/", // running html2canvas-python proxy
-            ready: function(renderer) {
-                
-                var finishTime = new Date();
-               // console.log((finishTime.getTime()-timer)/1000);
-                
-
-                document.body.appendChild(renderer.canvas);
-                
-                
-                
-                var canvas = $(renderer.canvas);
-                canvas.css('position','absolute')
-                .css('left',0).css('top',0);
-                
-
-                
-               // $('body').append(canvas);
-                $(canvas).siblings().toggle();
-                
-                throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />Total of "+renderer.numDraws+" draws performed",4000);
-                
-                
-                $(window).click(function(){
-                    if (!canvas.is(':visible')){
-                        $(canvas).toggle().siblings().toggle();  
-                        throwMessage("Canvas Render visible");
-                    } else{
-                        $(canvas).siblings().toggle();  
-                        $(canvas).toggle();
-                        throwMessage("Canvas Render hidden");
-                    }
-                    
-          
-                });
-            }
-            
-        },options)
-        
-        new html2canvas(this.get(0), object);
-        
-        
-        function throwMessage(msg,duration){
-            
-            window.clearTimeout(timeoutTimer);
-            timeoutTimer = window.setTimeout(function(){
-                message.fadeOut(function(){
-                    message.remove();   
-                });                   
-            },duration || 2000);
-            $(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'
-            }).hide().fadeIn().appendTo('body');
-        }
-
-    };
-})( jQuery );
-	

src/renderer/CanvasRenderer.js

@@ -0,0 +1,274 @@
+/* @flow */
+'use strict';
+
+import type {RenderTarget, RenderOptions} from '../Renderer';
+import type Color from '../Color';
+import type {Path} from '../drawing/Path';
+import type Size from '../drawing/Size';
+
+import type {Font} from '../parsing/font';
+import type {TextDecoration} from '../parsing/textDecoration';
+import type {TextShadow} from '../parsing/textShadow';
+import type {Matrix} from '../parsing/transform';
+
+import type {Bounds} from '../Bounds';
+import type {ImageElement} from '../ResourceLoader';
+import type {Gradient} from '../Gradient';
+import type {TextBounds} from '../TextBounds';
+
+import {PATH} from '../drawing/Path';
+import {TEXT_DECORATION_LINE} from '../parsing/textDecoration';
+
+export default class CanvasRenderer implements RenderTarget<HTMLCanvasElement> {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    options: RenderOptions;
+
+    constructor(canvas: ?HTMLCanvasElement) {
+        this.canvas = canvas ? canvas : document.createElement('canvas');
+    }
+
+    render(options: RenderOptions) {
+        this.ctx = this.canvas.getContext('2d');
+        this.options = options;
+        this.canvas.width = Math.floor(options.width * options.scale);
+        this.canvas.height = Math.floor(options.height * options.scale);
+        this.canvas.style.width = `${options.width}px`;
+        this.canvas.style.height = `${options.height}px`;
+
+        this.ctx.scale(this.options.scale, this.options.scale);
+        this.ctx.translate(-options.x, -options.y);
+        this.ctx.textBaseline = 'bottom';
+        options.logger.log(
+            `Canvas renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${this
+                .options.scale}`
+        );
+    }
+
+    clip(clipPaths: Array<Path>, callback: () => void) {
+        if (clipPaths.length) {
+            this.ctx.save();
+            clipPaths.forEach(path => {
+                this.path(path);
+                this.ctx.clip();
+            });
+        }
+
+        callback();
+
+        if (clipPaths.length) {
+            this.ctx.restore();
+        }
+    }
+
+    drawImage(image: ImageElement, source: Bounds, destination: Bounds) {
+        this.ctx.drawImage(
+            image,
+            source.left,
+            source.top,
+            source.width,
+            source.height,
+            destination.left,
+            destination.top,
+            destination.width,
+            destination.height
+        );
+    }
+
+    drawShape(path: Path, color: Color) {
+        this.path(path);
+        this.ctx.fillStyle = color.toString();
+        this.ctx.fill();
+    }
+
+    fill(color: Color) {
+        this.ctx.fillStyle = color.toString();
+        this.ctx.fill();
+    }
+
+    getTarget(): Promise<HTMLCanvasElement> {
+        return Promise.resolve(this.canvas);
+    }
+
+    path(path: Path) {
+        this.ctx.beginPath();
+        if (Array.isArray(path)) {
+            path.forEach((point, index) => {
+                const start = point.type === PATH.VECTOR ? point : point.start;
+                if (index === 0) {
+                    this.ctx.moveTo(start.x, start.y);
+                } else {
+                    this.ctx.lineTo(start.x, start.y);
+                }
+
+                if (point.type === PATH.BEZIER_CURVE) {
+                    this.ctx.bezierCurveTo(
+                        point.startControl.x,
+                        point.startControl.y,
+                        point.endControl.x,
+                        point.endControl.y,
+                        point.end.x,
+                        point.end.y
+                    );
+                }
+            });
+        } else {
+            this.ctx.arc(
+                path.x + path.radius,
+                path.y + path.radius,
+                path.radius,
+                0,
+                Math.PI * 2,
+                true
+            );
+        }
+
+        this.ctx.closePath();
+    }
+
+    rectangle(x: number, y: number, width: number, height: number, color: Color) {
+        this.ctx.fillStyle = color.toString();
+        this.ctx.fillRect(x, y, width, height);
+    }
+
+    renderLinearGradient(bounds: Bounds, gradient: Gradient) {
+        const linearGradient = this.ctx.createLinearGradient(
+            bounds.left + gradient.direction.x1,
+            bounds.top + gradient.direction.y1,
+            bounds.left + gradient.direction.x0,
+            bounds.top + gradient.direction.y0
+        );
+
+        gradient.colorStops.forEach(colorStop => {
+            linearGradient.addColorStop(colorStop.stop, colorStop.color.toString());
+        });
+
+        this.ctx.fillStyle = linearGradient;
+        this.ctx.fillRect(bounds.left, bounds.top, bounds.width, bounds.height);
+    }
+
+    renderRepeat(
+        path: Path,
+        image: ImageElement,
+        imageSize: Size,
+        offsetX: number,
+        offsetY: number
+    ) {
+        this.path(path);
+        this.ctx.fillStyle = this.ctx.createPattern(this.resizeImage(image, imageSize), 'repeat');
+        this.ctx.translate(offsetX, offsetY);
+        this.ctx.fill();
+        this.ctx.translate(-offsetX, -offsetY);
+    }
+
+    renderTextNode(
+        textBounds: Array<TextBounds>,
+        color: Color,
+        font: Font,
+        textDecoration: TextDecoration | null,
+        textShadows: Array<TextShadow> | null
+    ) {
+        this.ctx.font = [
+            font.fontStyle,
+            font.fontVariant,
+            font.fontWeight,
+            font.fontSize,
+            font.fontFamily
+        ]
+            .join(' ')
+            .split(',')[0];
+
+        textBounds.forEach(text => {
+            this.ctx.fillStyle = color.toString();
+            if (textShadows && text.text.trim().length) {
+                textShadows.slice(0).reverse().forEach(textShadow => {
+                    this.ctx.shadowColor = textShadow.color.toString();
+                    this.ctx.shadowOffsetX = textShadow.offsetX * this.options.scale;
+                    this.ctx.shadowOffsetY = textShadow.offsetY * this.options.scale;
+                    this.ctx.shadowBlur = textShadow.blur;
+
+                    this.ctx.fillText(
+                        text.text,
+                        text.bounds.left,
+                        text.bounds.top + text.bounds.height
+                    );
+                });
+            } else {
+                this.ctx.fillText(
+                    text.text,
+                    text.bounds.left,
+                    text.bounds.top + text.bounds.height
+                );
+            }
+
+            if (textDecoration !== null) {
+                const textDecorationColor = textDecoration.textDecorationColor || color;
+                textDecoration.textDecorationLine.forEach(textDecorationLine => {
+                    switch (textDecorationLine) {
+                        case TEXT_DECORATION_LINE.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
+                            const {baseline} = this.options.fontMetrics.getMetrics(font);
+                            this.rectangle(
+                                text.bounds.left,
+                                Math.round(text.bounds.top + baseline),
+                                text.bounds.width,
+                                1,
+                                textDecorationColor
+                            );
+                            break;
+                        case TEXT_DECORATION_LINE.OVERLINE:
+                            this.rectangle(
+                                text.bounds.left,
+                                Math.round(text.bounds.top),
+                                text.bounds.width,
+                                1,
+                                textDecorationColor
+                            );
+                            break;
+                        case TEXT_DECORATION_LINE.LINE_THROUGH:
+                            // TODO try and find exact position for line-through
+                            const {middle} = this.options.fontMetrics.getMetrics(font);
+                            this.rectangle(
+                                text.bounds.left,
+                                Math.ceil(text.bounds.top + middle),
+                                text.bounds.width,
+                                1,
+                                textDecorationColor
+                            );
+                            break;
+                    }
+                });
+            }
+        });
+    }
+
+    resizeImage(image: ImageElement, size: Size): ImageElement {
+        if (image.width === size.width && image.height === size.height) {
+            return image;
+        }
+
+        const canvas = this.canvas.ownerDocument.createElement('canvas');
+        canvas.width = size.width;
+        canvas.height = size.height;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, size.width, size.height);
+        return canvas;
+    }
+
+    setOpacity(opacity: number) {
+        this.ctx.globalAlpha = opacity;
+    }
+
+    transform(offsetX: number, offsetY: number, matrix: Matrix, callback: () => void) {
+        this.ctx.save();
+        this.ctx.translate(offsetX, offsetY);
+        this.ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+        this.ctx.translate(-offsetX, -offsetY);
+
+        callback();
+
+        this.ctx.restore();
+    }
+}

src/renderer/ForeignObjectRenderer.js

@@ -0,0 +1,83 @@
+import type {RenderOptions} from '../Renderer';
+
+export default class ForeignObjectRenderer {
+    options: RenderOptions;
+    element: HTMLElement;
+
+    constructor(element: HTMLElement) {
+        this.element = element;
+    }
+
+    render(options) {
+        this.options = options;
+        this.canvas = document.createElement('canvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.canvas.width = Math.floor(options.width) * options.scale;
+        this.canvas.height = Math.floor(options.height) * options.scale;
+        this.canvas.style.width = `${options.width}px`;
+        this.canvas.style.height = `${options.height}px`;
+
+        options.logger.log(
+            `ForeignObject renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}`
+        );
+        const svg = createForeignObjectSVG(
+            Math.max(options.windowWidth, options.width) * options.scale,
+            Math.max(options.windowHeight, options.height) * options.scale,
+            options.scrollX * options.scale,
+            options.scrollY * options.scale,
+            this.element
+        );
+
+        return loadSerializedSVG(svg).then(img => {
+            if (options.backgroundColor) {
+                this.ctx.fillStyle = options.backgroundColor.toString();
+                this.ctx.fillRect(
+                    0,
+                    0,
+                    options.width * options.scale,
+                    options.height * options.scale
+                );
+            }
+
+            this.ctx.drawImage(img, -options.x * options.scale, -options.y * options.scale);
+            return this.canvas;
+        });
+    }
+}
+
+export const createForeignObjectSVG = (
+    width: number,
+    height: number,
+    x: number,
+    y: number,
+    node: Node
+) => {
+    const xmlns = 'http://www.w3.org/2000/svg';
+    const svg = document.createElementNS(xmlns, 'svg');
+    const foreignObject = document.createElementNS(xmlns, 'foreignObject');
+    svg.setAttributeNS(null, 'width', width);
+    svg.setAttributeNS(null, 'height', height);
+
+    foreignObject.setAttributeNS(null, 'width', '100%');
+    foreignObject.setAttributeNS(null, 'height', '100%');
+    foreignObject.setAttributeNS(null, 'x', x);
+    foreignObject.setAttributeNS(null, 'y', y);
+    foreignObject.setAttributeNS(null, 'externalResourcesRequired', 'true');
+    svg.appendChild(foreignObject);
+
+    foreignObject.appendChild(node);
+
+    return svg;
+};
+
+export const loadSerializedSVG = (svg: Node) => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+
+        img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+            new XMLSerializer().serializeToString(svg)
+        )}`;
+    });
+};

src/renderer/RefTestRenderer.js

@@ -0,0 +1,259 @@
+/* @flow */
+'use strict';
+import {parse} from 'url';
+
+import type {RenderTarget, RenderOptions} from '../Renderer';
+import type Color from '../Color';
+import type {Path} from '../drawing/Path';
+import type Size from '../drawing/Size';
+
+import type {Font} from '../parsing/font';
+import type {
+    TextDecoration,
+    TextDecorationStyle,
+    TextDecorationLine
+} from '../parsing/textDecoration';
+import type {TextShadow} from '../parsing/textShadow';
+import type {Matrix} from '../parsing/transform';
+
+import type {Bounds} from '../Bounds';
+import type {ImageElement} from '../ResourceLoader';
+import type {Gradient} from '../Gradient';
+import type {TextBounds} from '../TextBounds';
+
+import {TEXT_DECORATION_STYLE, TEXT_DECORATION_LINE} from '../parsing/textDecoration';
+import {PATH} from '../drawing/Path';
+
+class RefTestRenderer implements RenderTarget<string> {
+    options: RenderOptions;
+    indent: number;
+    lines: Array<string>;
+
+    render(options: RenderOptions) {
+        this.options = options;
+        this.indent = 0;
+        this.lines = [];
+        options.logger.log(`RefTest renderer initialized`);
+        this.writeLine(`Window: [${options.width}, ${options.height}]`);
+    }
+
+    clip(clipPaths: Array<Path>, callback: () => void) {
+        this.writeLine(`Clip: ${clipPaths.map(this.formatPath, this).join(' | ')}`);
+        this.indent += 2;
+        callback();
+        this.indent -= 2;
+    }
+
+    drawImage(image: ImageElement, source: Bounds, destination: Bounds) {
+        this.writeLine(
+            `Draw image: ${this.formatImage(image)} (source: ${this.formatBounds(
+                source
+            )}) (destination: ${this.formatBounds(source)})`
+        );
+    }
+
+    drawShape(path: Path, color: Color) {
+        this.writeLine(`Shape: ${color.toString()} ${this.formatPath(path)}`);
+    }
+
+    fill(color: Color) {
+        this.writeLine(`Fill: ${color.toString()}`);
+    }
+
+    getTarget(): Promise<string> {
+        return Promise.resolve(this.lines.join('\n'));
+    }
+
+    rectangle(x: number, y: number, width: number, height: number, color: Color) {
+        const list = [x, y, width, height].map(v => Math.round(v)).join(', ');
+        this.writeLine(`Rectangle: [${list}] ${color.toString()}`);
+    }
+
+    formatBounds(bounds: Bounds): string {
+        const list = [bounds.left, bounds.top, bounds.width, bounds.height];
+        return `[${list.map(v => Math.round(v)).join(', ')}]`;
+    }
+
+    formatImage(image: ImageElement): string {
+        return image.tagName === 'CANVAS'
+            ? 'Canvas'
+            : // $FlowFixMe
+              `Image ("${parse(image.src).pathname.substring(0, 100)}")`;
+    }
+
+    formatPath(path: Path): string {
+        if (!Array.isArray(path)) {
+            return `Circle(x: ${Math.round(path.x)}, y: ${Math.round(path.y)}, r: ${Math.round(
+                path.radius
+            )})`;
+        }
+        const string = path
+            .map(v => {
+                if (v.type === PATH.VECTOR) {
+                    return `Vector(x: ${Math.round(v.x)}, y: ${Math.round(v.y)})`;
+                }
+                if (v.type === PATH.BEZIER_CURVE) {
+                    const values = [
+                        `x0: ${Math.round(v.start.x)}`,
+                        `y0: ${Math.round(v.start.y)}`,
+                        `x1: ${Math.round(v.end.x)}`,
+                        `y1: ${Math.round(v.end.y)}`,
+                        `cx0: ${Math.round(v.startControl.x)}`,
+                        `cy0: ${Math.round(v.startControl.y)}`,
+                        `cx1: ${Math.round(v.endControl.x)}`,
+                        `cy1: ${Math.round(v.endControl.y)}`
+                    ];
+                    return `BezierCurve(${values.join(', ')})`;
+                }
+            })
+            .join(' > ');
+        return `Path (${string})`;
+    }
+
+    renderLinearGradient(bounds: Bounds, gradient: Gradient) {
+        const direction = [
+            `x0: ${Math.round(gradient.direction.x0)}`,
+            `x1: ${Math.round(gradient.direction.x1)}`,
+            `y0: ${Math.round(gradient.direction.y0)}`,
+            `y1: ${Math.round(gradient.direction.y1)}`
+        ];
+
+        const stops = gradient.colorStops.map(
+            stop => `${stop.color.toString()} ${Math.ceil(stop.stop * 100) / 100}`
+        );
+
+        this.writeLine(
+            `Gradient: ${this.formatBounds(bounds)} linear-gradient(${direction.join(
+                ', '
+            )} ${stops.join(', ')})`
+        );
+    }
+
+    renderRepeat(
+        path: Path,
+        image: ImageElement,
+        imageSize: Size,
+        offsetX: number,
+        offsetY: number
+    ) {
+        this.writeLine(
+            `Repeat: ${this.formatImage(image)} [${Math.round(offsetX)}, ${Math.round(
+                offsetY
+            )}] Size (${Math.round(imageSize.width)}, ${Math.round(
+                imageSize.height
+            )}) ${this.formatPath(path)}`
+        );
+    }
+
+    renderTextNode(
+        textBounds: Array<TextBounds>,
+        color: Color,
+        font: Font,
+        textDecoration: TextDecoration | null,
+        textShadows: Array<TextShadow> | null
+    ) {
+        const fontString = [
+            font.fontStyle,
+            font.fontVariant,
+            font.fontWeight,
+            parseInt(font.fontSize, 10),
+            font.fontFamily.replace(/"/g, '')
+        ]
+            .join(' ')
+            .split(',')[0];
+
+        const textDecorationString = this.textDecoration(textDecoration, color);
+        const shadowString = textShadows
+            ? ` Shadows: (${textShadows
+                  .map(
+                      shadow =>
+                          `${shadow.color.toString()} ${shadow.offsetX}px ${shadow.offsetY}px ${shadow.blur}px`
+                  )
+                  .join(', ')})`
+            : '';
+
+        this.writeLine(
+            `Text: ${color.toString()} ${fontString}${shadowString}${textDecorationString}`
+        );
+
+        this.indent += 2;
+        textBounds.forEach(textBound => {
+            this.writeLine(
+                `[${Math.round(textBound.bounds.left)}, ${Math.round(
+                    textBound.bounds.top
+                )}]: ${textBound.text}`
+            );
+        });
+        this.indent -= 2;
+    }
+
+    textDecoration(textDecoration: TextDecoration | null, color: Color): string {
+        if (textDecoration) {
+            const textDecorationColor = (textDecoration.textDecorationColor
+                ? textDecoration.textDecorationColor
+                : color).toString();
+            const textDecorationLines = textDecoration.textDecorationLine.map(
+                this.textDecorationLine,
+                this
+            );
+            return textDecoration
+                ? ` ${this.textDecorationStyle(
+                      textDecoration.textDecorationStyle
+                  )} ${textDecorationColor} ${textDecorationLines.join(', ')}`
+                : '';
+        }
+
+        return '';
+    }
+
+    textDecorationLine(textDecorationLine: TextDecorationLine): string {
+        switch (textDecorationLine) {
+            case TEXT_DECORATION_LINE.LINE_THROUGH:
+                return 'line-through';
+            case TEXT_DECORATION_LINE.OVERLINE:
+                return 'overline';
+            case TEXT_DECORATION_LINE.UNDERLINE:
+                return 'underline';
+            case TEXT_DECORATION_LINE.BLINK:
+                return 'blink';
+        }
+        return 'UNKNOWN';
+    }
+
+    textDecorationStyle(textDecorationStyle: TextDecorationStyle): string {
+        switch (textDecorationStyle) {
+            case TEXT_DECORATION_STYLE.SOLID:
+                return 'solid';
+            case TEXT_DECORATION_STYLE.DOTTED:
+                return 'dotted';
+            case TEXT_DECORATION_STYLE.DOUBLE:
+                return 'double';
+            case TEXT_DECORATION_STYLE.DASHED:
+                return 'dashed';
+            case TEXT_DECORATION_STYLE.WAVY:
+                return 'WAVY';
+        }
+        return 'UNKNOWN';
+    }
+
+    setOpacity(opacity: number) {
+        this.writeLine(`Opacity: ${opacity}`);
+    }
+
+    transform(offsetX: number, offsetY: number, matrix: Matrix, callback: () => void) {
+        this.writeLine(
+            `Transform: (${Math.round(offsetX)}, ${Math.round(offsetY)}) [${matrix
+                .map(v => Math.round(v * 100) / 100)
+                .join(', ')}]`
+        );
+        this.indent += 2;
+        callback();
+        this.indent -= 2;
+    }
+
+    writeLine(text: string) {
+        this.lines.push(`${new Array(this.indent + 1).join(' ')}${text}`);
+    }
+}
+
+module.exports = RefTestRenderer;

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/assets/image.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" height="252.89000pt" width="493.28000pt" version="1.0" y="0.00000000" x="0.00000000" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="lg0">
+      <stop style="stop-color:#ff0000;stop-opacity:1.0000000" offset="0.00000000"/>
+      <stop style="stop-color:#00ff00;stop-opacity:1.0000000" offset="0.50000000"/>
+      <stop style="stop-color:#0000ff;stop-opacity:1.0000000" offset="1.0000000"/>
+    </linearGradient>
+    <linearGradient id="lg1">
+      <stop style="stop-color:#ff0000;stop-opacity:0.27450982" offset="0.00000000"/>
+      <stop style="stop-color:#ff0000;stop-opacity:1.0000000" offset="1.0000000"/>
+    </linearGradient>
+    <radialGradient id="rd0" fx="550.28571" fy="155.11731" xlink:href="#lg1" gradientUnits="userSpaceOnUse" cy="155.11731" cx="550.28571" gradientTransform="matrix(0.652228,-1.522906,1.403595,0.601129,-26.34767,869.2927)" r="127.00000"/>
+    <radialGradient id="rd1" fx="492.85715" fy="379.50504" xlink:href="#lg3" gradientUnits="userSpaceOnUse" cy="379.50504" cx="492.85715" gradientTransform="matrix(0.944964,4.150569e-2,-4.340623e-2,0.988234,43.59757,-15.99113)" r="184.96443"/>
+    <radialGradient id="rd2" fx="449.12918" fy="345.23175" xlink:href="#lg2" gradientUnits="userSpaceOnUse" cy="345.23175" cx="449.12918" gradientTransform="matrix(1.06455,-4.457048e-3,4.186833e-3,1.000012,-30.43703,1.997764)" r="184.96443"/>
+    <linearGradient id="lg2">
+      <stop style="stop-color:#fa4;stop-opacity:1" offset="0"/>
+      <stop style="stop-color:#c3791f;stop-opacity:1" offset="0.5"/>
+      <stop style="stop-color:#935000;stop-opacity:1" offset="1"/>
+    </linearGradient>
+    <linearGradient id="lg3">
+      <stop style="stop-color:black;stop-opacity:1" offset="0"/>
+      <stop style="stop-color:black;stop-opacity:1" offset="0.5"/>
+      <stop style="stop-color:black;stop-opacity:1" offset="0.75"/>
+      <stop style="stop-color:black;stop-opacity:0.72164947" offset="0.875"/>
+      <stop style="stop-color:black;stop-opacity:0.50515461" offset="0.9375"/>
+      <stop style="stop-color:black;stop-opacity:0.3298969" offset="0.96875"/>
+      <stop style="stop-color:black;stop-opacity:0" offset="1"/>
+    </linearGradient>
+  </defs>
+  <path d="M300 252.36218C300 307.59065 255.22847 352.36218 200 352.36218 144.77153 352.36218 100 307.59065 100 252.36218 100 197.13371 144.77153 152.36218 200 152.36218 255.22847 152.36218 300 197.13371 300 252.36218L300 252.36218z" style="fill:#00ffff;fill-opacity:0.49999997;fill-rule:evenodd;stroke:#00ffff;stroke-width:4.0000000;stroke-linecap:butt;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000" transform="translate(-91.79890,-143.8324)"/>
+  <path d="M500 252.36218C500 307.59065 455.22847 352.36218 400 352.36218 344.77153 352.36218 300 307.59065 300 252.36218 300 197.13371 344.77153 152.36218 400 152.36218 455.22847 152.36218 500 197.13371 500 252.36218L500 252.36218z" style="fill:#ffff00;fill-opacity:0.49999997;fill-rule:evenodd;stroke:#ffff00;stroke-width:4.0000000;stroke-linecap:butt;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000" transform="translate(-242.7989,-42.83241)"/>
+  <path d="M400 452.36218C400 507.59065 355.22847 552.36218 300 552.36218 244.77153 552.36218 200 507.59065 200 452.36218 200 397.13371 244.77153 352.36218 300 352.36218 355.22847 352.36218 400 397.13371 400 452.36218L400 452.36218z" style="fill:#ff00ff;fill-opacity:0.49999997;fill-rule:evenodd;stroke:#ff00ff;stroke-width:4.0000000;stroke-linecap:butt;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000" transform="translate(-90.79890,-342.8324)"/>
+  <rect style="fill:url(#rd0);fill-opacity:1.0000000;fill-rule:evenodd;stroke:#000;stroke-width:4.0000000;stroke-linecap:butt;stroke-miterlimit:4.0000000;stroke-dasharray:8.0000000 4.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000" rx="41.428570" ry="41.428570" transform="translate(6.201104,5.167586)" width="250.00000" y="2.3621826" x="351.00000" height="150.00000"/>
+  <text style="font-size:72px;font-style:oblique;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125.00000%;writing-mode:lr;text-anchor:start;fill:#fff;fill-opacity:0.49999997;stroke:#000;stroke-width:3.0000000;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.0000000;stroke-dasharray:6.0000000 3.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000;font-family:Bitstream Vera Sans" xml:space="preserve" transform="translate(6.201104,5.167586)" y="101.34265" x="398.91016"><tspan y="101.34265" x="398.91016">SVG</tspan></text>
+  <g transform="matrix(0.403355,0.000000,0.000000,0.403355,284.7118,53.56855)">
+    <path style="fill:url(#rd1);fill-opacity:1.0000000;stroke:none;stroke-width:4.0000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000" d="M675.82158 379.50504A182.96443 182.96443 0 1 0 309.89272 379.50504 182.96443 182.96443 0 1 0 675.82158 379.50504z" transform="translate(25.71677,42.14162)"/>
+    <path style="fill:url(#rd2);fill-opacity:1.0000000;stroke:none;stroke-width:4.0000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000" d="M675.82158 379.50504A182.96443 182.96443 0 1 0 309.89272 379.50504 182.96443 182.96443 0 1 0 675.82158 379.50504z" transform="translate(3.000000,1.000000)"/>
+    <path style="color:#000;fill:#000;fill-opacity:1.0000000;fill-rule:nonzero;stroke:none;stroke-width:4.0000000;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000;marker:none" d="M448.21432 203.83901C450.36313 204.6315 453.75174 205.94795 456.34375 207.71875 458.93576 209.48955 460.70727 211.5991 460.84375 214 461.1565 219.5018 462.73056 224.22855 456.3125 234.21875 449.89444 244.20895 435.16134 259.07637 402.75 282.4375 341.89198 326.30215 327.69756 419.11497 324.82774 445.4561L327.9384 453.22053C327.9384 453.22053 336.06337 335.44254 405.09375 285.6875 437.69027 262.19289 452.72065 247.17079 459.65625 236.375 466.59185 225.57921 465.12192 218.64356 464.84375 213.75 464.60642 209.57479 461.69349 206.55518 458.59375 204.4375 457.315 203.56388 455.94644 202.87002 454.65334 202.2368L448.21432 203.83901z"/>
+    <path style="color:#000;fill:#000;fill-opacity:1.0000000;fill-rule:nonzero;stroke:none;stroke-width:4.0000000;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000;marker:none" d="M509.01528 198.02937C499.53358 209.87282 477.91722 245.5091 465.15625 336.75 449.39628 449.43374 450.70852 546.83082 450.91598 557.84038L454.9375 558.75C454.9375 558.75 452.43678 456.60195 469.125 337.28125 482.74755 239.88008 506.43369 206.85787 513.90048 198.46178 513.90048 198.46178 509.01528 198.02937 509.01528 198.02937z"/>
+    <path style="color:#000;fill:#000;fill-opacity:1.0000000;fill-rule:nonzero;stroke:none;stroke-width:4.0000000;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000;marker:none" d="M556.6875 211.625C547.0438 211.8095 537.01703 214.51544 529.96875 222.90625 520.74474 233.88721 520.91652 245.76284 524.5 256.1875 528.08348 266.61216 534.88069 275.92531 538.96875 282.875 541.20112 286.67003 547.45814 295.57779 555.4375 309.1875 563.41686 322.79721 573.02573 340.97669 581.71875 362.78125 599.10479 406.39038 612.72572 464.47037 601.9375 529.59375 601.9375 529.59375 606.5655 526.08172 606.5655 526.08172 616.26061 461.73706 602.63933 404.42832 585.4375 361.28125 576.65129 339.24295 566.92996 320.8949 558.875 307.15625 550.82004 293.4176 544.35231 284.15204 542.40625 280.84375 538.13746 273.5868 531.59217 264.50677 528.28125 254.875 524.97033 245.24323 524.70586 235.41118 533.03125 225.5 541.18293 215.79562 554.20308 214.66443 565.5625 216.125 576.92192 217.58557 586.26153 221.51972 586.26153 221.51972 586.26153 221.51972 568.49535 212.55885 568.49535 212.55885 567.63548 212.41794 566.98202 212.27046 566.09375 212.15625 563.09277 211.77039 559.90207 211.5635 556.6875 211.625z"/>
+    <path style="color:#000;fill:#000;fill-opacity:1.0000000;fill-rule:nonzero;stroke:none;stroke-width:4.0000000;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.0000000;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000;marker:none" d="M458.15625 224.96875C424.33124 226.01594 399.1972 233.81099 381.5 242.40625 376.05652 245.05007 371.36415 247.88263 367.2855 250.51507 362.72383 255.08465 357.48708 260.80582 350.5625 269.40625 350.5625 269.40625 360.3001 257.14641 383.25 246 406.1999 234.85359 442.22471 224.97829 494.53125 230.375 599.18056 241.17215 643.20884 296.98475 675.71875 347 675.71875 347 673.37503 336.37355 673.37503 336.37355 641.03129 288.32441 594.99108 236.69798 494.9375 226.375 481.69006 225.0082 469.43125 224.61969 458.15625 224.96875z"/>
+
+  </g>
+</svg>

tests/background.html

@@ -1,98 +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">
-        <link href="#" type="text/css" rel="stylesheet"> 
-        <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">
-            $(window).ready(function() {
-          
-                $('body').html2canvas({
-                    logging:true
-                });
-            });
-        </script>
-
-        <style>
-
-            .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(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>
-        
-       
-    </body>
-</html>

tests/borders.html

@@ -1,120 +0,0 @@
-<!--
-* @author Niklas von Hertzen <niklas at hertzen.com>
-* @created 15.7.2011 
-* @website http://hertzen.com
--->
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>z-index tests #2</title>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <link href="#" type="text/css" rel="stylesheet"> 
-        <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">
-            $(window).ready(function() {
-          
-                $('body').html2canvas({
-                    logging:true
-                });
-            });
-        </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: 1px dashed #669966;
-                background-color: #ccffcc;
-                padding-left: 5px;
-            }
-
-            #div2 {
-                opacity: 0.8;
-                position: absolute;
-                width: 150px;
-                height: 200px;
-                top: 20px;
-                left: 170px;
-                border: 1px dashed #990000;
-                background-color: #ffdddd;
-                text-align: center;
-            }
-
-            #div4 {
-                opacity: 0.8;
-                position: absolute;
-                width: 200px;
-                height: 70px;
-                top: 65px;
-                left: 50px;
-                border: 1px dashed #000099;
-                background-color: #ddddff;
-                text-align: left;
-                padding-left: 10px;
-            }
-
-            #div5{
-                border: 1px 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">
-            <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/external-content.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>External content 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="../external/jquery-1.6.2.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">
-            $(window).ready(function() {       
-                $('body').html2canvas();
-            });
-        </script>
-
-
-    </head>
-    <body>         
-        <h1>Iframe</h1>
-        <iframe src="http://www.google.com" style="width:400px;height:300px;border:5px solid black;"></iframe>
-    </body>
-</html>