chore(release): 1.3.1

* fix: emoji line breaking (fix #1813)

* test: fix text.html reftest

.babelrc

@@ -0,0 +1,13 @@
+{
+    "presets": [[
+        "@babel/preset-env",
+        {
+            "targets": {
+                "ie": "9"
+            }
+        }
+    ], "@babel/preset-flow"],
+    "plugins": [
+        "add-module-exports"
+    ]
+}

.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
+
+[{*.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,26 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "extends":  [
+        "plugin:@typescript-eslint/recommended",
+        "prettier"
+    ],
+    "parserOptions": {
+        "project": "./tsconfig.json",
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "prettier"
+    ],
+    "rules": {
+        "no-console": ["error", { "allow": ["warn", "error"] }],
+        "@typescript-eslint/explicit-member-accessibility": ["error", {"accessibility": "no-public"}],
+        "@typescript-eslint/interface-name-prefix": "off",
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/no-use-before-define": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/class-name-casing": "off",
+        "prettier/prettier": "error"
+    }
+}

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,19 @@
+Please make sure you are testing with the latest [release of html2canvas](https://github.com/niklasvh/html2canvas/releases). 
+Old versions are not supported and issues reported for them will be closed.
+
+# Please follow the general troubleshooting steps first:
+
+- [ ] You are using the latest [version](https://github.com/niklasvh/html2canvas/releases)
+- [ ] You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console
+
+<!-- You can erase any parts of this template not applicable to your Issue. -->
+
+### Bug reports:
+
+Please replace this line with a brief summary of your issue **AND** if possible an example on [jsfiddle](https://jsfiddle.net/).
+
+### Specifications:
+
+ * html2canvas version tested with:
+ * Browser & version:
+ * Operating system:

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,37 @@
+A similar PR may already be submitted!
+Please search among the [Pull request](https://github.com/niklasvh/html2canvas/pulls) before creating one.
+
+Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:
+
+Before opening a pull request, please make sure all the tests pass locally by running `npm test`.
+
+**Summary**
+
+<!-- Summary of the PR -->
+
+This PR fixes/implements the following **bugs/features**
+
+* [ ] Bug 1
+* [ ] Bug 2
+* [ ] Feature 1
+* [ ] Feature 2
+* [ ] Breaking changes
+
+<!-- You can skip this if you're fixing a typo or adding an app to the Showcase. -->
+
+Explain the **motivation** for making this change. What existing problem does the pull request solve?
+
+<!-- Example: When "Adding a function to do X", explain why it is necessary to have a way to do X. -->
+
+**Test plan (required)**
+
+Demonstrate how the issue/feature can be replicated. For most cases, simply adding an appropriate html/css template into the [reftests](https://github.com/niklasvh/html2canvas/tree/master/tests/reftests) should be sufficient. Please see other tests there for reference.
+
+**Code formatting**
+
+Please make sure that code adheres to the project code formatting. Running `npm run format` will automatically format your code correctly.
+
+**Closing issues**
+
+<!-- Put `closes #XXXX` in your comment to auto-close the issue that your PR fixes (if such). -->
+Fixes #

.github/no-response.yml

@@ -0,0 +1,13 @@
+# Configuration for probot-no-response - https://github.com/probot/no-response
+
+# Number of days of inactivity before an Issue is closed for lack of response
+daysUntilClose: 14
+# Label requiring a response
+responseRequiredLabel: Needs More Information
+# Comment to post when closing an Issue for lack of response. Set to `false` to disable
+closeComment: >
+  This issue has been automatically closed because there has been no response
+  to our request for more information from the original author. With only the
+  information that is currently in the issue, we don't have enough information
+  to take action. Please reach out if you have or find the answers we need so
+  that we can investigate further.

.github/workflows/ci.yml

@@ -0,0 +1,355 @@
+name: CI
+
+on:
+  push:
+    branches: [ master ]
+    tags:
+      - 'v*'
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Npm install
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Pack
+        run: |
+          npm pack
+          mv html2canvas-*.tgz html2canvas.tgz
+          tar --list --verbose --file=html2canvas.tgz
+      - name: Upload npm pack
+        uses: actions/upload-artifact@v2
+        with:
+          name: npm
+          path: html2canvas.tgz
+          if-no-files-found: error
+      - name: Upload dist
+        uses: actions/upload-artifact@v2
+        with:
+          name: dist
+          path: dist
+          if-no-files-found: error
+      - name: Upload build
+        uses: actions/upload-artifact@v2
+        with:
+          name: build
+          path: build
+          if-no-files-found: error
+
+  test:
+    runs-on: ubuntu-latest
+    name: Test
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Npm install
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Lint
+        run: npm run lint
+      - name: Unit tests
+        run: npm run unittest
+  browser-test:
+    strategy:
+      fail-fast: false
+      matrix:
+        config:
+          - os: ubuntu-latest
+            name: Linux Firefox Stable
+            targetBrowser: Firefox_Stable
+            xvfb: true
+          - os: ubuntu-latest
+            name: Linux Chrome Stable
+            targetBrowser: Chrome_Stable
+            xvfb: true
+          - os: macos-latest
+            name: OSX Safari Stable
+            targetBrowser: Safari_Stable
+          - os: macos-latest
+            name: iOS Simulator Safari 12
+            targetBrowser: Safari_IOS_12
+            xcode: /Applications/Xcode_10.3.app
+          - os: macos-latest
+            name: iOS Simulator Safari 13
+            targetBrowser: Safari_IOS_13
+            xcode: /Applications/Xcode_11.6_beta.app
+          - os: macos-latest
+            name: iOS Simulator Safari 14
+            targetBrowser: Safari_IOS_14
+            xcode: /Applications/Xcode_12_beta.app
+          - os: macos-11
+            name: iOS Simulator Safari 15
+            targetBrowser: Safari_IOS_15
+            xcode: /Applications/Xcode_13.0.app
+          - os: windows-latest
+            name: Windows Internet Explorer 9 (Emulated)
+            targetBrowser: IE_9
+          - os: windows-latest
+            name: Windows Internet Explorer 10 (Emulated)
+            targetBrowser: IE_10
+          - os: windows-latest
+            name: Windows Internet Explorer 11
+            targetBrowser: IE_11
+    runs-on: ${{ matrix.config.os }}
+    name: ${{ matrix.config.name }}
+    env:
+      TARGET_BROWSER: ${{ matrix.config.targetBrowser }}
+    needs: build
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Npm install
+        run: npm ci
+      - name: Download library
+        uses: actions/download-artifact@v2
+        with:
+          name: dist
+          path: dist
+      - name: Download test-runner
+        uses: actions/download-artifact@v2
+        with:
+          name: build
+          path: build
+      - name: xcode selection
+        if: ${{ matrix.config.xcode != '' }}
+        run: sudo xcode-select -s "${{ matrix.config.xcode }}"
+      - name: Run browser tests
+        if: ${{ matrix.config.xvfb != true }}
+        run: npm run karma
+      - name: Start Xvfb
+        if: ${{ matrix.config.xvfb == true }}
+        run: Xvfb :99 &
+      - name: Run browser tests
+        if: ${{ matrix.config.xvfb == true }}
+        run: DISPLAY=:99 npm run karma
+      - name: Upload screenshots
+        uses: actions/upload-artifact@v2
+        with:
+          name: reftest-results
+          path: tmp/reftests
+          if-no-files-found: error
+  publish:
+    runs-on: ubuntu-latest
+    name: Publish
+    if: startsWith(github.ref, 'refs/tags/v')
+    needs: browser-test
+    steps:
+      - uses: actions/checkout@v2
+      - name: Download NPM package
+        uses: actions/download-artifact@v2
+        with:
+          name: npm
+          path: npm
+      - name: Download library
+        uses: actions/download-artifact@v2
+        with:
+          name: dist
+          path: dist
+      - name: Create Github Release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.ref }}
+          release_name: ${{ github.ref }}
+          draft: false
+          prerelease: ${{ contains(github.ref, '-rc.') || contains(github.ref, '-alpha.') }}
+      - name: Upload html2canvas.js
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./dist/html2canvas.js
+          asset_name: html2canvas.js
+          asset_content_type: text/javascript
+      - name: Upload html2canvas.min.js
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./dist/html2canvas.min.js
+          asset_name: html2canvas.min.js
+          asset_content_type: text/javascript
+      - name: Upload html2canvas.esm.js
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./dist/html2canvas.esm.js
+          asset_name: html2canvas.esm.js
+          asset_content_type: text/javascript
+      - name: Unpack npm
+        run: cd npm && tar -xvzf "html2canvas.tgz"
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: 'https://registry.npmjs.org'
+      - name: NPM Publish
+        run: cd npm/package && npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+  docs:
+    runs-on: ubuntu-latest
+    name: Build docs
+    needs: browser-test
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Npm install
+        run: npm ci
+      - name: Download library
+        uses: actions/download-artifact@v2
+        with:
+          name: dist
+          path: www/static/dist
+      - name: Download test results
+        uses: actions/download-artifact@v2
+        with:
+          name: reftest-results
+          path: www/static/results
+      - name: Copy reftests to docs website
+        run: cp -R tests/reftests www/static/tests/reftests && cp -R tests/assets www/static/tests/assets && cp tests/test.js www/static/tests/test.js
+      - name: Create reftest result index
+        run: npm run build:reftest-result-list www/static/results/metadata www/src/results.json
+      - name: Create reftest previewer
+        run: npm run build:reftest-preview
+      - name: Clean metadata folder
+        run: rm -rf www/static/results/metadata
+      - name: Build docs
+        run: npm run build && cd www && npm install && npm run build && cd ..
+      - name: Upload docs
+        uses: actions/upload-artifact@v2
+        with:
+          name: docs
+          path: www/public
+          if-no-files-found: error
+  publish-docs:
+    runs-on: ubuntu-latest
+    name: Publish Docs
+    if: ${{ github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/tags/v') }}
+    needs: docs
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+      - name: Download docs
+        uses: actions/download-artifact@v2
+        with:
+          name: docs
+          path: docs
+      - name: Publish docs
+        uses: JamesIves/github-pages-deploy-action@3.7.1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: docs
+          SINGLE_COMMIT: true
+          CLEAN: true
+  diff-reftests:
+    runs-on: ubuntu-latest
+    name: Diff reftest screenshots
+    needs: browser-test
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Npm install
+        run: npm ci
+      - name: Checkout current snapshots
+        run: git checkout origin/gh-pages results
+      - name: Download test results
+        uses: actions/download-artifact@v2
+        with:
+          name: reftest-results
+          path: tmp/reftests
+      - name: Run diff
+        run: npm run reftests-diff
+        continue-on-error: true
+      - name: Upload diff
+        uses: actions/upload-artifact@v2
+        with:
+          name: snapshot-diffs
+          path: tmp/snapshot-diffs

.github/workflows/release.yml

@@ -0,0 +1,37 @@
+name: Create Release
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Semantic version (major | minor | patch | premajor | preminor | prepatch | prerelease)'
+        default: 'patch'
+        required: true
+        
+jobs:
+  version:
+    name: Create version
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
+        token: ${{ secrets.PAT_TOKEN }}
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 12
+    - name: Npm install
+      run: npm ci
+    - name: Configure git
+      run: |
+        git config user.name "CI"
+        git config user.email "niklasvh@gmail.com"
+    - name: Create release
+      run: npm run release -- --preset eslint --release-as ${{ github.event.inputs.version }}
+    - name: Print details
+      run: |
+        cat package.json
+        cat CHANGELOG.md
+        git tag
+    - name: Push git version
+      run: git push --follow-tags origin master

.gitignore

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

.npmignore

@@ -0,0 +1,22 @@
+.github/
+.idea/
+.rpt2_cache
+build/
+configs/
+docs/
+examples/
+scripts/
+src/
+tests/
+www/
+tmp/
+*.iml
+.babelrc
+.editorconfig
+.eslintrc
+.npmignore
+.prettierrc
+jest.config.js
+karma.conf.js
+karma.js
+rollup.config.ts

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 4,
+  "bracketSpacing": false,
+  "singleQuote": true,
+  "printWidth": 120
+}

CHANGELOG.md

@@ -0,0 +1,482 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+## [1.3.1](https://github.com/niklasvh/html2canvas/compare/v1.3.0...v1.3.1) (2021-08-14)
+
+
+### fix
+
+* multi arg transition/animation duration (#2657) ([1b55ed5](https://github.com/niklasvh/html2canvas/commit/1b55ed5668dcbbe1c6d8d7e94736d8f2da2d31c5)), closes [#2657](https://github.com/niklasvh/html2canvas/issues/2657)
+
+
+
+# [1.3.0](https://github.com/niklasvh/html2canvas/compare/v1.2.2...v1.3.0) (2021-08-13)
+
+
+### feat
+
+* add rtl render support (#2653) ([6947982](https://github.com/niklasvh/html2canvas/commit/694798284838b16882e648914da0905818aa366c)), closes [#2653](https://github.com/niklasvh/html2canvas/issues/2653)
+* correctly break graphemes (#2652) ([437b367](https://github.com/niklasvh/html2canvas/commit/437b367d3ba9dfd7f9a4c8042ac8d00208c09770)), closes [#2652](https://github.com/niklasvh/html2canvas/issues/2652)
+
+### fix
+
+* correctly handle allowTaint canvas cloning (#2649) ([c378e22](https://github.com/niklasvh/html2canvas/commit/c378e220694c14cb7b3b4b8650a7757f8fc23c7a)), closes [#2649](https://github.com/niklasvh/html2canvas/issues/2649)
+* finish animation/transitions for elements (#2632) ([969638f](https://github.com/niklasvh/html2canvas/commit/969638fb94a0a14c64a667fa6e5689f79d9f1044)), closes [#2632](https://github.com/niklasvh/html2canvas/issues/2632)
+
+### test
+
+* add letter-spacing test for zwj emoji (#2650) ([f919204](https://github.com/niklasvh/html2canvas/commit/f919204efa06af219f155ca279f96124bb92862b)), closes [#2650](https://github.com/niklasvh/html2canvas/issues/2650)
+
+
+
+## [1.2.2](https://github.com/niklasvh/html2canvas/compare/v1.2.1...v1.2.2) (2021-08-10)
+
+
+### ci
+
+* add ios15 target (#2564) ([e429e04](https://github.com/niklasvh/html2canvas/commit/e429e0443adf5c7ca3041b97a8157b8911302206)), closes [#2564](https://github.com/niklasvh/html2canvas/issues/2564)
+
+### docs
+
+* update test previewer (#2637) ([7a06d0c](https://github.com/niklasvh/html2canvas/commit/7a06d0c2c2f3b8a1d1a8a85c540f8288b782e8c6)), closes [#2637](https://github.com/niklasvh/html2canvas/issues/2637)
+
+### fix
+
+* parsing counter content in pseudo element (#2640) ([1941b9e](https://github.com/niklasvh/html2canvas/commit/1941b9e0acfd9243da0beaf70e1643cab1b4a963)), closes [#2640](https://github.com/niklasvh/html2canvas/issues/2640)
+* radial gradient ry check (#2631) ([a0dd38a](https://github.com/niklasvh/html2canvas/commit/a0dd38a8be4e540ae1c1f4b4e41f6c386f3e454f)), closes [#2631](https://github.com/niklasvh/html2canvas/issues/2631)
+* test for ios range line break error (#2635) ([f43f942](https://github.com/niklasvh/html2canvas/commit/f43f942fcd793dde9cdc6c0438f379ec3c05c405)), closes [#2635](https://github.com/niklasvh/html2canvas/issues/2635)
+
+### test
+
+* large base64 encoded background (#2636) ([e36408a](https://github.com/niklasvh/html2canvas/commit/e36408ad030fe31acd9969a37fe24c1621c0bd04)), closes [#2636](https://github.com/niklasvh/html2canvas/issues/2636)
+
+
+
+## [1.2.1](https://github.com/niklasvh/html2canvas/compare/v1.2.0...v1.2.1) (2021-08-05)
+
+
+### fix
+
+* none image (#2627) ([6651fc6](https://github.com/niklasvh/html2canvas/commit/6651fc6789d5902d171dc53b4094887870433018)), closes [#2627](https://github.com/niklasvh/html2canvas/issues/2627)
+* type import that is only available ts 3.8 or higher (#2629) ([c5c6fa0](https://github.com/niklasvh/html2canvas/commit/c5c6fa00d71f36ef963ba5170ebc7b668d39c407)), closes [#2629](https://github.com/niklasvh/html2canvas/issues/2629)
+
+
+
+# [1.2.0](https://github.com/niklasvh/html2canvas/compare/v1.1.5...v1.2.0) (2021-08-04)
+
+
+### fix
+
+* element cropping & scrolling (#2625) ([878e37a](https://github.com/niklasvh/html2canvas/commit/878e37a24272d0412fe589975ef8eed931c56e0b)), closes [#2625](https://github.com/niklasvh/html2canvas/issues/2625)
+* overflow-wrap break-word (#2626) ([95a46b0](https://github.com/niklasvh/html2canvas/commit/95a46b00c53563722c035a0e45fdf5fb507275e4)), closes [#2626](https://github.com/niklasvh/html2canvas/issues/2626)
+
+### test
+
+* element with scrolled window (#2624) ([1338c7b](https://github.com/niklasvh/html2canvas/commit/1338c7b203535d53509416358d74014200a994eb)), closes [#2624](https://github.com/niklasvh/html2canvas/issues/2624)
+
+
+
+## [1.1.5](https://github.com/niklasvh/html2canvas/compare/v1.1.4...v1.1.5) (2021-08-02)
+
+
+### docs
+
+* update README to github discussion Q/A ([5dea36b](https://github.com/niklasvh/html2canvas/commit/5dea36bd6964164e8ba3f8780309e792f5d16255))
+
+### fix
+
+* emoji line breaking (fix #1813) (#2621) ([7d788c6](https://github.com/niklasvh/html2canvas/commit/7d788c6f3d221b87f6b59fcda8517731340b2d1f)), closes [#1813](https://github.com/niklasvh/html2canvas/issues/1813) [#2621](https://github.com/niklasvh/html2canvas/issues/2621) [#1813](https://github.com/niklasvh/html2canvas/issues/1813)
+* natural sizes for images with srcset (#2622) ([96e23d1](https://github.com/niklasvh/html2canvas/commit/96e23d185198b7131cf0cfa31c14c165790464e9)), closes [#2622](https://github.com/niklasvh/html2canvas/issues/2622)
+
+
+
+## [1.1.4](https://github.com/niklasvh/html2canvas/compare/v1.1.3...v1.1.4) (2021-07-15)
+
+
+### feat
+
+* add support for webkit-text-stroke and paint-order (#2591) ([522e5aa](https://github.com/niklasvh/html2canvas/commit/522e5aac5fdad090953d095b5d558053a5e2d43d)), closes [#2591](https://github.com/niklasvh/html2canvas/issues/2591)
+
+### fix
+
+* don't copy 'all' css property (#2586) ([fa60716](https://github.com/niklasvh/html2canvas/commit/fa60716d07ed590ec64543a586a7960cbc8557df)), closes [#2586](https://github.com/niklasvh/html2canvas/issues/2586)
+* svg d path getting truncated on copy (#2589) ([dd6d885](https://github.com/niklasvh/html2canvas/commit/dd6d8856eca820a13a0990c467b9e531433fd4a9)), closes [#2589](https://github.com/niklasvh/html2canvas/issues/2589)
+* text position for form elements and list markers (#2588) ([cd99f11](https://github.com/niklasvh/html2canvas/commit/cd99f11b1b9eb1260a548a63e2a370a0a5ddafa0)), closes [#2588](https://github.com/niklasvh/html2canvas/issues/2588)
+* this.canvas.ownerDocument is undefined (#2590) ([45efe54](https://github.com/niklasvh/html2canvas/commit/45efe54da8145f97b9ee0463e686103280e3c8b1)), closes [#2590](https://github.com/niklasvh/html2canvas/issues/2590)
+* word-break seperators (#2593) ([e9f7f48](https://github.com/niklasvh/html2canvas/commit/e9f7f48d571304be14610a181feedca3c3b42864)), closes [#2593](https://github.com/niklasvh/html2canvas/issues/2593)
+
+### test
+
+* refactor language tests (#2594) ([4c360fc](https://github.com/niklasvh/html2canvas/commit/4c360fc1f059f4dcab71a79f9dc8a5b2e25411ea)), closes [#2594](https://github.com/niklasvh/html2canvas/issues/2594)
+* update box-shadow with radius ([578bb77](https://github.com/niklasvh/html2canvas/commit/578bb771bfeb7e81362e9e355d6cc9ae910e3920))
+
+
+
+## [1.1.3](https://github.com/niklasvh/html2canvas/compare/v1.1.2...v1.1.3) (2021-07-14)
+
+
+### feat
+
+* allow access to reference element in onclone (#2584) ([58b4591](https://github.com/niklasvh/html2canvas/commit/58b45911741c0dbbccd462b2976560bb3999eaef)), closes [#2584](https://github.com/niklasvh/html2canvas/issues/2584)
+* support for custom and slot elements (#2581) ([acb4cd2](https://github.com/niklasvh/html2canvas/commit/acb4cd24b85527908c02a60794768949578678f0)), closes [#2581](https://github.com/niklasvh/html2canvas/issues/2581)
+
+### fix
+
+* iframe load to ensure images are loaded (#2577) ([eeb5a3e](https://github.com/niklasvh/html2canvas/commit/eeb5a3ea1d6c94e0f6dcfd40695eb88ebb3e0041)), closes [#2577](https://github.com/niklasvh/html2canvas/issues/2577)
+* image blob rendering ([1acdc82](https://github.com/niklasvh/html2canvas/commit/1acdc827a4e05933c2f7c9558405c66b7cd82f58))
+* responsive svg images (#2583) ([92fa448](https://github.com/niklasvh/html2canvas/commit/92fa448913192d5e4e82bfe14f6644b669d4e6ef)), closes [#2583](https://github.com/niklasvh/html2canvas/issues/2583)
+
+### test
+
+* add test cases for text-stroke and textarea from (#1540 and #2132) (#2585) ([1d00bfe](https://github.com/niklasvh/html2canvas/commit/1d00bfe175d51e663d0bae88b6dbd10a266a71f1)), closes [#1540](https://github.com/niklasvh/html2canvas/issues/1540) [#2132](https://github.com/niklasvh/html2canvas/issues/2132) [#2585](https://github.com/niklasvh/html2canvas/issues/2585)
+
+
+
+## [1.1.2](https://github.com/niklasvh/html2canvas/compare/v1.1.1...v1.1.2) (2021-07-13)
+
+
+### ci
+
+* implement screenshot diffing (#2571) ([e29af58](https://github.com/niklasvh/html2canvas/commit/e29af586618125bbad10ad6bee3d69fddbc5d22a)), closes [#2571](https://github.com/niklasvh/html2canvas/issues/2571)
+
+### fix
+
+* logger unique names (#2575) ([1715854](https://github.com/niklasvh/html2canvas/commit/171585491dd1bee4f30691328bd22e978f3ac79e)), closes [#2575](https://github.com/niklasvh/html2canvas/issues/2575)
+* text-shadow position with baseline (#2576) ([439e365](https://github.com/niklasvh/html2canvas/commit/439e365ea8c703b528778a268dcfc3bf9ccad6a9)), closes [#2576](https://github.com/niklasvh/html2canvas/issues/2576)
+
+
+
+## [1.1.1](https://github.com/niklasvh/html2canvas/compare/v1.1.0...v1.1.1) (2021-07-12)
+
+
+### fix
+
+* allow proxy url with parameters (#2100) ([a4a3ce8](https://github.com/niklasvh/html2canvas/commit/a4a3ce8a2eb6a4f43f1bc9a7935eb16f2b98a3cd)), closes [#2100](https://github.com/niklasvh/html2canvas/issues/2100)
+* crash on background-size with calc() (fix #2469) (#2569) ([084017a](https://github.com/niklasvh/html2canvas/commit/084017a67319a993d73c6bdf612dd8532f1b8dbe)), closes [#2469](https://github.com/niklasvh/html2canvas/issues/2469) [#2569](https://github.com/niklasvh/html2canvas/issues/2569)
+* handle unhandled promise rejections (#2568) ([4555940](https://github.com/niklasvh/html2canvas/commit/4555940d0bc17b7fd9327dd0164c382a3dbf1858)), closes [#2568](https://github.com/niklasvh/html2canvas/issues/2568)
+
+
+
+# [1.1.0](https://github.com/niklasvh/html2canvas/compare/v1.0.0...v1.1.0) (2021-07-11)
+
+
+### ci
+
+* fail build if no artifacts uploaded (#2566) ([e7a021a](https://github.com/niklasvh/html2canvas/commit/e7a021ab931f3c0de060b4643e88fad85345c3d3)), closes [#2566](https://github.com/niklasvh/html2canvas/issues/2566)
+
+### deps
+
+* update dependencies with lint fixes (#2565) ([b2902ec](https://github.com/niklasvh/html2canvas/commit/b2902ec31c2a414ea26f864f8e00aa8846890ffc)), closes [#2565](https://github.com/niklasvh/html2canvas/issues/2565)
+
+### docs
+
+* update border-style support ([cf35a28](https://github.com/niklasvh/html2canvas/commit/cf35a282b2c9d41b601c3148e8c08fe7ba61a5f9))
+
+### fix
+
+* Ensure resizeImage's canvas has at least 1px of width and height (#2409) ([bb92371](https://github.com/niklasvh/html2canvas/commit/bb9237155cf0ec090432ee6c5d9c555eb6ffa81f)), closes [#2409](https://github.com/niklasvh/html2canvas/issues/2409)
+* text-decoration-line fallback (#2088) (#2567) ([44296e5](https://github.com/niklasvh/html2canvas/commit/44296e529368140ec06a937383e05f3074b19ee2)), closes [#2088](https://github.com/niklasvh/html2canvas/issues/2088) [#2567](https://github.com/niklasvh/html2canvas/issues/2567)
+* use baseline for text positioning (#2109) ([85f79c1](https://github.com/niklasvh/html2canvas/commit/85f79c1a5e4c0b422ace552c430dd389c8477a44)), closes [#2109](https://github.com/niklasvh/html2canvas/issues/2109)
+
+
+
+# [1.0.0](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.7...v1.0.0) (2021-07-04)
+
+
+### ci
+
+* update docs publish action (#2451) ([7222aba](https://github.com/niklasvh/html2canvas/commit/7222aba1b42138c3d466525172411b3d9869095f)), closes [#2451](https://github.com/niklasvh/html2canvas/issues/2451)
+
+### deps
+
+* update www deps (#2525) ([2a013e2](https://github.com/niklasvh/html2canvas/commit/2a013e20c814b7dbaea98f54f0bde8f553eb79a2)), closes [#2525](https://github.com/niklasvh/html2canvas/issues/2525)
+
+### fix
+
+* opacity with overflow hidden (#2450) ([82b7da5](https://github.com/niklasvh/html2canvas/commit/82b7da558c342e7f53d298bb1d843a5db86c3b21)), closes [#2450](https://github.com/niklasvh/html2canvas/issues/2450)
+
+### test
+
+* update karma runner (#2524) ([ff35c7d](https://github.com/niklasvh/html2canvas/commit/ff35c7dbd33f863f5b614d778baf8cb1e8dded60)), closes [#2524](https://github.com/niklasvh/html2canvas/issues/2524)
+
+
+
+# [1.0.0-rc.7](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.6...v1.0.0-rc.7) (2020-08-09)
+
+
+### fix
+
+* concatenate contiguous font-family tokens (#2219) ([bacfadf](https://github.com/niklasvh/html2canvas/commit/bacfadff96d907d9e8ab4ef515ca6487de9e51fc)), closes [#2219](https://github.com/niklasvh/html2canvas/issues/2219)
+* external styles on svg elements (#2320) ([1514220](https://github.com/niklasvh/html2canvas/commit/1514220812cfb22d64d0974558d9c14fe90a41d3)), closes [#2320](https://github.com/niklasvh/html2canvas/issues/2320)
+
+
+
+# [1.0.0-rc.6](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.5...v1.0.0-rc.6) (2020-08-08)
+
+
+### ci
+
+* Azure Pipelines: upgrade from macOS 10.13 -> 10.14 (#2204) ([c366e87](https://github.com/niklasvh/html2canvas/commit/c366e8790d346ea981b24b7425aef6bf6d7ebcec)), closes [#2204](https://github.com/niklasvh/html2canvas/issues/2204)
+* build docs (#2305) ([51de347](https://github.com/niklasvh/html2canvas/commit/51de34787ad8aba3f213800be45e878cddb064e9)), closes [#2305](https://github.com/niklasvh/html2canvas/issues/2305)
+
+### fix
+
+* #1868 Clone node, Setting className for SVG element raises error (#2079) ([f139b51](https://github.com/niklasvh/html2canvas/commit/f139b513c5cf9673dc727fd47124e0d779891e3a)), closes [#1868](https://github.com/niklasvh/html2canvas/issues/1868) [#2079](https://github.com/niklasvh/html2canvas/issues/2079) [#1868](https://github.com/niklasvh/html2canvas/issues/1868)
+* image loading="lazy" fix #2312 (#2314) ([f23e6f6](https://github.com/niklasvh/html2canvas/commit/f23e6f6f2690dc0dbd02621c3bb81025904e6647)), closes [#2312](https://github.com/niklasvh/html2canvas/issues/2312) [#2314](https://github.com/niklasvh/html2canvas/issues/2314)
+
+
+
+# [1.0.0-rc.5](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.4...v1.0.0-rc.5) (2019-09-27)
+
+
+### fix
+
+* correctly respect logging option (#2013) ([34b06d6365603c3b16664ab7804efe94c7945946](https://github.com/niklasvh/html2canvas/commit/34b06d6365603c3b16664ab7804efe94c7945946)), closes [#2013](https://github.com/niklasvh/html2canvas/issues/2013)
+* safari pseudo element content parsing (#2018) ([3f599103fb139f218ffe917800e74af2c7cc7ad5](https://github.com/niklasvh/html2canvas/commit/3f599103fb139f218ffe917800e74af2c7cc7ad5)), closes [#2018](https://github.com/niklasvh/html2canvas/issues/2018)
+* using existing canvas option (#2017) ([076492042a73d67b30e4562f2964200e07d25f5e](https://github.com/niklasvh/html2canvas/commit/076492042a73d67b30e4562f2964200e07d25f5e)), closes [#2017](https://github.com/niklasvh/html2canvas/issues/2017)
+
+
+
+# [1.0.0-rc.4](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.3...v1.0.0-rc.4) (2019-09-22)
+
+
+### docs
+
+* fix typo (#1864) ([9a63797aa7fb81454008745d2a1c069ca24339a4](https://github.com/niklasvh/html2canvas/commit/9a63797aa7fb81454008745d2a1c069ca24339a4)), closes [#1864](https://github.com/niklasvh/html2canvas/issues/1864)
+
+### feat
+
+* ignore unsupported image functions (#1873) ([61f4819e02102b112513d57b16ec7d37e989af20](https://github.com/niklasvh/html2canvas/commit/61f4819e02102b112513d57b16ec7d37e989af20)), closes [#1873](https://github.com/niklasvh/html2canvas/issues/1873)
+
+### fix
+
+* correctly render partial borders (fix #1920) (#2010) ([eedb81ef9e114366a7e286e975659360cf9d0983](https://github.com/niklasvh/html2canvas/commit/eedb81ef9e114366a7e286e975659360cf9d0983)), closes [#1920](https://github.com/niklasvh/html2canvas/issues/1920) [#2010](https://github.com/niklasvh/html2canvas/issues/2010)
+* nested z-index ordering (#2011) ([00555cf1efddfed5877811d8a03a326f9943ab06](https://github.com/niklasvh/html2canvas/commit/00555cf1efddfed5877811d8a03a326f9943ab06)), closes [#2011](https://github.com/niklasvh/html2canvas/issues/2011) [#1978](https://github.com/niklasvh/html2canvas/issues/1978)
+* null backgroundColor option as transparent (#2012) ([7d3456b78c37e7333db087601805b32ec7ca0253](https://github.com/niklasvh/html2canvas/commit/7d3456b78c37e7333db087601805b32ec7ca0253)), closes [#2012](https://github.com/niklasvh/html2canvas/issues/2012)
+* zero size iframe rendering (#1863) ([81dcf7b6be66920260a60908aa4b86e7530f6e17](https://github.com/niklasvh/html2canvas/commit/81dcf7b6be66920260a60908aa4b86e7530f6e17)), closes [#1863](https://github.com/niklasvh/html2canvas/issues/1863)
+
+
+
+# [1.0.0-rc.3](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.2...v1.0.0-rc.3) (2019-05-30)
+
+
+### fix
+
+* stack exceeding for css tokenizer (#1862) ([cbaecdca28cfaf9bd854e1b0c005cc8058208b36](https://github.com/niklasvh/html2canvas/commit/cbaecdca28cfaf9bd854e1b0c005cc8058208b36)), closes [#1862](https://github.com/niklasvh/html2canvas/issues/1862)
+* typescript options type definition (#1861) ([cae44a6f0a6649bd8a7c4250a20792bb5c2e5b42](https://github.com/niklasvh/html2canvas/commit/cae44a6f0a6649bd8a7c4250a20792bb5c2e5b42)), closes [#1861](https://github.com/niklasvh/html2canvas/issues/1861)
+
+
+
+# [1.0.0-rc.2](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.1...v1.0.0-rc.2) (2019-05-29)
+
+
+### ci
+
+* refactor browser tests (#1804) ([a7d881019bfe1fd6404c341ca1c6fa69e0274ef5](https://github.com/niklasvh/html2canvas/commit/a7d881019bfe1fd6404c341ca1c6fa69e0274ef5)), closes [#1804](https://github.com/niklasvh/html2canvas/issues/1804)
+
+### docs
+
+* fix README documentation ([20a797cbeb21baca4ce5b9a0642a5959cdf94a51](https://github.com/niklasvh/html2canvas/commit/20a797cbeb21baca4ce5b9a0642a5959cdf94a51))
+* remove dead donation link (fix #1802) ([43058241b420a5dabe94b0a4e4f6534d16a75ec0](https://github.com/niklasvh/html2canvas/commit/43058241b420a5dabe94b0a4e4f6534d16a75ec0)), closes [#1802](https://github.com/niklasvh/html2canvas/issues/1802)
+
+### fix
+
+* multi token overflow #1850 (#1851) ([409674fba6f8038eb174b9c89360ef8b342971e9](https://github.com/niklasvh/html2canvas/commit/409674fba6f8038eb174b9c89360ef8b342971e9)), closes [#1850](https://github.com/niklasvh/html2canvas/issues/1850) [#1851](https://github.com/niklasvh/html2canvas/issues/1851)
+
+### test
+
+* include reftests previewer with docs website (#1799) ([cdc4ca8296570bf842e937c6fb7cc32a1ce2bc09](https://github.com/niklasvh/html2canvas/commit/cdc4ca8296570bf842e937c6fb7cc32a1ce2bc09)), closes [#1799](https://github.com/niklasvh/html2canvas/issues/1799)
+
+
+
+# [1.0.0-rc.1](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.0...v1.0.0-rc.1) (2019-04-10)
+
+
+### ci
+
+* add ios simulator tests (#1794) ([a63cb3c0f132b1af915d9ef55a4c174f6e5502ce](https://github.com/niklasvh/html2canvas/commit/a63cb3c0f132b1af915d9ef55a4c174f6e5502ce)), closes [#1794](https://github.com/niklasvh/html2canvas/issues/1794)
+
+### docs
+
+* fix release date in changelog ([238de790a9f223becbc8726633c0f2a2dabf2cb7](https://github.com/niklasvh/html2canvas/commit/238de790a9f223becbc8726633c0f2a2dabf2cb7))
+* remove invalid `async` option from docs (fix #1769) (#1796) ([7775d3c0d6f3efca00611bedd5fc9200689a9f7a](https://github.com/niklasvh/html2canvas/commit/7775d3c0d6f3efca00611bedd5fc9200689a9f7a)), closes [#1769](https://github.com/niklasvh/html2canvas/issues/1769) [#1796](https://github.com/niklasvh/html2canvas/issues/1796)
+
+### fix
+
+* context scale for high resolution displays with foreignobjectrendering  (#1782) ([7027900f4993dcd00745a4db045ed1c0e3255f8a](https://github.com/niklasvh/html2canvas/commit/7027900f4993dcd00745a4db045ed1c0e3255f8a)), closes [#1782](https://github.com/niklasvh/html2canvas/issues/1782)
+* don't apply text shadows on elements (#1795) ([397595afb59ee50f0d128abb5945b5b9ddc6650d](https://github.com/niklasvh/html2canvas/commit/397595afb59ee50f0d128abb5945b5b9ddc6650d)), closes [#1795](https://github.com/niklasvh/html2canvas/issues/1795)
+* safari data url taints (#1797) ([4e4a231683904dfdc1f82472ece5a160a158dbb8](https://github.com/niklasvh/html2canvas/commit/4e4a231683904dfdc1f82472ece5a160a158dbb8)), closes [#1797](https://github.com/niklasvh/html2canvas/issues/1797)
+
+### test
+
+* fix RefTestRenderer.js inclusion with karma ([49f87fb680dbfe1898b3aeb60f2f5c3a93bfbe6d](https://github.com/niklasvh/html2canvas/commit/49f87fb680dbfe1898b3aeb60f2f5c3a93bfbe6d))
+
+
+
+# [1.0.0-rc.0](https://github.com/niklasvh/html2canvas/compare/v1.0.0-alpha.12...v1.0.0-rc.0) (2019-04-07)
+
+
+### build
+
+* update webpack and babel (#1793) ([44f3d79f68836624c2673a86f9ad47c17ef843c3](https://github.com/niklasvh/html2canvas/commit/44f3d79f68836624c2673a86f9ad47c17ef843c3)), closes [#1793](https://github.com/niklasvh/html2canvas/issues/1793)
+
+### ci
+
+* automate changelog generation (#1792) ([7ebef72e927eaafd34a1792ece431d2a73109230](https://github.com/niklasvh/html2canvas/commit/7ebef72e927eaafd34a1792ece431d2a73109230)), closes [#1792](https://github.com/niklasvh/html2canvas/issues/1792)
+* Improve CI pipeline (#1790) ([c45ef099fe8f7142e174f4fce39448a370a987d5](https://github.com/niklasvh/html2canvas/commit/c45ef099fe8f7142e174f4fce39448a370a987d5)), closes [#1790](https://github.com/niklasvh/html2canvas/issues/1790)
+
+### docs
+
+* improve canvas size limit documentation (#1576) ([3212184146b33c3564c2f416e1bfda911737c38b](https://github.com/niklasvh/html2canvas/commit/3212184146b33c3564c2f416e1bfda911737c38b)), closes [#1576](https://github.com/niklasvh/html2canvas/issues/1576)
+
+### fix
+
+* enforce colorstop min 0 (#1743) ([349bbf137abd83464e074db3948fc79a541c2ef3](https://github.com/niklasvh/html2canvas/commit/349bbf137abd83464e074db3948fc79a541c2ef3)), closes [#1743](https://github.com/niklasvh/html2canvas/issues/1743)
+* prevent unhandled promise rejections for hidden frames (#1762) ([5cbe5db35155e3a9790a30de09feb17843053b7a](https://github.com/niklasvh/html2canvas/commit/5cbe5db35155e3a9790a30de09feb17843053b7a)), closes [#1762](https://github.com/niklasvh/html2canvas/issues/1762)
+* wrap .sheet.cssRules access in try...catch. (#1693) ([2c018d19875ced30caafdc40f84ca531de6e6f91](https://github.com/niklasvh/html2canvas/commit/2c018d19875ced30caafdc40f84ca531de6e6f91)), closes [#1693](https://github.com/niklasvh/html2canvas/issues/1693)
+
+
+
+# [1.0.0-alpha.12](https://github.com/niklasvh/html2canvas/compare/v1.0.0-alpha.12...v1.0.0-alpha.13) (2018-04-05)
+ * Fix white space appearing on element rendering (Fix #1438)
+ * Reset canvas transform on finish (Fix #1494)
+
+# v1.0.0-alpha.11 - 1.4.2018 
+ * Fix IE11 member not found error 
+ * Support blob image resources in non-foreignObjectRendering mode
+
+# v1.0.0-alpha.10 - 15.2.2018 
+ * Re-introduce `onclone` option (Fix #1434)
+ * Add `ignoreElements` predicate function option
+ * Fix version console logging
+
+# v1.0.0-alpha.9 - 7.1.2018 
+ * Fix dynamic style sheets
+ * Fix > 50% border-radius values
+
+# v1.0.0-alpha.8 - 2.1.2018
+ * Use correct doctype in cloned Document (Fix #1298)
+ * Fix individual border rendering (Fix #1349)
+
+# v1.0.0-alpha.7 - 31.12.2017
+ * Fix form input rendering (#1338)
+ * Improve word line breaking algorithm
+
+# v1.0.0-alpha.6 - 28.12.2017 
+ * Fix list-style: none (#1340)
+ * Extend supported values for pseudo element content
+
+# v1.0.0-alpha.5 - 21.12.2017
+ * Fix underline positioning
+ * Fix canvas rendering on Chrome
+ * Fix overflow: auto
+ * Added support for rendering list-style
+
+ v1.0.0-alpha.4 - 12.12.2017 
+ * Fix rendering with multiple fonts defined (Fix #796)
+ * Add support for radial-gradients
+ * Fix logging option (#1302)
+ * Add support for rendering webgl canvas content (#646)
+ * Fix external SVG loading with proxies (#802)
+
+# v1.0.0-alpha.3 - 9.12.2017
+ * Disable `foreignObjectRendering` by default (#1295)
+ * Fix background-size when using background-origin and background-size: cover/contain (#1299)
+ * Added support for background-origin: content-box (#1299)
+
+# v1.0.0-alpha.2 - 7.12.2017
+ * Fix scroll positions for CanvasRenderer (#1259)
+ * Fix `data-html2canvas-ignore` attribute (#1253)
+ * Fix decimal `letter-spacing` values (#1293)
+
+# v1.0.0-alpha.1 - 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,73 @@
+html2canvas
+===========
+
+[Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](https://github.com/niklasvh/html2canvas/discussions/categories/q-a)
+
+[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 
+![CI](https://github.com/niklasvh/html2canvas/workflows/CI/badge.svg?branch=master)
+[![NPM Downloads](https://img.shields.io/npm/dm/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
+[![NPM Version](https://img.shields.io/npm/v/html2canvas.svg)](https://www.npmjs.org/package/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`.
+
+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 fulfillment 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
+
+### Examples ###
+
+For more information and examples, please visit the [homepage](https://html2canvas.hertzen.com) or try the [test console](https://html2canvas.hertzen.com/tests/).
+
+### 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.

bookmarklet.html

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

build.xml

@@ -1,75 +0,0 @@
-<?xml version="1.0" encoding="ISO-8859-1"?>
-<project name="html2canvas" basedir="." default="build">
-    <property name="src.dir" location="src"/>
-    <property name="lib.dir" location="../lib"/>
-    <property name="build.dir" location="build"/>
-    <property name="dist"  location="dist"/>
-    <property name="jquery-externs" value="jquery-1.4.4.externs.js"/>
-
-    <property name="JS_NAME" value="html2canvas.js"/>
-    <property name="JS_NAME_MIN" value="html2canvas.min.js"/>
-    <property name="JQUERY_PLUGIN_NAME" value="jquery.plugin.html2canvas.js"/>
-    <loadfile property="version" srcfile="version.txt" />
-
-    <fileset id="sourcefiles" dir="${src.dir}">
-        <include name="LICENSE"/>
-        <include name="Core.js"/>
-        <include name="Generate.js"/>
-        <include name="Parse.js"/>
-        <include name="Preload.js"/>
-        <include name="Queue.js"/>
-        <include name="Renderer.js"/>
-    </fileset>
-
-    <path id="jquery-plugin">
-        <fileset dir="${src.dir}" includes="LICENSE"/>
-        <fileset dir="${src.dir}/plugins" includes="${JQUERY_PLUGIN_NAME}"/>    
-    </path>
-
-    <target name="plugins">
-        <concat fixlastline="yes" destfile="${build.dir}/${JQUERY_PLUGIN_NAME}">
-            <path refid="jquery-plugin"/>
-        </concat>
-        <replaceregexp match="@VERSION@" replace="${version}" flags="g" byline="true" file="${build.dir}/${JQUERY_PLUGIN_NAME}" />
-    </target>
-
-
-    <target name="build" depends="plugins">
-        <concat fixlastline="yes" destfile="${build.dir}/${JS_NAME}">
-            <fileset refid="sourcefiles"/>
-        </concat>
-        <replaceregexp match="@VERSION@" replace="${version}" flags="g" byline="true" file="${build.dir}/${JS_NAME}" />
-    </target>
-
-
-    <taskdef name="jscomp" classname="com.google.javascript.jscomp.ant.CompileTask"
-           classpath="${lib.dir}/compiler.jar" onerror="report"/>
-
-    <target name="release" depends="build">
-        <jscomp compilationLevel="simple" warning="verbose"
-            debug="false"
-            output="${build.dir}/${JS_NAME_MIN}">
-            <externs dir="${lib.dir}">
-                 <file name="${jquery-externs}"/>
-            </externs>
-            <sources dir="${src.dir}">
-                <!-- need to write them again here since the closure compiler doesn't understand filesets,... -->
-                <file name="LICENSE"/>
-                <file name="Core.js"/>
-                <file name="Generate.js"/>
-                <file name="Parse.js"/>
-                <file name="Preload.js"/>
-                <file name="Queue.js"/>
-                <file name="Renderer.js"/>
-            </sources>
-        </jscomp>
-        <replaceregexp match="@VERSION@" replace="${version}" flags="g" byline="true" file="${build.dir}/${JS_NAME_MIN}" />
-    </target>
-
-    <target name="clean">
-        <delete file="${build.dir}/${JS_NAME}"></delete>
-        <delete file="${build.dir}/${JS_NAME_MIN}"></delete>
-        <delete file="${build.dir}/${JQUERY_PLUGIN_NAME}"></delete>
-    </target>
-</project>
-

configs/base.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "strictNullChecks": true,
+        "strictPropertyInitialization": true,
+        "resolveJsonModule": true
+    }
+}

configs/preview.json

@@ -0,0 +1,10 @@
+{
+    "extends": "./base",
+    "include": [
+        "../www/src/preview.ts"
+    ],
+    "exclude": [
+        "node_modules"
+    ]
+}
+

configs/scripts.json

@@ -0,0 +1,10 @@
+{
+    "extends": "./base",
+    "include": [
+        "scripts/**/*.ts"
+    ],
+    "exclude": [
+        "node_modules"
+    ]
+}
+

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>

docs/configuration.md

@@ -0,0 +1,35 @@
+---
+title: "Options"
+description: "Explore the different configuration options available for html2canvas"
+previousUrl: "/getting-started"
+previousTitle: "Getting Started"
+nextUrl: "/features"
+nextTitle: "Features"
+---
+
+These are all of the available configuration options.
+
+| Name          | Default  | Description |
+| ------------- | :------: | ----------- |
+| allowTaint | `false` | Whether to allow cross-origin images to taint the canvas
+| backgroundColor | `#ffffff` | Canvas background color, if none is specified in DOM. Set `null` for transparent
+| canvas | `null` | Existing `canvas` element to use as a base for drawing on
+| foreignObjectRendering | `false` | Whether to use ForeignObject rendering if the browser supports it
+| imageTimeout | `15000` | Timeout for loading an image (in milliseconds). Set to `0` to disable timeout.
+| ignoreElements | `(element) => false` | Predicate function which removes the matching elements from the render.
+| logging | `true` | Enable logging for debug purposes
+| onclone | `null` | Callback function which is called when the Document has been cloned for rendering, can be used to modify the contents that will be rendered without affecting the original source document.
+| proxy | `null` | Url to the [proxy](/proxy/) which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
+| removeContainer | `true` | Whether to cleanup the cloned DOM elements html2canvas creates temporarily
+| scale | `window.devicePixelRatio` | The scale to use for rendering. Defaults to the browsers device pixel ratio.
+| useCORS | `false` | Whether to attempt to load images from a server using CORS
+| width | `Element` width | The width of the `canvas`
+| height | `Element` height | The height of the `canvas`
+| x | `Element` x-offset | Crop canvas x-coordinate
+| y | `Element` y-offset| Crop canvas y-coordinate
+| scrollX | `Element` scrollX | The x-scroll position to used when rendering element, (for example if the Element uses `position: fixed`)
+| scrollY | `Element` scrollY | The y-scroll position to used when rendering element, (for example if the Element uses `position: fixed`)
+| windowWidth | `Window.innerWidth` | Window width to use when rendering `Element`, which may affect things like Media queries
+| windowHeight | `Window.innerHeight` | Window height to use when rendering `Element`, which may affect things like Media queries
+
+If you wish to exclude certain `Element`s from getting rendered, you can add a `data-html2canvas-ignore` attribute to those elements and html2canvas will exclude them from the rendering.

docs/documentation.md

@@ -0,0 +1,42 @@
+---
+title: "About"
+description: "Learn about html2canvas, how it works and some of its limitations"
+nextUrl: "/getting-started"
+nextTitle: "Getting Started"
+---
+
+Before you get started with the script, there are a few things that are good to know regarding the 
+script and some of its limitations.
+
+## Introduction
+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 it works
+The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements
+there, which it then uses to build a representation of the page. In other words, it does not actually take a
+screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.
+            
+            
+As a result, it is only able to render correctly properties that it understands, meaning there are many 
+CSS properties which do not work. For a full list of supported CSS properties, check out the 
+[supported features](/features/) page.
+
+## Limitations
+All the images that the script uses need to reside under the [same origin](http://en.wikipedia.org/wiki/Same_origin_policy) 
+for it to be able to read them without the assistance of a [proxy](/proxy/). Similarly, if you have other `canvas` 
+elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.
+
+The script doesn't render plugin content such as Flash or Java applets.
+
+## Browser compatibility
+
+The library should work fine on the following browsers (with `Promise` polyfill):
+ - Firefox 3.5+
+ - Google Chrome
+ - Opera 12+
+ - IE9+
+ - Edge
+ - Safari 6+

docs/faq.md

@@ -0,0 +1,48 @@
+---
+title: "FAQ"
+description: "Explore Frequently Asked Questions regarding html2canvas"
+---
+
+## Why aren't my images rendered?
+html2canvas does not get around content policy restrictions set by your browser. Drawing images that reside outside of 
+the [origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) of the current page [taint the 
+canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#What_is_a_tainted_canvas) that they are drawn upon. If the canvas gets tainted, it cannot be read anymore. As such, html2canvas implements 
+methods to check whether an image would taint the canvas before applying it. If you have set the `allowTaint` 
+[option](/configuration) to `false`, it will not draw the image.
+
+If you wish to load images that reside outside of your pages origin, you can use a [proxy](/proxy) to load the images.
+
+## Why is the produced canvas empty or cuts off half way through?
+Make sure that `canvas` element doesn't hit [browser limitations](https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element) for the `canvas` size or use the window configuration options to set a custom window size based on the `canvas` element:
+```
+await html2canvas(element, {
+    windowWidth: element.scrollWidth,
+    windowHeight: element.scrollHeight
+});
+```
+The window limitations vary by browser, operating system and system hardware.
+
+### Chrome
+> Maximum height/width: 32,767 pixels
+> Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)
+
+### Firefox
+> Maximum height/width: 32,767 pixels
+> Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)
+
+### Internet Explorer
+> Maximum height/width: 8,192 pixels
+> Maximum area: N/A
+
+### iOS
+> The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM
+
+## Why doesn't CSS property X render correctly or only partially?
+As each CSS property needs to be manually coded to render correctly, html2canvas will *never* have full CSS support. 
+The library tries to support the most [commonly used CSS properties](/features) to the extent that it can. If some CSS property 
+is missing or incomplete and you feel that it should be part of the library, create test cases for it and a new issue for it.
+
+## How do I get html2canvas to work in a browser extension?
+You shouldn't use html2canvas in a browser extension. Most browsers have native support for capturing screenshots from 
+tabs within extensions. Relevant information for [Chrome](https://developer.chrome.com/extensions/tabs#method-captureVisibleTab) and 
+[Firefox](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#drawWindow()).

docs/features.md

@@ -0,0 +1,87 @@
+---
+title: "Features"
+description: "Discover the different features supported by html2canvas"
+---
+
+Below is a list of all the supported CSS properties and values.
+
+ - background
+   - background-clip (**Does not support `text`**)
+   - background-color
+   - background-image
+       - url()
+       - linear-gradient()
+       - radial-gradient()
+   - background-origin
+   - background-position
+   - background-size
+ - border
+   - border-color
+   - border-radius
+   - border-style
+   - border-width
+ - bottom
+ - box-sizing
+ - content
+ - color
+ - display
+ - flex
+ - float
+ - font
+   - font-family
+   - font-size
+   - font-style
+   - font-variant
+   - font-weight
+ - height
+ - left
+ - letter-spacing
+ - line-break
+ - list-style
+    - list-style-image
+    - list-style-position
+    - list-style-type
+ - margin
+ - max-height
+ - max-width
+ - min-height
+ - min-width
+ - opacity
+ - overflow
+ - overflow-wrap
+ - padding
+ - paint-order
+ - position
+ - right
+ - text-align
+ - text-decoration
+   - text-decoration-color
+   - text-decoration-line
+   - text-decoration-style (**Only supports `solid`**)
+ - text-shadow
+ - text-transform
+ - top
+ - transform (**Limited support**)
+ - visibility
+ - white-space
+ - width
+ - webkit-text-stroke
+ - word-break
+ - word-spacing
+ - word-wrap
+ - z-index
+
+## Unsupported CSS properties
+These CSS properties are **NOT** currently supported
+ - [background-blend-mode](https://github.com/niklasvh/html2canvas/issues/966)
+ - [border-image](https://github.com/niklasvh/html2canvas/issues/1287)
+ - [box-decoration-break](https://github.com/niklasvh/html2canvas/issues/552)
+ - [box-shadow](https://github.com/niklasvh/html2canvas/pull/1086)
+ - [filter](https://github.com/niklasvh/html2canvas/issues/493)
+ - [font-variant-ligatures](https://github.com/niklasvh/html2canvas/pull/1085)
+ - [mix-blend-mode](https://github.com/niklasvh/html2canvas/issues/580)
+ - [object-fit](https://github.com/niklasvh/html2canvas/issues/1064)
+ - [repeating-linear-gradient()](https://github.com/niklasvh/html2canvas/issues/1162)
+ - [writing-mode](https://github.com/niklasvh/html2canvas/issues/1258)
+ - [zoom](https://github.com/niklasvh/html2canvas/issues/732)
+

docs/getting-started.md

@@ -0,0 +1,30 @@
+---
+title: "Getting Started"
+description: "Learn how to start using html2canvas"
+previousUrl: "/documentation"
+previousTitle: "About"
+nextUrl: "/configuration"
+nextTitle: "Configuration"
+---
+
+## Installing
+
+You can install `html2canvas` through npm or [download a built release](https://github.com/niklasvh/html2canvas/releases).
+
+### npm
+
+    npm install html2canvas
+
+```javascript
+import html2canvas from 'html2canvas';
+```
+    
+## Usage
+
+To render an `element` with html2canvas with some (optional) [options](/configuration/), simply call `html2canvas(element, options);`
+
+```javascript
+html2canvas(document.body).then(function(canvas) {
+    document.body.appendChild(canvas);
+});
+```

docs/proxy.md

@@ -0,0 +1,12 @@
+---
+title: "Proxy"
+description: "Browse different proxies available for supporting CORS content"
+---
+
+html2canvas does not get around content policy restrictions set by your browser. Drawing images that reside outside of 
+the origin of the current page taint the canvas that they are drawn upon. If the canvas gets tainted, 
+it cannot be read anymore. If you wish to load images that reside outside of your pages origin, you can use a proxy to load the images.
+
+## Available proxies
+
+ - [node.js](https://github.com/niklasvh/html2canvas-proxy-nodejs)

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, scale: 1}).then(function(canvas) {
+            console.log('Drew on the existing canvas');
+        });
+    }, false);
+
+</script>
+</body>
+</html>

jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    roots: ['src']
+};

karma.conf.js

@@ -0,0 +1,289 @@
+// Karma configuration
+// Generated on Sat Aug 05 2017 23:42:26 GMT+0800 (Malay Peninsula Standard Time)
+
+const path = require('path');
+const simctl = require('node-simctl');
+const iosSimulator = require('appium-ios-simulator');
+const listenAddress = 'localhost';
+const port = 9876;
+
+const log = require('karma/lib/logger').create('launcher:MobileSafari');
+
+module.exports = function(config) {
+    // https://github.com/actions/virtual-environments/blob/master/images/macos/macos-10.15-Readme.md
+    const launchers = {
+        Safari_IOS_9: {
+            base: 'MobileSafari',
+            name: 'iPhone 5s',
+            platform: 'iOS',
+            sdk: '9.0'
+        },
+        Safari_IOS_10: {
+            base: 'MobileSafari',
+            name: 'iPhone 5s',
+            platform: 'iOS',
+            sdk: '10.0'
+        },
+        Safari_IOS_12: {
+            base: 'MobileSafari',
+            name: 'iPhone 5s',
+            platform: 'iOS',
+            sdk: '12.4'
+        },
+        Safari_IOS_13: {
+            base: 'MobileSafari',
+            name: 'iPhone 8',
+            platform: 'iOS',
+            sdk: '13.6'
+        },
+        Safari_IOS_14: {
+            base: 'MobileSafari',
+            name: 'iPhone 8',
+            platform: 'iOS',
+            sdk: '14.0'
+        },
+        Safari_IOS_15: {
+            base: 'MobileSafari',
+            name: 'iPhone 8',
+            platform: 'iOS',
+            sdk: '15.0'
+        },
+        SauceLabs_IE9: {
+            base: 'SauceLabs',
+            browserName: 'internet explorer',
+            version: '9.0',
+            platform: 'Windows 7'
+        },
+        SauceLabs_IE10: {
+            base: 'SauceLabs',
+            browserName: 'internet explorer',
+            version: '10.0',
+            platform: 'Windows 7'
+        },
+        SauceLabs_IE11: {
+            base: 'SauceLabs',
+            browserName: 'internet explorer',
+            version: '11.0',
+            platform: 'Windows 7'
+        },
+        SauceLabs_Edge18: {
+            base: 'SauceLabs',
+            browserName: 'MicrosoftEdge',
+            version: '18.17763',
+            platform: 'Windows 10'
+        },
+        SauceLabs_Android4: {
+            base: 'SauceLabs',
+            browserName: 'Browser',
+            platform: 'Android',
+            version: '4.4',
+            device: 'Android Emulator',
+        },
+        SauceLabs_iOS10_3: {
+            base: 'SauceLabs',
+            browserName: 'Safari',
+            platform: 'iOS',
+            version: '10.3',
+            device: 'iPhone 7 Plus Simulator'
+        },
+        SauceLabs_iOS9_3: {
+            base: 'SauceLabs',
+            browserName: 'Safari',
+            platform: 'iOS',
+            version: '9.3',
+            device: 'iPhone 6 Plus Simulator'
+        },
+        IE_9: {
+            base: 'IE',
+            'x-ua-compatible': 'IE=EmulateIE9',
+            flags: ['-extoff']
+        },
+        IE_10: {
+            base: 'IE',
+            'x-ua-compatible': 'IE=EmulateIE10',
+            flags: ['-extoff']
+        },
+        IE_11: {
+            base: 'IE',
+            flags: ['-extoff']
+        },
+        Safari_Stable: {
+            base: 'SafariNative'
+        },
+        Chrome_Stable: {
+            base: 'ChromeHeadless'
+        },
+        Firefox_Stable: {
+            base: 'Firefox'
+        }
+    };
+
+    const ciLauncher = launchers[process.env.TARGET_BROWSER];
+
+    const customLaunchers = ciLauncher ? {target_browser: ciLauncher} : {
+        stable_chrome: {
+            base: 'ChromeHeadless'
+        },
+        stable_firefox: {
+            base: 'Firefox'
+        }
+    };
+
+    const injectTypedArrayPolyfills = function(files) {
+        files.unshift({
+            pattern: path.resolve(__dirname, './node_modules/js-polyfills/typedarray.js'),
+            included: true,
+            served: true,
+            watched: false
+        });
+    };
+
+    injectTypedArrayPolyfills.$inject = ['config.files'];
+
+    const MobileSafari = function(baseBrowserDecorator, args) {
+        if(process.platform !== "darwin"){
+            log.error("This launcher only works in MacOS.");
+            this._process.kill();
+            return;
+        }
+        baseBrowserDecorator(this);
+        this.on('start', url => {
+            simctl.getDevices(args.sdk, args.platform).then(devices => {
+                const d = devices.find(d => {
+                    return d.name === args.name;
+                });
+
+                if (!d) {
+                    log.error(`No device found for sdk ${args.sdk} with name ${args.name}`);
+                    log.info(`Available devices:`, devices);
+                    this._process.kill();
+                    return;
+                }
+
+                return iosSimulator.getSimulator(d.udid).then(device => {
+                    return simctl.bootDevice(d.udid).then(() => device);
+                }).then(device => {
+                    return device.waitForBoot(60 * 5 * 1000).then(() => {
+                        return device.openUrl(url);
+                    });
+                });
+            }).catch(e => {
+                console.log('err,', e);
+            });
+        });
+    };
+
+    MobileSafari.prototype = {
+        name: 'MobileSafari',
+        DEFAULT_CMD: {
+            darwin: '/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app/Contents/MacOS/Simulator',
+        },
+        ENV_CMD: null,
+    };
+
+    MobileSafari.$inject = ['baseBrowserDecorator', 'args'];
+
+    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', 'inline-mocha-fix'],
+
+        // 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},
+        ],
+
+        plugins: [
+            'karma-*',
+            {
+                'framework:inline-mocha-fix': ['factory', injectTypedArrayPolyfills]
+            },
+            {
+                'launcher:MobileSafari': ['type', MobileSafari]
+            }
+        ],
+
+        // 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: ['dots', 'junit'],
+
+        junitReporter: {
+            outputDir: 'tmp/junit/'
+        },
+
+        // web server listen address,
+        listenAddress,
+
+        // 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
+    })
+};

package.json

@@ -0,0 +1,124 @@
+{
+  "title": "html2canvas",
+  "name": "html2canvas",
+  "description": "Screenshots with JavaScript",
+  "main": "dist/html2canvas.js",
+  "module": "dist/html2canvas.esm.js",
+  "typings": "dist/types/index.d.ts",
+  "browser": "dist/html2canvas.js",
+  "version": "1.3.1",
+  "author": {
+    "name": "Niklas von Hertzen",
+    "email": "niklasvh@gmail.com",
+    "url": "https://hertzen.com"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:niklasvh/html2canvas.git"
+  },
+  "bugs": {
+    "url": "https://github.com/niklasvh/html2canvas/issues"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.4.3",
+    "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-flow": "^7.0.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-typescript": "^8.2.1",
+    "@types/chai": "^4.1.7",
+    "@types/express": "^4.17.13",
+    "@types/glob": "^7.1.1",
+    "@types/jest": "^26.0.24",
+    "@types/jest-image-snapshot": "^4.3.1",
+    "@types/karma": "^6.3.0",
+    "@types/mocha": "^8.2.3",
+    "@types/node": "^16.3.1",
+    "@types/platform": "^1.3.4",
+    "@types/promise-polyfill": "^6.0.3",
+    "@typescript-eslint/eslint-plugin": "^4.28.2",
+    "@typescript-eslint/parser": "^4.28.2",
+    "appium-ios-simulator": "^3.10.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
+    "babel-plugin-add-module-exports": "^1.0.2",
+    "babel-plugin-dev-expression": "^0.2.1",
+    "base64-arraybuffer": "1.0.1",
+    "body-parser": "^1.19.0",
+    "chai": "4.1.1",
+    "chromeless": "^1.5.2",
+    "cors": "^2.8.5",
+    "es6-promise": "^4.2.8",
+    "eslint": "^7.30.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "3.4.0",
+    "express": "^4.17.1",
+    "filenamify-url": "1.0.0",
+    "glob": "7.1.3",
+    "html2canvas-proxy": "1.0.1",
+    "jest": "^27.0.6",
+    "jest-image-snapshot": "^4.5.1",
+    "jquery": "^3.5.1",
+    "js-polyfills": "^0.1.42",
+    "karma": "^6.3.2",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-edge-launcher": "^0.4.2",
+    "karma-firefox-launcher": "^2.1.0",
+    "karma-ie-launcher": "^1.0.0",
+    "karma-junit-reporter": "^2.0.1",
+    "karma-mocha": "^2.0.1",
+    "karma-safarinative-launcher": "^1.1.0",
+    "karma-sauce-launcher": "^2.0.2",
+    "mocha": "^9.0.2",
+    "node-simctl": "^5.3.0",
+    "platform": "^1.3.6",
+    "prettier": "^2.3.2",
+    "replace-in-file": "^3.0.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.53.1",
+    "rollup-plugin-sourcemaps": "^0.6.3",
+    "serve-index": "^1.9.1",
+    "slash": "1.0.0",
+    "standard-version": "^8.0.2",
+    "ts-jest": "^27.0.3",
+    "ts-loader": "^8.3.0",
+    "ts-node": "^10.1.0",
+    "tslib": "^2.3.0",
+    "typescript": "^4.3.5",
+    "uglify-js": "^3.13.10",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
+    "yargs": "^17.0.1"
+  },
+  "scripts": {
+    "prebuild": "rimraf dist/ && rimraf build/ && mkdirp dist && mkdirp build",
+    "build": "tsc --module commonjs && rollup -c rollup.config.ts && npm run build:create-reftest-list && npm run build:testrunner && npm run build:minify",
+    "build:testrunner": "rollup -c tests/rollup.config.ts",
+    "build:minify": "uglifyjs --compress --comments /^!/ -o dist/html2canvas.min.js --mangle -- dist/html2canvas.js",
+    "build:reftest-result-list": "ts-node scripts/create-reftest-result-list.ts",
+    "build:create-reftest-list": "ts-node scripts/create-reftest-list.ts tests/reftests/ignore.txt build/reftests.ts",
+    "build:reftest-preview": "webpack --config www/webpack.config.js",
+    "release": "standard-version",
+    "format": "prettier --write \"{src,www/src,tests,scripts}/**/*.ts\"",
+    "lint": "eslint src/**/*.ts --max-warnings 0",
+    "test": "npm run lint && npm run unittest && npm run karma",
+    "unittest": "jest",
+    "reftests-diff": "mkdirp tmp/snapshots && jest --roots=tests --testMatch=**/reftest-diff.ts",
+    "karma": "ts-node tests/karma",
+    "watch": "rollup -c rollup.config.ts -w",
+    "watch:unittest": "mocha --require ts-node/register --watch-extensions ts -w src/**/__tests__/*.ts",
+    "start": "ts-node tests/server --port=8080 --cors=8081"
+  },
+  "homepage": "https://html2canvas.hertzen.com",
+  "license": "MIT",
+  "dependencies": {
+    "css-line-break": "2.0.1",
+    "text-segmentation": "^1.0.2"
+  }
+}

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>.

rollup.config.ts

@@ -0,0 +1,42 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import sourceMaps from 'rollup-plugin-sourcemaps';
+import typescript from '@rollup/plugin-typescript';
+import json from '@rollup/plugin-json';
+
+const pkg = require('./package.json');
+
+const banner = `/*!
+ * ${pkg.title} ${pkg.version} <${pkg.homepage}>
+ * Copyright (c) ${(new Date()).getFullYear()} ${pkg.author.name} <${pkg.author.url}>
+ * Released under ${pkg.license} License
+ */`;
+
+export default {
+    input: `src/index.ts`,
+    output: [
+        { file: pkg.main, name: pkg.name, format: 'umd', banner, sourcemap: true },
+        { file: pkg.module, format: 'esm', banner, sourcemap: true },
+    ],
+    external: [],
+    watch: {
+        include: 'src/**',
+    },
+    plugins: [
+        // Allow node_modules resolution, so you can use 'external' to control
+        // which external modules to include in the bundle
+        // https://github.com/rollup/rollup-plugin-node-resolve#usage
+        resolve(),
+        // Allow json resolution
+        json(),
+        // Compile TypeScript files
+        typescript(),
+        // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
+        commonjs({
+            include: 'node_modules/**'
+        }),
+
+        // Resolve source maps to the original source
+        sourceMaps(),
+    ],
+}

screenshots.html

@@ -1,348 +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();
-                                
-                                var date = new Date();
-                                var message,
-                                timeoutTimer,
-                                timer = date.getTime();
-                                var body = $(iframe).contents().find('body')[0];
-                                var preload = html2canvas.Preload(body, {
-                                    "complete": function(images){
-                
-                                        var queue = html2canvas.Parse(body, images);
-               
-                
-                                        var canvas = $(html2canvas.Renderer(queue));
-                                        var finishTime = new Date();
-         
-          
-                                     $("#content").empty().append(canvas);
-                                   
-                                     //   throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />",4000);
-                                    }
-                                });
-                                        /*
-                                $(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+"/");
-                                    var base = "<base href='"+urlParts.protocol+"//"+urlParts.hostname+"/' />";
-                                    var headIdx = html.indexOf('<head');
-                                    var endHeadIdx = html.indexOf('>', headIdx);
-                                    html = html.substring(0, endHeadIdx + 1) + base + html.substring(endHeadIdx + 1);
-                                    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 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.ts

@@ -0,0 +1,47 @@
+'use strict';
+
+import {readFileSync, writeFileSync} from 'fs';
+import {resolve, relative} from 'path';
+import {sync} from 'glob';
+
+const slash = require('slash');
+
+if (process.argv.length <= 2) {
+    console.log('No ignore.txt file provided');
+    process.exit(1);
+}
+
+if (process.argv.length <= 3) {
+    console.log('No output file provided');
+    process.exit(1);
+}
+
+const path = resolve(__dirname, '../', process.argv[2]);
+const outputPath = resolve(__dirname, '../', process.argv[3]);
+const ignoredTests = readFileSync(path)
+    .toString()
+    .split(/\r\n|\r|\n/)
+    .filter((l) => l.length)
+    .reduce((acc: {[key: string]: string[]}, l) => {
+        const m = l.match(/^(\[(.+)\])?(.+)$/i);
+        if (m) {
+            acc[m[3]] = m[2] ? m[2].split(',') : [];
+        }
+        return acc;
+    }, {});
+
+const files: string[] = sync('../tests/reftests/**/*.html', {
+    cwd: __dirname,
+    root: resolve(__dirname, '../../')
+});
+
+const testList = files.map((filename: string) => `/${slash(relative('../', filename))}`);
+writeFileSync(
+    outputPath,
+    [
+        `export const testList: string[] = ${JSON.stringify(testList, null, 4)};`,
+        `export const ignoredTests: {[key: string]: string[]} = ${JSON.stringify(ignoredTests, null, 4)};`
+    ].join('\n')
+);
+
+console.log(`${outputPath} updated`);

scripts/create-reftest-result-list.ts

@@ -0,0 +1,44 @@
+import {readdirSync, readFileSync, writeFileSync} from 'fs';
+import {resolve} from 'path';
+
+if (process.argv.length <= 2) {
+    console.log('No metadata path provided');
+    process.exit(1);
+}
+
+if (process.argv.length <= 3) {
+    console.log('No output file given');
+    process.exit(1);
+}
+
+const path = resolve(__dirname, '../', process.argv[2]);
+const files = readdirSync(path);
+
+interface RefTestMetadata {}
+
+interface RefTestSingleMetadata extends RefTestMetadata {
+    test?: string;
+}
+
+interface RefTestResults {
+    [key: string]: Array<RefTestMetadata>;
+}
+
+const result: RefTestResults = files.reduce((result: RefTestResults, file) => {
+    const json: RefTestSingleMetadata = JSON.parse(readFileSync(resolve(__dirname, path, file)).toString());
+    if (json.test) {
+        if (!result[json.test]) {
+            result[json.test] = [];
+        }
+
+        result[json.test].push(json);
+        delete json.test;
+    }
+
+    return result;
+}, {});
+
+const output = resolve(__dirname, '../', process.argv[3]);
+writeFileSync(output, JSON.stringify(result));
+
+console.log(`Wrote file ${output}`);

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

@@ -1,137 +0,0 @@
-/*
-  html2canvas @VERSION@ <http://html2canvas.hertzen.com>
-  Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
-  http://www.twitter.com/niklasvh
-
-  Released under MIT License
-*/
-
-var html2canvas = {};
-
-html2canvas.logging = false;
-
-html2canvas.log = function (a) {    
-    if (html2canvas.logging && window.console && window.console.log) {
-        window.console.log(a);
-    }
-};    
-
-html2canvas.Util = {};
-
-html2canvas.Util.backgroundImage = function (src) {
-  
-    if (/data:image\/.*;base64,/i.test( src ) || /^(-webkit|-moz|linear-gradient|-o-)/.test( src )) {
-        return src;
-    }
-    
-    if (src.toLowerCase().substr( 0, 5 ) === 'url("') {
-        src = src.substr( 5 );
-        src = src.substr( 0, src.length - 2 );                 
-    } else {
-        src = src.substr( 4 );
-        src = src.substr( 0, src.length - 1 );  
-    }
-
-    return src;  
-};
-
-html2canvas.Util.Bounds = function getBounds (el) {
-    var clientRect,
-    bounds = {};
-        
-    if (el.getBoundingClientRect){	
-        clientRect = el.getBoundingClientRect();
-
-            
-        // TODO add scroll position to bounds, so no scrolling of window necessary
-        bounds.top = clientRect.top;
-        bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height);
-        bounds.left = clientRect.left;
-        bounds.width = clientRect.width;
-        bounds.height = clientRect.height;
-    
-        return bounds;
-            
-    } /*else{
-           
-           
-            p = $(el).offset();       
-          
-            return {               
-                left: p.left + getCSS(el,"borderLeftWidth", true),
-                top: p.top + getCSS(el,"borderTopWidth", true),
-                width:$(el).innerWidth(),
-                height:$(el).innerHeight()                
-            };
-            
-
-        }     */      
-}
-
-html2canvas.Util.getCSS = function (el, attribute) {
-    // return jQuery(el).css(attribute);
-    /*
-    var val,
-    left,
-    rsLeft = el.runtimeStyle && el.runtimeStyle[ attribute ],
-    style = el.style;
-    
-    if ( el.currentStyle ) {
-        val = el.currentStyle[ attribute ];
-    } else if (window.getComputedStyle) {
-        val = document.defaultView.getComputedStyle(el, null)[ attribute ];
-    }
-    */
-    // Check if we are not dealing with pixels, (Opera has issues with this)
-    // Ported from jQuery css.js
-    // From the awesome hack by Dean Edwards
-    // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
-
-    // If we're not dealing with a regular pixel number
-    // but a number that has a weird ending, we need to convert it to pixels
-    
-    // if ( !/^-?\d+(?:px)?$/i.test( val ) && /^-?\d/.test( val ) ) {
-    /*
-        // Remember the original values
-        left = style.left;
-
-        // Put in the new values to get a computed value out
-        if ( rsLeft ) {
-            el.runtimeStyle.left = el.currentStyle.left;
-        }
-        style.left = attribute === "fontSize" ? "1em" : (val || 0);
-        val = style.pixelLeft + "px";
-
-        // Revert the changed values
-        style.left = left;
-        if ( rsLeft ) {
-            el.runtimeStyle.left = rsLeft;
-        }*/
-    // val = $(el).css(attribute);
-    // }
-    return $(el).css(attribute);
-    
-  
-};
-
-html2canvas.Util.Extend = function (options, defaults) {
-    var key;
-    for (key in options) {              
-        if (options.hasOwnProperty(key)) {
-            defaults[key] = options[key];
-        }
-    }
-    return defaults;           
-};
-
-html2canvas.Util.Children = function(el) {
-    // $(el).contents() !== el.childNodes, Opera / IE have issues with that
-    var children;
-    try {
-      children = $(el).contents();
-    } catch (ex) {
-      html2canvas.log("html2canvas.Util.Children failed with exception: " + ex.message);
-      children = [];
-    }
-    return children;
-}

src/Generate.js

@@ -1,160 +0,0 @@
-/*
-  html2canvas @VERSION@ <http://html2canvas.hertzen.com>
-  Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
-  http://www.twitter.com/niklasvh
-
-  Released under MIT License
-*/
-
-html2canvas.Generate = {};
-
-
-
-html2canvas.Generate.Gradient = function(src, bounds) {
-    var canvas = document.createElement('canvas'),
-    ctx = canvas.getContext('2d'),
-    tmp, 
-    p0 = 0,
-    p1 = 0,
-    p2 = 0,
-    p3 = 0,
-    steps = [],
-    position,
-    i,
-    len,
-    lingrad,
-    increment,
-    p,
-    img;
-    
-    canvas.width = bounds.width;
-    canvas.height = bounds.height;
-    
-
-    function getColors(input) {      
-        var j = -1, 
-        color = '', 
-        chr;
-        
-        while( j++ < input.length ) {
-            chr = input.charAt( j );
-            if (chr === ')') {
-                color += chr;
-                steps.push( color );
-                color = '';
-                while (j++ < input.length && input.charAt( j ) !== ',') {
-                }
-            } else {
-                color += chr;
-            }
-        }
-    }
-    
-    if ( tmp = src.match(/-webkit-linear-gradient\((.*)\)/) ) {
-        
-        position = tmp[1].split( ",", 1 )[0];
-        getColors( tmp[1].substr( position.length + 2 ) );
-        position = position.split(' ');
-        
-        for (p = 0; p < position.length; p+=1) {
-            
-            switch(position[p]) {
-                case 'top':
-                    p3 = bounds.height;
-                    break;
-                    
-                case 'right':
-                    p0 = bounds.width;
-                    break;
-                    
-                case 'bottom':
-                    p1 = bounds.height;
-                    break;
-                    
-                case 'left':
-                    p2 = bounds.width;
-                    break;
-            }
-            
-        }
-
-    } else if (tmp = src.match(/-webkit-gradient\(linear, (\d+)[%]{0,1} (\d+)[%]{0,1}, (\d+)[%]{0,1} (\d+)[%]{0,1}, from\((.*)\), to\((.*)\)\)/)) {
-        
-        p0 = (tmp[1] * bounds.width) / 100;
-        p1 = (tmp[2] * bounds.height) / 100;
-        p2 = (tmp[3] * bounds.width) / 100;
-        p3 = (tmp[4] * bounds.height) / 100;
-        
-        steps.push(tmp[5]);
-        steps.push(tmp[6]);
-        
-    } else if (tmp = src.match(/-moz-linear-gradient\((\d+)[%]{0,1} (\d+)[%]{0,1}, (.*)\)/)) {
-        
-        p0 = (tmp[1] * bounds.width) / 100;
-        p1 = (tmp[2] * bounds.width) / 100;
-        p2 = bounds.width - p0;
-        p3 = bounds.height - p1;
-        getColors( tmp[3] );
-        
-    } else {
-        return;
-    }
-
-    lingrad = ctx.createLinearGradient( p0, p1, p2, p3 );
-    increment = 1 / (steps.length - 1);
-    
-    for (i = 0, len = steps.length; i < len; i+=1) {
-        try {
-            lingrad.addColorStop(increment * i, steps[i]);
-        }
-        catch(e) {
-            html2canvas.log(['failed to add color stop: ', e, '; tried to add: ', steps[i], '; stop: ', i, '; in: ', src]);
-        }
-    }
-    
-    ctx.fillStyle = lingrad;
-    
-    // draw shapes
-    ctx.fillRect(0, 0, bounds.width,bounds.height);
-
-    img = new Image();
-    img.src = canvas.toDataURL();
-    
-    return img;
-
-}
-
-html2canvas.Generate.ListAlpha = function(number) {
-    var tmp = "",
-    modulus;
-    
-    do {
-        modulus = number % 26; 
-        tmp = String.fromCharCode((modulus) + 64) + tmp;
-        number = number / 26;
-    }while((number*26) > 26);
-   
-    return tmp;  
-}
-
-html2canvas.Generate.ListRoman = function(number) {
-    var romanArray = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"],
-    decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1],
-    roman = "",
-    v,
-    len = romanArray.length;
-
-    if (number <= 0 || number >= 4000) { 
-        return number;
-    }
-    
-    for (v=0; v < len; v+=1) {
-        while (number >= decimal[v]) { 
-            number -= decimal[v];
-            roman += romanArray[v];
-        }
-    }
-        
-    return roman;
-   
-}

src/LICENSE

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

src/Preload.js

@@ -1,338 +0,0 @@
-/*
-  html2canvas @VERSION@ <http://html2canvas.hertzen.com>
-  Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
-  http://www.twitter.com/niklasvh
-
-  Released under MIT License
-*/
-
-html2canvas.Preload = function(element, opts){
-    
-    var options = {
-        proxy: "http://html2canvas.appspot.com/",
-        timeout: 0    // no timeout
-    },
-    images = {
-        numLoaded: 0,   // also failed are counted here
-        numFailed: 0,
-        numTotal: 0,
-        cleanupDone: false
-    },
-    pageOrigin,
-    methods,
-    i,
-    count = 0,
-    doc = element.ownerDocument,
-    domImages = doc.images, // TODO probably should limit it to images present in the element only
-    imgLen = domImages.length,
-    link = doc.createElement("a"),
-    timeoutTimer;
-    
-    link.href = window.location.href;
-    pageOrigin  = link.protocol + link.host;
-    opts = opts || {};
-    
-    options = html2canvas.Util.Extend(opts, options);
-    
-   
-    
-    element = element || doc.body;
-    
-    function isSameOrigin(url){
-        link.href = url;
-        var origin = link.protocol + link.host;
-        return ":" === origin || (origin === pageOrigin);
-    }
-    
-    function start(){
-        html2canvas.log("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")");
-        if (!images.firstRun && images.numLoaded >= images.numTotal){
-        
-            /*
-            this.log('Finished loading '+this.imagesLoaded+' images, Started parsing');
-            this.bodyOverflow = document.getElementsByTagName('body')[0].style.overflow;
-            document.getElementsByTagName('body')[0].style.overflow = "hidden";
-            */
-            if (typeof options.complete === "function"){
-                options.complete(images);
-            }
-
-            html2canvas.log("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
-        }
-    }
-    
-    function proxyGetImage(url, img){
-        var callback_name,
-            scriptUrl = options.proxy,
-            script,
-            imgObj = images[url];
-
-        link.href = url;
-        url = link.href; // work around for pages with base href="" set - WARNING: this may change the url -> so access imgObj from images map before changing that url!
-
-        callback_name = 'html2canvas_' + count;
-        imgObj.callbackname = callback_name;
-        
-        if (scriptUrl.indexOf("?") > -1) {
-            scriptUrl += "&";
-        } else {
-            scriptUrl += "?";
-        }
-        scriptUrl += 'url=' + encodeURIComponent(url) + '&callback=' + callback_name;
-    
-        window[callback_name] = function(a){
-            if (a.substring(0,6) === "error:"){
-                imgObj.succeeded = false;
-                images.numLoaded++;
-                images.numFailed++;
-                start();  
-            } else {
-                img.onload = function(){
-                    imgObj.succeeded = true;
-                    images.numLoaded++;
-                    start();
-                };
-                img.src = a; 
-            }
-            window[callback_name] = undefined; // to work with IE<9  // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
-            try {
-                delete window[callback_name];  // for all browser that support this
-            } catch(ex) {}
-            script.parentNode.removeChild(script);
-            script = null;
-            imgObj.callbackname = undefined;
-        };
-
-        count += 1;
-        
-        script = doc.createElement("script");        
-        script.setAttribute("src", scriptUrl);
-        script.setAttribute("type", "text/javascript");
-        imgObj.script = script;
-        window.document.body.appendChild(script);
-
-    /*
- 
-    //  enable xhr2 requests where available (no need for base64 / json)
-    
-        $.ajax({
-            data:{
-                xhr2:false,
-                url:url
-            },
-            url: options.proxy,
-            dataType: "jsonp",
-            success: function(a){
-            
-                if (a.substring(0,6) === "error:"){
-                    images.splice(getIndex(images, url), 2);
-                    start();  
-                }else{
-                    img.onload = function(){
-                        imagesLoaded+=1;               
-                        start();   
-               
-                    };     
-                    img.src = a; 
-                }
-
-
-            },
-            error: function(){ 
-                images.splice(getIndex(images, url), 2);
-                start();          
-            }
-        
-        
-        });
-    */
-    }
-    
-    function getImages (el) {
-        
-     
-    
-        // if (!this.ignoreRe.test(el.nodeName)){
-        // 
-
-        var contents = html2canvas.Util.Children(el),
-        i,
-        contentsLen = contents.length,
-        background_image,
-        src,
-        img,
-        elNodeType = false;
-        
-        for (i = 0;  i < contentsLen; i+=1 ){
-            // var ignRe = new RegExp("("+this.ignoreElements+")");
-            // if (!ignRe.test(element.nodeName)){
-            getImages(contents[i]);
-        // }
-        }
-            
-        // }
-        try {
-            elNodeType = el.nodeType;
-        } catch (ex) {
-            elNodeType = false;
-            html2canvas.log("html2canvas: failed to access some element's nodeType - Exception: " + ex.message);
-        }
-
-        if (elNodeType === 1 || elNodeType === undefined){
-            
-            background_image = html2canvas.Util.getCSS(el, 'backgroundImage');
-            
-            if ( background_image && background_image !== "1" && background_image !== "none" ) {	
-                
-                // TODO add multi image background support
-                
-                if (background_image.substring(0,7) === "-webkit" || background_image.substring(0,3) === "-o-" || background_image.substring(0,4) === "-moz") {
-                  
-                    img = html2canvas.Generate.Gradient( background_image, html2canvas.Util.Bounds( el ) );
-
-                    if ( img !== undefined ){
-                        images[background_image] = { img: img, succeeded: true };
-                        images.numTotal++;
-                        images.numLoaded++;
-                        start();
-                        
-                    }
-                    
-                } else {	
-                    src = html2canvas.Util.backgroundImage(background_image.match(/data:image\/.*;base64,/i) ? background_image : background_image.split(",")[0]);		
-                    methods.loadImage(src); 		
-                }
-           
-            /*
-            if (background_image && background_image !== "1" && background_image !== "none" && background_image.substring(0,7) !== "-webkit" && background_image.substring(0,3)!== "-o-" && background_image.substring(0,4) !== "-moz"){
-                // TODO add multi image background support
-                src = html2canvas.Util.backgroundImage(background_image.split(",")[0]);                    
-                methods.loadImage(src);            */        
-            }
-        }
-    }  
-    
-    methods = {
-        loadImage: function( src ) {
-            var img;
-            if ( src && images[src] === undefined ) {
-                if ( src.match(/data:image\/.*;base64,/i) ) {
-                
-                    //Base64 src                  
-                    img = new Image();
-                    img.src = src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, '');
-                    images[src] = { img: img, succeeded: true };
-                    images.numTotal++;
-                    images.numLoaded++;
-                    start();
-                    
-                }else if ( isSameOrigin( src ) ) {
-            
-                    img = new Image();
-                    images[src] = { img: img };
-                    images.numTotal++;
-                    
-                    img.onload = function() {
-                        images.numLoaded++;
-                        images[src].succeeded = true;
-                        start();
-                    };	
-                    
-                    img.onerror = function() {
-                        images.numLoaded++;
-                        images.numFailed++;
-                        images[src].succeeded = false;
-                        start();
-                    };
-                    
-                    img.src = src;
-            
-                }else if ( options.proxy ){
-                    //    console.log('b'+src);
-                    img = new Image();
-                    images[src] = { img: img };
-                    images.numTotal++;
-                    proxyGetImage( src, img );
-                }
-            }     
-          
-        },
-        cleanupDOM: function(cause) {
-            var img, src;
-            if (!images.cleanupDone) {
-                if (cause && typeof cause === "string") {
-                    html2canvas.log("html2canvas: Cleanup because: " + cause);
-                } else {
-                    html2canvas.log("html2canvas: Cleanup after timeout: " + options.timeout + " ms.");
-                }
-
-                for (src in images) {
-                    if (images.hasOwnProperty(src)) {
-                        img = images[src];
-                        if (typeof img === "object" && img.callbackname && img.succeeded === undefined) {
-                            // cancel proxy image request
-                            window[img.callbackname] = undefined; // to work with IE<9  // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
-                            try {
-                                delete window[img.callbackname];  // for all browser that support this
-                            } catch(ex) {}
-                            if (img.script && img.script.parentNode) {
-                                img.script.setAttribute("src", "about:blank");  // try to cancel running request
-                                img.script.parentNode.removeChild(img.script);
-                            }
-                            images.numLoaded++;
-                            images.numFailed++;
-                            html2canvas.log("html2canvas: Cleaned up failed img: '" + src + "' Steps: " + images.numLoaded + " / " + images.numTotal);
-                        }
-                    }
-                }
-
-                // cancel any pending requests
-                if(window.stop !== undefined) {
-                    window.stop();
-                } else if(document.execCommand !== undefined) {
-                    document.execCommand("Stop", false);
-                }
-                if (document.close !== undefined) {
-                    document.close();
-                }
-                images.cleanupDone = true;
-                if (!(cause && typeof cause === "string")) {
-                    start();
-                }
-            }
-        },
-        renderingDone: function() {
-          if (timeoutTimer) {
-            window.clearTimeout(timeoutTimer);
-          }
-        }
-        
-    };
-
-    if (options.timeout > 0) {
-        timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout);
-    }
-    var startTime = (new Date()).getTime();
-    html2canvas.log('html2canvas: Preload starts: finding background-images');
-    images.firstRun = true;
-
-    getImages( element );
-    
-    html2canvas.log('html2canvas: Preload: Finding images');
-    // load <img> images
-    for (i = 0; i < imgLen; i+=1){
-        methods.loadImage( domImages[i].getAttribute( "src" ) );
-    }
-    
-    images.firstRun = false;
-    html2canvas.log('html2canvas: Preload: Done.');
-    if ( images.numTotal === images.numLoaded ) {
-        start();
-    }  
-    
-    return methods;
-    
-};
-
-
-

src/Queue.js

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

src/Renderer.js

@@ -1,394 +0,0 @@
-/*
-  html2canvas @VERSION@ <http://html2canvas.hertzen.com>
-  Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
-  http://www.twitter.com/niklasvh
-
-  Released under MIT License
-*/
-html2canvas.Renderer = function(parseQueue, opts){
-
-
-    var options = {
-        "width": null,
-        "height": null,
-        "renderer": "canvas"
-    },
-    queue = [],
-    canvas,
-    doc = document;
-    
-    options = html2canvas.Util.Extend(opts, options);
-
-
-    
-    function sortZ(zStack){
-        var subStacks = [],
-        stackValues = [],
-        zStackChildren = zStack.children,
-        s,
-        i,
-        stackLen,
-        zValue,
-        zLen,
-        stackChild,
-        b, 
-        subStackLen;
-        
-
-        for (s = 0, zLen = zStackChildren.length; s < zLen; s+=1){
-            
-            stackChild = zStackChildren[s];
-            
-            if (stackChild.children && stackChild.children.length > 0){
-                subStacks.push(stackChild);
-                stackValues.push(stackChild.zindex);
-            }else{         
-                queue.push(stackChild);
-            }  
-           
-        }
-      
-        stackValues.sort(function(a, b) {
-            return a - b;
-        });
-    
-        for (i = 0, stackLen = stackValues.length; i < stackLen; i+=1){
-            zValue = stackValues[i];
-            for (b = 0, subStackLen = subStacks.length; b <= subStackLen; b+=1){
-                
-                if (subStacks[b].zindex === zValue){
-                    stackChild = subStacks.splice(b, 1);
-                    sortZ(stackChild[0]);
-                    break;
-                  
-                }
-            }        
-        }
-  
-    }
-
-    function canvasRenderer(zStack){
- 
-        sortZ(zStack.zIndex);
-        
-
-        var ctx = canvas.getContext("2d"),
-        storageContext,
-        i,
-        queueLen,
-        a,
-        storageLen,
-        renderItem,
-        fstyle;
-      
-        canvas.width = options.width || zStack.ctx.width;
-        canvas.height = options.height || zStack.ctx.height;
-    
-        fstyle = ctx.fillStyle;
-        ctx.fillStyle = "#fff";
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = fstyle;
-
-        for (i = 0, queueLen = queue.length; i < queueLen; i+=1){
-            
-            storageContext = queue.splice(0, 1)[0];
-            storageContext.canvasPosition = storageContext.canvasPosition || {};   
-           
-            //this.canvasRenderContext(storageContext,parentctx);           
-
-            // set common settings for canvas
-            ctx.textBaseline = "bottom";
-   
-            if (storageContext.clip){
-                ctx.save();
-                ctx.beginPath();
-                // console.log(storageContext);
-                ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);
-                ctx.clip();
-        
-            }
-        
-            if (storageContext.ctx.storage){
-               
-                for (a = 0, storageLen = storageContext.ctx.storage.length; a < storageLen; a+=1){
-                    
-                    renderItem = storageContext.ctx.storage[a];
-                    
-                   
-                    
-                    switch(renderItem.type){
-                        case "variable":
-                            ctx[renderItem.name] = renderItem['arguments'];              
-                            break;
-                        case "function":
-                            if (renderItem.name === "fillRect") {
-                        
-                                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]
-                                        );
-                                }      
-                            }
-                       
-  
-                            break;
-                        default:
-                               
-                    }
-            
-                }
-
-            }  
-            if (storageContext.clip){
-                ctx.restore();
-            }
-    
-
-       
-   
-        }
-        html2canvas.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
-        
-        // this.canvasRenderStorage(queue,this.ctx);
-        return canvas;
-    }
-
-    function svgRenderer(zStack){
-        sortZ(zStack.zIndex);
-        
-        var svgNS = "http://www.w3.org/2000/svg",
-        svg = doc.createElementNS(svgNS, "svg"),
-        xlinkNS = "http://www.w3.org/1999/xlink",
-        defs = doc.createElementNS(svgNS, "defs"),
-        i,
-        a,
-        queueLen,
-        storageLen,
-        storageContext,
-        renderItem,
-        el,
-        settings = {},
-        text,
-        fontStyle,
-        clipId = 0;
-        
-        svg.setAttribute("version", "1.1");
-        svg.setAttribute("baseProfile", "full");
-
-        svg.setAttribute("viewBox", "0 0 " + Math.max(zStack.ctx.width, options.width) + " " + Math.max(zStack.ctx.height, options.height));
-        svg.setAttribute("width", Math.max(zStack.ctx.width, options.width) + "px");
-        svg.setAttribute("height", Math.max(zStack.ctx.height, options.height) + "px");
-        svg.setAttribute("preserveAspectRatio", "none");
-        svg.appendChild(defs);
-        
-        
-        
-        for (i = 0, queueLen = queue.length; i < queueLen; i+=1){
-            
-            storageContext = queue.splice(0, 1)[0];
-            storageContext.canvasPosition = storageContext.canvasPosition || {};   
-           
-            //this.canvasRenderContext(storageContext,parentctx);           
-
-   
-            /*
-            if (storageContext.clip){
-                ctx.save();
-                ctx.beginPath();
-                // console.log(storageContext);
-                ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);
-                ctx.clip();
-        
-            }*/
-        
-            if (storageContext.ctx.storage){
-               
-                for (a = 0, storageLen = storageContext.ctx.storage.length; a < storageLen; a+=1){
-                    
-                    renderItem = storageContext.ctx.storage[a];
-                    
-                   
-                    
-                    switch(renderItem.type){
-                        case "variable":
-                            settings[renderItem.name] = renderItem['arguments'];              
-                            break;
-                        case "function":
-                            if (renderItem.name === "fillRect") {
-                                
-                                el = doc.createElementNS(svgNS, "rect");
-                                el.setAttribute("x", renderItem['arguments'][0]);
-                                el.setAttribute("y", renderItem['arguments'][1]);
-                                el.setAttribute("width", renderItem['arguments'][2]);
-                                el.setAttribute("height", renderItem['arguments'][3]);
-                                el.setAttribute("fill",  settings.fillStyle);
-                                svg.appendChild(el);
-
-                            } else if(renderItem.name === "fillText") {
-                                el = doc.createElementNS(svgNS, "text");
-                                
-                                fontStyle = settings.font.split(" ");
-                                
-                                el.style.fontVariant = fontStyle.splice(0, 1)[0];
-                                el.style.fontWeight = fontStyle.splice(0, 1)[0];
-                                el.style.fontStyle = fontStyle.splice(0, 1)[0];
-                                el.style.fontSize = fontStyle.splice(0, 1)[0];
-                                
-                                el.setAttribute("x", renderItem['arguments'][1]);                 
-                                el.setAttribute("y", renderItem['arguments'][2] - (parseInt(el.style.fontSize, 10) + 3));
-                                
-                                el.setAttribute("fill", settings.fillStyle);
-                                
-                               
-                             
-                                
-                                // TODO get proper baseline
-                                el.style.dominantBaseline = "text-before-edge";
-                                el.style.fontFamily = fontStyle.join(" ");
-
-                                text = doc.createTextNode(renderItem['arguments'][0]);
-                                el.appendChild(text);
-                               
-                                
-                                svg.appendChild(el);
-                                
-              
-                    
-                            } else if(renderItem.name === "drawImage") {
-
-                                if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){
-                                    
-                                    // TODO check whether even any clipping is necessary for this particular image
-                                    el = doc.createElementNS(svgNS, "clipPath");
-                                    el.setAttribute("id", "clipId" + clipId); 
-                                    
-                                    text = doc.createElementNS(svgNS, "rect");
-                                    text.setAttribute("x",  renderItem['arguments'][5] );                 
-                                    text.setAttribute("y", renderItem['arguments'][6]);
-                                    
-                                    text.setAttribute("width", renderItem['arguments'][3]);                 
-                                    text.setAttribute("height", renderItem['arguments'][4]);
-                                    el.appendChild(text);
-                                    defs.appendChild(el);
-                                    
-                                    el = doc.createElementNS(svgNS, "image");
-                                    el.setAttributeNS(xlinkNS, "xlink:href", renderItem['arguments'][0].src);
-                                    el.setAttribute("width", renderItem['arguments'][0].width);                 
-                                    el.setAttribute("height", renderItem['arguments'][0].height);           
-                                    el.setAttribute("x", renderItem['arguments'][5] - renderItem['arguments'][1]);                 
-                                    el.setAttribute("y", renderItem['arguments'][6] - renderItem['arguments'][2]);
-                                    el.setAttribute("clip-path", "url(#clipId" + clipId + ")");
-                                    // el.setAttribute("xlink:href", );
-                                    
-
-                                    el.setAttribute("preserveAspectRatio", "none");
-                                    
-                                    svg.appendChild(el);
-                                    
-                                    
-                                    clipId += 1; 
-                                /*
-                                    ctx.drawImage(
-                                        renderItem['arguments'][0],
-                                        renderItem['arguments'][1],
-                                        renderItem['arguments'][2],
-                                        renderItem['arguments'][3],
-                                        renderItem['arguments'][4],
-                                        renderItem['arguments'][5],
-                                        renderItem['arguments'][6],
-                                        renderItem['arguments'][7],
-                                        renderItem['arguments'][8]
-                                        );
-                                        */
-                                }      
-                            }
-                               
-                       
-  
-                            break;
-                        default:
-                               
-                    }
-            
-                }
-
-            }  
-        /*
-            if (storageContext.clip){
-                ctx.restore();
-            }
-    */
-
-       
-   
-        }
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        html2canvas.log("html2canvas: Renderer: SVG Renderer done - returning SVG DOM obj");
-        
-        return svg;
-
-    }
-
-    
-    //this.each(this.opts.renderOrder.split(" "),function(i,renderer){
-        
-    //options.renderer = "svg";
-    
-    switch(options.renderer.toLowerCase()){
-        case "canvas":
-            canvas = doc.createElement('canvas');
-            if (canvas.getContext){
-                html2canvas.log("html2canvas: Renderer: using canvas renderer");
-                return canvasRenderer(parseQueue);
-            }               
-            break;
-        case "svg":
-            if (doc.createElementNS){
-                html2canvas.log("html2canvas: Renderer: using SVG renderer");
-                return svgRenderer(parseQueue);             
-            }
-            break;
-            
-    }
-         
-         
-         
-    //});
-
-    return this;
-     
-
-    
-};
-
-

src/Util.js

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

src/__tests__/index.ts

@@ -0,0 +1,93 @@
+import html2canvas from '../index';
+
+import {CanvasRenderer} from '../render/canvas/canvas-renderer';
+import {DocumentCloner} from '../dom/document-cloner';
+import {COLORS} from '../css/types/color';
+
+jest.mock('../core/logger');
+jest.mock('../css/layout/bounds');
+jest.mock('../dom/document-cloner');
+jest.mock('../dom/node-parser', () => {
+    return {
+        isBodyElement: () => false,
+        isHTMLElement: () => false,
+        parseTree: jest.fn().mockImplementation(() => {
+            return {styles: {}};
+        })
+    };
+});
+
+jest.mock('../render/stacking-context');
+jest.mock('../render/canvas/canvas-renderer');
+
+describe('html2canvas', () => {
+    const element = {
+        ownerDocument: {
+            defaultView: {
+                pageXOffset: 12,
+                pageYOffset: 34
+            }
+        }
+    } as HTMLElement;
+
+    it('should render with an element', async () => {
+        DocumentCloner.destroy = jest.fn().mockReturnValue(true);
+        await html2canvas(element);
+        expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            expect.objectContaining({
+                cache: expect.any(Object),
+                logger: expect.any(Object),
+                windowBounds: expect.objectContaining({left: 12, top: 34})
+            }),
+            expect.objectContaining({
+                backgroundColor: 0xffffffff,
+                scale: 1,
+                height: 50,
+                width: 200,
+                x: 0,
+                y: 0,
+                canvas: undefined
+            })
+        );
+        expect(DocumentCloner.destroy).toBeCalled();
+    });
+
+    it('should have transparent background with backgroundColor: null', async () => {
+        await html2canvas(element, {backgroundColor: null});
+        expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+                backgroundColor: COLORS.TRANSPARENT
+            })
+        );
+    });
+
+    it('should use existing canvas when given as option', async () => {
+        const canvas = {} as HTMLCanvasElement;
+        await html2canvas(element, {canvas});
+        expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+                canvas
+            })
+        );
+    });
+
+    it('should not remove cloned window when removeContainer: false', async () => {
+        DocumentCloner.destroy = jest.fn();
+        await html2canvas(element, {removeContainer: false});
+        expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+                backgroundColor: 0xffffffff,
+                scale: 1,
+                height: 50,
+                width: 200,
+                x: 0,
+                y: 0,
+                canvas: undefined
+            })
+        );
+        expect(DocumentCloner.destroy).not.toBeCalled();
+    });
+});

src/core/__mocks__/cache-storage.ts

@@ -0,0 +1 @@
+export class CacheStorage {}

src/core/__mocks__/context.ts

@@ -0,0 +1,19 @@
+import {logger, Logger} from './logger';
+
+export class Context {
+    readonly logger: Logger = logger;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    readonly _cache: {[key: string]: Promise<any>} = {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    readonly cache: any;
+
+    constructor() {
+        this.cache = {
+            addImage: jest.fn().mockImplementation((src: string): Promise<void> => {
+                const result = Promise.resolve();
+                this._cache[src] = result;
+                return result;
+            })
+        };
+    }
+}

src/core/__mocks__/features.ts

@@ -0,0 +1,8 @@
+export const FEATURES = {
+    SUPPORT_RANGE_BOUNDS: true,
+    SUPPORT_SVG_DRAWING: true,
+    SUPPORT_FOREIGNOBJECT_DRAWING: true,
+    SUPPORT_CORS_IMAGES: true,
+    SUPPORT_RESPONSE_TYPE: true,
+    SUPPORT_CORS_XHR: true
+};

src/core/__mocks__/logger.ts

@@ -0,0 +1,22 @@
+export class Logger {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    debug(): void {}
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    static create(): void {}
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    static destroy(): void {}
+
+    static getInstance(): Logger {
+        return logger;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    info(): void {}
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    error(): void {}
+}
+
+export const logger = new Logger();

src/core/__tests__/cache-storage.ts

@@ -0,0 +1,273 @@
+import {deepStrictEqual, fail} from 'assert';
+import {FEATURES} from '../features';
+import {CacheStorage} from '../cache-storage';
+import {Context} from '../context';
+import {Bounds} from '../../css/layout/bounds';
+
+const proxy = 'http://example.com/proxy';
+
+const createMockContext = (origin: string, opts = {}) => {
+    const context = {
+        location: {
+            href: origin
+        },
+        document: {
+            createElement(_name: string) {
+                let _href = '';
+                return {
+                    set href(value: string) {
+                        _href = value;
+                    },
+                    get href() {
+                        return _href;
+                    },
+                    get protocol() {
+                        return new URL(_href).protocol;
+                    },
+                    get hostname() {
+                        return new URL(_href).hostname;
+                    },
+                    get port() {
+                        return new URL(_href).port;
+                    }
+                };
+            }
+        }
+    };
+
+    CacheStorage.setContext(context as Window);
+
+    return new Context(
+        {
+            logging: false,
+            imageTimeout: 0,
+            useCORS: false,
+            allowTaint: false,
+            proxy,
+            ...opts
+        },
+        new Bounds(0, 0, 0, 0)
+    );
+};
+
+const images: ImageMock[] = [];
+const xhr: XMLHttpRequestMock[] = [];
+const sleep = async (timeout: number) => await new Promise((resolve) => setTimeout(resolve, timeout));
+
+class ImageMock {
+    src?: string;
+    crossOrigin?: string;
+    onload?: () => void;
+    constructor() {
+        images.push(this);
+    }
+}
+
+class XMLHttpRequestMock {
+    sent: boolean;
+    status: number;
+    timeout: number;
+    method?: string;
+    url?: string;
+    response?: string;
+    onload?: () => void;
+    ontimeout?: () => void;
+    constructor() {
+        this.sent = false;
+        this.status = 500;
+        this.timeout = 5000;
+        xhr.push(this);
+    }
+
+    async load(status: number, response: string) {
+        this.response = response;
+        this.status = status;
+        if (this.onload) {
+            this.onload();
+        }
+        await sleep(0);
+    }
+
+    open(method: string, url: string) {
+        this.method = method;
+        this.url = url;
+    }
+    send() {
+        this.sent = true;
+    }
+}
+
+Object.defineProperty(global, 'Image', {value: ImageMock, writable: true});
+Object.defineProperty(global, 'XMLHttpRequest', {
+    value: XMLHttpRequestMock,
+    writable: true
+});
+
+const setFeatures = (opts: {[key: string]: boolean} = {}) => {
+    const defaults: {[key: string]: boolean} = {
+        SUPPORT_SVG_DRAWING: true,
+        SUPPORT_CORS_IMAGES: true,
+        SUPPORT_CORS_XHR: true,
+        SUPPORT_RESPONSE_TYPE: false
+    };
+
+    Object.keys(defaults).forEach((key) => {
+        Object.defineProperty(FEATURES, key, {
+            value: typeof opts[key] === 'boolean' ? opts[key] : defaults[key],
+            writable: true
+        });
+    });
+};
+
+describe('cache-storage', () => {
+    beforeEach(() => setFeatures());
+    afterEach(() => {
+        xhr.splice(0, xhr.length);
+        images.splice(0, images.length);
+    });
+    it('addImage adds images to cache', async () => {
+        const {cache} = createMockContext('http://example.com', {proxy: null});
+        await cache.addImage('http://example.com/test.jpg');
+        await cache.addImage('http://example.com/test2.jpg');
+
+        deepStrictEqual(images.length, 2);
+        deepStrictEqual(images[0].src, 'http://example.com/test.jpg');
+        deepStrictEqual(images[1].src, 'http://example.com/test2.jpg');
+    });
+
+    it('addImage should not add duplicate entries', async () => {
+        const {cache} = createMockContext('http://example.com');
+        await cache.addImage('http://example.com/test.jpg');
+        await cache.addImage('http://example.com/test.jpg');
+
+        deepStrictEqual(images.length, 1);
+        deepStrictEqual(images[0].src, 'http://example.com/test.jpg');
+    });
+
+    describe('svg', () => {
+        it('should add svg images correctly', async () => {
+            const {cache} = createMockContext('http://example.com');
+            await cache.addImage('http://example.com/test.svg');
+            await cache.addImage('http://example.com/test2.svg');
+
+            deepStrictEqual(images.length, 2);
+            deepStrictEqual(images[0].src, 'http://example.com/test.svg');
+            deepStrictEqual(images[1].src, 'http://example.com/test2.svg');
+        });
+
+        it('should omit svg images if not supported', async () => {
+            setFeatures({SUPPORT_SVG_DRAWING: false});
+            const {cache} = createMockContext('http://example.com');
+            await cache.addImage('http://example.com/test.svg');
+            await cache.addImage('http://example.com/test2.svg');
+
+            deepStrictEqual(images.length, 0);
+        });
+    });
+
+    describe('cross-origin', () => {
+        it('addImage should not add images it cannot load/render', async () => {
+            const {cache} = createMockContext('http://example.com', {
+                proxy: undefined
+            });
+            await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
+            deepStrictEqual(images.length, 0);
+        });
+
+        it('addImage should add images if tainting enabled', async () => {
+            const {cache} = createMockContext('http://example.com', {
+                allowTaint: true,
+                proxy: undefined
+            });
+            await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
+            deepStrictEqual(images.length, 1);
+            deepStrictEqual(images[0].src, 'http://html2canvas.hertzen.com/test.jpg');
+            deepStrictEqual(images[0].crossOrigin, undefined);
+        });
+
+        it('addImage should add images if cors enabled', async () => {
+            const {cache} = createMockContext('http://example.com', {useCORS: true});
+            await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
+            deepStrictEqual(images.length, 1);
+            deepStrictEqual(images[0].src, 'http://html2canvas.hertzen.com/test.jpg');
+            deepStrictEqual(images[0].crossOrigin, 'anonymous');
+        });
+
+        it('addImage should not add images if cors enabled but not supported', async () => {
+            setFeatures({SUPPORT_CORS_IMAGES: false});
+
+            const {cache} = createMockContext('http://example.com', {
+                useCORS: true,
+                proxy: undefined
+            });
+            await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
+            deepStrictEqual(images.length, 0);
+        });
+
+        it('addImage should not add images to proxy if cors enabled', async () => {
+            const {cache} = createMockContext('http://example.com', {useCORS: true});
+            await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
+            deepStrictEqual(images.length, 1);
+            deepStrictEqual(images[0].src, 'http://html2canvas.hertzen.com/test.jpg');
+            deepStrictEqual(images[0].crossOrigin, 'anonymous');
+        });
+
+        it('addImage should use proxy ', async () => {
+            const {cache} = createMockContext('http://example.com');
+            await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
+            deepStrictEqual(xhr.length, 1);
+            deepStrictEqual(
+                xhr[0].url,
+                `${proxy}?url=${encodeURIComponent('http://html2canvas.hertzen.com/test.jpg')}&responseType=text`
+            );
+            await xhr[0].load(200, '<data response>');
+
+            deepStrictEqual(images.length, 1);
+            deepStrictEqual(images[0].src, '<data response>');
+        });
+
+        it('proxy should respect imageTimeout', async () => {
+            const {cache} = createMockContext('http://example.com', {
+                imageTimeout: 10
+            });
+            await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
+
+            deepStrictEqual(xhr.length, 1);
+            deepStrictEqual(
+                xhr[0].url,
+                `${proxy}?url=${encodeURIComponent('http://html2canvas.hertzen.com/test.jpg')}&responseType=text`
+            );
+            deepStrictEqual(xhr[0].timeout, 10);
+            if (xhr[0].ontimeout) {
+                xhr[0].ontimeout();
+            }
+            try {
+                await cache.match('http://html2canvas.hertzen.com/test.jpg');
+                fail('Expected result to timeout');
+            } catch (e) {}
+        });
+    });
+
+    it('match should return cache entry', async () => {
+        const {cache} = createMockContext('http://example.com');
+        await cache.addImage('http://example.com/test.jpg');
+
+        if (images[0].onload) {
+            images[0].onload();
+        }
+
+        const response = await cache.match('http://example.com/test.jpg');
+
+        deepStrictEqual(response.src, 'http://example.com/test.jpg');
+    });
+
+    it('image should respect imageTimeout', async () => {
+        const {cache} = createMockContext('http://example.com', {imageTimeout: 10});
+        cache.addImage('http://example.com/test.jpg');
+
+        try {
+            await cache.match('http://example.com/test.jpg');
+            fail('Expected result to timeout');
+        } catch (e) {}
+    });
+});

src/core/__tests__/logger.ts

@@ -0,0 +1,30 @@
+import {Logger} from '../logger';
+
+describe('logger', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let infoSpy: any;
+
+    beforeEach(() => {
+        infoSpy = jest.spyOn(console, 'info').mockImplementation(() => {
+            // do nothing
+        });
+    });
+
+    afterEach(() => {
+        infoSpy.mockRestore();
+    });
+
+    it('should call console.info when logger enabled', () => {
+        const id = Math.random().toString();
+        const logger = new Logger({id, enabled: true});
+        logger.info('testing');
+        expect(infoSpy).toHaveBeenLastCalledWith(id, expect.stringMatching(/\d+ms/), 'testing');
+    });
+
+    it("shouldn't call console.info when logger disabled", () => {
+        const id = Math.random().toString();
+        const logger = new Logger({id, enabled: false});
+        logger.info('testing');
+        expect(infoSpy).not.toHaveBeenCalled();
+    });
+});

src/core/bitwise.ts

@@ -0,0 +1 @@
+export const contains = (bit: number, value: number): boolean => (bit & value) !== 0;

src/core/cache-storage.ts

@@ -0,0 +1,177 @@
+import {FEATURES} from './features';
+import {Context} from './context';
+
+export class CacheStorage {
+    private static _link?: HTMLAnchorElement;
+    private static _origin = 'about:blank';
+
+    static getOrigin(url: string): string {
+        const link = CacheStorage._link;
+        if (!link) {
+            return 'about:blank';
+        }
+
+        link.href = url;
+        link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/
+        return link.protocol + link.hostname + link.port;
+    }
+
+    static isSameOrigin(src: string): boolean {
+        return CacheStorage.getOrigin(src) === CacheStorage._origin;
+    }
+
+    static setContext(window: Window): void {
+        CacheStorage._link = window.document.createElement('a');
+        CacheStorage._origin = CacheStorage.getOrigin(window.location.href);
+    }
+}
+
+export interface ResourceOptions {
+    imageTimeout: number;
+    useCORS: boolean;
+    allowTaint: boolean;
+    proxy?: string;
+}
+
+export class Cache {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private readonly _cache: {[key: string]: Promise<any>} = {};
+
+    constructor(private readonly context: Context, private readonly _options: ResourceOptions) {}
+
+    addImage(src: string): Promise<void> {
+        const result = Promise.resolve();
+        if (this.has(src)) {
+            return result;
+        }
+
+        if (isBlobImage(src) || isRenderable(src)) {
+            (this._cache[src] = this.loadImage(src)).catch(() => {
+                // prevent unhandled rejection
+            });
+            return result;
+        }
+
+        return result;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    match(src: string): Promise<any> {
+        return this._cache[src];
+    }
+
+    private async loadImage(key: string) {
+        const isSameOrigin = CacheStorage.isSameOrigin(key);
+        const useCORS =
+            !isInlineImage(key) && this._options.useCORS === true && FEATURES.SUPPORT_CORS_IMAGES && !isSameOrigin;
+        const useProxy =
+            !isInlineImage(key) &&
+            !isSameOrigin &&
+            !isBlobImage(key) &&
+            typeof this._options.proxy === 'string' &&
+            FEATURES.SUPPORT_CORS_XHR &&
+            !useCORS;
+        if (
+            !isSameOrigin &&
+            this._options.allowTaint === false &&
+            !isInlineImage(key) &&
+            !isBlobImage(key) &&
+            !useProxy &&
+            !useCORS
+        ) {
+            return;
+        }
+
+        let src = key;
+        if (useProxy) {
+            src = await this.proxy(src);
+        }
+
+        this.context.logger.debug(`Added image ${key.substring(0, 256)}`);
+
+        return await new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous
+            if (isInlineBase64Image(src) || useCORS) {
+                img.crossOrigin = 'anonymous';
+            }
+            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 > 0) {
+                setTimeout(
+                    () => reject(`Timed out (${this._options.imageTimeout}ms) loading image`),
+                    this._options.imageTimeout
+                );
+            }
+        });
+    }
+
+    private has(key: string): boolean {
+        return typeof this._cache[key] !== 'undefined';
+    }
+
+    keys(): Promise<string[]> {
+        return Promise.resolve(Object.keys(this._cache));
+    }
+
+    private proxy(src: string): Promise<string> {
+        const proxy = this._options.proxy;
+
+        if (!proxy) {
+            throw new Error('No proxy defined');
+        }
+
+        const key = src.substring(0, 256);
+
+        return new Promise((resolve, reject) => {
+            const responseType = FEATURES.SUPPORT_RESPONSE_TYPE ? 'blob' : 'text';
+            const xhr = new XMLHttpRequest();
+            xhr.onload = () => {
+                if (xhr.status === 200) {
+                    if (responseType === 'text') {
+                        resolve(xhr.response);
+                    } else {
+                        const reader = new FileReader();
+                        reader.addEventListener('load', () => resolve(reader.result as string), false);
+                        reader.addEventListener('error', (e) => reject(e), false);
+                        reader.readAsDataURL(xhr.response);
+                    }
+                } else {
+                    reject(`Failed to proxy resource ${key} with status code ${xhr.status}`);
+                }
+            };
+
+            xhr.onerror = reject;
+            const queryString = proxy.indexOf('?') > -1 ? '&' : '?';
+            xhr.open('GET', `${proxy}${queryString}url=${encodeURIComponent(src)}&responseType=${responseType}`);
+
+            if (responseType !== 'text' && xhr instanceof XMLHttpRequest) {
+                xhr.responseType = responseType;
+            }
+
+            if (this._options.imageTimeout) {
+                const timeout = this._options.imageTimeout;
+                xhr.timeout = timeout;
+                xhr.ontimeout = () => reject(`Timed out (${timeout}ms) proxying ${key}`);
+            }
+
+            xhr.send();
+        });
+    }
+}
+
+const INLINE_SVG = /^data:image\/svg\+xml/i;
+const INLINE_BASE64 = /^data:image\/.*;base64,/i;
+const INLINE_IMG = /^data:image\/.*/i;
+
+const isRenderable = (src: string): boolean => FEATURES.SUPPORT_SVG_DRAWING || !isSVG(src);
+const isInlineImage = (src: string): boolean => INLINE_IMG.test(src);
+const isInlineBase64Image = (src: string): boolean => INLINE_BASE64.test(src);
+const isBlobImage = (src: string): boolean => src.substr(0, 4) === 'blob';
+
+const isSVG = (src: string): boolean => src.substr(-3).toLowerCase() === 'svg' || INLINE_SVG.test(src);

src/core/context.ts

@@ -0,0 +1,21 @@
+import {Logger} from './logger';
+import {Cache, ResourceOptions} from './cache-storage';
+import {Bounds} from '../css/layout/bounds';
+
+export type ContextOptions = {
+    logging: boolean;
+    cache?: Cache;
+} & ResourceOptions;
+
+export class Context {
+    private readonly instanceName = `#${Context.instanceCount++}`;
+    readonly logger: Logger;
+    readonly cache: Cache;
+
+    private static instanceCount = 1;
+
+    constructor(options: ContextOptions, public windowBounds: Bounds) {
+        this.logger = new Logger({id: this.instanceName, enabled: options.logging});
+        this.cache = options.cache ?? new Cache(this, options);
+    }
+}

src/core/features.ts

@@ -0,0 +1,215 @@
+import {fromCodePoint, toCodePoints} from 'css-line-break';
+
+const testRangeBounds = (document: 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;
+};
+
+const testIOSLineBreak = (document: Document) => {
+    const testElement = document.createElement('boundtest');
+    testElement.style.width = '50px';
+    testElement.style.display = 'block';
+    testElement.style.fontSize = '12px';
+    testElement.style.letterSpacing = '0px';
+    testElement.style.wordSpacing = '0px';
+    document.body.appendChild(testElement);
+    const range = document.createRange();
+
+    testElement.innerHTML = typeof ''.repeat === 'function' ? '👨'.repeat(10) : '';
+
+    const node = testElement.firstChild as Text;
+
+    const textList = toCodePoints(node.data).map((i) => fromCodePoint(i));
+    let offset = 0;
+    let prev: DOMRect = {} as DOMRect;
+
+    // ios 13 does not handle range getBoundingClientRect line changes correctly #2177
+    const supports = textList.every((text, i) => {
+        range.setStart(node, offset);
+        range.setEnd(node, offset + text.length);
+        const rect = range.getBoundingClientRect();
+
+        offset += text.length;
+        const boundAhead = rect.x > prev.x || rect.y > prev.y;
+
+        prev = rect;
+        if (i === 0) {
+            return true;
+        }
+
+        return boundAhead;
+    });
+
+    document.body.removeChild(testElement);
+    return supports;
+};
+
+const testCORS = (): boolean => typeof new Image().crossOrigin !== 'undefined';
+
+const testResponseType = (): boolean => typeof new XMLHttpRequest().responseType === 'string';
+
+const testSVG = (document: Document): boolean => {
+    const img = new Image();
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        return false;
+    }
+
+    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: Uint8ClampedArray): boolean =>
+    data[0] === 0 && data[1] === 255 && data[2] === 0 && data[3] === 255;
+
+const testForeignObject = (document: Document): Promise<boolean> => {
+    const canvas = document.createElement('canvas');
+    const size = 100;
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        return Promise.reject(false);
+    }
+    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: HTMLImageElement) => {
+            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: HTMLImageElement) => {
+            ctx.drawImage(img, 0, 0);
+            // Edge does not render background-images
+            return isGreenPixel(ctx.getImageData(0, 0, size, size).data);
+        })
+        .catch(() => false);
+};
+
+export const createForeignObjectSVG = (
+    width: number,
+    height: number,
+    x: number,
+    y: number,
+    node: Node
+): SVGForeignObjectElement => {
+    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.toString());
+    svg.setAttributeNS(null, 'height', height.toString());
+
+    foreignObject.setAttributeNS(null, 'width', '100%');
+    foreignObject.setAttributeNS(null, 'height', '100%');
+    foreignObject.setAttributeNS(null, 'x', x.toString());
+    foreignObject.setAttributeNS(null, 'y', y.toString());
+    foreignObject.setAttributeNS(null, 'externalResourcesRequired', 'true');
+    svg.appendChild(foreignObject);
+
+    foreignObject.appendChild(node);
+
+    return svg;
+};
+
+export const loadSerializedSVG = (svg: Node): Promise<HTMLImageElement> => {
+    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))}`;
+    });
+};
+
+export const FEATURES = {
+    get SUPPORT_RANGE_BOUNDS(): boolean {
+        'use strict';
+        const value = testRangeBounds(document);
+        Object.defineProperty(FEATURES, 'SUPPORT_RANGE_BOUNDS', {value});
+        return value;
+    },
+    get SUPPORT_WORD_BREAKING(): boolean {
+        'use strict';
+        const value = FEATURES.SUPPORT_RANGE_BOUNDS && testIOSLineBreak(document);
+        Object.defineProperty(FEATURES, 'SUPPORT_WORD_BREAKING', {value});
+        return value;
+    },
+    get SUPPORT_SVG_DRAWING(): boolean {
+        'use strict';
+        const value = testSVG(document);
+        Object.defineProperty(FEATURES, 'SUPPORT_SVG_DRAWING', {value});
+        return value;
+    },
+    get SUPPORT_FOREIGNOBJECT_DRAWING(): Promise<boolean> {
+        '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;
+    },
+    get SUPPORT_CORS_IMAGES(): boolean {
+        'use strict';
+        const value = testCORS();
+        Object.defineProperty(FEATURES, 'SUPPORT_CORS_IMAGES', {value});
+        return value;
+    },
+    get SUPPORT_RESPONSE_TYPE(): boolean {
+        'use strict';
+        const value = testResponseType();
+        Object.defineProperty(FEATURES, 'SUPPORT_RESPONSE_TYPE', {value});
+        return value;
+    },
+    get SUPPORT_CORS_XHR(): boolean {
+        'use strict';
+        const value = 'withCredentials' in new XMLHttpRequest();
+        Object.defineProperty(FEATURES, 'SUPPORT_CORS_XHR', {value});
+        return value;
+    }
+};

src/core/logger.ts

@@ -0,0 +1,72 @@
+export interface LoggerOptions {
+    id: string;
+    enabled: boolean;
+}
+
+export class Logger {
+    static instances: {[key: string]: Logger} = {};
+
+    private readonly id: string;
+    private readonly enabled: boolean;
+    private readonly start: number;
+
+    constructor({id, enabled}: LoggerOptions) {
+        this.id = id;
+        this.enabled = enabled;
+        this.start = Date.now();
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    debug(...args: unknown[]): void {
+        if (this.enabled) {
+            // eslint-disable-next-line no-console
+            if (typeof window !== 'undefined' && window.console && typeof console.debug === 'function') {
+                // eslint-disable-next-line no-console
+                console.debug(this.id, `${this.getTime()}ms`, ...args);
+            } else {
+                this.info(...args);
+            }
+        }
+    }
+
+    getTime(): number {
+        return Date.now() - this.start;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    info(...args: unknown[]): void {
+        if (this.enabled) {
+            // eslint-disable-next-line no-console
+            if (typeof window !== 'undefined' && window.console && typeof console.info === 'function') {
+                // eslint-disable-next-line no-console
+                console.info(this.id, `${this.getTime()}ms`, ...args);
+            }
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    warn(...args: unknown[]): void {
+        if (this.enabled) {
+            // eslint-disable-next-line no-console
+            if (typeof window !== 'undefined' && window.console && typeof console.warn === 'function') {
+                // eslint-disable-next-line no-console
+                console.warn(this.id, `${this.getTime()}ms`, ...args);
+            } else {
+                this.info(...args);
+            }
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    error(...args: unknown[]): void {
+        if (this.enabled) {
+            // eslint-disable-next-line no-console
+            if (typeof window !== 'undefined' && window.console && typeof console.error === 'function') {
+                // eslint-disable-next-line no-console
+                console.error(this.id, `${this.getTime()}ms`, ...args);
+            } else {
+                this.info(...args);
+            }
+        }
+    }
+}

src/core/util.ts

@@ -0,0 +1 @@
+export const SMALL_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';

src/css/IPropertyDescriptor.ts

@@ -0,0 +1,49 @@
+import {CSSValue} from './syntax/parser';
+import {CSSTypes} from './types';
+import {Context} from '../core/context';
+
+export const enum PropertyDescriptorParsingType {
+    VALUE,
+    LIST,
+    IDENT_VALUE,
+    TYPE_VALUE,
+    TOKEN_VALUE
+}
+
+export interface IPropertyDescriptor {
+    name: string;
+    type: PropertyDescriptorParsingType;
+    initialValue: string;
+    prefix: boolean;
+}
+
+export interface IPropertyIdentValueDescriptor<T> extends IPropertyDescriptor {
+    type: PropertyDescriptorParsingType.IDENT_VALUE;
+    parse: (context: Context, token: string) => T;
+}
+
+export interface IPropertyTypeValueDescriptor extends IPropertyDescriptor {
+    type: PropertyDescriptorParsingType.TYPE_VALUE;
+    format: CSSTypes;
+}
+
+export interface IPropertyValueDescriptor<T> extends IPropertyDescriptor {
+    type: PropertyDescriptorParsingType.VALUE;
+    parse: (context: Context, token: CSSValue) => T;
+}
+
+export interface IPropertyListDescriptor<T> extends IPropertyDescriptor {
+    type: PropertyDescriptorParsingType.LIST;
+    parse: (context: Context, tokens: CSSValue[]) => T;
+}
+
+export interface IPropertyTokenValueDescriptor extends IPropertyDescriptor {
+    type: PropertyDescriptorParsingType.TOKEN_VALUE;
+}
+
+export type CSSPropertyDescriptor<T> =
+    | IPropertyValueDescriptor<T>
+    | IPropertyListDescriptor<T>
+    | IPropertyIdentValueDescriptor<T>
+    | IPropertyTypeValueDescriptor
+    | IPropertyTokenValueDescriptor;

src/css/ITypeDescriptor.ts

@@ -0,0 +1,7 @@
+import {CSSValue} from './syntax/parser';
+import {Context} from '../core/context';
+
+export interface ITypeDescriptor<T> {
+    name: string;
+    parse: (context: Context, value: CSSValue) => T;
+}

src/css/index.ts

@@ -0,0 +1,323 @@
+import {CSSPropertyDescriptor, PropertyDescriptorParsingType} from './IPropertyDescriptor';
+import {backgroundClip} from './property-descriptors/background-clip';
+import {backgroundColor} from './property-descriptors/background-color';
+import {backgroundImage} from './property-descriptors/background-image';
+import {backgroundOrigin} from './property-descriptors/background-origin';
+import {backgroundPosition} from './property-descriptors/background-position';
+import {backgroundRepeat} from './property-descriptors/background-repeat';
+import {backgroundSize} from './property-descriptors/background-size';
+import {
+    borderBottomColor,
+    borderLeftColor,
+    borderRightColor,
+    borderTopColor
+} from './property-descriptors/border-color';
+import {
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius
+} from './property-descriptors/border-radius';
+import {
+    borderBottomStyle,
+    borderLeftStyle,
+    borderRightStyle,
+    borderTopStyle
+} from './property-descriptors/border-style';
+import {
+    borderBottomWidth,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth
+} from './property-descriptors/border-width';
+import {color} from './property-descriptors/color';
+import {direction} from './property-descriptors/direction';
+import {display, DISPLAY} from './property-descriptors/display';
+import {float, FLOAT} from './property-descriptors/float';
+import {letterSpacing} from './property-descriptors/letter-spacing';
+import {lineBreak} from './property-descriptors/line-break';
+import {lineHeight} from './property-descriptors/line-height';
+import {listStyleImage} from './property-descriptors/list-style-image';
+import {listStylePosition} from './property-descriptors/list-style-position';
+import {listStyleType} from './property-descriptors/list-style-type';
+import {marginBottom, marginLeft, marginRight, marginTop} from './property-descriptors/margin';
+import {overflow, OVERFLOW} from './property-descriptors/overflow';
+import {overflowWrap} from './property-descriptors/overflow-wrap';
+import {paddingBottom, paddingLeft, paddingRight, paddingTop} from './property-descriptors/padding';
+import {textAlign} from './property-descriptors/text-align';
+import {position, POSITION} from './property-descriptors/position';
+import {textShadow} from './property-descriptors/text-shadow';
+import {textTransform} from './property-descriptors/text-transform';
+import {transform} from './property-descriptors/transform';
+import {transformOrigin} from './property-descriptors/transform-origin';
+import {visibility, VISIBILITY} from './property-descriptors/visibility';
+import {wordBreak} from './property-descriptors/word-break';
+import {zIndex} from './property-descriptors/z-index';
+import {CSSValue, isIdentToken, Parser} from './syntax/parser';
+import {Tokenizer} from './syntax/tokenizer';
+import {Color, color as colorType, isTransparent} from './types/color';
+import {angle} from './types/angle';
+import {image} from './types/image';
+import {time} from './types/time';
+import {opacity} from './property-descriptors/opacity';
+import {textDecorationColor} from './property-descriptors/text-decoration-color';
+import {textDecorationLine} from './property-descriptors/text-decoration-line';
+import {isLengthPercentage, LengthPercentage, ZERO_LENGTH} from './types/length-percentage';
+import {fontFamily} from './property-descriptors/font-family';
+import {fontSize} from './property-descriptors/font-size';
+import {isLength} from './types/length';
+import {fontWeight} from './property-descriptors/font-weight';
+import {fontVariant} from './property-descriptors/font-variant';
+import {fontStyle} from './property-descriptors/font-style';
+import {contains} from '../core/bitwise';
+import {content} from './property-descriptors/content';
+import {counterIncrement} from './property-descriptors/counter-increment';
+import {counterReset} from './property-descriptors/counter-reset';
+import {duration} from './property-descriptors/duration';
+import {quotes} from './property-descriptors/quotes';
+import {boxShadow} from './property-descriptors/box-shadow';
+import {paintOrder} from './property-descriptors/paint-order';
+import {webkitTextStrokeColor} from './property-descriptors/webkit-text-stroke-color';
+import {webkitTextStrokeWidth} from './property-descriptors/webkit-text-stroke-width';
+import {Context} from '../core/context';
+
+export class CSSParsedDeclaration {
+    animationDuration: ReturnType<typeof duration.parse>;
+    backgroundClip: ReturnType<typeof backgroundClip.parse>;
+    backgroundColor: Color;
+    backgroundImage: ReturnType<typeof backgroundImage.parse>;
+    backgroundOrigin: ReturnType<typeof backgroundOrigin.parse>;
+    backgroundPosition: ReturnType<typeof backgroundPosition.parse>;
+    backgroundRepeat: ReturnType<typeof backgroundRepeat.parse>;
+    backgroundSize: ReturnType<typeof backgroundSize.parse>;
+    borderTopColor: Color;
+    borderRightColor: Color;
+    borderBottomColor: Color;
+    borderLeftColor: Color;
+    borderTopLeftRadius: ReturnType<typeof borderTopLeftRadius.parse>;
+    borderTopRightRadius: ReturnType<typeof borderTopRightRadius.parse>;
+    borderBottomRightRadius: ReturnType<typeof borderBottomRightRadius.parse>;
+    borderBottomLeftRadius: ReturnType<typeof borderBottomLeftRadius.parse>;
+    borderTopStyle: ReturnType<typeof borderTopStyle.parse>;
+    borderRightStyle: ReturnType<typeof borderRightStyle.parse>;
+    borderBottomStyle: ReturnType<typeof borderBottomStyle.parse>;
+    borderLeftStyle: ReturnType<typeof borderLeftStyle.parse>;
+    borderTopWidth: ReturnType<typeof borderTopWidth.parse>;
+    borderRightWidth: ReturnType<typeof borderRightWidth.parse>;
+    borderBottomWidth: ReturnType<typeof borderBottomWidth.parse>;
+    borderLeftWidth: ReturnType<typeof borderLeftWidth.parse>;
+    boxShadow: ReturnType<typeof boxShadow.parse>;
+    color: Color;
+    direction: ReturnType<typeof direction.parse>;
+    display: ReturnType<typeof display.parse>;
+    float: ReturnType<typeof float.parse>;
+    fontFamily: ReturnType<typeof fontFamily.parse>;
+    fontSize: LengthPercentage;
+    fontStyle: ReturnType<typeof fontStyle.parse>;
+    fontVariant: ReturnType<typeof fontVariant.parse>;
+    fontWeight: ReturnType<typeof fontWeight.parse>;
+    letterSpacing: ReturnType<typeof letterSpacing.parse>;
+    lineBreak: ReturnType<typeof lineBreak.parse>;
+    lineHeight: CSSValue;
+    listStyleImage: ReturnType<typeof listStyleImage.parse>;
+    listStylePosition: ReturnType<typeof listStylePosition.parse>;
+    listStyleType: ReturnType<typeof listStyleType.parse>;
+    marginTop: CSSValue;
+    marginRight: CSSValue;
+    marginBottom: CSSValue;
+    marginLeft: CSSValue;
+    opacity: ReturnType<typeof opacity.parse>;
+    overflowX: OVERFLOW;
+    overflowY: OVERFLOW;
+    overflowWrap: ReturnType<typeof overflowWrap.parse>;
+    paddingTop: LengthPercentage;
+    paddingRight: LengthPercentage;
+    paddingBottom: LengthPercentage;
+    paddingLeft: LengthPercentage;
+    paintOrder: ReturnType<typeof paintOrder.parse>;
+    position: ReturnType<typeof position.parse>;
+    textAlign: ReturnType<typeof textAlign.parse>;
+    textDecorationColor: Color;
+    textDecorationLine: ReturnType<typeof textDecorationLine.parse>;
+    textShadow: ReturnType<typeof textShadow.parse>;
+    textTransform: ReturnType<typeof textTransform.parse>;
+    transform: ReturnType<typeof transform.parse>;
+    transformOrigin: ReturnType<typeof transformOrigin.parse>;
+    transitionDuration: ReturnType<typeof duration.parse>;
+    visibility: ReturnType<typeof visibility.parse>;
+    webkitTextStrokeColor: Color;
+    webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>;
+    wordBreak: ReturnType<typeof wordBreak.parse>;
+    zIndex: ReturnType<typeof zIndex.parse>;
+
+    constructor(context: Context, declaration: CSSStyleDeclaration) {
+        this.animationDuration = parse(context, duration, declaration.animationDuration);
+        this.backgroundClip = parse(context, backgroundClip, declaration.backgroundClip);
+        this.backgroundColor = parse(context, backgroundColor, declaration.backgroundColor);
+        this.backgroundImage = parse(context, backgroundImage, declaration.backgroundImage);
+        this.backgroundOrigin = parse(context, backgroundOrigin, declaration.backgroundOrigin);
+        this.backgroundPosition = parse(context, backgroundPosition, declaration.backgroundPosition);
+        this.backgroundRepeat = parse(context, backgroundRepeat, declaration.backgroundRepeat);
+        this.backgroundSize = parse(context, backgroundSize, declaration.backgroundSize);
+        this.borderTopColor = parse(context, borderTopColor, declaration.borderTopColor);
+        this.borderRightColor = parse(context, borderRightColor, declaration.borderRightColor);
+        this.borderBottomColor = parse(context, borderBottomColor, declaration.borderBottomColor);
+        this.borderLeftColor = parse(context, borderLeftColor, declaration.borderLeftColor);
+        this.borderTopLeftRadius = parse(context, borderTopLeftRadius, declaration.borderTopLeftRadius);
+        this.borderTopRightRadius = parse(context, borderTopRightRadius, declaration.borderTopRightRadius);
+        this.borderBottomRightRadius = parse(context, borderBottomRightRadius, declaration.borderBottomRightRadius);
+        this.borderBottomLeftRadius = parse(context, borderBottomLeftRadius, declaration.borderBottomLeftRadius);
+        this.borderTopStyle = parse(context, borderTopStyle, declaration.borderTopStyle);
+        this.borderRightStyle = parse(context, borderRightStyle, declaration.borderRightStyle);
+        this.borderBottomStyle = parse(context, borderBottomStyle, declaration.borderBottomStyle);
+        this.borderLeftStyle = parse(context, borderLeftStyle, declaration.borderLeftStyle);
+        this.borderTopWidth = parse(context, borderTopWidth, declaration.borderTopWidth);
+        this.borderRightWidth = parse(context, borderRightWidth, declaration.borderRightWidth);
+        this.borderBottomWidth = parse(context, borderBottomWidth, declaration.borderBottomWidth);
+        this.borderLeftWidth = parse(context, borderLeftWidth, declaration.borderLeftWidth);
+        this.boxShadow = parse(context, boxShadow, declaration.boxShadow);
+        this.color = parse(context, color, declaration.color);
+        this.direction = parse(context, direction, declaration.direction);
+        this.display = parse(context, display, declaration.display);
+        this.float = parse(context, float, declaration.cssFloat);
+        this.fontFamily = parse(context, fontFamily, declaration.fontFamily);
+        this.fontSize = parse(context, fontSize, declaration.fontSize);
+        this.fontStyle = parse(context, fontStyle, declaration.fontStyle);
+        this.fontVariant = parse(context, fontVariant, declaration.fontVariant);
+        this.fontWeight = parse(context, fontWeight, declaration.fontWeight);
+        this.letterSpacing = parse(context, letterSpacing, declaration.letterSpacing);
+        this.lineBreak = parse(context, lineBreak, declaration.lineBreak);
+        this.lineHeight = parse(context, lineHeight, declaration.lineHeight);
+        this.listStyleImage = parse(context, listStyleImage, declaration.listStyleImage);
+        this.listStylePosition = parse(context, listStylePosition, declaration.listStylePosition);
+        this.listStyleType = parse(context, listStyleType, declaration.listStyleType);
+        this.marginTop = parse(context, marginTop, declaration.marginTop);
+        this.marginRight = parse(context, marginRight, declaration.marginRight);
+        this.marginBottom = parse(context, marginBottom, declaration.marginBottom);
+        this.marginLeft = parse(context, marginLeft, declaration.marginLeft);
+        this.opacity = parse(context, opacity, declaration.opacity);
+        const overflowTuple = parse(context, overflow, declaration.overflow);
+        this.overflowX = overflowTuple[0];
+        this.overflowY = overflowTuple[overflowTuple.length > 1 ? 1 : 0];
+        this.overflowWrap = parse(context, overflowWrap, declaration.overflowWrap);
+        this.paddingTop = parse(context, paddingTop, declaration.paddingTop);
+        this.paddingRight = parse(context, paddingRight, declaration.paddingRight);
+        this.paddingBottom = parse(context, paddingBottom, declaration.paddingBottom);
+        this.paddingLeft = parse(context, paddingLeft, declaration.paddingLeft);
+        this.paintOrder = parse(context, paintOrder, declaration.paintOrder);
+        this.position = parse(context, position, declaration.position);
+        this.textAlign = parse(context, textAlign, declaration.textAlign);
+        this.textDecorationColor = parse(
+            context,
+            textDecorationColor,
+            declaration.textDecorationColor ?? declaration.color
+        );
+        this.textDecorationLine = parse(
+            context,
+            textDecorationLine,
+            declaration.textDecorationLine ?? declaration.textDecoration
+        );
+        this.textShadow = parse(context, textShadow, declaration.textShadow);
+        this.textTransform = parse(context, textTransform, declaration.textTransform);
+        this.transform = parse(context, transform, declaration.transform);
+        this.transformOrigin = parse(context, transformOrigin, declaration.transformOrigin);
+        this.transitionDuration = parse(context, duration, declaration.transitionDuration);
+        this.visibility = parse(context, visibility, declaration.visibility);
+        this.webkitTextStrokeColor = parse(context, webkitTextStrokeColor, declaration.webkitTextStrokeColor);
+        this.webkitTextStrokeWidth = parse(context, webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
+        this.wordBreak = parse(context, wordBreak, declaration.wordBreak);
+        this.zIndex = parse(context, zIndex, declaration.zIndex);
+    }
+
+    isVisible(): boolean {
+        return this.display > 0 && this.opacity > 0 && this.visibility === VISIBILITY.VISIBLE;
+    }
+
+    isTransparent(): boolean {
+        return isTransparent(this.backgroundColor);
+    }
+
+    isTransformed(): boolean {
+        return this.transform !== null;
+    }
+
+    isPositioned(): boolean {
+        return this.position !== POSITION.STATIC;
+    }
+
+    isPositionedWithZIndex(): boolean {
+        return this.isPositioned() && !this.zIndex.auto;
+    }
+
+    isFloating(): boolean {
+        return this.float !== FLOAT.NONE;
+    }
+
+    isInlineLevel(): boolean {
+        return (
+            contains(this.display, DISPLAY.INLINE) ||
+            contains(this.display, DISPLAY.INLINE_BLOCK) ||
+            contains(this.display, DISPLAY.INLINE_FLEX) ||
+            contains(this.display, DISPLAY.INLINE_GRID) ||
+            contains(this.display, DISPLAY.INLINE_LIST_ITEM) ||
+            contains(this.display, DISPLAY.INLINE_TABLE)
+        );
+    }
+}
+
+export class CSSParsedPseudoDeclaration {
+    content: ReturnType<typeof content.parse>;
+    quotes: ReturnType<typeof quotes.parse>;
+
+    constructor(context: Context, declaration: CSSStyleDeclaration) {
+        this.content = parse(context, content, declaration.content);
+        this.quotes = parse(context, quotes, declaration.quotes);
+    }
+}
+
+export class CSSParsedCounterDeclaration {
+    counterIncrement: ReturnType<typeof counterIncrement.parse>;
+    counterReset: ReturnType<typeof counterReset.parse>;
+
+    constructor(context: Context, declaration: CSSStyleDeclaration) {
+        this.counterIncrement = parse(context, counterIncrement, declaration.counterIncrement);
+        this.counterReset = parse(context, counterReset, declaration.counterReset);
+    }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const parse = (context: Context, descriptor: CSSPropertyDescriptor<any>, style?: string | null) => {
+    const tokenizer = new Tokenizer();
+    const value = style !== null && typeof style !== 'undefined' ? style.toString() : descriptor.initialValue;
+    tokenizer.write(value);
+    const parser = new Parser(tokenizer.read());
+    switch (descriptor.type) {
+        case PropertyDescriptorParsingType.IDENT_VALUE:
+            const token = parser.parseComponentValue();
+            return descriptor.parse(context, isIdentToken(token) ? token.value : descriptor.initialValue);
+        case PropertyDescriptorParsingType.VALUE:
+            return descriptor.parse(context, parser.parseComponentValue());
+        case PropertyDescriptorParsingType.LIST:
+            return descriptor.parse(context, parser.parseComponentValues());
+        case PropertyDescriptorParsingType.TOKEN_VALUE:
+            return parser.parseComponentValue();
+        case PropertyDescriptorParsingType.TYPE_VALUE:
+            switch (descriptor.format) {
+                case 'angle':
+                    return angle.parse(context, parser.parseComponentValue());
+                case 'color':
+                    return colorType.parse(context, parser.parseComponentValue());
+                case 'image':
+                    return image.parse(context, parser.parseComponentValue());
+                case 'length':
+                    const length = parser.parseComponentValue();
+                    return isLength(length) ? length : ZERO_LENGTH;
+                case 'length-percentage':
+                    const value = parser.parseComponentValue();
+                    return isLengthPercentage(value) ? value : ZERO_LENGTH;
+                case 'time':
+                    return time.parse(context, parser.parseComponentValue());
+            }
+            break;
+    }
+};

src/css/layout/__mocks__/bounds.ts

@@ -0,0 +1,4 @@
+export const {Bounds} = jest.requireActual('../bounds');
+export const parseBounds = (): typeof Bounds => {
+    return new Bounds(0, 0, 200, 50);
+};

src/css/layout/bounds.ts

@@ -0,0 +1,58 @@
+import {Context} from '../../core/context';
+
+export class Bounds {
+    constructor(readonly left: number, readonly top: number, readonly width: number, readonly height: number) {}
+
+    add(x: number, y: number, w: number, h: number): Bounds {
+        return new Bounds(this.left + x, this.top + y, this.width + w, this.height + h);
+    }
+
+    static fromClientRect(context: Context, clientRect: ClientRect): Bounds {
+        return new Bounds(
+            clientRect.left + context.windowBounds.left,
+            clientRect.top + context.windowBounds.top,
+            clientRect.width,
+            clientRect.height
+        );
+    }
+
+    static fromDOMRectList(context: Context, domRectList: DOMRectList): Bounds {
+        const domRect = domRectList[0];
+        return domRect
+            ? new Bounds(
+                  domRect.x + context.windowBounds.left,
+                  domRect.y + context.windowBounds.top,
+                  domRect.width,
+                  domRect.height
+              )
+            : Bounds.EMPTY;
+    }
+
+    static EMPTY = new Bounds(0, 0, 0, 0);
+}
+
+export const parseBounds = (context: Context, node: Element): Bounds => {
+    return Bounds.fromClientRect(context, node.getBoundingClientRect());
+};
+
+export const parseDocumentSize = (document: Document): Bounds => {
+    const body = document.body;
+    const documentElement = document.documentElement;
+
+    if (!body || !documentElement) {
+        throw new Error(`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);
+};

src/css/layout/text.ts

@@ -0,0 +1,129 @@
+import {OVERFLOW_WRAP} from '../property-descriptors/overflow-wrap';
+import {CSSParsedDeclaration} from '../index';
+import {fromCodePoint, LineBreaker, toCodePoints} from 'css-line-break';
+import {splitGraphemes} from 'text-segmentation';
+import {Bounds, parseBounds} from './bounds';
+import {FEATURES} from '../../core/features';
+import {Context} from '../../core/context';
+
+export class TextBounds {
+    readonly text: string;
+    readonly bounds: Bounds;
+
+    constructor(text: string, bounds: Bounds) {
+        this.text = text;
+        this.bounds = bounds;
+    }
+}
+
+export const parseTextBounds = (
+    context: Context,
+    value: string,
+    styles: CSSParsedDeclaration,
+    node: Text
+): TextBounds[] => {
+    const textList = breakText(value, styles);
+    const textBounds: TextBounds[] = [];
+    let offset = 0;
+    textList.forEach((text) => {
+        if (styles.textDecorationLine.length || text.trim().length > 0) {
+            if (FEATURES.SUPPORT_RANGE_BOUNDS) {
+                if (!FEATURES.SUPPORT_WORD_BREAKING) {
+                    textBounds.push(
+                        new TextBounds(
+                            text,
+                            Bounds.fromDOMRectList(context, createRange(node, offset, text.length).getClientRects())
+                        )
+                    );
+                } else {
+                    textBounds.push(new TextBounds(text, getRangeBounds(context, node, offset, text.length)));
+                }
+            } else {
+                const replacementNode = node.splitText(text.length);
+                textBounds.push(new TextBounds(text, getWrapperBounds(context, node)));
+                node = replacementNode;
+            }
+        } else if (!FEATURES.SUPPORT_RANGE_BOUNDS) {
+            node = node.splitText(text.length);
+        }
+        offset += text.length;
+    });
+
+    return textBounds;
+};
+
+const getWrapperBounds = (context: Context, node: Text): Bounds => {
+    const ownerDocument = node.ownerDocument;
+    if (ownerDocument) {
+        const wrapper = ownerDocument.createElement('html2canvaswrapper');
+        wrapper.appendChild(node.cloneNode(true));
+        const parentNode = node.parentNode;
+        if (parentNode) {
+            parentNode.replaceChild(wrapper, node);
+            const bounds = parseBounds(context, wrapper);
+            if (wrapper.firstChild) {
+                parentNode.replaceChild(wrapper.firstChild, wrapper);
+            }
+            return bounds;
+        }
+    }
+
+    return Bounds.EMPTY;
+};
+
+const createRange = (node: Text, offset: number, length: number): Range => {
+    const ownerDocument = node.ownerDocument;
+    if (!ownerDocument) {
+        throw new Error('Node has no owner document');
+    }
+    const range = ownerDocument.createRange();
+    range.setStart(node, offset);
+    range.setEnd(node, offset + length);
+    return range;
+};
+
+const getRangeBounds = (context: Context, node: Text, offset: number, length: number): Bounds => {
+    return Bounds.fromClientRect(context, createRange(node, offset, length).getBoundingClientRect());
+};
+
+const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
+    return styles.letterSpacing !== 0 ? splitGraphemes(value) : breakWords(value, styles);
+};
+
+// https://drafts.csswg.org/css-text/#word-separator
+const wordSeparators = [0x0020, 0x00a0, 0x1361, 0x10100, 0x10101, 0x1039, 0x1091];
+
+const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {
+    const breaker = LineBreaker(str, {
+        lineBreak: styles.lineBreak,
+        wordBreak: styles.overflowWrap === OVERFLOW_WRAP.BREAK_WORD ? 'break-word' : styles.wordBreak
+    });
+
+    const words = [];
+    let bk;
+
+    while (!(bk = breaker.next()).done) {
+        if (bk.value) {
+            const value = bk.value.slice();
+            const codePoints = toCodePoints(value);
+            let word = '';
+            codePoints.forEach((codePoint) => {
+                if (wordSeparators.indexOf(codePoint) === -1) {
+                    word += fromCodePoint(codePoint);
+                } else {
+                    if (word.length) {
+                        words.push(word);
+                    }
+                    words.push(fromCodePoint(codePoint));
+                    word = '';
+                }
+            });
+
+            if (word.length) {
+                words.push(word);
+            }
+        }
+    }
+
+    return words;
+};

src/css/property-descriptors/__tests__/background-tests.ts

@@ -0,0 +1,59 @@
+import {deepStrictEqual} from 'assert';
+import {Parser} from '../../syntax/parser';
+import {backgroundImage} from '../background-image';
+import {CSSImageType} from '../../types/image';
+import {pack} from '../../types/color';
+import {deg} from '../../types/angle';
+
+jest.mock('../../../core/context');
+import {Context} from '../../../core/context';
+
+jest.mock('../../../core/features');
+
+const backgroundImageParse = (context: Context, value: string) =>
+    backgroundImage.parse(context, Parser.parseValues(value));
+
+describe('property-descriptors', () => {
+    let context: Context;
+    beforeEach(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        context = new Context({} as any, {} as any);
+    });
+    describe('background-image', () => {
+        it('none', () => {
+            deepStrictEqual(backgroundImageParse(context, 'none'), []);
+            expect(context.cache.addImage).not.toHaveBeenCalled();
+        });
+
+        it('url(test.jpg), url(test2.jpg)', () => {
+            deepStrictEqual(
+                backgroundImageParse(context, 'url(http://example.com/test.jpg), url(http://example.com/test2.jpg)'),
+                [
+                    {url: 'http://example.com/test.jpg', type: CSSImageType.URL},
+                    {url: 'http://example.com/test2.jpg', type: CSSImageType.URL}
+                ]
+            );
+            expect(context.cache.addImage).toHaveBeenCalledWith('http://example.com/test.jpg');
+            expect(context.cache.addImage).toHaveBeenCalledWith('http://example.com/test2.jpg');
+        });
+
+        it(`linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://html2canvas.hertzen.com')`, () =>
+            deepStrictEqual(
+                backgroundImageParse(
+                    context,
+                    `linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://html2canvas.hertzen.com')`
+                ),
+                [
+                    {
+                        angle: deg(180),
+                        type: CSSImageType.LINEAR_GRADIENT,
+                        stops: [
+                            {color: pack(255, 255, 0, 0.5), stop: null},
+                            {color: pack(0, 0, 255, 0.5), stop: null}
+                        ]
+                    },
+                    {url: 'https://html2canvas.hertzen.com', type: CSSImageType.URL}
+                ]
+            ));
+    });
+});

src/css/property-descriptors/__tests__/font-family.ts

@@ -0,0 +1,25 @@
+import {deepEqual} from 'assert';
+import {Parser} from '../../syntax/parser';
+import {fontFamily} from '../font-family';
+import {Context} from '../../../core/context';
+
+const fontFamilyParse = (value: string) => fontFamily.parse({} as Context, Parser.parseValues(value));
+
+describe('property-descriptors', () => {
+    describe('font-family', () => {
+        it('sans-serif', () => deepEqual(fontFamilyParse('sans-serif'), ['sans-serif']));
+
+        it('great fonts 40 library', () =>
+            deepEqual(fontFamilyParse('great fonts 40 library'), ["'great fonts 40 library'"]));
+
+        it('preferred font, "quoted fallback font", font', () =>
+            deepEqual(fontFamilyParse('preferred font, "quoted fallback font", font'), [
+                "'preferred font'",
+                "'quoted fallback font'",
+                'font'
+            ]));
+
+        it("'escaping test\\'s font'", () =>
+            deepEqual(fontFamilyParse("'escaping test\\'s font'"), ["'escaping test's font'"]));
+    });
+});

src/css/property-descriptors/__tests__/paint-order.ts

@@ -0,0 +1,87 @@
+import {deepStrictEqual} from 'assert';
+import {Parser} from '../../syntax/parser';
+import {paintOrder, PAINT_ORDER_LAYER} from '../paint-order';
+import {Context} from '../../../core/context';
+
+const paintOrderParse = (value: string) => paintOrder.parse({} as Context, Parser.parseValues(value));
+
+describe('property-descriptors', () => {
+    describe('paint-order', () => {
+        it('none', () =>
+            deepStrictEqual(paintOrderParse('none'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('EMPTY', () =>
+            deepStrictEqual(paintOrderParse(''), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('other values', () =>
+            deepStrictEqual(paintOrderParse('other values'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('normal', () =>
+            deepStrictEqual(paintOrderParse('normal'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('stroke', () =>
+            deepStrictEqual(paintOrderParse('stroke'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('fill', () =>
+            deepStrictEqual(paintOrderParse('fill'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('markers', () =>
+            deepStrictEqual(paintOrderParse('markers'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE
+            ]));
+
+        it('stroke fill', () =>
+            deepStrictEqual(paintOrderParse('stroke fill'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('markers stroke', () =>
+            deepStrictEqual(paintOrderParse('markers stroke'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL
+            ]));
+
+        it('markers stroke fill', () =>
+            deepStrictEqual(paintOrderParse('markers stroke fill'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL
+            ]));
+
+        it('stroke fill markers', () =>
+            deepStrictEqual(paintOrderParse('stroke fill markers'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+    });
+});

src/css/property-descriptors/__tests__/text-shadow.ts

@@ -0,0 +1,94 @@
+import {deepStrictEqual} from 'assert';
+import {Parser} from '../../syntax/parser';
+import {color, COLORS} from '../../types/color';
+import {textShadow} from '../text-shadow';
+import {FLAG_INTEGER, DimensionToken, TokenType} from '../../syntax/tokenizer';
+import {ZERO_LENGTH} from '../../types/length-percentage';
+import {Context} from '../../../core/context';
+
+const textShadowParse = (value: string) => textShadow.parse({} as Context, Parser.parseValues(value));
+const colorParse = (value: string) => color.parse({} as Context, Parser.parseValue(value));
+const dimension = (number: number, unit: string): DimensionToken => ({
+    flags: FLAG_INTEGER,
+    number,
+    unit,
+    type: TokenType.DIMENSION_TOKEN
+});
+
+describe('property-descriptors', () => {
+    describe('text-shadow', () => {
+        it('none', () => deepStrictEqual(textShadowParse('none'), []));
+
+        it('1px 1px 2px pink', () =>
+            deepStrictEqual(textShadowParse('1px 1px 2px pink'), [
+                {
+                    color: colorParse('pink'),
+                    offsetX: dimension(1, 'px'),
+                    offsetY: dimension(1, 'px'),
+                    blur: dimension(2, 'px')
+                }
+            ]));
+
+        it('#fc0 1px 0 10px', () =>
+            deepStrictEqual(textShadowParse('#fc0 1px 0 10px'), [
+                {
+                    color: colorParse('#fc0'),
+                    offsetX: dimension(1, 'px'),
+                    offsetY: ZERO_LENGTH,
+                    blur: dimension(10, 'px')
+                }
+            ]));
+
+        it('5px 5px #558abb', () =>
+            deepStrictEqual(textShadowParse('5px 5px #558abb'), [
+                {
+                    color: colorParse('#558abb'),
+                    offsetX: dimension(5, 'px'),
+                    offsetY: dimension(5, 'px'),
+                    blur: ZERO_LENGTH
+                }
+            ]));
+
+        it('white 2px 5px', () =>
+            deepStrictEqual(textShadowParse('white 2px 5px'), [
+                {
+                    color: colorParse('#fff'),
+                    offsetX: dimension(2, 'px'),
+                    offsetY: dimension(5, 'px'),
+                    blur: ZERO_LENGTH
+                }
+            ]));
+
+        it('white 2px 5px', () =>
+            deepStrictEqual(textShadowParse('5px 10px'), [
+                {
+                    color: COLORS.TRANSPARENT,
+                    offsetX: dimension(5, 'px'),
+                    offsetY: dimension(10, 'px'),
+                    blur: ZERO_LENGTH
+                }
+            ]));
+
+        it('1px 1px 2px red, 0 0 1em blue, 0 0 2em blue', () =>
+            deepStrictEqual(textShadowParse('1px 1px 2px red, 0 0 1em blue, 0 0 2em blue'), [
+                {
+                    color: colorParse('red'),
+                    offsetX: dimension(1, 'px'),
+                    offsetY: dimension(1, 'px'),
+                    blur: dimension(2, 'px')
+                },
+                {
+                    color: colorParse('blue'),
+                    offsetX: ZERO_LENGTH,
+                    offsetY: ZERO_LENGTH,
+                    blur: dimension(1, 'em')
+                },
+                {
+                    color: colorParse('blue'),
+                    offsetX: ZERO_LENGTH,
+                    offsetY: ZERO_LENGTH,
+                    blur: dimension(2, 'em')
+                }
+            ]));
+    });
+});

src/css/property-descriptors/__tests__/transform-tests.ts

@@ -0,0 +1,18 @@
+import {transform} from '../transform';
+import {Parser} from '../../syntax/parser';
+import {deepStrictEqual} from 'assert';
+import {Context} from '../../../core/context';
+const parseValue = (value: string) => transform.parse({} as Context, Parser.parseValue(value));
+
+describe('property-descriptors', () => {
+    describe('transform', () => {
+        it('none', () => deepStrictEqual(parseValue('none'), null));
+        it('matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)', () =>
+            deepStrictEqual(parseValue('matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)'), [1, 2, 3, 4, 5, 6]));
+        it('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)', () =>
+            deepStrictEqual(
+                parseValue('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'),
+                [1, 0, 0, 1, 0, 0]
+            ));
+    });
+});

src/css/property-descriptors/background-clip.ts

@@ -0,0 +1,30 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';
+export enum BACKGROUND_CLIP {
+    BORDER_BOX = 0,
+    PADDING_BOX = 1,
+    CONTENT_BOX = 2
+}
+
+export type BackgroundClip = BACKGROUND_CLIP[];
+
+export const backgroundClip: IPropertyListDescriptor<BackgroundClip> = {
+    name: 'background-clip',
+    initialValue: 'border-box',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundClip => {
+        return tokens.map((token) => {
+            if (isIdentToken(token)) {
+                switch (token.value) {
+                    case 'padding-box':
+                        return BACKGROUND_CLIP.PADDING_BOX;
+                    case 'content-box':
+                        return BACKGROUND_CLIP.CONTENT_BOX;
+                }
+            }
+            return BACKGROUND_CLIP.BORDER_BOX;
+        });
+    }
+};

src/css/property-descriptors/background-color.ts

@@ -0,0 +1,9 @@
+import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+
+export const backgroundColor: IPropertyTypeValueDescriptor = {
+    name: `background-color`,
+    initialValue: 'transparent',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'color'
+};

src/css/property-descriptors/background-image.ts

@@ -0,0 +1,27 @@
+import {TokenType} from '../syntax/tokenizer';
+import {ICSSImage, image, isSupportedImage} from '../types/image';
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, nonFunctionArgSeparator} from '../syntax/parser';
+import {Context} from '../../core/context';
+
+export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = {
+    name: 'background-image',
+    initialValue: 'none',
+    type: PropertyDescriptorParsingType.LIST,
+    prefix: false,
+    parse: (context: Context, tokens: CSSValue[]) => {
+        if (tokens.length === 0) {
+            return [];
+        }
+
+        const first = tokens[0];
+
+        if (first.type === TokenType.IDENT_TOKEN && first.value === 'none') {
+            return [];
+        }
+
+        return tokens
+            .filter((value) => nonFunctionArgSeparator(value) && isSupportedImage(value))
+            .map((value) => image.parse(context, value));
+    }
+};

src/css/property-descriptors/background-origin.ts

@@ -0,0 +1,31 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';
+
+export const enum BACKGROUND_ORIGIN {
+    BORDER_BOX = 0,
+    PADDING_BOX = 1,
+    CONTENT_BOX = 2
+}
+
+export type BackgroundOrigin = BACKGROUND_ORIGIN[];
+
+export const backgroundOrigin: IPropertyListDescriptor<BackgroundOrigin> = {
+    name: 'background-origin',
+    initialValue: 'border-box',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundOrigin => {
+        return tokens.map((token) => {
+            if (isIdentToken(token)) {
+                switch (token.value) {
+                    case 'padding-box':
+                        return BACKGROUND_ORIGIN.PADDING_BOX;
+                    case 'content-box':
+                        return BACKGROUND_ORIGIN.CONTENT_BOX;
+                }
+            }
+            return BACKGROUND_ORIGIN.BORDER_BOX;
+        });
+    }
+};

src/css/property-descriptors/background-position.ts

@@ -0,0 +1,19 @@
+import {PropertyDescriptorParsingType, IPropertyListDescriptor} from '../IPropertyDescriptor';
+import {CSSValue, parseFunctionArgs} from '../syntax/parser';
+import {isLengthPercentage, LengthPercentageTuple, parseLengthPercentageTuple} from '../types/length-percentage';
+import {Context} from '../../core/context';
+export type BackgroundPosition = BackgroundImagePosition[];
+
+export type BackgroundImagePosition = LengthPercentageTuple;
+
+export const backgroundPosition: IPropertyListDescriptor<BackgroundPosition> = {
+    name: 'background-position',
+    initialValue: '0% 0%',
+    type: PropertyDescriptorParsingType.LIST,
+    prefix: false,
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundPosition => {
+        return parseFunctionArgs(tokens)
+            .map((values: CSSValue[]) => values.filter(isLengthPercentage))
+            .map(parseLengthPercentageTuple);
+    }
+};

src/css/property-descriptors/background-repeat.ts

@@ -0,0 +1,44 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, isIdentToken, parseFunctionArgs} from '../syntax/parser';
+import {Context} from '../../core/context';
+export type BackgroundRepeat = BACKGROUND_REPEAT[];
+
+export enum BACKGROUND_REPEAT {
+    REPEAT = 0,
+    NO_REPEAT = 1,
+    REPEAT_X = 2,
+    REPEAT_Y = 3
+}
+
+export const backgroundRepeat: IPropertyListDescriptor<BackgroundRepeat> = {
+    name: 'background-repeat',
+    initialValue: 'repeat',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundRepeat => {
+        return parseFunctionArgs(tokens)
+            .map((values) =>
+                values
+                    .filter(isIdentToken)
+                    .map((token) => token.value)
+                    .join(' ')
+            )
+            .map(parseBackgroundRepeat);
+    }
+};
+
+const parseBackgroundRepeat = (value: string): BACKGROUND_REPEAT => {
+    switch (value) {
+        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':
+        default:
+            return BACKGROUND_REPEAT.REPEAT;
+    }
+};

src/css/property-descriptors/background-size.ts

@@ -0,0 +1,27 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, isIdentToken, parseFunctionArgs} from '../syntax/parser';
+import {isLengthPercentage, LengthPercentage} from '../types/length-percentage';
+import {StringValueToken} from '../syntax/tokenizer';
+import {Context} from '../../core/context';
+
+export enum BACKGROUND_SIZE {
+    AUTO = 'auto',
+    CONTAIN = 'contain',
+    COVER = 'cover'
+}
+
+export type BackgroundSizeInfo = LengthPercentage | StringValueToken;
+export type BackgroundSize = BackgroundSizeInfo[][];
+
+export const backgroundSize: IPropertyListDescriptor<BackgroundSize> = {
+    name: 'background-size',
+    initialValue: '0',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundSize => {
+        return parseFunctionArgs(tokens).map((values) => values.filter(isBackgroundSizeInfoToken));
+    }
+};
+
+const isBackgroundSizeInfoToken = (value: CSSValue): value is BackgroundSizeInfo =>
+    isIdentToken(value) || isLengthPercentage(value);

src/css/property-descriptors/border-color.ts

@@ -0,0 +1,13 @@
+import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+const borderColorForSide = (side: string): IPropertyTypeValueDescriptor => ({
+    name: `border-${side}-color`,
+    initialValue: 'transparent',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'color'
+});
+
+export const borderTopColor: IPropertyTypeValueDescriptor = borderColorForSide('top');
+export const borderRightColor: IPropertyTypeValueDescriptor = borderColorForSide('right');
+export const borderBottomColor: IPropertyTypeValueDescriptor = borderColorForSide('bottom');
+export const borderLeftColor: IPropertyTypeValueDescriptor = borderColorForSide('left');

src/css/property-descriptors/border-radius.ts

@@ -0,0 +1,19 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue} from '../syntax/parser';
+import {isLengthPercentage, LengthPercentageTuple, parseLengthPercentageTuple} from '../types/length-percentage';
+import {Context} from '../../core/context';
+export type BorderRadius = LengthPercentageTuple;
+
+const borderRadiusForSide = (side: string): IPropertyListDescriptor<BorderRadius> => ({
+    name: `border-radius-${side}`,
+    initialValue: '0 0',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]): BorderRadius =>
+        parseLengthPercentageTuple(tokens.filter(isLengthPercentage))
+});
+
+export const borderTopLeftRadius: IPropertyListDescriptor<BorderRadius> = borderRadiusForSide('top-left');
+export const borderTopRightRadius: IPropertyListDescriptor<BorderRadius> = borderRadiusForSide('top-right');
+export const borderBottomRightRadius: IPropertyListDescriptor<BorderRadius> = borderRadiusForSide('bottom-right');
+export const borderBottomLeftRadius: IPropertyListDescriptor<BorderRadius> = borderRadiusForSide('bottom-left');

src/css/property-descriptors/border-style.ts

@@ -0,0 +1,34 @@
+import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
+export enum BORDER_STYLE {
+    NONE = 0,
+    SOLID = 1,
+    DASHED = 2,
+    DOTTED = 3,
+    DOUBLE = 4
+}
+
+const borderStyleForSide = (side: string): IPropertyIdentValueDescriptor<BORDER_STYLE> => ({
+    name: `border-${side}-style`,
+    initialValue: 'solid',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, style: string): BORDER_STYLE => {
+        switch (style) {
+            case 'none':
+                return BORDER_STYLE.NONE;
+            case 'dashed':
+                return BORDER_STYLE.DASHED;
+            case 'dotted':
+                return BORDER_STYLE.DOTTED;
+            case 'double':
+                return BORDER_STYLE.DOUBLE;
+        }
+        return BORDER_STYLE.SOLID;
+    }
+});
+
+export const borderTopStyle: IPropertyIdentValueDescriptor<BORDER_STYLE> = borderStyleForSide('top');
+export const borderRightStyle: IPropertyIdentValueDescriptor<BORDER_STYLE> = borderStyleForSide('right');
+export const borderBottomStyle: IPropertyIdentValueDescriptor<BORDER_STYLE> = borderStyleForSide('bottom');
+export const borderLeftStyle: IPropertyIdentValueDescriptor<BORDER_STYLE> = borderStyleForSide('left');

src/css/property-descriptors/border-width.ts

@@ -0,0 +1,20 @@
+import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, isDimensionToken} from '../syntax/parser';
+import {Context} from '../../core/context';
+const borderWidthForSide = (side: string): IPropertyValueDescriptor<number> => ({
+    name: `border-${side}-width`,
+    initialValue: '0',
+    type: PropertyDescriptorParsingType.VALUE,
+    prefix: false,
+    parse: (_context: Context, token: CSSValue): number => {
+        if (isDimensionToken(token)) {
+            return token.number;
+        }
+        return 0;
+    }
+});
+
+export const borderTopWidth: IPropertyValueDescriptor<number> = borderWidthForSide('top');
+export const borderRightWidth: IPropertyValueDescriptor<number> = borderWidthForSide('right');
+export const borderBottomWidth: IPropertyValueDescriptor<number> = borderWidthForSide('bottom');
+export const borderLeftWidth: IPropertyValueDescriptor<number> = borderWidthForSide('left');

src/css/property-descriptors/box-shadow.ts

@@ -0,0 +1,60 @@
+import {PropertyDescriptorParsingType, IPropertyListDescriptor} from '../IPropertyDescriptor';
+import {CSSValue, isIdentWithValue, parseFunctionArgs} from '../syntax/parser';
+import {ZERO_LENGTH} from '../types/length-percentage';
+import {color, Color} from '../types/color';
+import {isLength, Length} from '../types/length';
+import {Context} from '../../core/context';
+
+export type BoxShadow = BoxShadowItem[];
+interface BoxShadowItem {
+    inset: boolean;
+    color: Color;
+    offsetX: Length;
+    offsetY: Length;
+    blur: Length;
+    spread: Length;
+}
+
+export const boxShadow: IPropertyListDescriptor<BoxShadow> = {
+    name: 'box-shadow',
+    initialValue: 'none',
+    type: PropertyDescriptorParsingType.LIST,
+    prefix: false,
+    parse: (context: Context, tokens: CSSValue[]): BoxShadow => {
+        if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
+            return [];
+        }
+
+        return parseFunctionArgs(tokens).map((values: CSSValue[]) => {
+            const shadow: BoxShadowItem = {
+                color: 0x000000ff,
+                offsetX: ZERO_LENGTH,
+                offsetY: ZERO_LENGTH,
+                blur: ZERO_LENGTH,
+                spread: ZERO_LENGTH,
+                inset: false
+            };
+            let c = 0;
+            for (let i = 0; i < values.length; i++) {
+                const token = values[i];
+                if (isIdentWithValue(token, 'inset')) {
+                    shadow.inset = true;
+                } else if (isLength(token)) {
+                    if (c === 0) {
+                        shadow.offsetX = token;
+                    } else if (c === 1) {
+                        shadow.offsetY = token;
+                    } else if (c === 2) {
+                        shadow.blur = token;
+                    } else {
+                        shadow.spread = token;
+                    }
+                    c++;
+                } else {
+                    shadow.color = color.parse(context, token);
+                }
+            }
+            return shadow;
+        });
+    }
+};

src/css/property-descriptors/color.ts

@@ -0,0 +1,9 @@
+import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+
+export const color: IPropertyTypeValueDescriptor = {
+    name: `color`,
+    initialValue: 'transparent',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'color'
+};

src/css/property-descriptors/content.ts

@@ -0,0 +1,26 @@
+import {TokenType} from '../syntax/tokenizer';
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue} from '../syntax/parser';
+import {Context} from '../../core/context';
+
+export type Content = CSSValue[];
+
+export const content: IPropertyListDescriptor<Content> = {
+    name: 'content',
+    initialValue: 'none',
+    type: PropertyDescriptorParsingType.LIST,
+    prefix: false,
+    parse: (_context: Context, tokens: CSSValue[]) => {
+        if (tokens.length === 0) {
+            return [];
+        }
+
+        const first = tokens[0];
+
+        if (first.type === TokenType.IDENT_TOKEN && first.value === 'none') {
+            return [];
+        }
+
+        return tokens;
+    }
+};

src/css/property-descriptors/counter-increment.ts

@@ -0,0 +1,43 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, isNumberToken, nonWhiteSpace} from '../syntax/parser';
+import {TokenType} from '../syntax/tokenizer';
+import {Context} from '../../core/context';
+
+export interface COUNTER_INCREMENT {
+    counter: string;
+    increment: number;
+}
+
+export type CounterIncrement = COUNTER_INCREMENT[] | null;
+
+export const counterIncrement: IPropertyListDescriptor<CounterIncrement> = {
+    name: 'counter-increment',
+    initialValue: 'none',
+    prefix: true,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]) => {
+        if (tokens.length === 0) {
+            return null;
+        }
+
+        const first = tokens[0];
+
+        if (first.type === TokenType.IDENT_TOKEN && first.value === 'none') {
+            return null;
+        }
+
+        const increments = [];
+        const filtered = tokens.filter(nonWhiteSpace);
+
+        for (let i = 0; i < filtered.length; i++) {
+            const counter = filtered[i];
+            const next = filtered[i + 1];
+            if (counter.type === TokenType.IDENT_TOKEN) {
+                const increment = next && isNumberToken(next) ? next.number : 1;
+                increments.push({counter: counter.value, increment});
+            }
+        }
+
+        return increments;
+    }
+};

src/css/property-descriptors/counter-reset.ts

@@ -0,0 +1,36 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, isIdentToken, isNumberToken, nonWhiteSpace} from '../syntax/parser';
+import {Context} from '../../core/context';
+
+export interface COUNTER_RESET {
+    counter: string;
+    reset: number;
+}
+
+export type CounterReset = COUNTER_RESET[];
+
+export const counterReset: IPropertyListDescriptor<CounterReset> = {
+    name: 'counter-reset',
+    initialValue: 'none',
+    prefix: true,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]) => {
+        if (tokens.length === 0) {
+            return [];
+        }
+
+        const resets = [];
+        const filtered = tokens.filter(nonWhiteSpace);
+
+        for (let i = 0; i < filtered.length; i++) {
+            const counter = filtered[i];
+            const next = filtered[i + 1];
+            if (isIdentToken(counter) && counter.value !== 'none') {
+                const reset = next && isNumberToken(next) ? next.number : 0;
+                resets.push({counter: counter.value, reset});
+            }
+        }
+
+        return resets;
+    }
+};

src/css/property-descriptors/direction.ts

@@ -0,0 +1,23 @@
+import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
+
+export const enum DIRECTION {
+    LTR = 0,
+    RTL = 1
+}
+
+export const direction: IPropertyIdentValueDescriptor<DIRECTION> = {
+    name: 'direction',
+    initialValue: 'ltr',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, direction: string) => {
+        switch (direction) {
+            case 'rtl':
+                return DIRECTION.RTL;
+            case 'ltr':
+            default:
+                return DIRECTION.LTR;
+        }
+    }
+};

src/css/property-descriptors/display.ts

@@ -0,0 +1,117 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';
+export const enum DISPLAY {
+    NONE = 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 = number;
+
+export const display: IPropertyListDescriptor<Display> = {
+    name: 'display',
+    initialValue: 'inline-block',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]): Display => {
+        return tokens.filter(isIdentToken).reduce((bit, token) => {
+            return bit | parseDisplayValue(token.value);
+        }, DISPLAY.NONE);
+    }
+};
+
+const parseDisplayValue = (display: string): Display => {
+    switch (display) {
+        case 'block':
+        case '-webkit-box':
+            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':
+        case '-webkit-flex':
+            return DISPLAY.FLEX;
+        case 'grid':
+        case '-ms-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;
+};

src/css/property-descriptors/duration.ts

@@ -0,0 +1,14 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
+import {CSSValue, isDimensionToken} from '../syntax/parser';
+import {time} from '../types/time';
+
+export const duration: IPropertyListDescriptor<number[]> = {
+    name: 'duration',
+    initialValue: '0s',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (context: Context, tokens: CSSValue[]) => {
+        return tokens.filter(isDimensionToken).map((token) => time.parse(context, token));
+    }
+};

src/css/property-descriptors/float.ts

@@ -0,0 +1,29 @@
+import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
+export enum FLOAT {
+    NONE = 0,
+    LEFT = 1,
+    RIGHT = 2,
+    INLINE_START = 3,
+    INLINE_END = 4
+}
+
+export const float: IPropertyIdentValueDescriptor<FLOAT> = {
+    name: 'float',
+    initialValue: 'none',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, float: string) => {
+        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/css/property-descriptors/font-family.ts

@@ -0,0 +1,38 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue} from '../syntax/parser';
+import {TokenType} from '../syntax/tokenizer';
+import {Context} from '../../core/context';
+
+export type FONT_FAMILY = string;
+
+export type FontFamily = FONT_FAMILY[];
+
+export const fontFamily: IPropertyListDescriptor<FontFamily> = {
+    name: `font-family`,
+    initialValue: '',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]) => {
+        const accumulator: string[] = [];
+        const results: string[] = [];
+        tokens.forEach((token) => {
+            switch (token.type) {
+                case TokenType.IDENT_TOKEN:
+                case TokenType.STRING_TOKEN:
+                    accumulator.push(token.value);
+                    break;
+                case TokenType.NUMBER_TOKEN:
+                    accumulator.push(token.number.toString());
+                    break;
+                case TokenType.COMMA_TOKEN:
+                    results.push(accumulator.join(' '));
+                    accumulator.length = 0;
+                    break;
+            }
+        });
+        if (accumulator.length) {
+            results.push(accumulator.join(' '));
+        }
+        return results.map((result) => (result.indexOf(' ') === -1 ? result : `'${result}'`));
+    }
+};

src/css/property-descriptors/font-size.ts

@@ -0,0 +1,9 @@
+import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+
+export const fontSize: IPropertyTypeValueDescriptor = {
+    name: `font-size`,
+    initialValue: '0',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'length'
+};

src/css/property-descriptors/font-style.ts

@@ -0,0 +1,25 @@
+import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
+export enum FONT_STYLE {
+    NORMAL = 'normal',
+    ITALIC = 'italic',
+    OBLIQUE = 'oblique'
+}
+
+export const fontStyle: IPropertyIdentValueDescriptor<FONT_STYLE> = {
+    name: 'font-style',
+    initialValue: 'normal',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, overflow: string) => {
+        switch (overflow) {
+            case 'oblique':
+                return FONT_STYLE.OBLIQUE;
+            case 'italic':
+                return FONT_STYLE.ITALIC;
+            case 'normal':
+            default:
+                return FONT_STYLE.NORMAL;
+        }
+    }
+};