chore(release): 1.1.5

* fix: emoji line breaking (fix #1813)

* test: fix text.html reftest

.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

.eslintrc

@@ -2,8 +2,7 @@
     "parser": "@typescript-eslint/parser",
     "extends":  [
         "plugin:@typescript-eslint/recommended",
-        "prettier/@typescript-eslint",
-        "plugin:prettier/recommended",
+        "prettier"
     ],
     "parserOptions": {
         "project": "./tsconfig.json",

.github/workflows/ci.yml

@@ -0,0 +1,351 @@
+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: 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

.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

CHANGELOG.md

@@ -1,7 +1,188 @@
-# 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.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)
 
 

README.md

@@ -1,10 +1,10 @@
 html2canvas
 ===========
 
-[Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](http://stackoverflow.com/questions/tagged/html2canvas?sort=newest)
+[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) 
-[![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);

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

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

docs/features.md

@@ -12,13 +12,13 @@ Below is a list of all the supported CSS properties and values.
        - url()
        - linear-gradient()
        - radial-gradient()
-   - background-origin 
+   - background-origin
    - background-position
-   - background-size   
+   - background-size
  - border
    - border-color
    - border-radius
-   - border-style (**Only supports `solid`**)
+   - border-style
    - border-width
  - bottom
  - box-sizing
@@ -50,6 +50,7 @@ Below is a list of all the supported CSS properties and values.
  - overflow
  - overflow-wrap
  - padding
+ - paint-order
  - position
  - right
  - text-align
@@ -58,17 +59,18 @@ Below is a list of all the supported CSS properties and values.
    - text-decoration-line
    - text-decoration-style (**Only supports `solid`**)
  - text-shadow
- - text-transform 
+ - 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)

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);

jest.config.js

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

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,
 

karma.js

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

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.3",
+  "version": "1.1.5",
   "author": {
     "name": "Niklas von Hertzen",
     "email": "niklasvh@gmail.com",
@@ -27,65 +27,74 @@
     "@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/mocha": "^5.2.6",
-    "@types/node": "^11.13.2",
-    "@types/platform": "^1.3.2",
+    "@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": "^1.7.0",
-    "@typescript-eslint/parser": "^1.7.0",
+    "@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.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",
+    "body-parser": "^1.19.0",
     "chai": "4.1.1",
     "chromeless": "^1.5.2",
-    "cors": "2.8.4",
-    "es6-promise": "^4.2.6",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^4.2.0",
-    "eslint-plugin-prettier": "3.0.1",
-    "express": "^4.16.4",
+    "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",
-    "jquery": "^3.4.0",
+    "jest": "^27.0.6",
+    "jest-image-snapshot": "^4.5.1",
+    "jquery": "^3.5.1",
     "js-polyfills": "^0.1.42",
-    "karma": "^4.0.1",
-    "karma-chrome-launcher": "^2.2.0",
+    "karma": "^6.3.2",
+    "karma-chrome-launcher": "^3.1.0",
     "karma-edge-launcher": "^0.4.2",
-    "karma-firefox-launcher": "^1.1.0",
+    "karma-firefox-launcher": "^2.1.0",
     "karma-ie-launcher": "^1.0.0",
-    "karma-junit-reporter": "^1.2.0",
-    "karma-mocha": "^1.3.0",
-    "karma-safari-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": "^6.1.4",
-    "node-simctl": "^5.0.0",
-    "platform": "1.3.4",
-    "prettier": "1.17.0",
+    "mocha": "^9.0.2",
+    "node-simctl": "^5.3.0",
+    "platform": "^1.3.6",
+    "prettier": "^2.3.2",
     "replace-in-file": "^3.0.0",
-    "rimraf": "2.6.1",
-    "rollup": "^1.10.1",
-    "rollup-plugin-commonjs": "^9.3.4",
-    "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-node-resolve": "^4.2.3",
-    "rollup-plugin-sourcemaps": "^0.4.2",
-    "rollup-plugin-typescript2": "^0.21.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": "^5.0.2",
-    "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"
+    "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",
@@ -97,17 +106,18 @@
     "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",
+    "lint": "eslint src/**/*.ts --max-warnings 0",
     "test": "npm run lint && npm run unittest && npm run karma",
-    "unittest": "mocha --require ts-node/register src/**/__tests__/*.ts",
-    "karma": "node 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": "node tests/server"
+    "start": "ts-node tests/server --port=8080 --cors=8081"
   },
   "homepage": "https://html2canvas.hertzen.com",
   "license": "MIT",
   "dependencies": {
-    "css-line-break": "1.1.1"
+    "css-line-break": "2.0.0"
   }
 }

rollup.config.ts

@@ -1,8 +1,8 @@
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 import sourceMaps from 'rollup-plugin-sourcemaps';
-import typescript from 'rollup-plugin-typescript2';
-import json from 'rollup-plugin-json';
+import typescript from '@rollup/plugin-typescript';
+import json from '@rollup/plugin-json';
 
 const pkg = require('./package.json');
 
@@ -30,7 +30,7 @@ export default {
         // Allow json resolution
         json(),
         // Compile TypeScript files
-        typescript({ useTsconfigDeclarationDir: true }),
+        typescript(),
         // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
         commonjs({
             include: 'node_modules/**'

scripts/create-reftest-list.ts

@@ -21,7 +21,7 @@ const outputPath = resolve(__dirname, '../', process.argv[3]);
 const ignoredTests = readFileSync(path)
     .toString()
     .split(/\r\n|\r|\n/)
-    .filter(l => l.length)
+    .filter((l) => l.length)
     .reduce((acc: {[key: string]: string[]}, l) => {
         const m = l.match(/^(\[(.+)\])?(.+)$/i);
         if (m) {

scripts/create-reftest-result-list.ts

@@ -17,7 +17,7 @@ const files = readdirSync(path);
 interface RefTestMetadata {}
 
 interface RefTestSingleMetadata extends RefTestMetadata {
-    test: string;
+    test?: string;
 }
 
 interface RefTestResults {
@@ -26,12 +26,14 @@ interface RefTestResults {
 
 const result: RefTestResults = files.reduce((result: RefTestResults, file) => {
     const json: RefTestSingleMetadata = JSON.parse(readFileSync(resolve(__dirname, path, file)).toString());
-    if (!result[json.test]) {
-        result[json.test] = [];
-    }
+    if (json.test) {
+        if (!result[json.test]) {
+            result[json.test] = [];
+        }
 
-    result[json.test].push(json);
-    delete json.test;
+        result[json.test].push(json);
+        delete json.test;
+    }
 
     return result;
 }, {});

src/__tests__/index.ts

@@ -0,0 +1,89 @@
+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({
+                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 () => {
+        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();
+    });
+});

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;
+    }
+}

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 {}
+}
+
+const logger = new Logger();

src/core/__tests__/cache-storage.ts

@@ -1,15 +1,58 @@
 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[] = [];
-const sleep = async (timeout: number) => await new Promise(resolve => setTimeout(resolve, timeout));
+const sleep = async (timeout: number) => await new Promise((resolve) => setTimeout(resolve, timeout));
 
 class ImageMock {
     src?: string;
     crossOrigin?: string;
-    onload?: () => {};
+    onload?: () => void;
     constructor() {
         images.push(this);
     }
@@ -22,8 +65,8 @@ class XMLHttpRequestMock {
     method?: string;
     url?: string;
     response?: string;
-    onload?: () => {};
-    ontimeout?: () => {};
+    onload?: () => void;
+    ontimeout?: () => void;
     constructor() {
         this.sent = false;
         this.status = 500;
@@ -63,7 +106,7 @@ const setFeatures = (opts: {[key: string]: boolean} = {}) => {
         SUPPORT_RESPONSE_TYPE: false
     };
 
-    Object.keys(defaults).forEach(key => {
+    Object.keys(defaults).forEach((key) => {
         Object.defineProperty(FEATURES, key, {
             value: typeof opts[key] === 'boolean' ? opts[key] : defaults[key],
             writable: true

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/__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
-    });
-};

src/core/cache-storage.ts

@@ -4,7 +4,7 @@ import {Logger} from './logger';
 export class CacheStorage {
     private static _caches: {[key: string]: Cache} = {};
     private static _link?: HTMLAnchorElement;
-    private static _origin: string = 'about:blank';
+    private static _origin = 'about:blank';
     private static _current: Cache | null = null;
 
     static create(name: string, options: ResourceOptions): Cache {
@@ -39,7 +39,7 @@ export class CacheStorage {
         return CacheStorage.getOrigin(src) === CacheStorage._origin;
     }
 
-    static setContext(window: Window) {
+    static setContext(window: Window): void {
         CacheStorage._link = window.document.createElement('a');
         CacheStorage._origin = CacheStorage.getOrigin(window.location.href);
     }
@@ -52,11 +52,11 @@ export class CacheStorage {
         return current;
     }
 
-    static attachInstance(cache: Cache) {
+    static attachInstance(cache: Cache): void {
         CacheStorage._current = cache;
     }
 
-    static detachInstance() {
+    static detachInstance(): void {
         CacheStorage._current = null;
     }
 }
@@ -87,7 +87,9 @@ export class Cache {
         }
 
         if (isBlobImage(src) || isRenderable(src)) {
-            this._cache[src] = this.loadImage(src);
+            (this._cache[src] = this.loadImage(src)).catch(() => {
+                // prevent unhandled rejection
+            });
             return result;
         }
 
@@ -106,10 +108,18 @@ export class Cache {
         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) && !useProxy && !useCORS) {
+        if (
+            !isSameOrigin &&
+            this._options.allowTaint === false &&
+            !isInlineImage(key) &&
+            !isBlobImage(key) &&
+            !useProxy &&
+            !useCORS
+        ) {
             return;
         }
 
@@ -169,7 +179,7 @@ export class Cache {
                     } else {
                         const reader = new FileReader();
                         reader.addEventListener('load', () => resolve(reader.result as string), false);
-                        reader.addEventListener('error', e => reject(e), false);
+                        reader.addEventListener('error', (e) => reject(e), false);
                         reader.readAsDataURL(xhr.response);
                     }
                 } else {
@@ -178,7 +188,8 @@ export class Cache {
             };
 
             xhr.onerror = reject;
-            xhr.open('GET', `${proxy}?url=${encodeURIComponent(src)}&responseType=${responseType}`);
+            const queryString = proxy.indexOf('?') > -1 ? '&' : '?';
+            xhr.open('GET', `${proxy}${queryString}url=${encodeURIComponent(src)}&responseType=${responseType}`);
 
             if (responseType !== 'text' && xhr instanceof XMLHttpRequest) {
                 xhr.responseType = responseType;

src/core/features.ts

@@ -90,7 +90,13 @@ const testForeignObject = (document: Document): Promise<boolean> => {
         .catch(() => false);
 };
 
-export const createForeignObjectSVG = (width: number, height: number, x: number, y: number, node: Node) => {
+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');
@@ -120,19 +126,19 @@ export const loadSerializedSVG = (svg: Node): Promise<HTMLImageElement> => {
 };
 
 export const FEATURES = {
-    get SUPPORT_RANGE_BOUNDS() {
+    get SUPPORT_RANGE_BOUNDS(): boolean {
         'use strict';
         const value = testRangeBounds(document);
         Object.defineProperty(FEATURES, 'SUPPORT_RANGE_BOUNDS', {value});
         return value;
     },
-    get SUPPORT_SVG_DRAWING() {
+    get SUPPORT_SVG_DRAWING(): boolean {
         'use strict';
         const value = testSVG(document);
         Object.defineProperty(FEATURES, 'SUPPORT_SVG_DRAWING', {value});
         return value;
     },
-    get SUPPORT_FOREIGNOBJECT_DRAWING() {
+    get SUPPORT_FOREIGNOBJECT_DRAWING(): Promise<boolean> {
         'use strict';
         const value =
             typeof Array.from === 'function' && typeof window.fetch === 'function'
@@ -141,19 +147,19 @@ export const FEATURES = {
         Object.defineProperty(FEATURES, 'SUPPORT_FOREIGNOBJECT_DRAWING', {value});
         return value;
     },
-    get SUPPORT_CORS_IMAGES() {
+    get SUPPORT_CORS_IMAGES(): boolean {
         'use strict';
         const value = testCORS();
         Object.defineProperty(FEATURES, 'SUPPORT_CORS_IMAGES', {value});
         return value;
     },
-    get SUPPORT_RESPONSE_TYPE() {
+    get SUPPORT_RESPONSE_TYPE(): boolean {
         'use strict';
         const value = testResponseType();
         Object.defineProperty(FEATURES, 'SUPPORT_RESPONSE_TYPE', {value});
         return value;
     },
-    get SUPPORT_CORS_XHR() {
+    get SUPPORT_CORS_XHR(): boolean {
         'use strict';
         const value = 'withCredentials' in new XMLHttpRequest();
         Object.defineProperty(FEATURES, 'SUPPORT_CORS_XHR', {value});

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') {
+    debug(...args: unknown[]): void {
+        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,11 +33,11 @@ export class Logger {
         return Date.now() - this.start;
     }
 
-    static create(id: string) {
-        Logger.instances[id] = new Logger(id);
+    static create(options: LoggerOptions): void {
+        Logger.instances[options.id] = new Logger(options);
     }
 
-    static destroy(id: string) {
+    static destroy(id: string): void {
         delete Logger.instances[id];
     }
 
@@ -41,22 +50,26 @@ 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') {
+    info(...args: unknown[]): void {
+        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') {
+    error(...args: unknown[]): void {
+        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);
+            }
         }
     }
 }

src/css/index.ts

@@ -73,6 +73,9 @@ import {counterIncrement} from './property-descriptors/counter-increment';
 import {counterReset} from './property-descriptors/counter-reset';
 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';
 
 export class CSSParsedDeclaration {
     backgroundClip: ReturnType<typeof backgroundClip.parse>;
@@ -125,6 +128,7 @@ export class CSSParsedDeclaration {
     paddingRight: LengthPercentage;
     paddingBottom: LengthPercentage;
     paddingLeft: LengthPercentage;
+    paintOrder: ReturnType<typeof paintOrder.parse>;
     position: ReturnType<typeof position.parse>;
     textAlign: ReturnType<typeof textAlign.parse>;
     textDecorationColor: Color;
@@ -134,6 +138,8 @@ export class CSSParsedDeclaration {
     transform: ReturnType<typeof transform.parse>;
     transformOrigin: ReturnType<typeof transformOrigin.parse>;
     visibility: ReturnType<typeof visibility.parse>;
+    webkitTextStrokeColor: Color;
+    webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>;
     wordBreak: ReturnType<typeof wordBreak.parse>;
     zIndex: ReturnType<typeof zIndex.parse>;
 
@@ -189,15 +195,21 @@ export class CSSParsedDeclaration {
         this.paddingRight = parse(paddingRight, declaration.paddingRight);
         this.paddingBottom = parse(paddingBottom, declaration.paddingBottom);
         this.paddingLeft = parse(paddingLeft, declaration.paddingLeft);
+        this.paintOrder = parse(paintOrder, declaration.paintOrder);
         this.position = parse(position, declaration.position);
         this.textAlign = parse(textAlign, declaration.textAlign);
-        this.textDecorationColor = parse(textDecorationColor, declaration.textDecorationColor || declaration.color);
-        this.textDecorationLine = parse(textDecorationLine, declaration.textDecorationLine);
+        this.textDecorationColor = parse(textDecorationColor, declaration.textDecorationColor ?? declaration.color);
+        this.textDecorationLine = parse(
+            textDecorationLine,
+            declaration.textDecorationLine ?? declaration.textDecoration
+        );
         this.textShadow = parse(textShadow, declaration.textShadow);
         this.textTransform = parse(textTransform, declaration.textTransform);
         this.transform = parse(transform, declaration.transform);
         this.transformOrigin = parse(transformOrigin, declaration.transformOrigin);
         this.visibility = parse(visibility, declaration.visibility);
+        this.webkitTextStrokeColor = parse(webkitTextStrokeColor, declaration.webkitTextStrokeColor);
+        this.webkitTextStrokeWidth = parse(webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
         this.wordBreak = parse(wordBreak, declaration.wordBreak);
         this.zIndex = parse(zIndex, declaration.zIndex);
     }
@@ -289,7 +301,6 @@ const parse = (descriptor: CSSPropertyDescriptor<any>, style?: string | null) =>
                     const value = parser.parseComponentValue();
                     return isLengthPercentage(value) ? value : ZERO_LENGTH;
             }
+            break;
     }
-
-    throw new Error(`Attempting to parse unsupported css format type ${descriptor.format}`);
 };

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/text.ts

@@ -18,7 +18,7 @@ export const parseTextBounds = (value: string, styles: CSSParsedDeclaration, nod
     const textList = breakText(value, styles);
     const textBounds: TextBounds[] = [];
     let offset = 0;
-    textList.forEach(text => {
+    textList.forEach((text) => {
         if (styles.textDecorationLine.length || text.trim().length > 0) {
             if (FEATURES.SUPPORT_RANGE_BOUNDS) {
                 textBounds.push(new TextBounds(text, getRangeBounds(node, offset, text.length)));
@@ -67,9 +67,12 @@ const getRangeBounds = (node: Text, offset: number, length: number): Bounds => {
 };
 
 const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
-    return styles.letterSpacing !== 0 ? toCodePoints(value).map(i => fromCodePoint(i)) : breakWords(value, styles);
+    return styles.letterSpacing !== 0 ? toCodePoints(value).map((i) => fromCodePoint(i)) : 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,
@@ -81,7 +84,24 @@ const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {
 
     while (!(bk = breaker.next()).done) {
         if (bk.value) {
-            words.push(bk.value.slice());
+            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);
+            }
         }
     }
 

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'), []));
 
@@ -34,7 +32,10 @@ describe('property-descriptors', () => {
                     {
                         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}]
+                        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,24 @@
+import {deepEqual} from 'assert';
+import {Parser} from '../../syntax/parser';
+import {fontFamily} from '../font-family';
+
+const fontFamilyParse = (value: string) => fontFamily.parse(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,86 @@
+import {deepStrictEqual} from 'assert';
+import {Parser} from '../../syntax/parser';
+import {paintOrder, PAINT_ORDER_LAYER} from '../paint-order';
+
+const paintOrderParse = (value: string) => paintOrder.parse(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__/transform-tests.ts

@@ -9,13 +9,9 @@ describe('property-descriptors', () => {
         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
-            ]));
+            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

@@ -14,7 +14,7 @@ export const backgroundClip: IPropertyListDescriptor<BackgroundClip> = {
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
     parse: (tokens: CSSValue[]): BackgroundClip => {
-        return tokens.map(token => {
+        return tokens.map((token) => {
             if (isIdentToken(token)) {
                 switch (token.value) {
                     case 'padding-box':

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);
     }
 };

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

@@ -15,7 +15,7 @@ export const backgroundOrigin: IPropertyListDescriptor<BackgroundOrigin> = {
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
     parse: (tokens: CSSValue[]): BackgroundOrigin => {
-        return tokens.map(token => {
+        return tokens.map((token) => {
             if (isIdentToken(token)) {
                 switch (token.value) {
                     case 'padding-box':

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

@@ -16,10 +16,10 @@ export const backgroundRepeat: IPropertyListDescriptor<BackgroundRepeat> = {
     type: PropertyDescriptorParsingType.LIST,
     parse: (tokens: CSSValue[]): BackgroundRepeat => {
         return parseFunctionArgs(tokens)
-            .map(values =>
+            .map((values) =>
                 values
                     .filter(isIdentToken)
-                    .map(token => token.value)
+                    .map((token) => token.value)
                     .join(' ')
             )
             .map(parseBackgroundRepeat);

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

@@ -18,7 +18,7 @@ export const backgroundSize: IPropertyListDescriptor<BackgroundSize> = {
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
     parse: (tokens: CSSValue[]): BackgroundSize => {
-        return parseFunctionArgs(tokens).map(values => values.filter(isBackgroundSizeInfoToken));
+        return parseFunctionArgs(tokens).map((values) => values.filter(isBackgroundSizeInfoToken));
     }
 };
 

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

@@ -1,7 +1,10 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 export enum BORDER_STYLE {
     NONE = 0,
-    SOLID = 1
+    SOLID = 1,
+    DASHED = 2,
+    DOTTED = 3,
+    DOUBLE = 4
 }
 
 const borderStyleForSide = (side: string): IPropertyIdentValueDescriptor<BORDER_STYLE> => ({
@@ -13,6 +16,12 @@ const borderStyleForSide = (side: string): IPropertyIdentValueDescriptor<BORDER_
         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;
     }

src/css/property-descriptors/display.ts

@@ -50,6 +50,7 @@ export const display: IPropertyListDescriptor<Display> = {
 const parseDisplayValue = (display: string): Display => {
     switch (display) {
         case 'block':
+        case '-webkit-box':
             return DISPLAY.BLOCK;
         case 'inline':
             return DISPLAY.INLINE;
@@ -65,6 +66,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;

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

@@ -1,6 +1,6 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue} from '../syntax/parser';
-import {StringValueToken, TokenType} from '../syntax/tokenizer';
+import {TokenType} from '../syntax/tokenizer';
 
 export type FONT_FAMILY = string;
 
@@ -12,9 +12,26 @@ export const fontFamily: IPropertyListDescriptor<FontFamily> = {
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
     parse: (tokens: CSSValue[]) => {
-        return tokens.filter(isStringToken).map(token => token.value);
+        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}'`));
     }
 };
-
-const isStringToken = (token: CSSValue): token is StringValueToken =>
-    token.type === TokenType.STRING_TOKEN || token.type === TokenType.IDENT_TOKEN;

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

@@ -6,6 +6,6 @@ export const fontVariant: IPropertyListDescriptor<string[]> = {
     type: PropertyDescriptorParsingType.LIST,
     prefix: false,
     parse: (tokens: CSSValue[]): string[] => {
-        return tokens.filter(isIdentToken).map(token => token.value);
+        return tokens.filter(isIdentToken).map((token) => token.value);
     }
 };

src/css/property-descriptors/overflow.ts

@@ -13,7 +13,7 @@ export const overflow: IPropertyListDescriptor<OVERFLOW[]> = {
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
     parse: (tokens: CSSValue[]): OVERFLOW[] => {
-        return tokens.filter(isIdentToken).map(overflow => {
+        return tokens.filter(isIdentToken).map((overflow) => {
             switch (overflow.value) {
                 case 'hidden':
                     return OVERFLOW.HIDDEN;

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

@@ -0,0 +1,41 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, isIdentToken} from '../syntax/parser';
+export enum PAINT_ORDER_LAYER {
+    FILL,
+    STROKE,
+    MARKERS
+}
+
+export type PaintOrder = PAINT_ORDER_LAYER[];
+
+export const paintOrder: IPropertyListDescriptor<PaintOrder> = {
+    name: 'paint-order',
+    initialValue: 'normal',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (tokens: CSSValue[]): PaintOrder => {
+        const DEFAULT_VALUE = [PAINT_ORDER_LAYER.FILL, PAINT_ORDER_LAYER.STROKE, PAINT_ORDER_LAYER.MARKERS];
+        let layers: PaintOrder = [];
+
+        tokens.filter(isIdentToken).forEach((token) => {
+            switch (token.value) {
+                case 'stroke':
+                    layers.push(PAINT_ORDER_LAYER.STROKE);
+                    break;
+                case 'fill':
+                    layers.push(PAINT_ORDER_LAYER.FILL);
+                    break;
+                case 'markers':
+                    layers.push(PAINT_ORDER_LAYER.MARKERS);
+                    break;
+            }
+        });
+        DEFAULT_VALUE.forEach((value) => {
+            if (layers.indexOf(value) === -1) {
+                layers.push(value);
+            }
+        });
+
+        return layers;
+    }
+};

src/css/property-descriptors/text-decoration-line.ts

@@ -19,7 +19,7 @@ export const textDecorationLine: IPropertyListDescriptor<TextDecorationLine> = {
     parse: (tokens: CSSValue[]): TextDecorationLine => {
         return tokens
             .filter(isIdentToken)
-            .map(token => {
+            .map((token) => {
                 switch (token.value) {
                     case 'underline':
                         return TEXT_DECORATION_LINE.UNDERLINE;
@@ -32,6 +32,6 @@ export const textDecorationLine: IPropertyListDescriptor<TextDecorationLine> = {
                 }
                 return TEXT_DECORATION_LINE.NONE;
             })
-            .filter(line => line !== TEXT_DECORATION_LINE.NONE);
+            .filter((line) => line !== TEXT_DECORATION_LINE.NONE);
     }
 };

src/css/property-descriptors/transform.ts

@@ -27,14 +27,14 @@ export const transform: IPropertyValueDescriptor<Transform> = {
 };
 
 const matrix = (args: CSSValue[]): Transform => {
-    const values = args.filter(arg => arg.type === TokenType.NUMBER_TOKEN).map((arg: NumberValueToken) => arg.number);
+    const values = args.filter((arg) => arg.type === TokenType.NUMBER_TOKEN).map((arg: NumberValueToken) => arg.number);
 
     return values.length === 6 ? (values as Matrix) : null;
 };
 
 // doesn't support 3D transforms at the moment
 const matrix3d = (args: CSSValue[]): Transform => {
-    const values = args.filter(arg => arg.type === TokenType.NUMBER_TOKEN).map((arg: NumberValueToken) => arg.number);
+    const values = args.filter((arg) => arg.type === TokenType.NUMBER_TOKEN).map((arg: NumberValueToken) => arg.number);
 
     const [a1, b1, {}, {}, a2, b2, {}, {}, {}, {}, {}, {}, a4, b4, {}, {}] = values;
 

src/css/property-descriptors/webkit-text-stroke-color.ts

@@ -0,0 +1,8 @@
+import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+export const webkitTextStrokeColor: IPropertyTypeValueDescriptor = {
+    name: `-webkit-text-stroke-color`,
+    initialValue: 'currentcolor',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'color'
+};

src/css/property-descriptors/webkit-text-stroke-width.ts

@@ -0,0 +1,14 @@
+import {CSSValue, isDimensionToken} from '../syntax/parser';
+import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+export const webkitTextStrokeWidth: IPropertyValueDescriptor<number> = {
+    name: `-webkit-text-stroke-width`,
+    initialValue: '0',
+    type: PropertyDescriptorParsingType.VALUE,
+    prefix: false,
+    parse: (token: CSSValue): number => {
+        if (isDimensionToken(token)) {
+            return token.number;
+        }
+        return 0;
+    }
+};

src/css/syntax/parser.ts

@@ -74,7 +74,7 @@ export class Parser {
     parseComponentValues(): CSSValue[] {
         const values = [];
         while (true) {
-            let value = this.consumeComponentValue();
+            const value = this.consumeComponentValue();
             if (value.type === TokenType.EOF_TOKEN) {
                 return values;
             }
@@ -148,14 +148,14 @@ export const isStringToken = (token: CSSValue): token is StringValueToken => tok
 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 nonWhiteSpace = (token: CSSValue): boolean => token.type !== TokenType.WHITESPACE_TOKEN;
+export const nonFunctionArgSeparator = (token: CSSValue): boolean =>
     token.type !== TokenType.WHITESPACE_TOKEN && token.type !== TokenType.COMMA_TOKEN;
 
 export const parseFunctionArgs = (tokens: CSSValue[]): CSSValue[][] => {
     const args: CSSValue[][] = [];
     let arg: CSSValue[] = [];
-    tokens.forEach(token => {
+    tokens.forEach((token) => {
         if (token.type === TokenType.COMMA_TOKEN) {
             if (arg.length === 0) {
                 throw new Error(`Error parsing function args, zero tokens for arg`);

src/css/syntax/tokenizer.ts

@@ -315,7 +315,7 @@ export class Tokenizer {
         this._value = [];
     }
 
-    write(chunk: string) {
+    write(chunk: string): void {
         this._value = this._value.concat(toCodePoints(chunk));
     }
 
@@ -542,8 +542,11 @@ export class Tokenizer {
         }
 
         if (questionMarks) {
-            const start = parseInt(fromCodePoint(...digits.map(digit => (digit === QUESTION_MARK ? ZERO : digit))), 16);
-            const end = parseInt(fromCodePoint(...digits.map(digit => (digit === QUESTION_MARK ? F : digit))), 16);
+            const start = parseInt(
+                fromCodePoint(...digits.map((digit) => (digit === QUESTION_MARK ? ZERO : digit))),
+                16
+            );
+            const end = parseInt(fromCodePoint(...digits.map((digit) => (digit === QUESTION_MARK ? F : digit))), 16);
             return {type: TokenType.UNICODE_RANGE_TOKEN, start, end};
         }
 
@@ -642,7 +645,7 @@ export class Tokenizer {
 
     private consumeBadUrlRemnants(): void {
         while (true) {
-            let codePoint = this.consumeCodePoint();
+            const codePoint = this.consumeCodePoint();
             if (codePoint === RIGHT_PARENTHESIS || codePoint === EOF) {
                 return;
             }
@@ -696,13 +699,13 @@ export class Tokenizer {
                     }
                 }
             }
-            
+
             i++;
         } while (true);
     }
 
     private consumeNumber() {
-        let repr = [];
+        const repr = [];
         let type = FLAG_INTEGER;
         let c1 = this.peekCodePoint(0);
         if (c1 === PLUS_SIGN || c1 === HYPHEN_MINUS) {
@@ -724,7 +727,7 @@ export class Tokenizer {
 
         c1 = this.peekCodePoint(0);
         c2 = this.peekCodePoint(1);
-        let c3 = this.peekCodePoint(2);
+        const c3 = this.peekCodePoint(2);
         if ((c1 === E || c1 === e) && (((c2 === PLUS_SIGN || c2 === HYPHEN_MINUS) && isDigit(c3)) || isDigit(c2))) {
             repr.push(this.consumeCodePoint(), this.consumeCodePoint());
             type = FLAG_NUMBER;
@@ -743,7 +746,7 @@ export class Tokenizer {
         const c3 = this.peekCodePoint(2);
 
         if (isIdentifierStart(c1, c2, c3)) {
-            let unit = this.consumeName();
+            const unit = this.consumeName();
             return {type: TokenType.DIMENSION_TOKEN, number, flags, unit};
         }
 

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', () => {
@@ -37,25 +40,37 @@ describe('types', () => {
                     deepStrictEqual(parse('linear-gradient(yellow, blue)'), {
                         angle: deg(180),
                         type: CSSImageType.LINEAR_GRADIENT,
-                        stops: [{color: colorParse('yellow'), stop: null}, {color: colorParse('blue'), stop: null}]
+                        stops: [
+                            {color: colorParse('yellow'), stop: null},
+                            {color: colorParse('blue'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(to bottom, yellow, blue)', () =>
                     deepStrictEqual(parse('linear-gradient(to bottom, yellow, blue)'), {
                         angle: deg(180),
                         type: CSSImageType.LINEAR_GRADIENT,
-                        stops: [{color: colorParse('yellow'), stop: null}, {color: colorParse('blue'), stop: null}]
+                        stops: [
+                            {color: colorParse('yellow'), stop: null},
+                            {color: colorParse('blue'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(180deg, yellow, blue)', () =>
                     deepStrictEqual(parse('linear-gradient(180deg, yellow, blue)'), {
                         angle: deg(180),
                         type: CSSImageType.LINEAR_GRADIENT,
-                        stops: [{color: colorParse('yellow'), stop: null}, {color: colorParse('blue'), stop: null}]
+                        stops: [
+                            {color: colorParse('yellow'), stop: null},
+                            {color: colorParse('blue'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(to top, blue, yellow)', () =>
                     deepStrictEqual(parse('linear-gradient(to top, blue, yellow)'), {
                         angle: 0,
                         type: CSSImageType.LINEAR_GRADIENT,
-                        stops: [{color: colorParse('blue'), stop: null}, {color: colorParse('yellow'), stop: null}]
+                        stops: [
+                            {color: colorParse('blue'), stop: null},
+                            {color: colorParse('yellow'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(to top right, blue, yellow)', () =>
                     deepStrictEqual(parse('linear-gradient(to top right, blue, yellow)'), {
@@ -64,7 +79,10 @@ describe('types', () => {
                             {type: TokenType.NUMBER_TOKEN, number: 0, flags: 4}
                         ],
                         type: CSSImageType.LINEAR_GRADIENT,
-                        stops: [{color: colorParse('blue'), stop: null}, {color: colorParse('yellow'), stop: null}]
+                        stops: [
+                            {color: colorParse('blue'), stop: null},
+                            {color: colorParse('yellow'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(to bottom, yellow 0%, blue 100%)', () =>
                     deepStrictEqual(parse('linear-gradient(to bottom, yellow 0%, blue 100%)'), {

src/css/types/angle.ts

@@ -41,7 +41,7 @@ export const isAngle = (value: CSSValue): boolean => {
 export const parseNamedSide = (tokens: CSSValue[]): number | GradientCorner => {
     const sideOrCorner = tokens
         .filter(isIdentToken)
-        .map(ident => ident.value)
+        .map((ident) => ident.value)
         .join(' ');
 
     switch (sideOrCorner) {

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';
@@ -59,9 +59,9 @@ export const color: ITypeDescriptor<Color> = {
     }
 };
 
-export const isTransparent = (color: Color) => (0xff & color) === 0;
+export const isTransparent = (color: Color): boolean => (0xff & color) === 0;
 
-export const asString = (color: Color) => {
+export const asString = (color: Color): string => {
     const alpha = 0xff & color;
     const blue = 0xff & (color >> 8);
     const green = 0xff & (color >> 16);
@@ -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);

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,
@@ -14,11 +14,11 @@ import {color as colorType} from '../color';
 import {HUNDRED_PERCENT, LengthPercentage, ZERO_LENGTH} from '../length-percentage';
 
 export const webkitGradient = (tokens: CSSValue[]): CSSLinearGradientImage | CSSRadialGradientImage => {
-    let angle = deg(180);
+    const angle = deg(180);
     const stops: UnprocessedGradientColorStop[] = [];
     let type = CSSImageType.LINEAR_GRADIENT;
-    let shape: CSSRadialShape = CSSRadialShape.CIRCLE;
-    let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
+    const shape: CSSRadialShape = CSSRadialShape.CIRCLE;
+    const size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
     const position: LengthPercentage[] = [];
     parseFunctionArgs(tokens).forEach((arg, i) => {
         const firstToken = arg[0];
@@ -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];

src/css/types/functions/__tests__/radial-gradient.ts

@@ -55,7 +55,10 @@ describe('functions', () => {
                     shape: CSSRadialShape.CIRCLE,
                     size: [{type: TokenType.DIMENSION_TOKEN, number: 20, flags: 4, unit: 'px'}],
                     position: [],
-                    stops: [{color: colorParse('red'), stop: null}, {color: colorParse('blue'), stop: null}]
+                    stops: [
+                        {color: colorParse('red'), stop: null},
+                        {color: colorParse('blue'), stop: null}
+                    ]
                 }));
         });
     });

src/css/types/functions/counter.ts

@@ -9,7 +9,7 @@ export class CounterState {
         this.counters = {};
     }
 
-    getCounterValue(name: string) {
+    getCounterValue(name: string): number {
         const counter = this.counters[name];
 
         if (counter && counter.length) {
@@ -23,32 +23,36 @@ export class CounterState {
         return counter ? counter : [];
     }
 
-    pop(counters: string[]) {
-        counters.forEach(counter => this.counters[counter].pop());
+    pop(counters: string[]): void {
+        counters.forEach((counter) => this.counters[counter].pop());
     }
 
     parse(style: CSSParsedCounterDeclaration): string[] {
         const counterIncrement = style.counterIncrement;
         const counterReset = style.counterReset;
+        let canReset = true;
 
         if (counterIncrement !== null) {
-            counterIncrement.forEach(entry => {
+            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;
     }
@@ -66,42 +70,8 @@ const ROMAN_UPPER: CounterSymbols = {
 
 const ARMENIAN: CounterSymbols = {
     integers: [
-        9000,
-        8000,
-        7000,
-        6000,
-        5000,
-        4000,
-        3000,
-        2000,
-        1000,
-        900,
-        800,
-        700,
-        600,
-        500,
-        400,
-        300,
-        200,
-        100,
-        90,
-        80,
-        70,
-        60,
-        50,
-        40,
-        30,
-        20,
-        10,
-        9,
-        8,
-        7,
-        6,
-        5,
-        4,
-        3,
-        2,
-        1
+        9000, 8000, 7000, 6000, 5000, 4000, 3000, 2000, 1000, 900, 800, 700, 600, 500, 400, 300, 200, 100, 90, 80, 70,
+        60, 50, 40, 30, 20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1
     ],
     values: [
         'Ք',
@@ -145,43 +115,8 @@ const ARMENIAN: CounterSymbols = {
 
 const HEBREW: CounterSymbols = {
     integers: [
-        10000,
-        9000,
-        8000,
-        7000,
-        6000,
-        5000,
-        4000,
-        3000,
-        2000,
-        1000,
-        400,
-        300,
-        200,
-        100,
-        90,
-        80,
-        70,
-        60,
-        50,
-        40,
-        30,
-        20,
-        19,
-        18,
-        17,
-        16,
-        15,
-        10,
-        9,
-        8,
-        7,
-        6,
-        5,
-        4,
-        3,
-        2,
-        1
+        10000, 9000, 8000, 7000, 6000, 5000, 4000, 3000, 2000, 1000, 400, 300, 200, 100, 90, 80, 70, 60, 50, 40, 30, 20,
+        19, 18, 17, 16, 15, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1
     ],
     values: [
         'י׳',
@@ -226,43 +161,8 @@ const HEBREW: CounterSymbols = {
 
 const GEORGIAN: CounterSymbols = {
     integers: [
-        10000,
-        9000,
-        8000,
-        7000,
-        6000,
-        5000,
-        4000,
-        3000,
-        2000,
-        1000,
-        900,
-        800,
-        700,
-        600,
-        500,
-        400,
-        300,
-        200,
-        100,
-        90,
-        80,
-        70,
-        60,
-        50,
-        40,
-        30,
-        20,
-        10,
-        9,
-        8,
-        7,
-        6,
-        5,
-        4,
-        3,
-        2,
-        1
+        10000, 9000, 8000, 7000, 6000, 5000, 4000, 3000, 2000, 1000, 900, 800, 700, 600, 500, 400, 300, 200, 100, 90,
+        80, 70, 60, 50, 40, 30, 20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1
     ],
     values: [
         'ჵ',
@@ -358,21 +258,21 @@ const createCounterStyleFromRange = (
 
     return (
         (value < 0 ? '-' : '') +
-        (createCounterStyleWithSymbolResolver(Math.abs(value), codePointRangeLength, isNumeric, codePoint =>
+        (createCounterStyleWithSymbolResolver(Math.abs(value), codePointRangeLength, isNumeric, (codePoint) =>
             fromCodePoint(Math.floor(codePoint % codePointRangeLength) + codePointRangeStart)
         ) +
             suffix)
     );
 };
 
-const createCounterStyleFromSymbols = (value: number, symbols: string, suffix: string = '. '): string => {
+const createCounterStyleFromSymbols = (value: number, symbols: string, suffix = '. '): string => {
     const codePointRangeLength = symbols.length;
     return (
         createCounterStyleWithSymbolResolver(
             Math.abs(value),
             codePointRangeLength,
             false,
-            codePoint => symbols[Math.floor(codePoint % codePointRangeLength)]
+            (codePoint) => symbols[Math.floor(codePoint % codePointRangeLength)]
         ) + suffix
     );
 };
@@ -401,7 +301,7 @@ const createCJKCounter = (
     }
 
     for (let digit = 0; tmp > 0 && digit <= 4; digit++) {
-        let coefficient = tmp % 10;
+        const coefficient = tmp % 10;
 
         if (coefficient === 0 && contains(flags, CJK_ZEROS) && string !== '') {
             string = numbers[coefficient] + string;

src/css/types/functions/gradient.ts

@@ -98,7 +98,12 @@ export const calculateGradientDirection = (
 const distance = (a: number, b: number): number => Math.sqrt(a * a + b * b);
 
 const findCorner = (width: number, height: number, x: number, y: number, closest: boolean): [number, number] => {
-    const corners = [[0, 0], [0, height], [width, 0], [width, height]];
+    const corners = [
+        [0, 0],
+        [0, height],
+        [width, 0],
+        [width, height]
+    ];
 
     return corners.reduce(
         (stat, corner) => {

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): boolean {
+    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,

src/css/types/length-percentage.ts

@@ -31,10 +31,10 @@ export const getAbsoluteValueForTuple = (
     width: number,
     height: number
 ): [number, number] => {
-    let [x, y] = tuple;
+    const [x, y] = tuple;
     return [getAbsoluteValue(x, width), getAbsoluteValue(typeof y !== 'undefined' ? y : x, height)];
 };
-export const getAbsoluteValue = (token: LengthPercentage, parent: number) => {
+export const getAbsoluteValue = (token: LengthPercentage, parent: number): number => {
     if (token.type === TokenType.PERCENTAGE_TOKEN) {
         return (token.number / 100) * parent;
     }

src/dom/__mocks__/document-cloner.ts

@@ -0,0 +1,15 @@
+export class DocumentCloner {
+    clonedReferenceElement?: HTMLElement;
+
+    constructor() {
+        this.clonedReferenceElement = {} as HTMLElement;
+    }
+
+    toIFrame(): Promise<HTMLIFrameElement> {
+        return Promise.resolve({} as HTMLIFrameElement);
+    }
+
+    static destroy(): boolean {
+        return true;
+    }
+}

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';
@@ -22,7 +24,7 @@ import {getQuote} from '../css/property-descriptors/quotes';
 export interface CloneOptions {
     id: string;
     ignoreElements?: (element: Element) => boolean;
-    onclone?: (document: Document) => void;
+    onclone?: (document: Document, element: HTMLElement) => void;
 }
 
 export type CloneConfigurations = CloneOptions & {
@@ -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);
@@ -87,13 +89,23 @@ export class DocumentCloner {
 
             const onclone = this.options.onclone;
 
-            if (typeof this.clonedReferenceElement === 'undefined') {
+            const referenceElement = this.clonedReferenceElement;
+
+            if (typeof referenceElement === 'undefined') {
                 return Promise.reject(`Error finding the ${this.referenceElement.nodeName} in the cloned document`);
             }
 
+            if (documentClone.fonts && documentClone.fonts.ready) {
+                await documentClone.fonts.ready;
+            }
+
+            if (/(AppleWebKit)/g.test(navigator.userAgent)) {
+                await imagesReady(documentClone);
+            }
+
             if (typeof onclone === 'function') {
                 return Promise.resolve()
-                    .then(() => onclone(documentClone))
+                    .then(() => onclone(documentClone, referenceElement))
                     .then(() => iframe);
             }
 
@@ -110,20 +122,28 @@ export class DocumentCloner {
         return iframeLoad;
     }
 
-    createElementClone(node: HTMLElement): HTMLElement {
+    createElementClone<T extends HTMLElement | SVGElement>(node: T): HTMLElement | SVGElement {
         if (isCanvasElement(node)) {
             return this.createCanvasClone(node);
         }
-        /*
-        if (isIFrameElement(node)) {
-            return this.createIFrameClone(node);
-        }
-*/
+
         if (isStyleElement(node)) {
             return this.createStyleClone(node);
         }
 
-        return node.cloneNode(false) as HTMLElement;
+        const clone = node.cloneNode(false) as T;
+        if (isImageElement(clone)) {
+            if (isImageElement(node) && node.currentSrc && node.currentSrc !== node.src) {
+                clone.src = node.currentSrc;
+                clone.srcset = '';
+            }
+
+            if (clone.loading === 'lazy') {
+                clone.loading = 'eager';
+            }
+        }
+
+        return clone;
     }
 
     createStyleClone(node: HTMLStyleElement): HTMLStyleElement {
@@ -180,67 +200,7 @@ export class DocumentCloner {
 
         return clonedCanvas;
     }
-    /*
-    createIFrameClone(iframe: HTMLIFrameElement) {
-        const tempIframe = <HTMLIFrameElement>iframe.cloneNode(false);
-        const iframeKey = generateIframeKey();
-        tempIframe.setAttribute('data-html2canvas-internal-iframe-key', iframeKey);
 
-        const {width, height} = parseBounds(iframe);
-
-        this.resourceLoader.cache[iframeKey] = getIframeDocumentElement(iframe, this.options)
-            .then(documentElement => {
-                return this.renderer(
-                    documentElement,
-                    {
-                        allowTaint: this.options.allowTaint,
-                        backgroundColor: '#ffffff',
-                        canvas: null,
-                        imageTimeout: this.options.imageTimeout,
-                        logging: this.options.logging,
-                        proxy: this.options.proxy,
-                        removeContainer: this.options.removeContainer,
-                        scale: this.options.scale,
-                        foreignObjectRendering: this.options.foreignObjectRendering,
-                        useCORS: this.options.useCORS,
-                        target: new CanvasRenderer(),
-                        width,
-                        height,
-                        x: 0,
-                        y: 0,
-                        windowWidth: documentElement.ownerDocument.defaultView.innerWidth,
-                        windowHeight: documentElement.ownerDocument.defaultView.innerHeight,
-                        scrollX: documentElement.ownerDocument.defaultView.pageXOffset,
-                        scrollY: documentElement.ownerDocument.defaultView.pageYOffset
-                    },
-                );
-            })
-            .then(
-                (canvas: HTMLCanvasElement) =>
-                    new Promise((resolve, reject) => {
-                        const iframeCanvas = document.createElement('img');
-                        iframeCanvas.onload = () => resolve(canvas);
-                        iframeCanvas.onerror = (event) => {
-                            // Empty iframes may result in empty "data:," URLs, which are invalid from the <img>'s point of view
-                            // and instead of `onload` cause `onerror` and unhandled rejection warnings
-                            // https://github.com/niklasvh/html2canvas/issues/1502
-                            iframeCanvas.src == 'data:,' ? resolve(canvas) : reject(event);
-                        };
-                        iframeCanvas.src = canvas.toDataURL();
-                        if (tempIframe.parentNode && iframe.ownerDocument && iframe.ownerDocument.defaultView) {
-                            tempIframe.parentNode.replaceChild(
-                                copyCSSStyles(
-                                    iframe.ownerDocument.defaultView.getComputedStyle(iframe),
-                                    iframeCanvas
-                                ),
-                                tempIframe
-                            );
-                        }
-                    })
-            );
-        return tempIframe;
-    }
-*/
     cloneNode(node: Node): Node {
         if (isTextNode(node)) {
             return document.createTextNode(node.data);
@@ -252,14 +212,14 @@ export class DocumentCloner {
 
         const window = node.ownerDocument.defaultView;
 
-        if (isHTMLElementNode(node) && window) {
+        if (window && isElementNode(node) && (isHTMLElementNode(node) || isSVGElementNode(node))) {
             const clone = this.createElementClone(node);
 
             const style = window.getComputedStyle(node);
             const styleBefore = window.getComputedStyle(node, ':before');
             const styleAfter = window.getComputedStyle(node, ':after');
 
-            if (this.referenceElement === node) {
+            if (this.referenceElement === node && isHTMLElementNode(clone)) {
                 this.clonedReferenceElement = clone;
             }
             if (isBodyElement(clone)) {
@@ -293,12 +253,10 @@ export class DocumentCloner {
 
             this.counters.pop(counters);
 
-            if (style && this.options.copyStyles && !isIFrameElement(node)) {
+            if (style && (this.options.copyStyles || isSVGElementNode(node)) && !isIFrameElement(node)) {
                 copyCSSStyles(style, clone);
             }
 
-            //this.inlineAllImages(clone);
-
             if (node.scrollTop !== 0 || node.scrollLeft !== 0) {
                 this.scrolledElements.push([clone, node.scrollLeft, node.scrollTop]);
             }
@@ -338,7 +296,7 @@ export class DocumentCloner {
         const anonymousReplacedElement = document.createElement('html2canvaspseudoelement');
         copyCSSStyles(style, anonymousReplacedElement);
 
-        declaration.content.forEach(token => {
+        declaration.content.forEach((token) => {
             if (token.type === TokenType.STRING_TOKEN) {
                 anonymousReplacedElement.appendChild(document.createTextNode(token.value));
             } else if (token.type === TokenType.URL_TOKEN) {
@@ -355,7 +313,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 +326,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 =
@@ -377,7 +335,7 @@ export class DocumentCloner {
                                 : LIST_STYLE_TYPE.DECIMAL;
                         const separator = delim && delim.type === TokenType.STRING_TOKEN ? delim.value : '';
                         const text = counterStates
-                            .map(value => createCounterText(value, counterType, false))
+                            .map((value) => createCounterText(value, counterType, false))
                             .join(separator);
 
                         anonymousReplacedElement.appendChild(document.createTextNode(text));
@@ -398,18 +356,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 {
@@ -435,6 +409,25 @@ const createIFrameContainer = (ownerDocument: Document, bounds: Bounds): HTMLIFr
     return cloneIframeContainer;
 };
 
+const imageReady = (img: HTMLImageElement): Promise<Event | void | string> => {
+    return new Promise((resolve) => {
+        if (img.complete) {
+            resolve();
+            return;
+        }
+        if (!img.src) {
+            resolve();
+            return;
+        }
+        img.onload = resolve;
+        img.onerror = resolve;
+    });
+};
+
+const imagesReady = (document: HTMLDocument): Promise<unknown[]> => {
+    return Promise.all([].slice.call(document.images, 0).map(imageReady));
+};
+
 const iframeLoader = (iframe: HTMLIFrameElement): Promise<HTMLIFrameElement> => {
     return new Promise((resolve, reject) => {
         const cloneWindow = iframe.contentWindow;
@@ -445,8 +438,8 @@ const iframeLoader = (iframe: HTMLIFrameElement): Promise<HTMLIFrameElement> =>
 
         const documentClone = cloneWindow.document;
 
-        cloneWindow.onload = iframe.onload = documentClone.onreadystatechange = () => {
-            cloneWindow.onload = iframe.onload = documentClone.onreadystatechange = null;
+        cloneWindow.onload = iframe.onload = () => {
+            cloneWindow.onload = iframe.onload = null;
             const interval = setInterval(() => {
                 if (documentClone.body.childNodes.length > 0 && documentClone.readyState === 'complete') {
                     clearInterval(interval);
@@ -457,12 +450,17 @@ const iframeLoader = (iframe: HTMLIFrameElement): Promise<HTMLIFrameElement> =>
     });
 };
 
-export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement): HTMLElement => {
+const ignoredStyleProperties = [
+    'all', // #2476
+    'd', // #2483
+    'content' // Safari shows pseudoelements if content is set
+];
+
+export const copyCSSStyles = <T extends HTMLElement | SVGElement>(style: CSSStyleDeclaration, target: T): T => {
     // Edge does not provide value for cssText
     for (let i = style.length - 1; i >= 0; i--) {
         const property = style.item(i);
-        // Safari shows pseudoelements if content is set
-        if (property !== 'content') {
+        if (ignoredStyleProperties.indexOf(property) === -1) {
             target.style.setProperty(property, style.getPropertyValue(property));
         }
     }

src/dom/node-parser.ts

@@ -20,21 +20,32 @@ const parseNodeTree = (node: Node, parent: ElementContainer, root: ElementContai
         if (isTextNode(childNode) && childNode.data.trim().length > 0) {
             parent.textNodes.push(new TextContainer(childNode, parent.styles));
         } else if (isElementNode(childNode)) {
-            const container = createContainer(childNode);
-            if (container.styles.isVisible()) {
-                if (createsRealStackingContext(childNode, container, root)) {
-                    container.flags |= FLAGS.CREATES_REAL_STACKING_CONTEXT;
-                } else if (createsStackingContext(container.styles)) {
-                    container.flags |= FLAGS.CREATES_STACKING_CONTEXT;
-                }
+            if (isSlotElement(childNode) && childNode.assignedNodes) {
+                childNode.assignedNodes().forEach((childNode) => parseNodeTree(childNode, parent, root));
+            } else {
+                const container = createContainer(childNode);
+                if (container.styles.isVisible()) {
+                    if (createsRealStackingContext(childNode, container, root)) {
+                        container.flags |= FLAGS.CREATES_REAL_STACKING_CONTEXT;
+                    } else if (createsStackingContext(container.styles)) {
+                        container.flags |= FLAGS.CREATES_STACKING_CONTEXT;
+                    }
 
-                if (LIST_OWNERS.indexOf(childNode.tagName) !== -1) {
-                    container.flags |= FLAGS.IS_LIST_OWNER;
-                }
+                    if (LIST_OWNERS.indexOf(childNode.tagName) !== -1) {
+                        container.flags |= FLAGS.IS_LIST_OWNER;
+                    }
 
-                parent.elements.push(container);
-                if (!isTextareaElement(childNode) && !isSVGElement(childNode) && !isSelectElement(childNode)) {
-                    parseNodeTree(childNode, container, root);
+                    parent.elements.push(container);
+                    childNode.slot;
+                    if (childNode.shadowRoot) {
+                        parseNodeTree(childNode.shadowRoot, container, root);
+                    } else if (
+                        !isTextareaElement(childNode) &&
+                        !isSVGElement(childNode) &&
+                        !isSelectElement(childNode)
+                    ) {
+                        parseNodeTree(childNode, container, root);
+                    }
                 }
             }
         }
@@ -102,8 +113,9 @@ const createsStackingContext = (styles: CSSParsedDeclaration): boolean => styles
 export const isTextNode = (node: Node): node is Text => node.nodeType === Node.TEXT_NODE;
 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';
-
+    isElementNode(node) && typeof (node as HTMLElement).style !== 'undefined' && !isSVGElementNode(node);
+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';
@@ -117,3 +129,4 @@ export const isStyleElement = (node: Element): node is HTMLStyleElement => node.
 export const isScriptElement = (node: Element): node is HTMLScriptElement => node.tagName === 'SCRIPT';
 export const isTextareaElement = (node: Element): node is HTMLTextAreaElement => node.tagName === 'TEXTAREA';
 export const isSelectElement = (node: Element): node is HTMLSelectElement => node.tagName === 'SELECT';
+export const isSlotElement = (node: Element): node is HTMLSlotElement => node.tagName === 'SLOT';

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 (
@@ -28,8 +28,9 @@ export class IFrameElementContainer extends ElementContainer {
 
                 // http://www.w3.org/TR/css3-background/#special-backgrounds
                 const documentBackgroundColor = iframe.contentWindow.document.documentElement
-                    ? parseColor(getComputedStyle(iframe.contentWindow.document.documentElement)
-                          .backgroundColor as string)
+                    ? parseColor(
+                          getComputedStyle(iframe.contentWindow.document.documentElement).backgroundColor as string
+                      )
                     : COLORS.TRANSPARENT;
                 const bodyBackgroundColor = iframe.contentWindow.document.body
                     ? parseColor(getComputedStyle(iframe.contentWindow.document.body).backgroundColor as string)

src/dom/replaced-elements/input-element-container.ts

@@ -56,10 +56,21 @@ export class InputElementContainer extends ElementContainer {
 
         if (this.type === CHECKBOX || this.type === RADIO) {
             this.styles.backgroundColor = 0xdededeff;
-            this.styles.borderTopColor = this.styles.borderRightColor = this.styles.borderBottomColor = this.styles.borderLeftColor = 0xa5a5a5ff;
-            this.styles.borderTopWidth = this.styles.borderRightWidth = this.styles.borderBottomWidth = this.styles.borderLeftWidth = 1;
-            this.styles.borderTopStyle = this.styles.borderRightStyle = this.styles.borderBottomStyle = this.styles.borderLeftStyle =
-                BORDER_STYLE.SOLID;
+            this.styles.borderTopColor =
+                this.styles.borderRightColor =
+                this.styles.borderBottomColor =
+                this.styles.borderLeftColor =
+                    0xa5a5a5ff;
+            this.styles.borderTopWidth =
+                this.styles.borderRightWidth =
+                this.styles.borderBottomWidth =
+                this.styles.borderLeftWidth =
+                    1;
+            this.styles.borderTopStyle =
+                this.styles.borderRightStyle =
+                this.styles.borderBottomStyle =
+                this.styles.borderLeftStyle =
+                    BORDER_STYLE.SOLID;
             this.styles.backgroundClip = [BACKGROUND_CLIP.BORDER_BOX];
             this.styles.backgroundOrigin = [BACKGROUND_ORIGIN.BORDER_BOX];
             this.bounds = reformatInputBounds(this.bounds);
@@ -67,10 +78,18 @@ export class InputElementContainer extends ElementContainer {
 
         switch (this.type) {
             case CHECKBOX:
-                this.styles.borderTopRightRadius = this.styles.borderTopLeftRadius = this.styles.borderBottomRightRadius = this.styles.borderBottomLeftRadius = CHECKBOX_BORDER_RADIUS;
+                this.styles.borderTopRightRadius =
+                    this.styles.borderTopLeftRadius =
+                    this.styles.borderBottomRightRadius =
+                    this.styles.borderBottomLeftRadius =
+                        CHECKBOX_BORDER_RADIUS;
                 break;
             case RADIO:
-                this.styles.borderTopRightRadius = this.styles.borderTopLeftRadius = this.styles.borderBottomRightRadius = this.styles.borderBottomLeftRadius = RADIO_BORDER_RADIUS;
+                this.styles.borderTopRightRadius =
+                    this.styles.borderTopLeftRadius =
+                    this.styles.borderBottomRightRadius =
+                    this.styles.borderBottomLeftRadius =
+                        RADIO_BORDER_RADIUS;
                 break;
         }
     }

src/dom/replaced-elements/svg-element-container.ts

@@ -1,5 +1,6 @@
 import {ElementContainer} from '../element-container';
 import {CacheStorage} from '../../core/cache-storage';
+import {parseBounds} from '../../css/layout/bounds';
 
 export class SVGElementContainer extends ElementContainer {
     svg: string;
@@ -9,6 +10,10 @@ export class SVGElementContainer extends ElementContainer {
     constructor(img: SVGSVGElement) {
         super(img);
         const s = new XMLSerializer();
+        const bounds = parseBounds(img);
+        img.setAttribute('width', `${bounds.width}px`);
+        img.setAttribute('height', `${bounds.height}px`);
+
         this.svg = `data:image/svg+xml,${encodeURIComponent(s.serializeToString(img))}`;
         this.intrinsicWidth = img.width.baseVal.value;
         this.intrinsicHeight = img.height.baseVal.value;

src/global.d.ts

@@ -1,9 +1,14 @@
 interface CSSStyleDeclaration {
-    textDecorationColor: string | null;
-    textDecorationLine: string | null;
-    overflowWrap: string | null;
+    textDecorationColor: string;
+    textDecorationLine: string;
+    overflowWrap: string;
 }
 
 interface DocumentType extends Node, ChildNode {
     readonly internalSubset: string | null;
 }
+
+interface Document {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fonts: any;
+}

src/index.ts

@@ -11,7 +11,7 @@ import {ForeignObjectRenderer} from './render/canvas/foreignobject-renderer';
 export type Options = CloneOptions &
     RenderOptions &
     ResourceOptions & {
-        backgroundColor: string;
+        backgroundColor: string | null;
         foreignObjectRendering: boolean;
         logging: boolean;
         removeContainer?: boolean;
@@ -25,9 +25,16 @@ const html2canvas = (element: HTMLElement, options: Partial<Options> = {}): Prom
 
 export default html2canvas;
 
-CacheStorage.setContext(window);
+if (typeof window !== 'undefined') {
+    CacheStorage.setContext(window);
+}
+
+let instanceCount = 1;
 
 const renderElement = async (element: HTMLElement, opts: Partial<Options>): Promise<HTMLCanvasElement> => {
+    if (!element || typeof element !== 'object') {
+        return Promise.reject('Invalid element provided as first argument');
+    }
     const ownerDocument = element.ownerDocument;
 
     if (!ownerDocument) {
@@ -40,7 +47,7 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
         throw new Error(`Document is not attached to a Window`);
     }
 
-    const instanceName = (Math.round(Math.random() * 1000) + Date.now()).toString(16);
+    const instanceName = `#${instanceCount++}`;
 
     const {width, height, left, top} =
         isBodyElement(element) || isHTMLElement(element) ? parseDocumentSize(ownerDocument) : parseBounds(element);
@@ -76,7 +83,7 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
 
     const windowBounds = new Bounds(options.scrollX, options.scrollY, options.windowWidth, options.windowHeight);
 
-    Logger.create(instanceName);
+    Logger.create({id: instanceName, enabled: options.logging});
     Logger.getInstance(instanceName).debug(`Starting document clone`);
     const documentCloner = new DocumentCloner(element, {
         id: instanceName,
@@ -101,7 +108,8 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
         : COLORS.TRANSPARENT;
 
     const bgColor = opts.backgroundColor;
-    const defaultBackgroundColor = typeof bgColor === 'string' ? parseColor(bgColor) : 0xffffffff;
+    const defaultBackgroundColor =
+        typeof bgColor === 'string' ? parseColor(bgColor) : bgColor === null ? COLORS.TRANSPARENT : 0xffffffff;
 
     const backgroundColor =
         element === ownerDocument.documentElement
@@ -115,6 +123,7 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
     const renderOptions = {
         id: instanceName,
         cache: options.cache,
+        canvas: options.canvas,
         backgroundColor,
         scale: options.scale,
         x: options.x,
@@ -152,7 +161,7 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
     }
 
     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`);
         }
     }
@@ -162,11 +171,3 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
     CacheStorage.destroy(instanceName);
     return canvas;
 };
-
-const cleanContainer = (container: HTMLIFrameElement): boolean => {
-    if (container.parentNode) {
-        container.parentNode.removeChild(container);
-        return true;
-    }
-    return false;
-};

src/invariant.ts

@@ -1,4 +1,4 @@
-export const invariant = (assertion: boolean, error: string) => {
+export const invariant = (assertion: boolean, error: string): void => {
     if (!assertion) {
         console.error(error);
     }

src/render/background.ts

@@ -91,6 +91,10 @@ export const calculateBackgroundSize = (
 ): [number, number] => {
     const [first, second] = size;
 
+    if (!first) {
+        return [0, 0];
+    }
+
     if (isLengthPercentage(first) && second && isLengthPercentage(second)) {
         return [getAbsoluteValue(first, bounds.width), getAbsoluteValue(second, bounds.height)];
     }
@@ -218,7 +222,7 @@ export const calculateBackgroundRepeatPath = (
     [width, height]: [number, number],
     backgroundPositioningArea: Bounds,
     backgroundPaintingArea: Bounds
-) => {
+): [Vector, Vector, Vector, Vector] => {
     switch (repeat) {
         case BACKGROUND_REPEAT.REPEAT_X:
             return [

src/render/border.ts

@@ -36,6 +36,105 @@ export const parsePathForBorder = (curves: BoundCurves, borderSide: number): Pat
     }
 };
 
+export const parsePathForBorderDoubleOuter = (curves: BoundCurves, borderSide: number): Path[] => {
+    switch (borderSide) {
+        case 0:
+            return createPathFromCurves(
+                curves.topLeftBorderBox,
+                curves.topLeftBorderDoubleOuterBox,
+                curves.topRightBorderBox,
+                curves.topRightBorderDoubleOuterBox
+            );
+        case 1:
+            return createPathFromCurves(
+                curves.topRightBorderBox,
+                curves.topRightBorderDoubleOuterBox,
+                curves.bottomRightBorderBox,
+                curves.bottomRightBorderDoubleOuterBox
+            );
+        case 2:
+            return createPathFromCurves(
+                curves.bottomRightBorderBox,
+                curves.bottomRightBorderDoubleOuterBox,
+                curves.bottomLeftBorderBox,
+                curves.bottomLeftBorderDoubleOuterBox
+            );
+        case 3:
+        default:
+            return createPathFromCurves(
+                curves.bottomLeftBorderBox,
+                curves.bottomLeftBorderDoubleOuterBox,
+                curves.topLeftBorderBox,
+                curves.topLeftBorderDoubleOuterBox
+            );
+    }
+};
+
+export const parsePathForBorderDoubleInner = (curves: BoundCurves, borderSide: number): Path[] => {
+    switch (borderSide) {
+        case 0:
+            return createPathFromCurves(
+                curves.topLeftBorderDoubleInnerBox,
+                curves.topLeftPaddingBox,
+                curves.topRightBorderDoubleInnerBox,
+                curves.topRightPaddingBox
+            );
+        case 1:
+            return createPathFromCurves(
+                curves.topRightBorderDoubleInnerBox,
+                curves.topRightPaddingBox,
+                curves.bottomRightBorderDoubleInnerBox,
+                curves.bottomRightPaddingBox
+            );
+        case 2:
+            return createPathFromCurves(
+                curves.bottomRightBorderDoubleInnerBox,
+                curves.bottomRightPaddingBox,
+                curves.bottomLeftBorderDoubleInnerBox,
+                curves.bottomLeftPaddingBox
+            );
+        case 3:
+        default:
+            return createPathFromCurves(
+                curves.bottomLeftBorderDoubleInnerBox,
+                curves.bottomLeftPaddingBox,
+                curves.topLeftBorderDoubleInnerBox,
+                curves.topLeftPaddingBox
+            );
+    }
+};
+
+export const parsePathForBorderStroke = (curves: BoundCurves, borderSide: number): Path[] => {
+    switch (borderSide) {
+        case 0:
+            return createStrokePathFromCurves(curves.topLeftBorderStroke, curves.topRightBorderStroke);
+        case 1:
+            return createStrokePathFromCurves(curves.topRightBorderStroke, curves.bottomRightBorderStroke);
+        case 2:
+            return createStrokePathFromCurves(curves.bottomRightBorderStroke, curves.bottomLeftBorderStroke);
+        case 3:
+        default:
+            return createStrokePathFromCurves(curves.bottomLeftBorderStroke, curves.topLeftBorderStroke);
+    }
+};
+
+const createStrokePathFromCurves = (outer1: Path, outer2: Path): Path[] => {
+    const path = [];
+    if (isBezierCurve(outer1)) {
+        path.push(outer1.subdivide(0.5, false));
+    } else {
+        path.push(outer1);
+    }
+
+    if (isBezierCurve(outer2)) {
+        path.push(outer2.subdivide(0.5, true));
+    } else {
+        path.push(outer2);
+    }
+
+    return path;
+};
+
 const createPathFromCurves = (outer1: Path, inner1: Path, outer2: Path, inner2: Path): Path[] => {
     const path = [];
     if (isBezierCurve(outer1)) {

src/render/bound-curves.ts

@@ -5,6 +5,18 @@ import {BezierCurve} from './bezier-curve';
 import {Path} from './path';
 
 export class BoundCurves {
+    readonly topLeftBorderDoubleOuterBox: Path;
+    readonly topRightBorderDoubleOuterBox: Path;
+    readonly bottomRightBorderDoubleOuterBox: Path;
+    readonly bottomLeftBorderDoubleOuterBox: Path;
+    readonly topLeftBorderDoubleInnerBox: Path;
+    readonly topRightBorderDoubleInnerBox: Path;
+    readonly bottomRightBorderDoubleInnerBox: Path;
+    readonly bottomLeftBorderDoubleInnerBox: Path;
+    readonly topLeftBorderStroke: Path;
+    readonly topRightBorderStroke: Path;
+    readonly bottomRightBorderStroke: Path;
+    readonly bottomLeftBorderStroke: Path;
     readonly topLeftBorderBox: Path;
     readonly topRightBorderBox: Path;
     readonly bottomRightBorderBox: Path;
@@ -60,6 +72,141 @@ export class BoundCurves {
         const paddingBottom = getAbsoluteValue(styles.paddingBottom, element.bounds.width);
         const paddingLeft = getAbsoluteValue(styles.paddingLeft, element.bounds.width);
 
+        this.topLeftBorderDoubleOuterBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + borderLeftWidth / 3,
+                      bounds.top + borderTopWidth / 3,
+                      tlh - borderLeftWidth / 3,
+                      tlv - borderTopWidth / 3,
+                      CORNER.TOP_LEFT
+                  )
+                : new Vector(bounds.left + borderLeftWidth / 3, bounds.top + borderTopWidth / 3);
+        this.topRightBorderDoubleOuterBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + topWidth,
+                      bounds.top + borderTopWidth / 3,
+                      trh - borderRightWidth / 3,
+                      trv - borderTopWidth / 3,
+                      CORNER.TOP_RIGHT
+                  )
+                : new Vector(bounds.left + bounds.width - borderRightWidth / 3, bounds.top + borderTopWidth / 3);
+        this.bottomRightBorderDoubleOuterBox =
+            brh > 0 || brv > 0
+                ? getCurvePoints(
+                      bounds.left + bottomWidth,
+                      bounds.top + rightHeight,
+                      brh - borderRightWidth / 3,
+                      brv - borderBottomWidth / 3,
+                      CORNER.BOTTOM_RIGHT
+                  )
+                : new Vector(
+                      bounds.left + bounds.width - borderRightWidth / 3,
+                      bounds.top + bounds.height - borderBottomWidth / 3
+                  );
+        this.bottomLeftBorderDoubleOuterBox =
+            blh > 0 || blv > 0
+                ? getCurvePoints(
+                      bounds.left + borderLeftWidth / 3,
+                      bounds.top + leftHeight,
+                      blh - borderLeftWidth / 3,
+                      blv - borderBottomWidth / 3,
+                      CORNER.BOTTOM_LEFT
+                  )
+                : new Vector(bounds.left + borderLeftWidth / 3, bounds.top + bounds.height - borderBottomWidth / 3);
+        this.topLeftBorderDoubleInnerBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + (borderLeftWidth * 2) / 3,
+                      bounds.top + (borderTopWidth * 2) / 3,
+                      tlh - (borderLeftWidth * 2) / 3,
+                      tlv - (borderTopWidth * 2) / 3,
+                      CORNER.TOP_LEFT
+                  )
+                : new Vector(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + (borderTopWidth * 2) / 3);
+        this.topRightBorderDoubleInnerBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + topWidth,
+                      bounds.top + (borderTopWidth * 2) / 3,
+                      trh - (borderRightWidth * 2) / 3,
+                      trv - (borderTopWidth * 2) / 3,
+                      CORNER.TOP_RIGHT
+                  )
+                : new Vector(
+                      bounds.left + bounds.width - (borderRightWidth * 2) / 3,
+                      bounds.top + (borderTopWidth * 2) / 3
+                  );
+        this.bottomRightBorderDoubleInnerBox =
+            brh > 0 || brv > 0
+                ? getCurvePoints(
+                      bounds.left + bottomWidth,
+                      bounds.top + rightHeight,
+                      brh - (borderRightWidth * 2) / 3,
+                      brv - (borderBottomWidth * 2) / 3,
+                      CORNER.BOTTOM_RIGHT
+                  )
+                : new Vector(
+                      bounds.left + bounds.width - (borderRightWidth * 2) / 3,
+                      bounds.top + bounds.height - (borderBottomWidth * 2) / 3
+                  );
+        this.bottomLeftBorderDoubleInnerBox =
+            blh > 0 || blv > 0
+                ? getCurvePoints(
+                      bounds.left + (borderLeftWidth * 2) / 3,
+                      bounds.top + leftHeight,
+                      blh - (borderLeftWidth * 2) / 3,
+                      blv - (borderBottomWidth * 2) / 3,
+                      CORNER.BOTTOM_LEFT
+                  )
+                : new Vector(
+                      bounds.left + (borderLeftWidth * 2) / 3,
+                      bounds.top + bounds.height - (borderBottomWidth * 2) / 3
+                  );
+        this.topLeftBorderStroke =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + borderLeftWidth / 2,
+                      bounds.top + borderTopWidth / 2,
+                      tlh - borderLeftWidth / 2,
+                      tlv - borderTopWidth / 2,
+                      CORNER.TOP_LEFT
+                  )
+                : new Vector(bounds.left + borderLeftWidth / 2, bounds.top + borderTopWidth / 2);
+        this.topRightBorderStroke =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + topWidth,
+                      bounds.top + borderTopWidth / 2,
+                      trh - borderRightWidth / 2,
+                      trv - borderTopWidth / 2,
+                      CORNER.TOP_RIGHT
+                  )
+                : new Vector(bounds.left + bounds.width - borderRightWidth / 2, bounds.top + borderTopWidth / 2);
+        this.bottomRightBorderStroke =
+            brh > 0 || brv > 0
+                ? getCurvePoints(
+                      bounds.left + bottomWidth,
+                      bounds.top + rightHeight,
+                      brh - borderRightWidth / 2,
+                      brv - borderBottomWidth / 2,
+                      CORNER.BOTTOM_RIGHT
+                  )
+                : new Vector(
+                      bounds.left + bounds.width - borderRightWidth / 2,
+                      bounds.top + bounds.height - borderBottomWidth / 2
+                  );
+        this.bottomLeftBorderStroke =
+            blh > 0 || blv > 0
+                ? getCurvePoints(
+                      bounds.left + borderLeftWidth / 2,
+                      bounds.top + leftHeight,
+                      blh - borderLeftWidth / 2,
+                      blv - borderBottomWidth / 2,
+                      CORNER.BOTTOM_LEFT
+                  )
+                : new Vector(bounds.left + borderLeftWidth / 2, bounds.top + bounds.height - borderBottomWidth / 2);
         this.topLeftBorderBox =
             tlh > 0 || tlv > 0
                 ? getCurvePoints(bounds.left, bounds.top, tlh, tlv, CORNER.TOP_LEFT)
@@ -89,10 +236,10 @@ export class BoundCurves {
         this.topRightPaddingBox =
             trh > 0 || trv > 0
                 ? getCurvePoints(
-                      bounds.left + Math.min(topWidth, bounds.width + borderLeftWidth),
+                      bounds.left + Math.min(topWidth, bounds.width - borderRightWidth),
                       bounds.top + borderTopWidth,
-                      topWidth > bounds.width + borderLeftWidth ? 0 : trh - borderLeftWidth,
-                      trv - borderTopWidth,
+                      topWidth > bounds.width + borderRightWidth ? 0 : Math.max(0, trh - borderRightWidth),
+                      Math.max(0, trv - borderTopWidth),
                       CORNER.TOP_RIGHT
                   )
                 : new Vector(bounds.left + bounds.width - borderRightWidth, bounds.top + borderTopWidth);
@@ -100,9 +247,9 @@ export class BoundCurves {
             brh > 0 || brv > 0
                 ? getCurvePoints(
                       bounds.left + Math.min(bottomWidth, bounds.width - borderLeftWidth),
-                      bounds.top + Math.min(rightHeight, bounds.height + borderTopWidth),
+                      bounds.top + Math.min(rightHeight, bounds.height - borderBottomWidth),
                       Math.max(0, brh - borderRightWidth),
-                      brv - borderBottomWidth,
+                      Math.max(0, brv - borderBottomWidth),
                       CORNER.BOTTOM_RIGHT
                   )
                 : new Vector(
@@ -113,9 +260,9 @@ export class BoundCurves {
             blh > 0 || blv > 0
                 ? getCurvePoints(
                       bounds.left + borderLeftWidth,
-                      bounds.top + leftHeight,
+                      bounds.top + Math.min(leftHeight, bounds.height - borderBottomWidth),
                       Math.max(0, blh - borderLeftWidth),
-                      blv - borderBottomWidth,
+                      Math.max(0, blv - borderBottomWidth),
                       CORNER.BOTTOM_LEFT
                   )
                 : new Vector(bounds.left + borderLeftWidth, bounds.top + bounds.height - borderBottomWidth);

src/render/canvas/canvas-renderer.ts

@@ -8,10 +8,15 @@ import {TextContainer} from '../../dom/text-container';
 import {Path, transformPath} from '../path';
 import {BACKGROUND_CLIP} from '../../css/property-descriptors/background-clip';
 import {BoundCurves, calculateBorderBoxPath, calculateContentBoxPath, calculatePaddingBoxPath} from '../bound-curves';
-import {isBezierCurve} from '../bezier-curve';
+import {BezierCurve, isBezierCurve} from '../bezier-curve';
 import {Vector} from '../vector';
 import {CSSImageType, CSSURLImage, isLinearGradient, isRadialGradient} from '../../css/types/image';
-import {parsePathForBorder} from '../border';
+import {
+    parsePathForBorder,
+    parsePathForBorderDoubleInner,
+    parsePathForBorderDoubleOuter,
+    parsePathForBorderStroke
+} from '../border';
 import {Cache} from '../../core/cache-storage';
 import {calculateBackgroundRendering, getBackgroundValueForIndex} from '../background';
 import {isDimensionToken} from '../../css/syntax/parser';
@@ -22,7 +27,7 @@ import {contentBox} from '../box-sizing';
 import {CanvasElementContainer} from '../../dom/replaced-elements/canvas-element-container';
 import {SVGElementContainer} from '../../dom/replaced-elements/svg-element-container';
 import {ReplacedElementContainer} from '../../dom/replaced-elements/index';
-import {EffectTarget, IElementEffect, isClipEffect, isTransformEffect} from '../effects';
+import {EffectTarget, IElementEffect, isClipEffect, isOpacityEffect, isTransformEffect} from '../effects';
 import {contains} from '../../core/bitwise';
 import {calculateGradientDirection, calculateRadius, processColorStops} from '../../css/types/functions/gradient';
 import {FIFTY_PERCENT, getAbsoluteValue} from '../../css/types/length-percentage';
@@ -38,6 +43,7 @@ import {TextareaElementContainer} from '../../dom/elements/textarea-element-cont
 import {SelectElementContainer} from '../../dom/elements/select-element-container';
 import {IFrameElementContainer} from '../../dom/replaced-elements/iframe-element-container';
 import {TextShadow} from '../../css/property-descriptors/text-shadow';
+import {PAINT_ORDER_LAYER} from '../../css/property-descriptors/paint-order';
 
 export type RenderConfigurations = RenderOptions & {
     backgroundColor: Color | null;
@@ -71,32 +77,36 @@ export class CanvasRenderer {
         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);
         this.ctx.textBaseline = 'bottom';
         this._activeEffects = [];
         Logger.getInstance(options.id).debug(
-            `Canvas renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${
-                options.scale
-            }`
+            `Canvas renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}`
         );
     }
 
-    applyEffects(effects: IElementEffect[], target: EffectTarget) {
+    applyEffects(effects: IElementEffect[], target: EffectTarget): void {
         while (this._activeEffects.length) {
             this.popEffect();
         }
 
-        effects.filter(effect => contains(effect.target, target)).forEach(effect => this.applyEffect(effect));
+        effects.filter((effect) => contains(effect.target, target)).forEach((effect) => this.applyEffect(effect));
     }
 
-    applyEffect(effect: IElementEffect) {
+    applyEffect(effect: IElementEffect): void {
         this.ctx.save();
+        if (isOpacityEffect(effect)) {
+            this.ctx.globalAlpha = effect.opacity;
+        }
+
         if (isTransformEffect(effect)) {
             this.ctx.translate(effect.offsetX, effect.offsetY);
             this.ctx.transform(
@@ -118,33 +128,32 @@ export class CanvasRenderer {
         this._activeEffects.push(effect);
     }
 
-    popEffect() {
+    popEffect(): void {
         this._activeEffects.pop();
         this.ctx.restore();
     }
 
-    async renderStack(stack: StackingContext) {
+    async renderStack(stack: StackingContext): Promise<void> {
         const styles = stack.element.container.styles;
         if (styles.isVisible()) {
-            this.ctx.globalAlpha = styles.opacity;
             await this.renderStackContent(stack);
         }
     }
 
-    async renderNode(paint: ElementPaint) {
+    async renderNode(paint: ElementPaint): Promise<void> {
         if (paint.container.styles.isVisible()) {
             await this.renderNodeBackgroundAndBorders(paint);
             await this.renderNodeContent(paint);
         }
     }
 
-    renderTextWithLetterSpacing(text: TextBounds, letterSpacing: number) {
+    renderTextWithLetterSpacing(text: TextBounds, letterSpacing: number, baseline: number): void {
         if (letterSpacing === 0) {
-            this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
+            this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
         } else {
-            const letters = toCodePoints(text.text).map(i => fromCodePoint(i));
+            const letters = toCodePoints(text.text).map((i) => fromCodePoint(i));
             letters.reduce((left, letter) => {
-                this.ctx.fillText(letter, left, text.bounds.top + text.bounds.height);
+                this.ctx.fillText(letter, left, text.bounds.top + baseline);
 
                 return left + this.ctx.measureText(letter).width;
             }, text.bounds.left);
@@ -153,7 +162,7 @@ export class CanvasRenderer {
 
     private createFontStyle(styles: CSSParsedDeclaration): string[] {
         const fontVariant = styles.fontVariant
-            .filter(variant => variant === 'normal' || variant === 'small-caps')
+            .filter((variant) => variant === 'normal' || variant === 'small-caps')
             .join('');
         const fontFamily = styles.fontFamily.join(', ');
         const fontSize = isDimensionToken(styles.fontSize)
@@ -167,68 +176,92 @@ export class CanvasRenderer {
         ];
     }
 
-    async renderTextNode(text: TextContainer, styles: CSSParsedDeclaration) {
+    async renderTextNode(text: TextContainer, styles: CSSParsedDeclaration): Promise<void> {
         const [font, fontFamily, fontSize] = this.createFontStyle(styles);
 
         this.ctx.font = font;
 
-        text.textBounds.forEach(text => {
-            this.ctx.fillStyle = asString(styles.color);
-            this.renderTextWithLetterSpacing(text, styles.letterSpacing);
-            const textShadows: TextShadow = styles.textShadow;
+        this.ctx.textBaseline = 'alphabetic';
+        const {baseline, middle} = this.fontMetrics.getMetrics(fontFamily, fontSize);
+        const paintOrder = styles.paintOrder;
 
-            if (textShadows.length && text.text.trim().length) {
-                textShadows
-                    .slice(0)
-                    .reverse()
-                    .forEach(textShadow => {
-                        this.ctx.shadowColor = asString(textShadow.color);
-                        this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
-                        this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
-                        this.ctx.shadowBlur = textShadow.blur.number;
+        text.textBounds.forEach((text) => {
+            paintOrder.forEach((paintOrderLayer) => {
+                switch (paintOrderLayer) {
+                    case PAINT_ORDER_LAYER.FILL:
+                        this.ctx.fillStyle = asString(styles.color);
+                        this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
+                        const textShadows: TextShadow = styles.textShadow;
 
-                        this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
-                    });
+                        if (textShadows.length && text.text.trim().length) {
+                            textShadows
+                                .slice(0)
+                                .reverse()
+                                .forEach((textShadow) => {
+                                    this.ctx.shadowColor = asString(textShadow.color);
+                                    this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
+                                    this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
+                                    this.ctx.shadowBlur = textShadow.blur.number;
 
-                this.ctx.shadowColor = '';
-                this.ctx.shadowOffsetX = 0;
-                this.ctx.shadowOffsetY = 0;
-                this.ctx.shadowBlur = 0;
-            }
+                                    this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
+                                });
 
-            if (styles.textDecorationLine.length) {
-                this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
-                styles.textDecorationLine.forEach(textDecorationLine => {
-                    switch (textDecorationLine) {
-                        case TEXT_DECORATION_LINE.UNDERLINE:
-                            // Draws a line at the baseline of the font
-                            // TODO As some browsers display the line as more than 1px if the font-size is big,
-                            // need to take that into account both in position and size
-                            const {baseline} = this.fontMetrics.getMetrics(fontFamily, fontSize);
-                            this.ctx.fillRect(
-                                text.bounds.left,
-                                Math.round(text.bounds.top + baseline),
-                                text.bounds.width,
-                                1
-                            );
+                            this.ctx.shadowColor = '';
+                            this.ctx.shadowOffsetX = 0;
+                            this.ctx.shadowOffsetY = 0;
+                            this.ctx.shadowBlur = 0;
+                        }
 
-                            break;
-                        case TEXT_DECORATION_LINE.OVERLINE:
-                            this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top), text.bounds.width, 1);
-                            break;
-                        case TEXT_DECORATION_LINE.LINE_THROUGH:
-                            // TODO try and find exact position for line-through
-                            const {middle} = this.fontMetrics.getMetrics(fontFamily, fontSize);
-                            this.ctx.fillRect(
-                                text.bounds.left,
-                                Math.ceil(text.bounds.top + middle),
-                                text.bounds.width,
-                                1
-                            );
-                            break;
-                    }
-                });
-            }
+                        if (styles.textDecorationLine.length) {
+                            this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
+                            styles.textDecorationLine.forEach((textDecorationLine) => {
+                                switch (textDecorationLine) {
+                                    case TEXT_DECORATION_LINE.UNDERLINE:
+                                        // Draws a line at the baseline of the font
+                                        // TODO As some browsers display the line as more than 1px if the font-size is big,
+                                        // need to take that into account both in position and size
+                                        this.ctx.fillRect(
+                                            text.bounds.left,
+                                            Math.round(text.bounds.top + baseline),
+                                            text.bounds.width,
+                                            1
+                                        );
+
+                                        break;
+                                    case TEXT_DECORATION_LINE.OVERLINE:
+                                        this.ctx.fillRect(
+                                            text.bounds.left,
+                                            Math.round(text.bounds.top),
+                                            text.bounds.width,
+                                            1
+                                        );
+                                        break;
+                                    case TEXT_DECORATION_LINE.LINE_THROUGH:
+                                        // TODO try and find exact position for line-through
+                                        this.ctx.fillRect(
+                                            text.bounds.left,
+                                            Math.ceil(text.bounds.top + middle),
+                                            text.bounds.width,
+                                            1
+                                        );
+                                        break;
+                                }
+                            });
+                        }
+                        break;
+                    case PAINT_ORDER_LAYER.STROKE:
+                        if (styles.webkitTextStrokeWidth && text.text.trim().length) {
+                            this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
+                            this.ctx.lineWidth = styles.webkitTextStrokeWidth;
+                            this.ctx.lineJoin = !!(window as any).chrome ? 'miter' : 'round';
+                            this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline);
+                        }
+                        this.ctx.strokeStyle = '';
+                        this.ctx.lineWidth = 0;
+                        this.ctx.lineJoin = 'miter';
+                        break;
+                }
+            });
         });
     }
 
@@ -236,7 +269,7 @@ export class CanvasRenderer {
         container: ReplacedElementContainer,
         curves: BoundCurves,
         image: HTMLImageElement | HTMLCanvasElement
-    ) {
+    ): void {
         if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
             const box = contentBox(container);
             const path = calculatePaddingBoxPath(curves);
@@ -258,7 +291,7 @@ export class CanvasRenderer {
         }
     }
 
-    async renderNodeContent(paint: ElementPaint) {
+    async renderNodeContent(paint: ElementPaint): Promise<void> {
         this.applyEffects(paint.effects, EffectTarget.CONTENT);
         const container = paint.container;
         const curves = paint.curves;
@@ -306,17 +339,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) {
@@ -359,10 +394,13 @@ export class CanvasRenderer {
         }
 
         if (isTextInputElement(container) && container.value.length) {
-            [this.ctx.font] = this.createFontStyle(styles);
+            const [fontFamily, fontSize] = this.createFontStyle(styles);
+            const {baseline} = this.fontMetrics.getMetrics(fontFamily, fontSize);
+
+            this.ctx.font = fontFamily;
             this.ctx.fillStyle = asString(styles.color);
 
-            this.ctx.textBaseline = 'middle';
+            this.ctx.textBaseline = 'alphabetic';
             this.ctx.textAlign = canvasTextAlign(container.styles.textAlign);
 
             const bounds = contentBox(container);
@@ -389,9 +427,13 @@ export class CanvasRenderer {
             ]);
 
             this.ctx.clip();
-            this.renderTextWithLetterSpacing(new TextBounds(container.value, textBounds), styles.letterSpacing);
+            this.renderTextWithLetterSpacing(
+                new TextBounds(container.value, textBounds),
+                styles.letterSpacing,
+                baseline
+            );
             this.ctx.restore();
-            this.ctx.textBaseline = 'bottom';
+            this.ctx.textBaseline = 'alphabetic';
             this.ctx.textAlign = 'left';
         }
 
@@ -409,7 +451,9 @@ export class CanvasRenderer {
                     }
                 }
             } else if (paint.listValue && container.styles.listStyleType !== LIST_STYLE_TYPE.NONE) {
-                [this.ctx.font] = this.createFontStyle(styles);
+                const [fontFamily] = this.createFontStyle(styles);
+
+                this.ctx.font = fontFamily;
                 this.ctx.fillStyle = asString(styles.color);
 
                 this.ctx.textBaseline = 'middle';
@@ -421,14 +465,18 @@ export class CanvasRenderer {
                     computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 1
                 );
 
-                this.renderTextWithLetterSpacing(new TextBounds(paint.listValue, bounds), styles.letterSpacing);
+                this.renderTextWithLetterSpacing(
+                    new TextBounds(paint.listValue, bounds),
+                    styles.letterSpacing,
+                    computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 2
+                );
                 this.ctx.textBaseline = 'bottom';
                 this.ctx.textAlign = 'left';
             }
         }
     }
 
-    async renderStackContent(stack: StackingContext) {
+    async renderStackContent(stack: StackingContext): Promise<void> {
         // https://www.w3.org/TR/css-position-3/#painting-order
         // 1. the background and borders of the element forming the stacking context.
         await this.renderNodeBackgroundAndBorders(stack.element);
@@ -476,7 +524,7 @@ export class CanvasRenderer {
         }
     }
 
-    mask(paths: Path[]) {
+    mask(paths: Path[]): void {
         this.ctx.beginPath();
         this.ctx.moveTo(0, 0);
         this.ctx.lineTo(this.canvas.width, 0);
@@ -487,13 +535,13 @@ export class CanvasRenderer {
         this.ctx.closePath();
     }
 
-    path(paths: Path[]) {
+    path(paths: Path[]): void {
         this.ctx.beginPath();
         this.formatPath(paths);
         this.ctx.closePath();
     }
 
-    formatPath(paths: Path[]) {
+    formatPath(paths: Path[]): void {
         paths.forEach((point, index) => {
             const start: Vector = isBezierCurve(point) ? point.start : point;
             if (index === 0) {
@@ -515,7 +563,7 @@ export class CanvasRenderer {
         });
     }
 
-    renderRepeat(path: Path[], pattern: CanvasPattern | CanvasGradient, offsetX: number, offsetY: number) {
+    renderRepeat(path: Path[], pattern: CanvasPattern | CanvasGradient, offsetX: number, offsetY: number): void {
         this.path(path);
         this.ctx.fillStyle = pattern;
         this.ctx.translate(offsetX, offsetY);
@@ -528,15 +576,16 @@ export class CanvasRenderer {
             return image;
         }
 
-        const canvas = (this.canvas.ownerDocument as Document).createElement('canvas');
-        canvas.width = width;
-        canvas.height = height;
+        const ownerDocument = this.canvas.ownerDocument ?? document;
+        const canvas = ownerDocument.createElement('canvas');
+        canvas.width = Math.max(1, width);
+        canvas.height = Math.max(1, height);
         const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
         ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
         return canvas;
     }
 
-    async renderBackgroundImage(container: ElementContainer) {
+    async renderBackgroundImage(container: ElementContainer): Promise<void> {
         let index = container.styles.backgroundImage.length - 1;
         for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) {
             if (backgroundImage.type === CSSImageType.URL) {
@@ -570,14 +619,16 @@ export class CanvasRenderer {
                 const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
                 const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
 
-                processColorStops(backgroundImage.stops, lineLength).forEach(colorStop =>
+                processColorStops(backgroundImage.stops, lineLength).forEach((colorStop) =>
                     gradient.addColorStop(colorStop.stop, asString(colorStop.color))
                 );
 
                 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,
@@ -592,7 +643,7 @@ export class CanvasRenderer {
                 if (rx > 0 && rx > 0) {
                     const radialGradient = this.ctx.createRadialGradient(left + x, top + y, 0, left + x, top + y, rx);
 
-                    processColorStops(backgroundImage.stops, rx * 2).forEach(colorStop =>
+                    processColorStops(backgroundImage.stops, rx * 2).forEach((colorStop) =>
                         radialGradient.addColorStop(colorStop.stop, asString(colorStop.color))
                     );
 
@@ -621,22 +672,37 @@ export class CanvasRenderer {
         }
     }
 
-    async renderBorder(color: Color, side: number, curvePoints: BoundCurves) {
+    async renderSolidBorder(color: Color, side: number, curvePoints: BoundCurves): Promise<void> {
         this.path(parsePathForBorder(curvePoints, side));
         this.ctx.fillStyle = asString(color);
         this.ctx.fill();
     }
 
-    async renderNodeBackgroundAndBorders(paint: ElementPaint) {
+    async renderDoubleBorder(color: Color, width: number, side: number, curvePoints: BoundCurves): Promise<void> {
+        if (width < 3) {
+            await this.renderSolidBorder(color, side, curvePoints);
+            return;
+        }
+
+        const outerPaths = parsePathForBorderDoubleOuter(curvePoints, side);
+        this.path(outerPaths);
+        this.ctx.fillStyle = asString(color);
+        this.ctx.fill();
+        const innerPaths = parsePathForBorderDoubleInner(curvePoints, side);
+        this.path(innerPaths);
+        this.ctx.fill();
+    }
+
+    async renderNodeBackgroundAndBorders(paint: ElementPaint): Promise<void> {
         this.applyEffects(paint.effects, EffectTarget.BACKGROUND_BORDERS);
         const styles = paint.container.styles;
         const hasBackground = !isTransparent(styles.backgroundColor) || styles.backgroundImage.length;
 
         const borders = [
-            {style: styles.borderTopStyle, color: styles.borderTopColor},
-            {style: styles.borderRightStyle, color: styles.borderRightColor},
-            {style: styles.borderBottomStyle, color: styles.borderBottomColor},
-            {style: styles.borderLeftStyle, color: styles.borderLeftColor}
+            {style: styles.borderTopStyle, color: styles.borderTopColor, width: styles.borderTopWidth},
+            {style: styles.borderRightStyle, color: styles.borderRightColor, width: styles.borderRightWidth},
+            {style: styles.borderBottomStyle, color: styles.borderBottomColor, width: styles.borderBottomWidth},
+            {style: styles.borderLeftStyle, color: styles.borderLeftColor, width: styles.borderLeftWidth}
         ];
 
         const backgroundPaintingArea = calculateBackgroundCurvedPaintingArea(
@@ -661,7 +727,7 @@ export class CanvasRenderer {
             styles.boxShadow
                 .slice(0)
                 .reverse()
-                .forEach(shadow => {
+                .forEach((shadow) => {
                     this.ctx.save();
                     const borderBoxArea = calculateBorderBoxPath(paint.curves);
                     const maskOffset = shadow.inset ? 0 : MASK_OFFSET;
@@ -696,10 +762,141 @@ 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);
+            if (border.style !== BORDER_STYLE.NONE && !isTransparent(border.color) && border.width > 0) {
+                if (border.style === BORDER_STYLE.DASHED) {
+                    await this.renderDashedDottedBorder(
+                        border.color,
+                        border.width,
+                        side,
+                        paint.curves,
+                        BORDER_STYLE.DASHED
+                    );
+                } else if (border.style === BORDER_STYLE.DOTTED) {
+                    await this.renderDashedDottedBorder(
+                        border.color,
+                        border.width,
+                        side,
+                        paint.curves,
+                        BORDER_STYLE.DOTTED
+                    );
+                } else if (border.style === BORDER_STYLE.DOUBLE) {
+                    await this.renderDoubleBorder(border.color, border.width, side, paint.curves);
+                } else {
+                    await this.renderSolidBorder(border.color, side, paint.curves);
+                }
+            }
+            side++;
+        }
+    }
+
+    async renderDashedDottedBorder(
+        color: Color,
+        width: number,
+        side: number,
+        curvePoints: BoundCurves,
+        style: BORDER_STYLE
+    ): Promise<void> {
+        this.ctx.save();
+
+        const strokePaths = parsePathForBorderStroke(curvePoints, side);
+        const boxPaths = parsePathForBorder(curvePoints, side);
+
+        if (style === BORDER_STYLE.DASHED) {
+            this.path(boxPaths);
+            this.ctx.clip();
+        }
+
+        let startX, startY, endX, endY;
+        if (isBezierCurve(boxPaths[0])) {
+            startX = (boxPaths[0] as BezierCurve).start.x;
+            startY = (boxPaths[0] as BezierCurve).start.y;
+        } else {
+            startX = (boxPaths[0] as Vector).x;
+            startY = (boxPaths[0] as Vector).y;
+        }
+        if (isBezierCurve(boxPaths[1])) {
+            endX = (boxPaths[1] as BezierCurve).end.x;
+            endY = (boxPaths[1] as BezierCurve).end.y;
+        } else {
+            endX = (boxPaths[1] as Vector).x;
+            endY = (boxPaths[1] as Vector).y;
+        }
+
+        let length;
+        if (side === 0 || side === 2) {
+            length = Math.abs(startX - endX);
+        } else {
+            length = Math.abs(startY - endY);
+        }
+
+        this.ctx.beginPath();
+        if (style === BORDER_STYLE.DOTTED) {
+            this.formatPath(strokePaths);
+        } else {
+            this.formatPath(boxPaths.slice(0, 2));
+        }
+
+        let dashLength = width < 3 ? width * 3 : width * 2;
+        let spaceLength = width < 3 ? width * 2 : width;
+        if (style === BORDER_STYLE.DOTTED) {
+            dashLength = width;
+            spaceLength = width;
+        }
+
+        let useLineDash = true;
+        if (length <= dashLength * 2) {
+            useLineDash = false;
+        } else if (length <= dashLength * 2 + spaceLength) {
+            const multiplier = length / (2 * dashLength + spaceLength);
+            dashLength *= multiplier;
+            spaceLength *= multiplier;
+        } else {
+            const numberOfDashes = Math.floor((length + spaceLength) / (dashLength + spaceLength));
+            const minSpace = (length - numberOfDashes * dashLength) / (numberOfDashes - 1);
+            const maxSpace = (length - (numberOfDashes + 1) * dashLength) / numberOfDashes;
+            spaceLength =
+                maxSpace <= 0 || Math.abs(spaceLength - minSpace) < Math.abs(spaceLength - maxSpace)
+                    ? minSpace
+                    : maxSpace;
+        }
+
+        if (useLineDash) {
+            if (style === BORDER_STYLE.DOTTED) {
+                this.ctx.setLineDash([0, dashLength + spaceLength]);
+            } else {
+                this.ctx.setLineDash([dashLength, spaceLength]);
             }
         }
+
+        if (style === BORDER_STYLE.DOTTED) {
+            this.ctx.lineCap = 'round';
+            this.ctx.lineWidth = width;
+        } else {
+            this.ctx.lineWidth = width * 2 + 1.1;
+        }
+        this.ctx.strokeStyle = asString(color);
+        this.ctx.stroke();
+        this.ctx.setLineDash([]);
+
+        // dashed round edge gap
+        if (style === BORDER_STYLE.DASHED) {
+            if (isBezierCurve(boxPaths[0])) {
+                const path1 = boxPaths[3] as BezierCurve;
+                const path2 = boxPaths[0] as BezierCurve;
+                this.ctx.beginPath();
+                this.formatPath([new Vector(path1.end.x, path1.end.y), new Vector(path2.start.x, path2.start.y)]);
+                this.ctx.stroke();
+            }
+            if (isBezierCurve(boxPaths[1])) {
+                const path1 = boxPaths[1] as BezierCurve;
+                const path2 = boxPaths[2] as BezierCurve;
+                this.ctx.beginPath();
+                this.formatPath([new Vector(path1.end.x, path1.end.y), new Vector(path2.start.x, path2.start.y)]);
+                this.ctx.stroke();
+            }
+        }
+
+        this.ctx.restore();
     }
 
     async render(element: ElementContainer): Promise<HTMLCanvasElement> {

src/render/canvas/foreignobject-renderer.ts

@@ -20,13 +20,11 @@ export class ForeignObjectRenderer {
         this.ctx.scale(this.options.scale, this.options.scale);
         this.ctx.translate(-options.x + options.scrollX, -options.y + options.scrollY);
         Logger.getInstance(options.id).debug(
-            `EXPERIMENTAL ForeignObject renderer initialized (${options.width}x${options.height} at ${options.x},${
-                options.y
-            }) with scale ${options.scale}`
+            `EXPERIMENTAL ForeignObject renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}`
         );
     }
 
-    async render(element: HTMLElement) {
+    async render(element: HTMLElement): Promise<HTMLCanvasElement> {
         const svg = createForeignObjectSVG(
             Math.max(this.options.windowWidth, this.options.width) * this.options.scale,
             Math.max(this.options.windowHeight, this.options.height) * this.options.scale,

src/render/effects.ts

@@ -3,7 +3,8 @@ import {Path} from './path';
 
 export const enum EffectType {
     TRANSFORM = 0,
-    CLIP = 1
+    CLIP = 1,
+    OPACITY = 2
 }
 
 export const enum EffectTarget {
@@ -17,33 +18,41 @@ export interface IElementEffect {
 }
 
 export class TransformEffect implements IElementEffect {
-    readonly type: EffectType;
-    readonly target: number;
+    readonly type: EffectType = EffectType.TRANSFORM;
+    readonly target: number = EffectTarget.BACKGROUND_BORDERS | EffectTarget.CONTENT;
     readonly offsetX: number;
     readonly offsetY: number;
     readonly matrix: Matrix;
 
     constructor(offsetX: number, offsetY: number, matrix: Matrix) {
-        this.type = EffectType.TRANSFORM;
         this.offsetX = offsetX;
         this.offsetY = offsetY;
         this.matrix = matrix;
-        this.target = EffectTarget.BACKGROUND_BORDERS | EffectTarget.CONTENT;
     }
 }
 
 export class ClipEffect implements IElementEffect {
-    readonly type: EffectType;
+    readonly type: EffectType = EffectType.CLIP;
     readonly target: number;
     readonly path: Path[];
 
     constructor(path: Path[], target: EffectTarget) {
-        this.type = EffectType.CLIP;
         this.target = target;
         this.path = path;
     }
 }
 
+export class OpacityEffect implements IElementEffect {
+    readonly type: EffectType = EffectType.OPACITY;
+    readonly target: number = EffectTarget.BACKGROUND_BORDERS | EffectTarget.CONTENT;
+    readonly opacity: number;
+
+    constructor(opacity: number) {
+        this.opacity = opacity;
+    }
+}
+
 export const isTransformEffect = (effect: IElementEffect): effect is TransformEffect =>
     effect.type === EffectType.TRANSFORM;
 export const isClipEffect = (effect: IElementEffect): effect is ClipEffect => effect.type === EffectType.CLIP;
+export const isOpacityEffect = (effect: IElementEffect): effect is OpacityEffect => effect.type === EffectType.OPACITY;

src/render/stacking-context.ts

@@ -1,7 +1,7 @@
 import {ElementContainer, FLAGS} from '../dom/element-container';
 import {contains} from '../core/bitwise';
 import {BoundCurves, calculateBorderBoxPath, calculatePaddingBoxPath} from './bound-curves';
-import {ClipEffect, EffectTarget, IElementEffect, TransformEffect} from './effects';
+import {ClipEffect, EffectTarget, IElementEffect, OpacityEffect, TransformEffect} from './effects';
 import {OVERFLOW} from '../css/property-descriptors/overflow';
 import {equalPath} from './path';
 import {DISPLAY} from '../css/property-descriptors/display';
@@ -41,6 +41,10 @@ export class ElementPaint {
         this.container = element;
         this.effects = parentStack.slice(0);
         this.curves = new BoundCurves(element);
+        if (element.styles.opacity < 1) {
+            this.effects.push(new OpacityEffect(element.styles.opacity));
+        }
+
         if (element.styles.transform !== null) {
             const offsetX = element.bounds.left + element.styles.transformOrigin[0].number;
             const offsetY = element.bounds.top + element.styles.transformOrigin[1].number;
@@ -80,7 +84,7 @@ const parseStackTree = (
     realStackingContext: StackingContext,
     listItems: ElementPaint[]
 ) => {
-    parent.container.elements.forEach(child => {
+    parent.container.elements.forEach((child) => {
         const treatAsRealStackingContext = contains(child.flags, FLAGS.CREATES_REAL_STACKING_CONTEXT);
         const createsStackingContext = contains(child.flags, FLAGS.CREATES_STACKING_CONTEXT);
         const paintContainer = new ElementPaint(child, parent.getParentEffects());
@@ -104,16 +108,21 @@ 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);
                 } else if (order > 0) {
                     let index = 0;
                     parentStack.positiveZIndex.some((current, i) => {
-                        if (order > current.element.container.styles.zIndex.order) {
+                        if (order >= current.element.container.styles.zIndex.order) {
                             index = i + 1;
+                            return false;
+                        } else if (index > 0) {
                             return true;
                         }
 

tests/karma.ts

@@ -0,0 +1,33 @@
+import {screenshotApp, corsApp} from './server';
+import {Server} from 'http';
+import {config as KarmaConfig, Server as KarmaServer, TestResults} from 'karma';
+import * as path from 'path';
+
+const karmaTestRunner = (): Promise<void> =>
+    new Promise<void>((resolve, reject) => {
+        const karmaConfig = KarmaConfig.parseConfig(path.resolve(__dirname, '../karma.conf.js'), {});
+        const server = new KarmaServer(karmaConfig, (exitCode: number) => {
+            if (exitCode > 0) {
+                reject(`Karma has exited with ${exitCode}`);
+            } else {
+                resolve();
+            }
+        });
+        server.on('run_complete', (_browsers: any, _results: TestResults) => {
+            server.stop();
+        });
+        server.start();
+    });
+const servers: Server[] = [];
+
+servers.push(screenshotApp.listen(8000));
+servers.push(corsApp.listen(8081));
+
+karmaTestRunner()
+    .then(() => {
+        servers.forEach((server) => server.close());
+    })
+    .catch((e) => {
+        console.error(e);
+        process.exit(1);
+    });

tests/reftest-diff.ts

@@ -0,0 +1,32 @@
+import {sync} from 'glob';
+import {resolve, basename} from 'path';
+import {existsSync, promises} from 'fs';
+import {toMatchImageSnapshot} from 'jest-image-snapshot';
+
+const resultsDir = resolve(__dirname, '../results');
+const customSnapshotsDir = resolve(__dirname, '../tmp/snapshots');
+const customDiffDir = resolve(__dirname, '../tmp/snapshot-diffs');
+
+expect.extend({toMatchImageSnapshot});
+
+describe('Image diff', () => {
+    const files: string[] = sync('../tmp/reftests/**/*.png', {
+        cwd: __dirname,
+        root: resolve(__dirname, '../../')
+    }).filter((path) => existsSync(resolve(resultsDir, basename(path))));
+
+    it.each(files.map((path) => basename(path)))('%s', async (filename) => {
+        const previous = resolve(resultsDir, filename);
+        const previousSnap = resolve(customSnapshotsDir, `${filename}-snap.png`);
+        await promises.copyFile(previous, previousSnap);
+        const updated = resolve(__dirname, '../tmp/reftests/', filename);
+        const buffer = await promises.readFile(updated);
+
+        // @ts-ignore
+        expect(buffer).toMatchImageSnapshot({
+            customSnapshotsDir,
+            customSnapshotIdentifier: () => filename,
+            customDiffDir
+        });
+    });
+});

tests/reftests/background/box-shadow.html

@@ -9,7 +9,7 @@
             margin: 10px;
             display: inline-block;
             min-height: 50px;
-       //     border-radius: 10px;
+            border-radius: 10px;
         }
 
         body {

tests/reftests/background/size.html

@@ -9,6 +9,10 @@
             display: block;
             background:url("../../assets/image.jpg") center center;
         }
+        .sliver div {
+            background:url("../../assets/bg-sliver.png") center center;
+            background-size: 650px auto;
+        }
 
         .vertical {
             float: right;
@@ -57,5 +61,9 @@
     <div style='background-size: auto;'></div>
 </div>
 <div class="container" style="padding: 10px; background-size: contain; background-origin: content-box; background-clip: content-box"></div>
+<div class="container" style="background-size: calc(100% - 10px)"></div>
+<div class="sliver">
+    <div></div>
+</div>
 </body>
 </html>

tests/reftests/border/radius.html

@@ -63,6 +63,13 @@
         border-radius: 200px;
       }
 
+      .box7 {
+          border-width: 10px 10px 10px 1px;
+          border-left-color: transparent;
+          border-top-color: red;
+          border-right-color: green;
+      }
+
       .gauge{
           display: inline-block;
           width: 100px;
@@ -91,6 +98,7 @@
     <div class="box box4">&nbsp;</div>
     <div class="box box5">&nbsp;</div>
     <div class="box box6">&nbsp;</div>
+    <div class="box box7">&nbsp;</div>
     <div class="gauge gauge1"></div>
     <div class="gauge gauge2"></div>
     <div class="gauge gauge3"></div>

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>

tests/reftests/iframe.html

@@ -2,10 +2,21 @@
 <html>
 <head>
     <title>iframe test</title>
+    <script>
+        h2cOptions = {useCORS: true, proxy: null};
+    </script>
     <script type="text/javascript" src="../test.js"></script>
 </head>
 <body>
     <div style="background: cornflowerblue; padding: 20px; width: 200px;">Parent document content</div>
     <iframe src="/tests/assets/iframe/frame1.html" width="500" height="500"></iframe>
+    <iframe
+        title="Github"
+        src="https://ghbtns.com/github-btn.html?user=niklasvh&repo=html2canvas&type=star&count=true&size=large"
+        frameBorder="0"
+        scrolling="0"
+        width="160px"
+        height="30px"
+    ></iframe>
 </body>
 </html>

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;"  />
@@ -23,5 +24,22 @@
 
     <img src="../../assets/image.jpg" style="width:0px;height:0px;border:1px solid black" />
     <img src="../../assets/image.jpg" style="width:0px;height:0px;" />
+
+    <img srcset="../../assets/image.jpg, ../../assets/image2.jpg 2x" src="../../assets/image.jpg" style="width: 75px">
+
+    <script>
+      const base64 = "/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCABLAEsDAREAAhEBAxEB/8QAHAAAAgMBAQEBAAAAAAAAAAAABQcEBggCAwAJ/8QANxAAAgECBQEHAQUIAwEAAAAAAQIDBBEABQYSITEHExQiQVFhcTKBkbHBCCNCUnLR4fAWYqLx/8QAGwEAAQUBAQAAAAAAAAAAAAAAAQIDBAUGAAf/xAAzEQACAgECAwQHCAMAAAAAAAAAAQIDEQQhEjFBIlFhcRMUgZGhsdEFFSNCUsHh8DKi8f/aAAwDAQACEQMRAD8AxREirbfKlv6rYxDz0R6mmj2eohpqrLKmGVTJTVsEpG65sHF8dBSakpLmn8hq5pxTXRo0DlaCn1dB7eJZfxxD0b/FiyFqVmmQ1Yo/KMaRFBIj5tCTFSG3SsgP/sf3x0t0JTJtLTlJa0FSP31+R/0TCcYG8nM0Q9sLAQJoRzgnECoiFjggB7RC5wsSZHTLaGCQpJBSq68EbQ1sUjst72bdU1dy9x1mlPQJlNQY0p+9Rd67YwDcG/HGBVK12JPOPMF1darbUVt4GgoazdmeW1YNxKaea/8AUoJxVafsTj4P9xm5cVcvJjjhljjlRZDtBPt1xqlzMu3tsNjSulMrziigkVUkUOHK9RcdD8Ys6owcStsnJMsFV2ZUrxVDRqQ0luSL9P8AH5YcdUWhtWtC91T2e1mWRPUQx740BLKt7/X6YhTqcd0S4WKWxQZhiOPA+ccYICAy3Y4UAyXS/uwFXLGFv5kX++KCWHu5m6i3y4SbI7y0k0bZbZHQqTtT2/qw3FRUk1P5/QVJtxa4X8PqNHIanxmndMzg+Z6KEc+6kqfyxG4MXuPiyFJ4qcn3F5o9RGrzPbI5aRz6np7D2GLpSbfiZ9xWMD20Fq5MlgpF72PdNIyGE8OFFvMPjn7/ALsWlE3FIrbYcTH5keaw11MtnVz063xZqWSvccMkZhRwT08m4KRY3BwibSW4uCeTJ+qKA5PnuYURBXuZmVQ/Xbe6n8CMVTWGWXQATOCCLjBAQXbzHphQkyTS5XE1HTXpttTtPfB5bruvxt+LdcUc7e08PY3dcez2luTIsm3GwjhF+OW/xhl3eLHuHwLpo1pn0lkrRh5no2qICkSGRmZJSQAo6khhxhmxS9azFc8P3kLsqiUZeQ3dPafhmrFkU7HUh3Exsyi9269LeuL2Me0ZWUsIM6p7EKjtkzTLXi1XVaWaEvfwSkmqJZdq7Qy9LdSeOeD6WlSRAm8YbNDN2f6ry6lpqXRGq6RqjLXjapgzaiM3i4woPdK6sCpYXs3NuOuJXBjkR3JNbjRy+KvkpF8bEaaV1tYi5/8AuI0k2tx1NLkYQ/aB1XmucdrGeHLNQ5jl+X07ikjiptiITGNrNfaSSWvyTf7gMUt2olGxxjyRe0Uw9GnOOWxXyVuoVLM+rc7kBvYeIC2/BcNeszew+qK1+UGTVmdGRj/yjPV+PGH+2HVqJ94PRV/pQtos+1SPs0WVi/S5kP64S9PpespfAlLUaz9Efj9QtkEmuc/roaajgycB2AaRo5NsY9WJB6DHeraVvCcm/Z9BM9Vq4rMlFL2/Dc0dp7L4dO5eKWl6k7pJtoVpGtyxA6dOgxIqpVawipuvldLMgtRzIjbDJsBYeW32sSlAiNkLtI7Y6nRkMcOWGeKYKqrMsO8Ru91Qkeo3bfKP1wpN8XDEXCtSWWGv2Le1nXk2qJn1VXjNVrHWJJpy3euIRtLcKAFAO0X6k8Di+Jzmk4xiQ5UWRUnYsGvO23thyvs60bUVIq0GcV1O4yykU3ldyNvegeiITck8XFuThOqvhRXxN7vkDSUTvsUUtlzPzdzqecS940zOzkvI7HlmuSxPyeuMfF5e/M1/CkerKFiaZQZIiN19wJ+oGE5T2Ow2QGkhc7u7fn6YWmDhYMnyDLGBanrp43JG8TQhx09CtrYs5aaPSTIEPtKf54L2PHzyXrRmVQZTlJZFQyyctIqlbj0HOHKqvRrfdkbUah3yzyXcWnK6lK4Ps+0h2snqDiXFZITeA/leTSV1ZGii537DZbgAjn64kRhljbkkhqt+zkmo6ekLx0s61ZNJJT1se5GABNn4IN/0BxIlpctSi8MajqOcZLKG32e9immtA6berly+nVqaF3ip4dyxR2UndybliR1J4Fhh6FSj2p7sZna32Y8jM+faKzjU2YNmWZ54tZmFSAZJ54mdiB0A6WUDoBYYoZ6C62XHZYm34MtofaNNceCFbS80B6jskrWRQmb0e8g3D07gLb7zfCPuufSa9zF/elfWD96Kzn2iZ8mjqFmmjd46hoN5tGsjKBu2BjubhlPAsAet8Vl+mlTlt9f7jr+xa1aiNuMLpn+9Clyaan3tt7vbfjzjEbLJWUUxqqxBtdR6e+NJgy/IZmlKiTMdPpO8RiuWsL/aAPUYUlsBvvO8glmi1LHGEURzAhh6gAXGFxW4mT2HbpOhTxSSOGWNrbghBJ+behxOgiLKRobSWo6fJKGE11YYYmO9TI/mP8J2jkkm1uP1xNTSW5F3b2CGp9UxHTGZVCkmnaMokbdTu8vP44alPIBCxkKFHJsStwfS5FsN5AfSSkpMyXEaAFiebLwCfxOCAomrshgGofFzw0UVPVoHlqJgu+NhZJG5IFhwbnnzcemKfVVQVnHJJZ69f748zQaO6cqlFNvG2Onev+chT1MEwqZfDyQdxuOwVDhZAL9CPjpjOvbkzQLxFk8TpIA6kpe7WHpjTYMrnI49KVVHmGX0cdOsnhwLI5Ujc3sB1Nr9elz64dSBkFZ+9To7PaatqwsNNFUhWk3G0YY28xP8PNyfS+OinGRzawa07E4IaySCaVVeOQdOoBHS/vixqIFnMtnb8tatHpxcpjgepjqHlKzOYwU2bSoYA26g9PTBtWcYG4y4XuU4Z9mE+TJl88cMUJ2FlDFzcG9gbDi+GEmFyT5AWSInvFFyFJHHXp/nBE5PHLA0Ek9M7EtNEYw59T8/76YMe46W+5W9dd+cm76IWMDhZbRxuAkg2tuDgggMFuBzyeuIesjmviXTwT2fmWOhklY4Pr5815Cxly+GRwxy+lclQdypMoPA5spKj7iR7YoJVtPHAv8AZfLK9xpI2Jr/ACfwItT2YTToVjCsTx5W639Mah0dxkVbgjZVojV+nqhXyeKOeON9yxzuFHwASeAOTb3OBGqaFemj1Gpn2VVuudD51kdRkcFDPWqIvE1dTG7qLLd1CX5JDDn64kcDwMuxE3sNoNWdnarltd3FZRx37mYVQOxFAsGH2r9eelrYEISiGVkZLI3M/wBRTallp5p9qLGuyNAb2FuTf5OHWskdsATRb1L2Fgf9/XCcHZIrRHxJHsdxHryPyIwMCiPLAwa9gHS4t7m/GOwcQ66natgqaSQeWqjaJSSP4hcG5vYggdQbH3wmUOOLj3jlcuCal3CIqWplqJAaWGNtxJSSdkYH1upVbG/wMZnixtlL2r+PkazhT33+P8jGy5iViYnzWBv841hjwplh3RwX9SXPyS2OQcBNpWpYZWiO096E6X8u61vwxyE9AplEjLPmLBjdQFHwOOMFdRL5BOjdmijJJJAU/wC/gMcgs6pnLIpJuTUAH6XtgndWjwy1Qc1qeP5fzwFzO6EOR28dSDcfPVhW56j93x+eB1CBdXVEtLmmWiJzGDOQbH03DCJbNBXJiU1zUyUGtc+p6dzDBFXzqkacBQJDYDGV1F9kLpxi9k38zbaaqE6ISkt2kf/Z";
+      const bytes = atob(base64);
+      const uInt8Array = new Uint8Array(bytes.length);
+
+      for (let i = 0; i < bytes.length; ++i) {
+          uInt8Array[i] = bytes.charCodeAt(i);
+      }
+
+      const blob = new Blob([uInt8Array], { type: "image/jpeg" });
+      const img = document.createElement("img");
+      img.src = URL.createObjectURL(blob);
+      document.body.appendChild(img);
+    </script>
   </body>
 </html>

tests/reftests/images/svg/native_only.html

@@ -11,13 +11,22 @@
         body {
             font-family: Arial;
         }
+        svg:before {
+            content: " ";
+        }
     </style>
+    <style>
+        .html { font: italic 13px sans-serif; }
+        .two { font: bold 14px sans-serif; }
+        .canvas { font: italic 15px serif; fill: red; }
+    </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"
@@ -25,6 +34,19 @@
                   style="fill:#40aa54;fill-opacity:1;stroke:#20552a;stroke-width:7.99999952;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
         </g>
     </svg>
+    <svg width="50%" height="75%" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
+        <text x="40" y="20" class="html">html</text>
+        <text x="55" y="25" class="two">2</text>
+        <text x="65" y="35" class="canvas">canvas</text>
+    </svg>
     <img width="200" height="200" src="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjMwNiIgaGVpZ2h0PSIyOTYiPjxkZWZzIGlkPSJkZWZzNCIgLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYyLjQ2OTk1LC00NzcuMjg2MykiIGlkPSJsYXllcjEiPjxwYXRoIGQ9Im0gMzE0LjE1NzQ1LDQ4MS42OTU1OCBjIC01OS4yMDA4OSwwLjUzNzc0IC0xMTQuODA5NzksMzYuNzIyMTkgLTEzNy4zMTI1LDk1LjM0Mzc1IC0yOS4zOTEyOSw3Ni41NjY5MyA4LjgzOTMyLDE2Mi40NTI0NiA4NS40MDYyNSwxOTEuODQzNzUgbCAzNC4wMzEyNSwtODguNjg3NSBjIC0yMC4wNjc4LC03LjcxMzU4IC0zNC4zMTI1LC0yNy4xNTMyNCAtMzQuMzEyNSwtNDkuOTM3NSAwLC0yOS41NDcyMyAyMy45NTI3NywtNTMuNSA1My41LC01My41IDI5LjU0NzIzLDAgNTMuNSwyMy45NTI3NyA1My41LDUzLjUgMCwyMi43ODQyNiAtMTQuMjQ0Nyw0Mi4yMjM5MiAtMzQuMzEyNSw0OS45Mzc1IGwgMzQuMDMxMjUsODguNjg3NSBjIDM5LjI5MDg1LC0xNS4wODIzNCA3MC4zMjM5LC00Ni4xMTU0IDg1LjQwNjI1LC04NS40MDYyNSAyOS4zOTEyOSwtNzYuNTY2OTMgLTguODM5MzIsLTE2Mi40ODM3MSAtODUuNDA2MjUsLTE5MS44NzUgLTE3Ljk0NTM3LC02Ljg4ODU5IC0zNi40MDg1MywtMTAuMDcwODcgLTU0LjUzMTI1LC05LjkwNjI1IHoiIGlkPSJwYXRoMjgzMCIgc3R5bGU9ImZpbGw6IzQwYWE1NDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzIwNTUyYTtzdHJva2Utd2lkdGg6Ny45OTk5OTk1MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1vcGFjaXR5OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAvPjwvZz48L3N2Zz4=" /></div>
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width=50 height=20>
+        <g data-z-index="0.1" opacity="1" transform="translate(-974,-30) scale(1 1)">
+            <path fill="#7cb5ec" d="M 990 37.734399999999994 A 4 4 0 1 1 990.0039999993332 37.73439800000016 Z" opacity="1" stroke-width="0.00015790535835003006"></path>
+            <path fill="#7cb5ec" d="M 999 37.734399999999994 A 4 4 0 1 1 999.0039999993332 37.73439800000016 Z" opacity="1" stroke-width="0.00015790535835003006"></path>
+            <path fill="#7cb5ec" d="M 1009 37.734399999999994 A 4 4 0 1 1 1009.0039999993332 37.73439800000016 Z" opacity="1" stroke-width="0.00015790535835003006"></path>
+            <path fill="#7cb5ec" d="M 1019 37.734399999999994 A 4 4 0 1 1 1019.0039999993332 37.73439800000016 Z" opacity="1" stroke-width="0.00015790535835003006"></path>
+        </g>
+    </svg>
 </body>
 </html>

tests/reftests/overflow/overflow.html

@@ -128,5 +128,6 @@
 
     </script>
 </div>
+<div class="hidden">Hidden<div style="opacity: 0.5">With opacity</div></div>
 </body>
 </html>

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 {

tests/reftests/text/lang/chinese.html

@@ -3,7 +3,7 @@
   <head>
     <title>Chinese text</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <script type="text/javascript" src="../../test.js"></script>
+    <script type="text/javascript" src="../../../test.js"></script>
     <style>
       .chn-text-block {
         width: 500px;

tests/reftests/text/lang/persian.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html dir="rtl" lang="fa-IR">
+<head>
+    <title>Persian rtl</title>
+
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../../test.js"></script>
+    <style>
+        body{
+            font-family: Arial;
+        }
+        .test{
+            padding: 10px 25px;
+            direction: rtl;
+        }
+    </style>
+</head>
+<body>
+<div class="test" lang="fa">
+    <p>
+        سلام دنیا! این یک تست است...
+    </p>
+</div>
+<span class="test" lang="fa">من می‌توانم. این است قدرت جاوااسکریپت!</span>
+</body>
+</html>

tests/reftests/text/lang/thai.html

@@ -3,7 +3,7 @@
 <head>
     <title>Thai text</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <script type="text/javascript" src="../../test.js"></script>
+    <script type="text/javascript" src="../../../test.js"></script>
     <style>
         .text-block {
             width: 500px;

tests/reftests/text/stroke.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Text stroke tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        div span:first-child {
+            font-size: 2em;
+        }
+
+        div span:nth-child(2) {
+            font-size: 5em;
+        }
+
+        .stroke1 {
+            -webkit-text-stroke-width: .09em;
+            -webkit-text-stroke-color: red;
+            font-size: 1em;
+        }
+
+        .stroke2 {
+            -webkit-text-stroke-width: .12em;
+            -webkit-text-stroke-color: green;
+            font-size: 2em;
+        }
+
+        .stroke3 {
+            -webkit-text-stroke-width: .19em;
+            -webkit-text-stroke-color: blue;
+            font-size: 3em;
+        }
+
+        .ordered {
+            paint-order: stroke fill;
+        }
+
+        body {
+            font-family: Arial;
+        }
+    </style>
+</head>
+<body>
+<div class="stroke1">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke2">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke3">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke1 ordered">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke2 ordered">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke3 ordered">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke4">
+    Some text <span> with bigger text </span> that should have no stroke
+    <strong>Bolder text</strong> that makes things pretty
+</div>
+</body>
+</html>

tests/reftests/text/text.html

@@ -1,137 +1,153 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Text tests</title>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <script type="text/javascript" src="../../test.js"></script>
-        <style>
-            body {
-                font-family: Arial;
-            }
-            .small{
-                font-size:14px;
-                line-height: 1vw;
-            }
+<head>
+    <title>Text tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        body {
+            font-family: Arial;
+        }
 
-            .medium{
-                font-size:18px;
-                line-height: 2vw;
-            }
-            .large{
-                font-size:24px;
-                line-height: 3vw;
-            }
-            div{
-                float:left;
-            }
-            h2 {
-                clear:both;
-            }
-            h1 {
-                font-size: 36px;
-                line-height: 4vw;
-            }
+        .small {
+            font-size: 14px;
+            line-height: 1vw;
+        }
 
-            h2 {
-                font-size: 24px;
-                line-height: 3vw;
-            }
+        .medium {
+            font-size: 18px;
+            line-height: 2vw;
+        }
 
-            h3 {
-                font-size: 16px;
-                line-height: 2vw;
-            }
-        </style>
+        .large {
+            font-size: 24px;
+            line-height: 3vw;
+        }
 
-    </head>
-    <body>           <h1>&lt;h1&gt; text-decoration</h1>
-        <div style="font-family:Arial;">
-            <h2>Arial</h2>
-            <ol class="small">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
+        div {
+            float: left;
+        }
 
-            <ol class="medium">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-            <ol class="large">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-        </div>
+        h2 {
+            clear: both;
+        }
 
-        <div style="font-family:Verdana;">
-            <h2>Verdana</h2>
-            <ol class="small">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
+        h1 {
+            font-size: 36px;
+            line-height: 4vw;
+        }
 
-            <ol class="medium">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-            <ol class="large">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-        </div>
+        h2 {
+            font-size: 24px;
+            line-height: 3vw;
+        }
 
-        <div style="font-family:Tahoma;">
-            <h2>Tahoma</h2>
-            <ol class="small">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
+        h3 {
+            font-size: 16px;
+            line-height: 2vw;
+        }
 
-            <ol class="medium">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-            <ol class="large">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-        </div>
+        .raw {
+            font-size: 60px;
+            word-spacing: 30px;
+        }
+    </style>
 
-        <h2>&lt;h2&gt; text-transform</h2>
-        <ul>
-            <li style="text-transform:none;">text-transform:none;</li>
-            <li style="text-transform:capitalize;">text-transform: capitalize; (including foreign characters such as Öaäå)</li>
-            <li style="text-transform:uppercase;">text-transform:uppercase;</li>
-            <li style="text-transform:lowercase;">text-transform:lowercase;</li>
-        </ul>
-        <h3>&lt;h3&gt; misc text alignments</h3>
-        <ul>
-            <li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always be correct)</li>
-            <li style="line-height:35px;">line-height:35px; <br />(same goes for line-height)</li>
-            <li style="letter-spacing:5px;">letter-spacing:5px;</li>
-            <li style="letter-spacing:0.9px;">letter-spacing:0.9px;</li>
-            <li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
-            <li style="font-variant:small-caps;">font-variant:small-caps; </li>
-        </ul>
+</head>
+<body>
 
-        <div style="font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace">npm install --save html2canvas</div>
+<h1>&lt;h1&gt; text-decoration</h1>
+<div style="font-family:Arial;">
+    <h2>Arial</h2>
+    <ol class="small">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
 
-    </body>
+    <ol class="medium">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+    <ol class="large">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+</div>
+
+<div style="font-family:Verdana;">
+    <h2>Verdana</h2>
+    <ol class="small">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+    <ol class="medium">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+    <ol class="large">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+</div>
+<div style="font-family:Tahoma;">
+    <h2>Tahoma</h2>
+    <ol class="small">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+
+    <ol class="medium">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+    <ol class="large">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+</div>
+
+<h2>&lt;h2&gt; text-transform</h2>
+<ul>
+    <li style="text-transform:none;">text-transform:none;</li>
+    <li style="text-transform:capitalize;">text-transform: capitalize; (including foreign characters such as Öaäå)
+    </li>
+    <li style="text-transform:uppercase;">text-transform:uppercase;</li>
+    <li style="text-transform:lowercase;">text-transform:lowercase;</li>
+</ul>
+<h3>&lt;h3&gt; misc text alignments</h3>
+<ul>
+    <li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always
+        be correct)
+    </li>
+    <li style="line-height:35px;">line-height:35px; <br/>(same goes for line-height)</li>
+    <li style="letter-spacing:5px;">letter-spacing:5px;</li>
+    <li style="letter-spacing:0.9px;">letter-spacing:0.9px;</li>
+    <li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
+    <li style="font-variant:small-caps;">font-variant:small-caps;</li>
+</ul>
+
+<div style="font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace">npm install --save html2canvas</div>
+<div class="raw" style="">
+    <span>[AB / CD]</span>
+</div>
+<div>Emojis 🤷🏾‍♂️👨‍👩‍👧‍👦 :)</div>
+</body>
 </html>

tests/reftests/text/textarea.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>textarea</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        textarea{
+            font-family: Arial;
+            font-size: 14px;
+            width: 10em;
+            height: 90px;
+        }
+        div {
+            display: inline-block;
+        }
+    </style>
+
+</head>
+<body>
+<div>
+    <p>1. word wrap</p>
+    <textarea> A long text with many words that should be wrapped on various lines.
+    </textarea>
+
+    <p>2. padding</p>
+    <textarea style="padding: 1em">A long text with many words that should be wrapped on various lines.
+    </textarea>
+
+    <p>3. line height</p>
+    <textarea style="line-height: 25px">A long text with many words.
+    </textarea>
+
+    <p>4. letter spacing</p>
+    <textarea style="letter-spacing: 5px"> A long text with many words that should be wrapped on various lines.</textarea>
+</div>
+<div>
+    <p>5. multiple spaces</p>
+    <textarea>A long text with many           words     that should be wrapped on various lines.
+    </textarea>
+
+    <p>6. newlines</p>
+    <textarea>A long text with many
+          words that
+
+        should be wrapped on various lines.
+    </textarea>
+
+    <p>7. long word</p>
+    <textarea>Donaudampfschifffahrtsgesellschaftskapitänskochmütze</textarea>
+
+    <p>8. hyphen</p>
+    <textarea>A text with many-manymany manys.</textarea>
+</div>
+<div>
+    <p>9. kerning</p>
+    <textarea>AVAVAVAVAVAVAVAV TeTeTeTeTeTeTeTeTe YaYaYaYaYaYaYaYaY</textarea>
+
+    <p>10. kerning with letter spacing</p>
+    <textarea style="letter-spacing: 1px">AVAVAVAVAVAVAV TeTeTeTeTeTeTeTe YaYaYaYaYaYaYaY</textarea>
+
+    <p>11. kerning with letter spacing</p>
+    <textarea style="letter-spacing: 5px">AVAVAVAVAV TeTeTeTeTeT YaYaYaYaYa</textarea>
+
+</div>
+</body>
+</html>

tests/reftests/webcomponents/autonomous-custom-element.js

@@ -0,0 +1,45 @@
+class AutonomousCustomElement extends HTMLElement {
+    constructor() {
+        super();
+
+        const shadow = this.attachShadow({mode: 'open'});
+        const wrapper = document.createElement('span');
+        wrapper.setAttribute('class', 'wrapper');
+
+        const info = document.createElement('span');
+        info.setAttribute('class', 'info');
+
+        info.textContent = this.getAttribute('text');
+
+        const img = document.createElement('img');
+        img.src = this.getAttribute('img');
+
+        // Create some CSS to apply to the shadow dom
+        const style = document.createElement('style');
+
+        style.textContent = `
+      .wrapper {
+        position: relative;
+      }
+      .info {
+        font-size: 0.8rem;
+        width: 200px;
+        display: inline-block;
+        border: 1px solid black;
+        padding: 10px;
+        background: white;
+        border-radius: 10px;
+      }
+      img {
+        width: 100px;
+      }
+    `;
+
+        shadow.appendChild(style);
+        shadow.appendChild(wrapper);
+        wrapper.appendChild(img);
+        wrapper.appendChild(info);
+    }
+}
+
+customElements.define('autonomous-custom-element', AutonomousCustomElement);

tests/reftests/webcomponents/slot-element.js

@@ -0,0 +1,51 @@
+customElements.define('summary-display',
+    class extends HTMLElement {
+        constructor() {
+            super();
+
+            const template = document.getElementById('summary-display-template');
+            const templateContent = template.content;
+
+            const shadowRoot = this.attachShadow({mode: 'open'});
+            shadowRoot.appendChild(templateContent.cloneNode(true));
+
+            const items = Array.from(this.querySelectorAll('li'));
+            const descriptions = Array.from(this.querySelectorAll('p'));
+
+            items.forEach(item => {
+                handleClick(item);
+            });
+
+            descriptions.forEach(description => {
+                updateDisplay(description, items[1]);
+            });
+
+            function handleClick(item) {
+                item.addEventListener('click', function() {
+                    items.forEach(item => {
+                        item.style.backgroundColor = 'white';
+                    });
+
+                    descriptions.forEach(description => {
+                        updateDisplay(description, item);
+                    });
+                });
+            }
+
+            function updateDisplay(description, item) {
+                description.removeAttribute('slot');
+
+                if(description.getAttribute('data-name') === item.textContent) {
+                    description.setAttribute('slot', 'choice');
+                    item.style.backgroundColor = '#bad0e4';
+                }
+            }
+
+            const slots = this.shadowRoot.querySelectorAll('slot');
+            slots[1].addEventListener('slotchange', function(e) {
+                const nodes = slots[1].assignedNodes();
+                console.log(`Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`);
+            });
+        }
+    }
+);

tests/reftests/webcomponents/webcomponents.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Web components tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+
+    </style>
+</head>
+<body>
+<div>
+    <h1>Autonomous custom element</h1>
+    <autonomous-custom-element img="../../assets/image.jpg" text="This is text"></autonomous-custom-element>
+    <h1>Slot element</h1>
+    <summary-display>
+        <ul slot="master-list">
+            <li>Apples</li>
+            <li>Pears</li>
+            <li>Bananas</li>
+            <li>Oranges</li>
+            <li>Peaches</li>
+            <li>Strawberries</li>
+            <li>Blueberries</li>
+        </ul>
+
+        <p data-name="Apples">A common, sweet, crunchy fruit, usually green or yellow in color.</p>
+        <p data-name="Pears">A fairly common, sweet, usually green fruit, usually softer than Apples.</p>
+        <p data-name="Bananas">A long, curved, yellow fruit, with a fairly gentle flavor.</p>
+        <p data-name="Oranges">Orange in color, usually sweet but can be sharp, often contains pips.</p>
+        <p data-name="Peaches">An orange fruit with big stone in the middle, and sweet, juicy flesh.</p>
+        <p data-name="Strawberries">A red fruit with yellow seeds on the outside; has a sweet flavor and a pretty shape.</p>
+        <p data-name="Blueberries">They are berries and they are blue; sweet in flavor, small in size, round.</p>
+    </summary-display>
+
+    <template id="summary-display-template">
+        <article>
+            <div>
+                <slot name="master-list"></slot>
+            </div>
+            <div>
+                <slot name="choice"></slot>
+            </div>
+        </article>
+    </template>
+
+    <script src="autonomous-custom-element.js"></script>
+    <script src="slot-element.js"></script>
+</div>
+
+
+</body>
+</html>

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>