chore(release): 1.0.0-rc.6

Update release script (#2319 )
2023-08-10 21:13:10 +03:00 · 2020-08-08 10:19:43 +00:00 · 2020-08-08 18:18:10 +08:00 · 2020-08-08 08:46:37 +00:00 · 2020-08-08 16:45:26 +08:00 · 2020-08-08 16:00:41 +08:00
51 changed files with 7245 additions and 2006 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -11,7 +11,7 @@ insert_final_newline = true
 indent_style = space
 indent_size = 4

-[{azure-pipelines.yml,package.json, ci/*.yml}]
+[{*.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
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -0,0 +1,306 @@
+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
+      - name: Upload dist
+        uses: actions/upload-artifact@v2
+        with:
+          name: dist
+          path: dist
+      - name: Upload build
+        uses: actions/upload-artifact@v2
+        with:
+          name: build
+          path: build
+
+  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: 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
+  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
+  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.5.9
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: docs
+          SINGLE_COMMIT: true
+          CLEAN: true
--- a/.github/workflows/release.yml
+++ b/.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
--- a/.npmignore
+++ b/.npmignore
@ -1,4 +1,8 @@
+.github/
+.idea/
+.rpt2_cache
 build/
+configs/
 docs/
 examples/
 scripts/
@ -6,17 +10,13 @@ src/
 tests/
 www/
 tmp/
-.github/
 *.iml
 .babelrc
-.idea/
 .editorconfig
-.npmignore
 .eslintrc
-.travis.yml
-azure-pipelines.yml
-karma.js
+.npmignore
+.prettierrc
+jest.config.js
 karma.conf.js
-rollup.config.js
-webpack.config.js
-.rpt2_cache
+karma.js
+rollup.config.ts
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,7 +1,63 @@
-# Change Log
+# 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.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)


--- a/README.md
+++ b/README.md
@ -4,7 +4,7 @@ html2canvas
 [Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](http://stackoverflow.com/questions/tagged/html2canvas?sort=newest)

 [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 
-[![Build Status](https://dev.azure.com/niklasvh/html2canvas/_apis/build/status/niklasvh.html2canvas?branchName=master)](https://dev.azure.com/niklasvh/html2canvas/_build/latest?definitionId=1&branchName=master)
+![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)

@ -42,7 +42,7 @@ support [older browsers](http://caniuse.com/#search=promise) that do not nativel
 To render an `element` with html2canvas, simply call:
 ` html2canvas(element[, options]);`

-The function returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) containing the `<canvas>` element. Simply add a promise fullfillment handler to the promise using `then`:
+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);
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@ -1,170 +0,0 @@
-trigger:
- master
-
-jobs:
-  - job: Build
-    displayName: Build
-    pool:
-      vmImage: 'Ubuntu-16.04'
-    steps:
-    - task: NodeTool@0
-      inputs:
-        versionSpec: '10.x'
-      displayName: 'Install Node.js'
-    - task: Npm@0
-      inputs:
-        command: install
-    - script: npm run build
-      displayName: Build
-    - script: |
-       npm pack
-       mv html2canvas-*.tgz html2canvas.tgz
-       tar --list --verbose --file=html2canvas.tgz
-      displayName: Pack
-      name: pack
-    - task: PublishBuildArtifacts@1
-      inputs:
-        PathtoPublish: html2canvas.tgz
-        artifactName: npm
-    - task: PublishBuildArtifacts@1
-      inputs:
-        PathtoPublish: 'dist'
-        artifactName: dist
-    - task: PublishBuildArtifacts@1
-      inputs:
-        PathtoPublish: 'build'
-        artifactName: build
-
-  - job: Test
-    displayName: Tests
-    pool:
-      vmImage: 'Ubuntu-16.04'
-    steps:
-    - task: NodeTool@0
-      inputs:
-        versionSpec: '10.x'
-      displayName: 'Install Node.js'
-    - task: Npm@0
-      inputs:
-        command: install
-    - script: npm run build
-      displayName: Build
-    - script: npm run lint
-      displayName: Lint
-    - script: npm run unittest
-      displayName: Unit tests
-
-  - template: ci/browser-tests.yml
-    parameters:
-      name: Browser_Tests_Linux_Firefox_Stable
-      displayName: Linux Firefox Stable
-      vmImage: 'ubuntu-16.04'
-      targetBrowser: Firefox_Stable
-      xvfb: true
-
-  - template: ci/browser-tests.yml
-    parameters:
-      name: Browser_Tests_Linux_Chrome_Stable
-      displayName: Linux Chrome Stable
-      vmImage: 'ubuntu-16.04'
-      targetBrowser: Chrome_Stable
-      xvfb: true
-
-  - template: ci/browser-tests.yml
-    parameters:
-      name: Browser_Tests_OSX_Safari_IOS_9
-      displayName: iOS Simulator Safari 9
-      vmImage: 'macOS-10.13'
-      targetBrowser: Safari_IOS_9
-
-  - template: ci/browser-tests.yml
-    parameters:
-      name: Browser_Tests_OSX_Safari_IOS_10
-      displayName: iOS Simulator Safari 10
-      vmImage: 'macOS-10.13'
-      targetBrowser: Safari_IOS_10
-
-  - template: ci/browser-tests.yml
-    parameters:
-      name: Browser_Tests_OSX_Safari_IOS_12
-      displayName: iOS Simulator Safari 12
-      vmImage: 'macOS-10.13'
-      targetBrowser: Safari_IOS_12
-
-  - template: ci/browser-tests.yml
-    parameters:
-      name: Browser_Tests_OSX_Safari_Stable
-      displayName: OSX Safari Stable
-      vmImage: 'macOS-10.13'
-      targetBrowser: Safari_Stable
-
-  - template: ci/browser-tests.yml
-    parameters:
-      name: Browser_Tests_Windows_IE9
-      displayName: Windows Internet Explorer 9 (Emulated)
-      vmImage: 'vs2017-win2016'
-      targetBrowser: IE_9
-
-  - template: ci/browser-tests.yml
-    parameters:
-      name: Browser_Tests_Windows_IE10
-      displayName: Windows Internet Explorer 10 (Emulated)
-      vmImage: 'vs2017-win2016'
-      targetBrowser: IE_10
-
-  - template: ci/browser-tests.yml
-    parameters:
-      name: Browser_Tests_Windows_IE11
-      displayName: Windows Internet Explorer 11
-      vmImage: 'vs2017-win2016'
-      targetBrowser: IE_11
-
-  - job: Build_docs
-    displayName: Build docs
-    pool:
-      vmImage: 'Ubuntu-16.04'
-    dependsOn:
-      - Browser_Tests_Linux_Firefox_Stable
-      - Browser_Tests_Linux_Chrome_Stable
-      - Browser_Tests_OSX_Safari_IOS_9
-      - Browser_Tests_OSX_Safari_IOS_10
-      - Browser_Tests_OSX_Safari_IOS_12
-      - Browser_Tests_OSX_Safari_Stable
-      - Browser_Tests_Windows_IE9
-      - Browser_Tests_Windows_IE10
-      - Browser_Tests_Windows_IE11
-    steps:
-    - task: NodeTool@0
-      inputs:
-        versionSpec: '10.x'
-      displayName: 'Install Node.js'
-    - task: Npm@0
-      inputs:
-        command: install
-    - task: DownloadBuildArtifacts@0
-      displayName: 'Download test results'
-      inputs:
-        artifactName: ReftestResults
-        downloadPath: $(System.DefaultWorkingDirectory)
-    - task: DownloadBuildArtifacts@0
-      displayName: 'Download dist'
-      inputs:
-        artifactName: dist
-        downloadPath: $(System.DefaultWorkingDirectory)
-    - script: 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 && cp -R ReftestResults ./www/static/results
-      displayName: Copy reftests to docs website
-    - script: cp -R dist ./www/static/dist
-      displayName: Copy dist to docs website
-    - script: npm run build:reftest-result-list www/static/results/metadata www/src/results.json
-      displayName: Create reftest result index
-    - script: npm run build:reftest-preview
-      displayName: Create reftest previewer
-    - script: rm -rf www/static/results/metadata
-      displayName: Clean metadata folder
-    - script: npm run build && cd www && npm install && npm run build && cd ..
-      displayName: Build docs
-    - task: PublishBuildArtifacts@1
-      displayName: Upload docs website artifact
-      inputs:
-        PathtoPublish: 'www/public'
-        artifactName: docs
--- a/ci/browser-tests.yml
+++ b/ci/browser-tests.yml
@ -1,52 +0,0 @@
-parameters:
-  name: ''
-  vmImage: ''
-  targetBrowser: ''
-  xvfb: false
-
-jobs:
-  - job: ${{ parameters.name }}
-    displayName: ${{ parameters.displayName }}
-    pool:
-      vmImage: ${{ parameters.vmImage }}
-    variables:
-      TARGET_BROWSER: ${{ parameters.targetBrowser }}
-    dependsOn: Build
-    condition: succeeded()
-    steps:
-    - task: NodeTool@0
-      inputs:
-        versionSpec: '10.x'
-      displayName: 'Install Node.js'
-    - task: Npm@0
-      inputs:
-        command: install
-    - task: DownloadBuildArtifacts@0
-      displayName: 'Download library'
-      inputs:
-        artifactName: dist
-        downloadPath: $(System.DefaultWorkingDirectory)
-    - task: DownloadBuildArtifacts@0
-      displayName: 'Download testrunner'
-      inputs:
-        artifactName: build
-        downloadPath: $(System.DefaultWorkingDirectory)
-    - ${{ if not(eq(parameters.xvfb, 'true')) }}:
-      - script: npm run karma
-        displayName: 'Run browser tests'
-    - ${{ if eq(parameters.xvfb, 'true') }}:
-      - script: Xvfb :99 &
-        displayName: 'Start Xvfb'
-      - script: DISPLAY=:99 npm run karma
-        displayName: 'Run browser tests'
-    - task: PublishTestResults@2
-      condition: succeededOrFailed()
-      inputs:
-        testRunner: JUnit
-        testResultsFiles: 'tmp/junit/*.xml'
-    - task: PublishBuildArtifacts@1
-      displayName: Upload Screenshots
-      condition: succeededOrFailed()
-      inputs:
-        PathtoPublish: 'tmp/reftests'
-        artifactName: ReftestResults
--- a/examples/existing_canvas.html
+++ b/examples/existing_canvas.html
@ -42,7 +42,7 @@
    ctx.stroke();

    document.querySelector("button").addEventListener("click", function() {
-        html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
+        html2canvas(document.querySelector("#content"), {canvas: canvas, scale: 1}).then(function(canvas) {
            console.log('Drew on the existing canvas');
        });
    }, false);
--- a/jest.config.js
+++ b/jest.config.js
@ -0,0 +1,5 @@
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    roots: ['src']
+};
--- a/karma.conf.js
+++ b/karma.conf.js
@ -4,26 +4,43 @@
 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',
-            sdk: '12.1'
+            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'
        },
        SauceLabs_IE9: {
            base: 'SauceLabs',
@ -85,10 +102,10 @@ module.exports = function(config) {
            flags: ['-extoff']
        },
        Safari_Stable: {
-            base: 'Safari'
+            base: 'SafariNative'
        },
        Chrome_Stable: {
-            base: 'Chrome'
+            base: 'ChromeHeadless'
        },
        Firefox_Stable: {
            base: 'Firefox'
@ -99,7 +116,7 @@ module.exports = function(config) {

    const customLaunchers = ciLauncher ? {target_browser: ciLauncher} : {
        stable_chrome: {
-            base: 'Chrome'
+            base: 'ChromeHeadless'
        },
        stable_firefox: {
            base: 'Firefox'
@ -125,8 +142,8 @@ module.exports = function(config) {
        }
        baseBrowserDecorator(this);
        this.on('start', url => {
-            simctl.getDevices().then(devices => {
-                const d = devices[args.sdk].find(d => {
+            simctl.getDevices(args.sdk, args.platform).then(devices => {
+                const d = devices.find(d => {
                    return d.name === args.name;
                });

@ -208,6 +225,9 @@ module.exports = function(config) {
            outputDir: 'tmp/junit/'
        },

+        // web server listen address,
+        listenAddress,
+
        // web server port
        port,

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -6,7 +6,7 @@
  "module": "dist/html2canvas.esm.js",
  "typings": "dist/types/index.d.ts",
  "browser": "dist/html2canvas.js",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.6",
  "author": {
    "name": "Niklas von Hertzen",
    "email": "niklasvh@gmail.com",
@ -29,6 +29,7 @@
    "@babel/preset-flow": "^7.0.0",
    "@types/chai": "^4.1.7",
    "@types/glob": "^7.1.1",
+    "@types/jest": "^24.0.18",
    "@types/mocha": "^5.2.6",
    "@types/node": "^11.13.2",
    "@types/platform": "^1.3.2",
@ -38,7 +39,7 @@
    "appium-ios-simulator": "^3.10.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
-    "babel-plugin-add-module-exports": "^1.0.0",
+    "babel-plugin-add-module-exports": "^1.0.2",
    "babel-plugin-dev-expression": "^0.2.1",
    "base64-arraybuffer": "0.2.0",
    "body-parser": "^1.18.3",
@ -53,7 +54,8 @@
    "filenamify-url": "1.0.0",
    "glob": "7.1.3",
    "html2canvas-proxy": "1.0.1",
-    "jquery": "^3.4.0",
+    "jest": "^24.9.0",
+    "jquery": "^3.5.1",
    "js-polyfills": "^0.1.42",
    "karma": "^4.0.1",
    "karma-chrome-launcher": "^2.2.0",
@ -62,10 +64,10 @@
    "karma-ie-launcher": "^1.0.0",
    "karma-junit-reporter": "^1.2.0",
    "karma-mocha": "^1.3.0",
-    "karma-safari-launcher": "^1.0.0",
+    "karma-safarinative-launcher": "^1.1.0",
    "karma-sauce-launcher": "^2.0.2",
    "mocha": "^6.1.4",
-    "node-simctl": "^5.0.0",
+    "node-simctl": "^5.3.0",
    "platform": "1.3.4",
    "prettier": "1.17.0",
    "replace-in-file": "^3.0.0",
@ -78,14 +80,15 @@
    "rollup-plugin-typescript2": "^0.21.0",
    "serve-index": "^1.9.1",
    "slash": "1.0.0",
-    "standard-version": "^5.0.2",
+    "standard-version": "^8.0.2",
+    "ts-jest": "^24.1.0",
    "ts-loader": "^5.3.3",
    "ts-node": "^8.0.3",
    "typescript": "^3.4.3",
    "uglify-js": "^3.5.11",
    "uglifyjs-webpack-plugin": "^1.1.2",
    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0"
+    "webpack-cli": "^3.3.12"
  },
  "scripts": {
    "prebuild": "rimraf dist/ && rimraf build/ && mkdirp dist && mkdirp build",
@ -99,7 +102,7 @@
    "format": "prettier --write \"{src,www/src,tests,scripts}/**/*.ts\"",
    "lint": "eslint src/**/*.ts",
    "test": "npm run lint && npm run unittest && npm run karma",
-    "unittest": "mocha --require ts-node/register src/**/__tests__/*.ts",
+    "unittest": "jest",
    "karma": "node karma",
    "watch": "rollup -c rollup.config.ts -w",
    "watch:unittest": "mocha --require ts-node/register --watch-extensions ts -w src/**/__tests__/*.ts",
--- a/src/tests/index.ts
+++ b/src/tests/index.ts
@ -0,0 +1,91 @@
+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', () => {
+    // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
+    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({
+                backgroundColor: 0xffffffff,
+                scale: 1,
+                height: 50,
+                width: 200,
+                x: 0,
+                y: 0,
+                scrollX: 12,
+                scrollY: 34,
+                canvas: undefined
+            })
+        );
+        expect(DocumentCloner.destroy).toBeCalled();
+    });
+
+    it('should have transparent background with backgroundColor: null', async () => {
+        await html2canvas(element, {backgroundColor: null});
+        expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            expect.objectContaining({
+                backgroundColor: COLORS.TRANSPARENT
+            })
+        );
+    });
+
+    it('should use existing canvas when given as option', async () => {
+        // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
+        const canvas = {} as HTMLCanvasElement;
+        await html2canvas(element, {canvas});
+        expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            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.objectContaining({
+                backgroundColor: 0xffffffff,
+                scale: 1,
+                height: 50,
+                width: 200,
+                x: 0,
+                y: 0,
+                scrollX: 12,
+                scrollY: 34,
+                canvas: undefined
+            })
+        );
+        expect(DocumentCloner.destroy).not.toBeCalled();
+    });
+});
--- a/src/core/mocks/cache-storage.ts
+++ b/src/core/mocks/cache-storage.ts
@ -0,0 +1,22 @@
+class MockCache {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private readonly _cache: {[key: string]: Promise<any>};
+
+    constructor() {
+        this._cache = {};
+    }
+
+    addImage(src: string): Promise<void> {
+        const result = Promise.resolve();
+        this._cache[src] = result;
+        return result;
+    }
+}
+
+const current = new MockCache();
+
+export class CacheStorage {
+    static getInstance(): MockCache {
+        return current;
+    }
+}
--- a/src/core/mocks/features.ts
+++ b/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
+};
--- a/src/core/mocks/logger.ts
+++ b/src/core/mocks/logger.ts
@ -0,0 +1,17 @@
+export class Logger {
+    debug() {}
+
+    static create() {}
+
+    static destroy() {}
+
+    static getInstance(): Logger {
+        return logger;
+    }
+
+    info() {}
+
+    error() {}
+}
+
+const logger = new Logger();
--- a/src/core/tests/cache-storage.ts
+++ b/src/core/tests/cache-storage.ts
@ -1,6 +1,49 @@
 import {deepStrictEqual, fail} from 'assert';
 import {FEATURES} from '../features';
-import {createMockContext, proxy} from './mock-context';
+import {CacheStorage} from '../cache-storage';
+import {Logger} from '../logger';
+
+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);
+    Logger.create({id: 'test', enabled: false});
+    return CacheStorage.create('test', {
+        imageTimeout: 0,
+        useCORS: false,
+        allowTaint: false,
+        proxy,
+        ...opts
+    });
+};

 const images: ImageMock[] = [];
 const xhr: XMLHttpRequestMock[] = [];
--- a/src/core/tests/logger.ts
+++ b/src/core/tests/logger.ts
@ -0,0 +1,27 @@
+import {Logger} from '../logger';
+
+describe('logger', () => {
+    let infoSpy: any;
+
+    beforeEach(() => {
+        infoSpy = jest.spyOn(console, 'info').mockImplementation(() => {});
+    });
+
+    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();
+    });
+});
--- a/src/core/tests/mock-context.ts
+++ b/src/core/tests/mock-context.ts
@ -1,45 +0,0 @@
-import {CacheStorage} from '../cache-storage';
-import {URL} from 'url';
-import {Logger} from '../logger';
-
-export const proxy = 'http://example.com/proxy';
-
-export 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);
-    Logger.create('test');
-    return CacheStorage.create('test', {
-        imageTimeout: 0,
-        useCORS: false,
-        allowTaint: false,
-        proxy,
-        ...opts
-    });
-};
--- a/src/core/cache-storage.ts
+++ b/src/core/cache-storage.ts
@ -61,7 +61,7 @@ export class CacheStorage {
    }
 }

-interface ResourceOptions {
+export interface ResourceOptions {
    imageTimeout: number;
    useCORS: boolean;
    allowTaint: boolean;
--- a/src/core/logger.ts
+++ b/src/core/logger.ts
@ -1,22 +1,31 @@
+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: string) {
+    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: any) {
-        // eslint-disable-next-line no-console
-        if (typeof window !== 'undefined' && window.console && typeof console.debug === 'function') {
+        if (this.enabled) {
            // eslint-disable-next-line no-console
-            console.debug(this.id, `${this.getTime()}ms`, ...args);
-        } else {
-            this.info(...args);
+            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);
+            }
        }
    }

@ -24,8 +33,8 @@ export class Logger {
        return Date.now() - this.start;
    }

-    static create(id: string) {
-        Logger.instances[id] = new Logger(id);
+    static create(options: LoggerOptions) {
+        Logger.instances[options.id] = new Logger(options);
    }

    static destroy(id: string) {
@ -42,21 +51,25 @@ export class Logger {

    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    info(...args: any) {
-        // eslint-disable-next-line no-console
-        if (typeof window !== 'undefined' && window.console && typeof console.info === 'function') {
+        if (this.enabled) {
            // eslint-disable-next-line no-console
-            console.info(this.id, `${this.getTime()}ms`, ...args);
+            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
    error(...args: any) {
-        // eslint-disable-next-line no-console
-        if (typeof window !== 'undefined' && window.console && typeof console.error === 'function') {
+        if (this.enabled) {
            // eslint-disable-next-line no-console
-            console.error(this.id, `${this.getTime()}ms`, ...args);
-        } else {
-            this.info(...args);
+            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);
+            }
        }
    }
 }
--- a/src/css/layout/mocks/bounds.ts
+++ b/src/css/layout/mocks/bounds.ts
@ -0,0 +1,4 @@
+export const {Bounds} = jest.requireActual('../bounds');
+export const parseBounds = () => {
+    return new Bounds(0, 0, 200, 50);
+};
--- a/src/css/property-descriptors/tests/background-tests.ts
+++ b/src/css/property-descriptors/tests/background-tests.ts
@ -4,15 +4,13 @@ import {backgroundImage} from '../background-image';
 import {CSSImageType} from '../../types/image';
 import {pack} from '../../types/color';
 import {deg} from '../../types/angle';
-import {createMockContext} from '../../../core/__tests__/mock-context';
-import {CacheStorage} from '../../../core/cache-storage';
+
+jest.mock('../../../core/cache-storage');
+jest.mock('../../../core/features');

 const backgroundImageParse = (value: string) => backgroundImage.parse(Parser.parseValues(value));

 describe('property-descriptors', () => {
-    before(() => {
-        CacheStorage.attachInstance(createMockContext('http://example.com'));
-    });
    describe('background-image', () => {
        it('none', () => deepStrictEqual(backgroundImageParse('none'), []));

--- a/src/css/property-descriptors/background-image.ts
+++ b/src/css/property-descriptors/background-image.ts
@ -1,7 +1,7 @@
 import {TokenType} from '../syntax/tokenizer';
-import {ICSSImage, image} from '../types/image';
+import {ICSSImage, image, isSupportedImage} from '../types/image';
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
-import {CSSValue, nonFunctionArgSeperator} from '../syntax/parser';
+import {CSSValue, nonFunctionArgSeparator} from '../syntax/parser';

 export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = {
    name: 'background-image',
@ -19,6 +19,6 @@ export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = {
            return [];
        }

-        return tokens.filter(nonFunctionArgSeperator).map(image.parse);
+        return tokens.filter(value => nonFunctionArgSeparator(value) && isSupportedImage(value)).map(image.parse);
    }
 };
--- a/src/css/property-descriptors/display.ts
+++ b/src/css/property-descriptors/display.ts
@ -65,6 +65,7 @@ const parseDisplayValue = (display: string): Display => {
        case '-webkit-flex':
            return DISPLAY.FLEX;
        case 'grid':
+        case '-ms-grid':
            return DISPLAY.GRID;
        case 'ruby':
            return DISPLAY.RUBY;
--- a/src/css/syntax/parser.ts
+++ b/src/css/syntax/parser.ts
@ -149,7 +149,7 @@ export const isIdentWithValue = (token: CSSValue, value: string): boolean =>
    isIdentToken(token) && token.value === value;

 export const nonWhiteSpace = (token: CSSValue) => token.type !== TokenType.WHITESPACE_TOKEN;
-export const nonFunctionArgSeperator = (token: CSSValue) =>
+export const nonFunctionArgSeparator = (token: CSSValue) =>
    token.type !== TokenType.WHITESPACE_TOKEN && token.type !== TokenType.COMMA_TOKEN;

 export const parseFunctionArgs = (tokens: CSSValue[]): CSSValue[][] => {
--- a/src/css/syntax/tokenizer.ts
+++ b/src/css/syntax/tokenizer.ts
@ -316,7 +316,7 @@ export class Tokenizer {
    }

    write(chunk: string) {
-        this._value.push(...toCodePoints(chunk));
+        this._value = this._value.concat(toCodePoints(chunk));
    }

    read(): CSSToken[] {
@ -370,7 +370,6 @@ export class Tokenizer {
                    return this.consumeNumericToken();
                }
                break;
-                break;
            case COMMA:
                return COMMA_TOKEN;
            case HYPHEN_MINUS:
@ -472,7 +471,6 @@ export class Tokenizer {
                }
                this.reconsumeCodePoint(codePoint);
                return this.consumeIdentLikeToken();
-                break;
            case VERTICAL_LINE:
                if (this.peekCodePoint(0) === EQUALS_SIGN) {
                    this.consumeCodePoint();
@ -655,32 +653,51 @@ export class Tokenizer {
        }
    }

+    private consumeStringSlice(count: number): string {
+        const SLICE_STACK_SIZE = 60000;
+        let value = '';
+        while (count > 0) {
+            const amount = Math.min(SLICE_STACK_SIZE, count);
+            value += fromCodePoint(...this._value.splice(0, amount));
+            count -= amount;
+        }
+        this._value.shift();
+
+        return value;
+    }
+
    private consumeStringToken(endingCodePoint: number): StringValueToken | Token {
        let value = '';
+        let i = 0;

        do {
-            const codePoint = this.consumeCodePoint();
-            if (codePoint === EOF || codePoint === endingCodePoint) {
+            const codePoint = this._value[i];
+            if (codePoint === EOF || codePoint === undefined || codePoint === endingCodePoint) {
+                value += this.consumeStringSlice(i);
                return {type: TokenType.STRING_TOKEN, value};
            }

            if (codePoint === LINE_FEED) {
-                this.reconsumeCodePoint(codePoint);
+                this._value.splice(0, i);
                return BAD_STRING_TOKEN;
            }

            if (codePoint === REVERSE_SOLIDUS) {
-                const next = this.peekCodePoint(0);
-                if (next !== EOF) {
+                const next = this._value[i + 1];
+                if (next !== EOF && next !== undefined) {
                    if (next === LINE_FEED) {
-                        this.consumeCodePoint();
+                        value += this.consumeStringSlice(i);
+                        i = -1;
+                        this._value.shift();
                    } else if (isValidEscape(codePoint, next)) {
+                        value += this.consumeStringSlice(i);
                        value += fromCodePoint(this.consumeEscapedCodePoint());
+                        i = -1;
                    }
                }
-            } else {
-                value += fromCodePoint(codePoint);
            }
+
+            i++;
        } while (true);
    }

--- a/src/css/types/tests/image-tests.ts
+++ b/src/css/types/tests/image-tests.ts
@ -8,6 +8,9 @@ import {deg} from '../angle';
 const parse = (value: string) => image.parse(Parser.parseValue(value));
 const colorParse = (value: string) => color.parse(Parser.parseValue(value));

+jest.mock('../../../core/cache-storage');
+jest.mock('../../../core/features');
+
 describe('types', () => {
    describe('<image>', () => {
        describe('parsing', () => {
--- a/src/css/types/color.ts
+++ b/src/css/types/color.ts
@ -1,4 +1,4 @@
-import {CSSValue, nonFunctionArgSeperator} from '../syntax/parser';
+import {CSSValue, nonFunctionArgSeparator} from '../syntax/parser';
 import {TokenType} from '../syntax/tokenizer';
 import {ITypeDescriptor} from '../ITypeDescriptor';
 import {angle, deg} from './angle';
@ -86,7 +86,7 @@ const getTokenColorValue = (token: CSSValue, i: number): number => {
 };

 const rgb = (args: CSSValue[]): number => {
-    const tokens = args.filter(nonFunctionArgSeperator);
+    const tokens = args.filter(nonFunctionArgSeparator);

    if (tokens.length === 3) {
        const [r, g, b] = tokens.map(getTokenColorValue);
@ -121,7 +121,7 @@ function hue2rgb(t1: number, t2: number, hue: number): number {
 }

 const hsl = (args: CSSValue[]): number => {
-    const tokens = args.filter(nonFunctionArgSeperator);
+    const tokens = args.filter(nonFunctionArgSeparator);
    const [hue, saturation, lightness, alpha] = tokens;

    const h = (hue.type === TokenType.NUMBER_TOKEN ? deg(hue.number) : angle.parse(hue)) / (Math.PI * 2);
--- a/src/css/types/functions/-webkit-gradient.ts
+++ b/src/css/types/functions/-webkit-gradient.ts
@ -1,4 +1,4 @@
-import {CSSValue, isIdentToken, isNumberToken, nonFunctionArgSeperator, parseFunctionArgs} from '../../syntax/parser';
+import {CSSValue, isIdentToken, isNumberToken, nonFunctionArgSeparator, parseFunctionArgs} from '../../syntax/parser';
 import {
    CSSImageType,
    CSSLinearGradientImage,
@ -40,7 +40,7 @@ export const webkitGradient = (tokens: CSSValue[]): CSSLinearGradientImage | CSS
                const color = colorType.parse(firstToken.values[0]);
                stops.push({stop: HUNDRED_PERCENT, color});
            } else if (firstToken.name === 'color-stop') {
-                const values = firstToken.values.filter(nonFunctionArgSeperator);
+                const values = firstToken.values.filter(nonFunctionArgSeparator);
                if (values.length === 2) {
                    const color = colorType.parse(values[1]);
                    const stop = values[0];
--- a/src/css/types/functions/counter.ts
+++ b/src/css/types/functions/counter.ts
@ -30,25 +30,29 @@ export class CounterState {
    parse(style: CSSParsedCounterDeclaration): string[] {
        const counterIncrement = style.counterIncrement;
        const counterReset = style.counterReset;
+        let canReset = true;

        if (counterIncrement !== null) {
            counterIncrement.forEach(entry => {
                const counter = this.counters[entry.counter];
-                if (counter) {
+                if (counter && entry.increment !== 0) {
+                    canReset = false;
                    counter[Math.max(0, counter.length - 1)] += entry.increment;
                }
            });
        }

        const counterNames: string[] = [];
-        counterReset.forEach(entry => {
-            let counter = this.counters[entry.counter];
-            counterNames.push(entry.counter);
-            if (!counter) {
-                counter = this.counters[entry.counter] = [];
-            }
-            counter.push(entry.reset);
-        });
+        if (canReset) {
+            counterReset.forEach(entry => {
+                let counter = this.counters[entry.counter];
+                counterNames.push(entry.counter);
+                if (!counter) {
+                    counter = this.counters[entry.counter] = [];
+                }
+                counter.push(entry.reset);
+            });
+        }

        return counterNames;
    }
--- a/src/css/types/image.ts
+++ b/src/css/types/image.ts
@ -98,9 +98,11 @@ export const image: ITypeDescriptor<ICSSImage> = {
    }
 };

-const SUPPORTED_IMAGE_FUNCTIONS: {
-    [key: string]: (args: CSSValue[]) => ICSSImage;
-} = {
+export function isSupportedImage(value: CSSValue) {
+    return value.type !== TokenType.FUNCTION || SUPPORTED_IMAGE_FUNCTIONS[value.name];
+}
+
+const SUPPORTED_IMAGE_FUNCTIONS: Record<string, (args: CSSValue[]) => ICSSImage> = {
    'linear-gradient': linearGradient,
    '-moz-linear-gradient': prefixLinearGradient,
    '-ms-linear-gradient': prefixLinearGradient,
--- a/src/dom/mocks/document-cloner.ts
+++ b/src/dom/mocks/document-cloner.ts
@ -0,0 +1,16 @@
+export class DocumentCloner {
+    clonedReferenceElement?: HTMLElement;
+
+    constructor() {
+        // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
+        this.clonedReferenceElement = {} as HTMLElement;
+    }
+
+    toIFrame() {
+        return Promise.resolve({});
+    }
+
+    static destroy() {
+        return true;
+    }
+}
--- a/src/dom/document-cloner.ts
+++ b/src/dom/document-cloner.ts
@ -5,14 +5,16 @@ import {
    isElementNode,
    isHTMLElementNode,
    isIFrameElement,
+    isImageElement,
    isScriptElement,
    isSelectElement,
    isStyleElement,
+    isSVGElementNode,
    isTextareaElement,
    isTextNode
 } from './node-parser';
 import {Logger} from '../core/logger';
-import {isIdentToken, nonFunctionArgSeperator} from '../css/syntax/parser';
+import {isIdentToken, nonFunctionArgSeparator} from '../css/syntax/parser';
 import {TokenType} from '../css/syntax/tokenizer';
 import {CounterState, createCounterText} from '../css/types/functions/counter';
 import {LIST_STYLE_TYPE, listStyleType} from '../css/property-descriptors/list-style-type';
@ -71,7 +73,7 @@ export class DocumentCloner {
         if window url is about:blank, we can assign the url to current by writing onto the document
         */

-        const iframeLoad = iframeLoader(iframe).then(() => {
+        const iframeLoad = iframeLoader(iframe).then(async () => {
            this.scrolledElements.forEach(restoreNodeScroll);
            if (cloneWindow) {
                cloneWindow.scrollTo(windowSize.left, windowSize.top);
@ -91,6 +93,10 @@ export class DocumentCloner {
                return Promise.reject(`Error finding the ${this.referenceElement.nodeName} in the cloned document`);
            }

+            if (documentClone.fonts && documentClone.fonts.ready) {
+                await documentClone.fonts.ready;
+            }
+
            if (typeof onclone === 'function') {
                return Promise.resolve()
                    .then(() => onclone(documentClone))
@ -123,7 +129,15 @@ export class DocumentCloner {
            return this.createStyleClone(node);
        }

-        return node.cloneNode(false) as HTMLElement;
+        const clone = node.cloneNode(false) as HTMLElement;
+
+        // @ts-ignore
+        if (isImageElement(clone) && clone.loading === 'lazy') {
+            // @ts-ignore
+            clone.loading = 'eager';
+        }
+
+        return clone;
    }

    createStyleClone(node: HTMLStyleElement): HTMLStyleElement {
@ -355,7 +369,7 @@ export class DocumentCloner {
                        );
                    }
                } else if (token.name === 'counter') {
-                    const [counter, counterStyle] = token.values.filter(nonFunctionArgSeperator);
+                    const [counter, counterStyle] = token.values.filter(nonFunctionArgSeparator);
                    if (counter && isIdentToken(counter)) {
                        const counterState = this.counters.getCounterValue(counter.value);
                        const counterType =
@ -368,7 +382,7 @@ export class DocumentCloner {
                        );
                    }
                } else if (token.name === 'counters') {
-                    const [counter, delim, counterStyle] = token.values.filter(nonFunctionArgSeperator);
+                    const [counter, delim, counterStyle] = token.values.filter(nonFunctionArgSeparator);
                    if (counter && isIdentToken(counter)) {
                        const counterStates = this.counters.getCounterValues(counter.value);
                        const counterType =
@ -398,18 +412,34 @@ export class DocumentCloner {
                        );
                        break;
                    default:
-                    //    console.log('ident', token, declaration);
+                        // safari doesn't parse string tokens correctly because of lack of quotes
+                        anonymousReplacedElement.appendChild(document.createTextNode(token.value));
                }
            }
        });

        anonymousReplacedElement.className = `${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE} ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
-        clone.className +=
+        const newClassName =
            pseudoElt === PseudoElementType.BEFORE
                ? ` ${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}`
                : ` ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
+
+        if (isSVGElementNode(clone)) {
+            clone.className.baseValue += newClassName;
+        } else {
+            clone.className += newClassName;
+        }
+
        return anonymousReplacedElement;
    }
+
+    static destroy(container: HTMLIFrameElement): boolean {
+        if (container.parentNode) {
+            container.parentNode.removeChild(container);
+            return true;
+        }
+        return false;
+    }
 }

 enum PseudoElementType {
--- a/src/dom/node-parser.ts
+++ b/src/dom/node-parser.ts
@ -103,7 +103,8 @@ export const isTextNode = (node: Node): node is Text => node.nodeType === Node.T
 export const isElementNode = (node: Node): node is Element => node.nodeType === Node.ELEMENT_NODE;
 export const isHTMLElementNode = (node: Node): node is HTMLElement =>
    typeof (node as HTMLElement).style !== 'undefined';
-
+export const isSVGElementNode = (element: Element): element is SVGElement =>
+    typeof (element as SVGElement).className === 'object';
 export const isLIElement = (node: Element): node is HTMLLIElement => node.tagName === 'LI';
 export const isOLElement = (node: Element): node is HTMLOListElement => node.tagName === 'OL';
 export const isInputElement = (node: Element): node is HTMLInputElement => node.tagName === 'INPUT';
--- a/src/dom/replaced-elements/iframe-element-container.ts
+++ b/src/dom/replaced-elements/iframe-element-container.ts
@ -15,8 +15,8 @@ export class IFrameElementContainer extends ElementContainer {
    constructor(iframe: HTMLIFrameElement) {
        super(iframe);
        this.src = iframe.src;
-        this.width = parseInt(iframe.width, 10);
-        this.height = parseInt(iframe.height, 10);
+        this.width = parseInt(iframe.width, 10) || 0;
+        this.height = parseInt(iframe.height, 10) || 0;
        this.backgroundColor = this.styles.backgroundColor;
        try {
            if (
--- a/src/global.d.ts
+++ b/src/global.d.ts
@ -7,3 +7,7 @@ interface CSSStyleDeclaration {
 interface DocumentType extends Node, ChildNode {
    readonly internalSubset: string | null;
 }
+
+interface Document {
+    fonts: any;
+}
--- a/src/index.ts
+++ b/src/index.ts
@ -4,33 +4,32 @@ import {Parser} from './css/syntax/parser';
 import {CloneOptions, DocumentCloner} from './dom/document-cloner';
 import {isBodyElement, isHTMLElement, parseTree} from './dom/node-parser';
 import {Logger} from './core/logger';
-import {CacheStorage} from './core/cache-storage';
+import {CacheStorage, ResourceOptions} from './core/cache-storage';
 import {CanvasRenderer, RenderOptions} from './render/canvas/canvas-renderer';
 import {ForeignObjectRenderer} from './render/canvas/foreignobject-renderer';

 export type Options = CloneOptions &
-    RenderOptions & {
-        allowTaint: boolean;
-        backgroundColor: string;
+    RenderOptions &
+    ResourceOptions & {
+        backgroundColor: string | null;
        foreignObjectRendering: boolean;
-        imageTimeout: number;
        logging: boolean;
-        proxy?: string;
        removeContainer?: boolean;
-        useCORS: boolean;
    };

 const parseColor = (value: string): Color => color.parse(Parser.create(value).parseComponentValue());

-const html2canvas = (element: HTMLElement, options: Options): Promise<HTMLCanvasElement> => {
+const html2canvas = (element: HTMLElement, options: Partial<Options> = {}): Promise<HTMLCanvasElement> => {
    return renderElement(element, options);
 };

 export default html2canvas;

-CacheStorage.setContext(window);
+if (typeof window !== 'undefined') {
+    CacheStorage.setContext(window);
+}

-const renderElement = async (element: HTMLElement, opts: Options): Promise<HTMLCanvasElement> => {
+const renderElement = async (element: HTMLElement, opts: Partial<Options>): Promise<HTMLCanvasElement> => {
    const ownerDocument = element.ownerDocument;

    if (!ownerDocument) {
@ -43,50 +42,43 @@ const renderElement = async (element: HTMLElement, opts: Options): Promise<HTMLC
        throw new Error(`Document is not attached to a Window`);
    }

-    const defaultOptions = {
+    const instanceName = (Math.round(Math.random() * 1000) + Date.now()).toString(16);
+
+    const {width, height, left, top} =
+        isBodyElement(element) || isHTMLElement(element) ? parseDocumentSize(ownerDocument) : parseBounds(element);
+
+    const defaultResourceOptions = {
        allowTaint: false,
-        backgroundColor: '#ffffff',
        imageTimeout: 15000,
-        logging: true,
        proxy: undefined,
+        useCORS: false
+    };
+
+    const resourceOptions: ResourceOptions = {...defaultResourceOptions, ...opts};
+
+    const defaultOptions = {
+        backgroundColor: '#ffffff',
+        cache: opts.cache ? opts.cache : CacheStorage.create(instanceName, resourceOptions),
+        logging: true,
        removeContainer: true,
        foreignObjectRendering: false,
        scale: defaultView.devicePixelRatio || 1,
-        useCORS: false,
        windowWidth: defaultView.innerWidth,
        windowHeight: defaultView.innerHeight,
        scrollX: defaultView.pageXOffset,
-        scrollY: defaultView.pageYOffset
+        scrollY: defaultView.pageYOffset,
+        x: left,
+        y: top,
+        width: Math.ceil(width),
+        height: Math.ceil(height),
+        id: instanceName
    };

-    const options: Options = {...defaultOptions, ...opts};
+    const options: Options = {...defaultOptions, ...resourceOptions, ...opts};

    const windowBounds = new Bounds(options.scrollX, options.scrollY, options.windowWidth, options.windowHeight);

-    // http://www.w3.org/TR/css3-background/#special-backgrounds
-    const documentBackgroundColor = ownerDocument.documentElement
-        ? parseColor(getComputedStyle(ownerDocument.documentElement).backgroundColor as string)
-        : COLORS.TRANSPARENT;
-    const bodyBackgroundColor = ownerDocument.body
-        ? parseColor(getComputedStyle(ownerDocument.body).backgroundColor as string)
-        : COLORS.TRANSPARENT;
-
-    const backgroundColor =
-        element === ownerDocument.documentElement
-            ? isTransparent(documentBackgroundColor)
-                ? isTransparent(bodyBackgroundColor)
-                    ? options.backgroundColor
-                        ? parseColor(options.backgroundColor)
-                        : null
-                    : bodyBackgroundColor
-                : documentBackgroundColor
-            : options.backgroundColor
-            ? parseColor(options.backgroundColor)
-            : null;
-
-    const instanceName = (Math.round(Math.random() * 1000) + Date.now()).toString(16);
-    Logger.create(instanceName);
-    const cache = CacheStorage.create(instanceName, options);
+    Logger.create({id: instanceName, enabled: options.logging});
    Logger.getInstance(instanceName).debug(`Starting document clone`);
    const documentCloner = new DocumentCloner(element, {
        id: instanceName,
@ -102,22 +94,39 @@ const renderElement = async (element: HTMLElement, opts: Options): Promise<HTMLC

    const container = await documentCloner.toIFrame(ownerDocument, windowBounds);

-    const {width, height, left, top} =
-        isBodyElement(clonedElement) || isHTMLElement(clonedElement)
-            ? parseDocumentSize(ownerDocument)
-            : parseBounds(clonedElement);
+    // http://www.w3.org/TR/css3-background/#special-backgrounds
+    const documentBackgroundColor = ownerDocument.documentElement
+        ? parseColor(getComputedStyle(ownerDocument.documentElement).backgroundColor as string)
+        : COLORS.TRANSPARENT;
+    const bodyBackgroundColor = ownerDocument.body
+        ? parseColor(getComputedStyle(ownerDocument.body).backgroundColor as string)
+        : COLORS.TRANSPARENT;
+
+    const bgColor = opts.backgroundColor;
+    const defaultBackgroundColor =
+        typeof bgColor === 'string' ? parseColor(bgColor) : bgColor === null ? COLORS.TRANSPARENT : 0xffffffff;
+
+    const backgroundColor =
+        element === ownerDocument.documentElement
+            ? isTransparent(documentBackgroundColor)
+                ? isTransparent(bodyBackgroundColor)
+                    ? defaultBackgroundColor
+                    : bodyBackgroundColor
+                : documentBackgroundColor
+            : defaultBackgroundColor;

    const renderOptions = {
        id: instanceName,
-        cache,
+        cache: options.cache,
+        canvas: options.canvas,
        backgroundColor,
        scale: options.scale,
-        x: typeof options.x === 'number' ? options.x : left,
-        y: typeof options.y === 'number' ? options.y : top,
+        x: options.x,
+        y: options.y,
        scrollX: options.scrollX,
        scrollY: options.scrollY,
-        width: typeof options.width === 'number' ? options.width : Math.ceil(width),
-        height: typeof options.height === 'number' ? options.height : Math.ceil(height),
+        width: options.width,
+        height: options.height,
        windowWidth: options.windowWidth,
        windowHeight: options.windowHeight
    };
@ -131,7 +140,7 @@ const renderElement = async (element: HTMLElement, opts: Options): Promise<HTMLC
    } else {
        Logger.getInstance(instanceName).debug(`Document cloned, using computed rendering`);

-        CacheStorage.attachInstance(cache);
+        CacheStorage.attachInstance(options.cache);
        Logger.getInstance(instanceName).debug(`Starting DOM parsing`);
        const root = parseTree(clonedElement);
        CacheStorage.detachInstance();
@ -147,7 +156,7 @@ const renderElement = async (element: HTMLElement, opts: Options): Promise<HTMLC
    }

    if (options.removeContainer === true) {
-        if (!cleanContainer(container)) {
+        if (!DocumentCloner.destroy(container)) {
            Logger.getInstance(instanceName).error(`Cannot detach cloned iframe as it is not in the DOM anymore`);
        }
    }
@ -157,11 +166,3 @@ const renderElement = async (element: HTMLElement, opts: Options): Promise<HTMLC
    CacheStorage.destroy(instanceName);
    return canvas;
 };
-
-const cleanContainer = (container: HTMLIFrameElement): boolean => {
-    if (container.parentNode) {
-        container.parentNode.removeChild(container);
-        return true;
-    }
-    return false;
-};
--- a/src/render/canvas/canvas-renderer.ts
+++ b/src/render/canvas/canvas-renderer.ts
@ -39,11 +39,14 @@ import {SelectElementContainer} from '../../dom/elements/select-element-containe
 import {IFrameElementContainer} from '../../dom/replaced-elements/iframe-element-container';
 import {TextShadow} from '../../css/property-descriptors/text-shadow';

+export type RenderConfigurations = RenderOptions & {
+    backgroundColor: Color | null;
+};
+
 export interface RenderOptions {
    id: string;
    scale: number;
    canvas?: HTMLCanvasElement;
-    backgroundColor: Color | null;
    x: number;
    y: number;
    scrollX: number;
@ -60,18 +63,20 @@ const MASK_OFFSET = 10000;
 export class CanvasRenderer {
    canvas: HTMLCanvasElement;
    ctx: CanvasRenderingContext2D;
-    options: RenderOptions;
+    options: RenderConfigurations;
    private readonly _activeEffects: IElementEffect[] = [];
    private readonly fontMetrics: FontMetrics;

-    constructor(options: RenderOptions) {
+    constructor(options: RenderConfigurations) {
        this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
        this.options = options;
-        this.canvas.width = Math.floor(options.width * options.scale);
-        this.canvas.height = Math.floor(options.height * options.scale);
-        this.canvas.style.width = `${options.width}px`;
-        this.canvas.style.height = `${options.height}px`;
+        if (!options.canvas) {
+            this.canvas.width = Math.floor(options.width * options.scale);
+            this.canvas.height = Math.floor(options.height * options.scale);
+            this.canvas.style.width = `${options.width}px`;
+            this.canvas.style.height = `${options.height}px`;
+        }
        this.fontMetrics = new FontMetrics(document);
        this.ctx.scale(this.options.scale, this.options.scale);
        this.ctx.translate(-options.x + options.scrollX, -options.y + options.scrollY);
@ -303,17 +308,19 @@ export class CanvasRenderer {
            });

            const canvas = await iframeRenderer.render(container.tree);
-            this.ctx.drawImage(
-                canvas,
-                0,
-                0,
-                container.width,
-                container.width,
-                container.bounds.left,
-                container.bounds.top,
-                container.bounds.width,
-                container.bounds.height
-            );
+            if (container.width && container.height) {
+                this.ctx.drawImage(
+                    canvas,
+                    0,
+                    0,
+                    container.width,
+                    container.height,
+                    container.bounds.left,
+                    container.bounds.top,
+                    container.bounds.width,
+                    container.bounds.height
+                );
+            }
        }

        if (container instanceof InputElementContainer) {
@ -573,8 +580,10 @@ export class CanvasRenderer {

                ctx.fillStyle = gradient;
                ctx.fillRect(0, 0, width, height);
-                const pattern = this.ctx.createPattern(canvas, 'repeat') as CanvasPattern;
-                this.renderRepeat(path, pattern, x, y);
+                if (width > 0 && height > 0) {
+                    const pattern = this.ctx.createPattern(canvas, 'repeat') as CanvasPattern;
+                    this.renderRepeat(path, pattern, x, y);
+                }
            } else if (isRadialGradient(backgroundImage)) {
                const [path, left, top, width, height] = calculateBackgroundRendering(container, index, [
                    null,
@ -694,8 +703,9 @@ export class CanvasRenderer {
        let side = 0;
        for (const border of borders) {
            if (border.style !== BORDER_STYLE.NONE && !isTransparent(border.color)) {
-                await this.renderBorder(border.color, side++, paint.curves);
+                await this.renderBorder(border.color, side, paint.curves);
            }
+            side++;
        }
    }

--- a/src/render/canvas/foreignobject-renderer.ts
+++ b/src/render/canvas/foreignobject-renderer.ts
@ -1,4 +1,4 @@
-import {RenderOptions} from './canvas-renderer';
+import {RenderConfigurations} from './canvas-renderer';
 import {Logger} from '../../core/logger';
 import {createForeignObjectSVG} from '../../core/features';
 import {asString} from '../../css/types/color';
@ -6,9 +6,9 @@ import {asString} from '../../css/types/color';
 export class ForeignObjectRenderer {
    canvas: HTMLCanvasElement;
    ctx: CanvasRenderingContext2D;
-    options: RenderOptions;
+    options: RenderConfigurations;

-    constructor(options: RenderOptions) {
+    constructor(options: RenderConfigurations) {
        this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
        this.options = options;
--- a/src/render/stacking-context.ts
+++ b/src/render/stacking-context.ts
@ -104,8 +104,11 @@ const parseStackTree = (
                    parentStack.negativeZIndex.some((current, i) => {
                        if (order > current.element.container.styles.zIndex.order) {
                            index = i;
+                            return false;
+                        } else if (index > 0) {
                            return true;
                        }
+
                        return false;
                    });
                    parentStack.negativeZIndex.splice(index, 0, stack);
@ -114,6 +117,8 @@ const parseStackTree = (
                    parentStack.positiveZIndex.some((current, i) => {
                        if (order > current.element.container.styles.zIndex.order) {
                            index = i + 1;
+                            return false;
+                        } else if (index > 0) {
                            return true;
                        }

--- a/tests/reftests/border/solid.html
+++ b/tests/reftests/border/solid.html
@ -40,6 +40,12 @@
          border-bottom-width: 50px;
      }

+      .box6 {
+          border-style: none solid none solid;
+          border-color: #807d32;
+          border-width: 50px;
+      }
+
      html {
        background: #3a84c3;
      }
@ -51,5 +57,6 @@
    <div class="box3">&nbsp;</div>
    <div class="box4">&nbsp;</div>
    <div class="box5">&nbsp;</div>
+    <div class="box6">&nbsp;</div>
  </body>
 </html>
--- a/tests/reftests/images/images.html
+++ b/tests/reftests/images/images.html
@ -7,6 +7,7 @@
  </head>
  <body>
    <img src="../../assets/image.jpg" />
+    <img src="../../assets/image.jpg" loading="lazy" />
    <img src="../../assets/image.jpg" style="width:50px;height:400px;" />
    <img src="../../assets/image.jpg" style="width:500px;"  />
    <img src="../../assets/image.jpg" style="width:100px;border-radius:50px;"  />
--- a/tests/reftests/images/svg/native_only.html
+++ b/tests/reftests/images/svg/native_only.html
@ -11,13 +11,16 @@
        body {
            font-family: Arial;
        }
+        svg:before {
+            content: " ";
+        }
    </style>
 </head>
 <body>
 <div>
    <img src="../../../assets/image.svg" />
    <img width="200" height="200" src='data:image/svg+xml,<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="306" height="296"><defs id="defs4" /><g transform="translate(-162.46995,-477.2863)" id="layer1"><path d="m 314.15745,481.69558 c -59.20089,0.53774 -114.80979,36.72219 -137.3125,95.34375 -29.39129,76.56693 8.83932,162.45246 85.40625,191.84375 l 34.03125,-88.6875 c -20.0678,-7.71358 -34.3125,-27.15324 -34.3125,-49.9375 0,-29.54723 23.95277,-53.5 53.5,-53.5 29.54723,0 53.5,23.95277 53.5,53.5 0,22.78426 -14.2447,42.22392 -34.3125,49.9375 l 34.03125,88.6875 c 39.29085,-15.08234 70.3239,-46.1154 85.40625,-85.40625 29.39129,-76.56693 -8.83932,-162.48371 -85.40625,-191.875 -17.94537,-6.88859 -36.40853,-10.07087 -54.53125,-9.90625 z" id="path2830" style="fill:#40aa54;fill-opacity:1;stroke:#20552a;stroke-width:7.99999952;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></g></svg>' />
-    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="306" height="296" id="svg2">
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="306" height="296" id="svg2" class="test">
        <defs id="defs4"/>
        <g transform="translate(-162.46995,-477.2863)" id="layer1">
            <path d="m 314.15745,481.69558 c -59.20089,0.53774 -114.80979,36.72219 -137.3125,95.34375 -29.39129,76.56693 8.83932,162.45246 85.40625,191.84375 l 34.03125,-88.6875 c -20.0678,-7.71358 -34.3125,-27.15324 -34.3125,-49.9375 0,-29.54723 23.95277,-53.5 53.5,-53.5 29.54723,0 53.5,23.95277 53.5,53.5 0,22.78426 -14.2447,42.22392 -34.3125,49.9375 l 34.03125,88.6875 c 39.29085,-15.08234 70.3239,-46.1154 85.40625,-85.40625 29.39129,-76.56693 -8.83932,-162.48371 -85.40625,-191.875 -17.94537,-6.88859 -36.40853,-10.07087 -54.53125,-9.90625 z"
--- a/tests/reftests/text/fontawesome.html
+++ b/tests/reftests/text/fontawesome.html
@ -3,7 +3,8 @@
 <head lang="en">
    <meta charset="UTF-8">
    <title>fontawesome icons</title>
-    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet">
+    <link href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css" rel="stylesheet">
    <script type="text/javascript" src="../../test.js"></script>
    <style>
        body {
--- a/tests/reftests/zindex/z-index19.html
+++ b/tests/reftests/zindex/z-index19.html
@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>z-index19</title>
+    <style>
+        .canvas-view {
+            display: flex;
+            flex-direction: row;
+        }
+
+        .main {
+            position: relative;
+            width: 500px;
+            height: 500px;
+            margin-right: 50px;
+        }
+
+        .div1 {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: red;
+        }
+
+        .div2 {
+            position: absolute;
+            z-index: 2;
+            top: 100px;
+            left: 100px;
+            bottom: 0;
+            right: 0;
+            background-color: green;
+        }
+
+        .div3 {
+            position: absolute;
+            z-index: 3;
+            top: 200px;
+            left: 200px;
+            bottom: 0;
+            right: 0;
+            background-color: blue;
+        }
+
+        .div4 {
+            position: absolute;
+            z-index: 4;
+            top: 300px;
+            left: 300px;
+            bottom: 0;
+            right: 0;
+            background-color: white;
+        }
+    </style>
+    <script type="text/javascript" src="../../test.js"></script>
+</head>
+<body>
+<div class="canvas-view" id="my-home">
+    <div class="main" id="my-div">
+        <div class="div1"></div>
+        <div class="div2"></div>
+        <div class="div3"></div>
+        <div class="div4"></div>
+    </div>
+</div>
+</body>
+</html>
--- a/tests/rollup.config.ts
+++ b/tests/rollup.config.ts
@ -36,7 +36,7 @@ export default {
        // Allow json resolution
        json(),
        // Compile TypeScript files
-        typescript({useTsconfigDeclarationDir: true}),
+        typescript({useTsconfigDeclarationDir: true, tsconfig: resolve(__dirname, 'tsconfig.json')}),
        // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
        commonjs({
            include: 'node_modules/**',
--- a/tests/tsconfig.json
+++ b/tests/tsconfig.json
@ -0,0 +1,6 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "types": ["node", "mocha"]
+    }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -7,7 +7,7 @@
        "strictNullChecks": true,
        "strictPropertyInitialization": true,
        "resolveJsonModule": true,
-        "typeRoots": [ "./types", "./node_modules/@types"],
+        "types": ["node", "jest"],
        "target": "es5",
        "lib": ["es2015", "dom"],
        "sourceMap": true,
--- a/www/src/preview.ts
+++ b/www/src/preview.ts
@ -42,6 +42,10 @@ function onBrowserChange(browserTest: Test) {
        previewImage.src = `/results/${browserTest.screenshot}.png`;
        if (browserTest.devicePixelRatio > 1) {
            previewImage.style.transform = `scale(${1 / browserTest.devicePixelRatio})`;
+            previewImage.style.transformOrigin = 'top left';
+        } else {
+            previewImage.style.transform = '';
+            previewImage.style.transformOrigin = '';
        }
    }
 }
Author	SHA1	Message	Date
CI	d7d17adf70	chore(release): 1.0.0-rc.6	2020-08-08 10:19:43 +00:00
Niklas von Hertzen	60f6b85083	Update release script (#2319 )	2020-08-08 18:18:10 +08:00
CI	e3237dc4ce	chore(release): 1.0.0-rc.6	2020-08-08 08:46:37 +00:00
Niklas von Hertzen	659f820170	update standard-release (#2317 )	2020-08-08 16:45:26 +08:00
Niklas von Hertzen	f7b39c0914	update npm build (#2316 )	2020-08-08 16:00:41 +08:00
Niklas von Hertzen	cd77e1cea1	update dependencies (#2315 )	2020-08-08 15:37:50 +08:00
Niklas von Hertzen	f23e6f6f26	fix: image loading="lazy" fix #2312 (#2314 )	2020-08-08 15:37:34 +08:00
Niklas von Hertzen	04e145b5eb	Update CI	2020-08-08 14:54:12 +08:00
Niklas von Hertzen	003cfd9073	Update ci	2020-08-02 16:34:56 +08:00
Niklas von Hertzen	9749bb1fb1	Update ci (#2307 )	2020-08-02 16:14:29 +08:00
Niklas von Hertzen	3c2c826ad7	Update ci (#2306 )	2020-08-02 15:49:02 +08:00
Niklas von Hertzen	e496047888	Update ci.yml	2020-08-02 14:39:09 +08:00
Niklas von Hertzen	51de34787a	ci: build docs (#2305 )	2020-07-31 19:21:02 +08:00
Niklas von Hertzen	6c86f5f653	Update ci.yml	2020-07-31 00:57:23 +08:00
Niklas von Hertzen	8f4ec8a0c0	Update ci.yml	2020-07-31 00:18:23 +08:00
Niklas von Hertzen	51aadbb7f1	Update ci.yml	2020-07-30 23:38:22 +08:00
Niklas von Hertzen	8af7745e80	Update release.yml	2020-07-30 23:20:26 +08:00
Niklas von Hertzen	610997923a	Create release.yml	2020-07-30 23:11:27 +08:00
Niklas von Hertzen	d844328e0a	Update ci.yml	2020-07-29 18:52:46 +08:00
Niklas von Hertzen	e0d536777a	Update new ios simulators	2020-07-29 18:47:43 +08:00
Niklas von Hertzen	cc19105c91	Update ci.yml	2020-07-29 18:30:41 +08:00
Niklas von Hertzen	2d30554b2a	Update ci.yml	2020-07-29 18:17:46 +08:00
Niklas von Hertzen	401df79087	Update ci.yml	2020-07-29 18:16:52 +08:00
Niklas von Hertzen	7cb0019594	Update ci.yml	2020-07-28 23:59:49 +08:00
Niklas von Hertzen	ebe9eccbd2	Update ci.yml	2020-07-28 23:48:05 +08:00
Niklas von Hertzen	df44c86f68	Update ci.yml	2020-07-28 23:47:14 +08:00
Niklas von Hertzen	e083e229c9	Update ci.yml	2020-07-28 23:07:29 +08:00
Niklas von Hertzen	b308cbd998	Create ci.yml	2020-07-28 22:59:26 +08:00
James Addison	4dd4a69c7a	tests(reftests): Upgrade to fontawesome v5.13.0 (#2202 ) * support font-family names with numbers in (e.g. Font Awesome 5) * check for spaces in font family names first so generic font names don't get wrapped in quotes * Update reftest to use fontawesome 5.13.0 * Add fontawesome v4 shims * Revert "Merge remote-tracking branch 'grahamkane/master' into issue-1948-test-coverage" This reverts commit `5211ab4065`, reversing changes made to `ae0bd29d37`. * Revert "Revert "Merge remote-tracking branch 'grahamkane/master' into issue-1948-test-coverage"" This reverts commit `4911fe25f4`. * Revert "Merge remote-tracking branch 'grahamkane/master' into issue-1948-test-coverage" This reverts commit `5211ab4065`, reversing changes made to `ae0bd29d37`. Co-authored-by: Graham Kane <grahamkane@gmail.com>	2020-04-19 16:46:25 +08:00
James Addison	c366e8790d	ci: Azure Pipelines: upgrade from macOS 10.13 -> 10.14 (#2204 )	2020-04-15 13:03:04 +08:00
James Addison	ae5f866b37	Migrate base Chrome profiles to ChromeHeadless (#2203 )	2020-04-14 18:15:13 +08:00
Niklas von Hertzen	f139b513c5	fix: #1868 Clone node, Setting className for SVG element raises error (#2079 ) * fix: #1868 Clone node, Setting className for SVG element raises error * fix: svg element type information	2019-11-25 20:55:28 -08:00
Liwen Guo	e4d52a1ac6	Fix error in server-side rendering (#2039 )	2019-11-25 20:16:07 -08:00
CI	8c04f94bc9	chore(release): 1.0.0-rc.5	2019-09-27 13:58:48 +00:00
Niklas von Hertzen	3f599103fb	fix: safari pseudo element content parsing (#2018 ) * fix: await for fonts to be ready in document clone * fix: safari pseudo element content parsing * fix: safari counter-increment / counter-reset	2019-09-27 06:42:13 -07:00
Niklas von Hertzen	076492042a	fix: using existing canvas option (#2017 ) * refactor: document cleanup to DocumentCloner * fix: using existing canvas option * fix: lint errors * fix: preview transform origin	2019-09-25 23:34:18 -07:00
Niklas von Hertzen	34b06d6365	fix: correctly respect logging option (#2013 ) * test: update to using jest for unit tests * remove mocha types * revert to using mocha for testrunner.ts * add logger unit testing * fix reftest previewer scaling * fix LoggerOptions to interface * fix linting	2019-09-25 03:37:59 -07:00
CI	99f105cb66	chore(release): 1.0.0-rc.4	2019-09-22 05:11:36 +00:00
Niklas von Hertzen	7d3456b78c	fix: null backgroundColor option as transparent (#2012 )	2019-09-21 21:45:05 -07:00
Niklas von Hertzen	00555cf1ef	fix: nested z-index ordering (#2011 ) * fix zindex bug * test: add z-index reftest for #1978 * fix: z-index ordering early exit	2019-09-21 21:12:36 -07:00
Niklas von Hertzen	eedb81ef9e	fix: correctly render partial borders (fix #1920 ) (#2010 )	2019-09-21 20:33:54 -07:00
RickBetting	d4b58960dc	Update canvas-renderer.ts (#2004 ) * Update canvas-renderer.ts Fixed an issue were a page wouldn't render. Line 581 (now 582) threw exception: "Uncaught (in promise) DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0." * Update canvas-renderer.ts	2019-09-21 19:33:48 -07:00
David Molnar	ee3ca35636	add missing -ms-grid display property to support IE grid layouts (#1926 )	2019-09-21 19:32:42 -07:00
Jason Cooke	9a63797aa7	docs: fix typo (#1864 )	2019-06-17 21:24:34 -07:00
Radics Laszlo	81dcf7b6be	fix: zero size iframe rendering (#1863 )	2019-06-17 21:23:45 -07:00
Valentin	61f4819e02	feat: ignore unsupported image functions (#1873 )	2019-06-17 21:22:05 -07:00
CI	86a650bfd5	chore(release): 1.0.0-rc.3	2019-05-30 05:31:15 +00:00
Niklas von Hertzen	cbaecdca28	fix: stack exceeding for css tokenizer (#1862 ) * fix: stack exceeding for css tokenizer * fix: token string recursion	2019-05-29 22:26:51 -07:00
Niklas von Hertzen	cae44a6f0a	fix: typescript options type definition (#1861 )	2019-05-29 21:11:50 -07:00