feat: drop support for IE9

* 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,352 @@
+name: CI
+
+on:
+  push:
+    branches: [ master ]
+    tags:
+      - 'v*'
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Npm install
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Pack
+        run: |
+          npm pack
+          mv html2canvas-*.tgz html2canvas.tgz
+          tar --list --verbose --file=html2canvas.tgz
+      - name: Upload npm pack
+        uses: actions/upload-artifact@v2
+        with:
+          name: npm
+          path: html2canvas.tgz
+          if-no-files-found: error
+      - name: Upload dist
+        uses: actions/upload-artifact@v2
+        with:
+          name: dist
+          path: dist
+          if-no-files-found: error
+      - name: Upload build
+        uses: actions/upload-artifact@v2
+        with:
+          name: build
+          path: build
+          if-no-files-found: error
+
+  test:
+    runs-on: ubuntu-latest
+    name: Test
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Npm install
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Lint
+        run: npm run lint
+      - name: Unit tests
+        run: npm run unittest
+  browser-test:
+    strategy:
+      fail-fast: false
+      matrix:
+        config:
+          - os: ubuntu-latest
+            name: Linux Firefox Stable
+            targetBrowser: Firefox_Stable
+            xvfb: true
+          - os: ubuntu-latest
+            name: Linux Chrome Stable
+            targetBrowser: Chrome_Stable
+            xvfb: true
+          - os: macos-latest
+            name: OSX Safari Stable
+            targetBrowser: Safari_Stable
+          - os: macos-latest
+            name: iOS Simulator Safari 12
+            targetBrowser: Safari_IOS_12
+            xcode: /Applications/Xcode_10.3.app
+          - os: macos-latest
+            name: iOS Simulator Safari 13
+            targetBrowser: Safari_IOS_13
+            xcode: /Applications/Xcode_11.6_beta.app
+          - os: macos-latest
+            name: iOS Simulator Safari 14
+            targetBrowser: Safari_IOS_14
+            xcode: /Applications/Xcode_12_beta.app
+          - os: macos-11
+            name: iOS Simulator Safari 15
+            targetBrowser: Safari_IOS_15
+            xcode: /Applications/Xcode_13.0.app
+          - os: windows-latest
+            name: Windows Internet Explorer 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,181 @@
-# 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.2.1](https://github.com/niklasvh/html2canvas/compare/v1.2.0...v1.2.1) (2021-08-05)
+
+
+### fix
+
+* none image (#2627) ([6651fc6](https://github.com/niklasvh/html2canvas/commit/6651fc6789d5902d171dc53b4094887870433018)), closes [#2627](https://github.com/niklasvh/html2canvas/issues/2627)
+* type import that is only available ts 3.8 or higher (#2629) ([c5c6fa0](https://github.com/niklasvh/html2canvas/commit/c5c6fa00d71f36ef963ba5170ebc7b668d39c407)), closes [#2629](https://github.com/niklasvh/html2canvas/issues/2629)
+
+
+
+# [1.2.0](https://github.com/niklasvh/html2canvas/compare/v1.1.5...v1.2.0) (2021-08-04)
+
+
+### fix
+
+* element cropping & scrolling (#2625) ([878e37a](https://github.com/niklasvh/html2canvas/commit/878e37a24272d0412fe589975ef8eed931c56e0b)), closes [#2625](https://github.com/niklasvh/html2canvas/issues/2625)
+* overflow-wrap break-word (#2626) ([95a46b0](https://github.com/niklasvh/html2canvas/commit/95a46b00c53563722c035a0e45fdf5fb507275e4)), closes [#2626](https://github.com/niklasvh/html2canvas/issues/2626)
+
+### test
+
+* element with scrolled window (#2624) ([1338c7b](https://github.com/niklasvh/html2canvas/commit/1338c7b203535d53509416358d74014200a994eb)), closes [#2624](https://github.com/niklasvh/html2canvas/issues/2624)
+
+
+
+## [1.1.5](https://github.com/niklasvh/html2canvas/compare/v1.1.4...v1.1.5) (2021-08-02)
+
+
+### docs
+
+* update README to github discussion Q/A ([5dea36b](https://github.com/niklasvh/html2canvas/commit/5dea36bd6964164e8ba3f8780309e792f5d16255))
+
+### fix
+
+* emoji line breaking (fix #1813) (#2621) ([7d788c6](https://github.com/niklasvh/html2canvas/commit/7d788c6f3d221b87f6b59fcda8517731340b2d1f)), closes [#1813](https://github.com/niklasvh/html2canvas/issues/1813) [#2621](https://github.com/niklasvh/html2canvas/issues/2621) [#1813](https://github.com/niklasvh/html2canvas/issues/1813)
+* natural sizes for images with srcset (#2622) ([96e23d1](https://github.com/niklasvh/html2canvas/commit/96e23d185198b7131cf0cfa31c14c165790464e9)), closes [#2622](https://github.com/niklasvh/html2canvas/issues/2622)
+
+
+
+## [1.1.4](https://github.com/niklasvh/html2canvas/compare/v1.1.3...v1.1.4) (2021-07-15)
+
+
+### feat
+
+* add support for webkit-text-stroke and paint-order (#2591) ([522e5aa](https://github.com/niklasvh/html2canvas/commit/522e5aac5fdad090953d095b5d558053a5e2d43d)), closes [#2591](https://github.com/niklasvh/html2canvas/issues/2591)
+
+### fix
+
+* don't copy 'all' css property (#2586) ([fa60716](https://github.com/niklasvh/html2canvas/commit/fa60716d07ed590ec64543a586a7960cbc8557df)), closes [#2586](https://github.com/niklasvh/html2canvas/issues/2586)
+* svg d path getting truncated on copy (#2589) ([dd6d885](https://github.com/niklasvh/html2canvas/commit/dd6d8856eca820a13a0990c467b9e531433fd4a9)), closes [#2589](https://github.com/niklasvh/html2canvas/issues/2589)
+* text position for form elements and list markers (#2588) ([cd99f11](https://github.com/niklasvh/html2canvas/commit/cd99f11b1b9eb1260a548a63e2a370a0a5ddafa0)), closes [#2588](https://github.com/niklasvh/html2canvas/issues/2588)
+* this.canvas.ownerDocument is undefined (#2590) ([45efe54](https://github.com/niklasvh/html2canvas/commit/45efe54da8145f97b9ee0463e686103280e3c8b1)), closes [#2590](https://github.com/niklasvh/html2canvas/issues/2590)
+* word-break seperators (#2593) ([e9f7f48](https://github.com/niklasvh/html2canvas/commit/e9f7f48d571304be14610a181feedca3c3b42864)), closes [#2593](https://github.com/niklasvh/html2canvas/issues/2593)
+
+### test
+
+* refactor language tests (#2594) ([4c360fc](https://github.com/niklasvh/html2canvas/commit/4c360fc1f059f4dcab71a79f9dc8a5b2e25411ea)), closes [#2594](https://github.com/niklasvh/html2canvas/issues/2594)
+* update box-shadow with radius ([578bb77](https://github.com/niklasvh/html2canvas/commit/578bb771bfeb7e81362e9e355d6cc9ae910e3920))
+
+
+
+## [1.1.3](https://github.com/niklasvh/html2canvas/compare/v1.1.2...v1.1.3) (2021-07-14)
+
+
+### feat
+
+* allow access to reference element in onclone (#2584) ([58b4591](https://github.com/niklasvh/html2canvas/commit/58b45911741c0dbbccd462b2976560bb3999eaef)), closes [#2584](https://github.com/niklasvh/html2canvas/issues/2584)
+* support for custom and slot elements (#2581) ([acb4cd2](https://github.com/niklasvh/html2canvas/commit/acb4cd24b85527908c02a60794768949578678f0)), closes [#2581](https://github.com/niklasvh/html2canvas/issues/2581)
+
+### fix
+
+* iframe load to ensure images are loaded (#2577) ([eeb5a3e](https://github.com/niklasvh/html2canvas/commit/eeb5a3ea1d6c94e0f6dcfd40695eb88ebb3e0041)), closes [#2577](https://github.com/niklasvh/html2canvas/issues/2577)
+* image blob rendering ([1acdc82](https://github.com/niklasvh/html2canvas/commit/1acdc827a4e05933c2f7c9558405c66b7cd82f58))
+* responsive svg images (#2583) ([92fa448](https://github.com/niklasvh/html2canvas/commit/92fa448913192d5e4e82bfe14f6644b669d4e6ef)), closes [#2583](https://github.com/niklasvh/html2canvas/issues/2583)
+
+### test
+
+* add test cases for text-stroke and textarea from (#1540 and #2132) (#2585) ([1d00bfe](https://github.com/niklasvh/html2canvas/commit/1d00bfe175d51e663d0bae88b6dbd10a266a71f1)), closes [#1540](https://github.com/niklasvh/html2canvas/issues/1540) [#2132](https://github.com/niklasvh/html2canvas/issues/2132) [#2585](https://github.com/niklasvh/html2canvas/issues/2585)
+
+
+
+## [1.1.2](https://github.com/niklasvh/html2canvas/compare/v1.1.1...v1.1.2) (2021-07-13)
+
+
+### ci
+
+* implement screenshot diffing (#2571) ([e29af58](https://github.com/niklasvh/html2canvas/commit/e29af586618125bbad10ad6bee3d69fddbc5d22a)), closes [#2571](https://github.com/niklasvh/html2canvas/issues/2571)
+
+### fix
+
+* logger unique names (#2575) ([1715854](https://github.com/niklasvh/html2canvas/commit/171585491dd1bee4f30691328bd22e978f3ac79e)), closes [#2575](https://github.com/niklasvh/html2canvas/issues/2575)
+* text-shadow position with baseline (#2576) ([439e365](https://github.com/niklasvh/html2canvas/commit/439e365ea8c703b528778a268dcfc3bf9ccad6a9)), closes [#2576](https://github.com/niklasvh/html2canvas/issues/2576)
+
+
+
+## [1.1.1](https://github.com/niklasvh/html2canvas/compare/v1.1.0...v1.1.1) (2021-07-12)
+
+
+### fix
+
+* allow proxy url with parameters (#2100) ([a4a3ce8](https://github.com/niklasvh/html2canvas/commit/a4a3ce8a2eb6a4f43f1bc9a7935eb16f2b98a3cd)), closes [#2100](https://github.com/niklasvh/html2canvas/issues/2100)
+* crash on background-size with calc() (fix #2469) (#2569) ([084017a](https://github.com/niklasvh/html2canvas/commit/084017a67319a993d73c6bdf612dd8532f1b8dbe)), closes [#2469](https://github.com/niklasvh/html2canvas/issues/2469) [#2569](https://github.com/niklasvh/html2canvas/issues/2569)
+* handle unhandled promise rejections (#2568) ([4555940](https://github.com/niklasvh/html2canvas/commit/4555940d0bc17b7fd9327dd0164c382a3dbf1858)), closes [#2568](https://github.com/niklasvh/html2canvas/issues/2568)
+
+
+
+# [1.1.0](https://github.com/niklasvh/html2canvas/compare/v1.0.0...v1.1.0) (2021-07-11)
+
+
+### ci
+
+* fail build if no artifacts uploaded (#2566) ([e7a021a](https://github.com/niklasvh/html2canvas/commit/e7a021ab931f3c0de060b4643e88fad85345c3d3)), closes [#2566](https://github.com/niklasvh/html2canvas/issues/2566)
+
+### deps
+
+* update dependencies with lint fixes (#2565) ([b2902ec](https://github.com/niklasvh/html2canvas/commit/b2902ec31c2a414ea26f864f8e00aa8846890ffc)), closes [#2565](https://github.com/niklasvh/html2canvas/issues/2565)
+
+### docs
+
+* update border-style support ([cf35a28](https://github.com/niklasvh/html2canvas/commit/cf35a282b2c9d41b601c3148e8c08fe7ba61a5f9))
+
+### fix
+
+* Ensure resizeImage's canvas has at least 1px of width and height (#2409) ([bb92371](https://github.com/niklasvh/html2canvas/commit/bb9237155cf0ec090432ee6c5d9c555eb6ffa81f)), closes [#2409](https://github.com/niklasvh/html2canvas/issues/2409)
+* text-decoration-line fallback (#2088) (#2567) ([44296e5](https://github.com/niklasvh/html2canvas/commit/44296e529368140ec06a937383e05f3074b19ee2)), closes [#2088](https://github.com/niklasvh/html2canvas/issues/2088) [#2567](https://github.com/niklasvh/html2canvas/issues/2567)
+* use baseline for text positioning (#2109) ([85f79c1](https://github.com/niklasvh/html2canvas/commit/85f79c1a5e4c0b422ace552c430dd389c8477a44)), closes [#2109](https://github.com/niklasvh/html2canvas/issues/2109)
+
+
+
+# [1.0.0](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.7...v1.0.0) (2021-07-04)
+
+
+### ci
+
+* update docs publish action (#2451) ([7222aba](https://github.com/niklasvh/html2canvas/commit/7222aba1b42138c3d466525172411b3d9869095f)), closes [#2451](https://github.com/niklasvh/html2canvas/issues/2451)
+
+### deps
+
+* update www deps (#2525) ([2a013e2](https://github.com/niklasvh/html2canvas/commit/2a013e20c814b7dbaea98f54f0bde8f553eb79a2)), closes [#2525](https://github.com/niklasvh/html2canvas/issues/2525)
+
+### fix
+
+* opacity with overflow hidden (#2450) ([82b7da5](https://github.com/niklasvh/html2canvas/commit/82b7da558c342e7f53d298bb1d843a5db86c3b21)), closes [#2450](https://github.com/niklasvh/html2canvas/issues/2450)
+
+### test
+
+* update karma runner (#2524) ([ff35c7d](https://github.com/niklasvh/html2canvas/commit/ff35c7dbd33f863f5b614d778baf8cb1e8dded60)), closes [#2524](https://github.com/niklasvh/html2canvas/issues/2524)
+
+
+
+# [1.0.0-rc.7](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.6...v1.0.0-rc.7) (2020-08-09)
+
+
+### fix
+
+* concatenate contiguous font-family tokens (#2219) ([bacfadf](https://github.com/niklasvh/html2canvas/commit/bacfadff96d907d9e8ab4ef515ca6487de9e51fc)), closes [#2219](https://github.com/niklasvh/html2canvas/issues/2219)
+* external styles on svg elements (#2320) ([1514220](https://github.com/niklasvh/html2canvas/commit/1514220812cfb22d64d0974558d9c14fe90a41d3)), closes [#2320](https://github.com/niklasvh/html2canvas/issues/2320)
+
+
+
+# [1.0.0-rc.6](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.5...v1.0.0-rc.6) (2020-08-08)
+
+
+### ci
+
+* Azure Pipelines: upgrade from macOS 10.13 -> 10.14 (#2204) ([c366e87](https://github.com/niklasvh/html2canvas/commit/c366e8790d346ea981b24b7425aef6bf6d7ebcec)), closes [#2204](https://github.com/niklasvh/html2canvas/issues/2204)
+* build docs (#2305) ([51de347](https://github.com/niklasvh/html2canvas/commit/51de34787ad8aba3f213800be45e878cddb064e9)), closes [#2305](https://github.com/niklasvh/html2canvas/issues/2305)
+
+### fix
+
+* #1868 Clone node, Setting className for SVG element raises error (#2079) ([f139b51](https://github.com/niklasvh/html2canvas/commit/f139b513c5cf9673dc727fd47124e0d779891e3a)), closes [#1868](https://github.com/niklasvh/html2canvas/issues/1868) [#2079](https://github.com/niklasvh/html2canvas/issues/2079) [#1868](https://github.com/niklasvh/html2canvas/issues/1868)
+* image loading="lazy" fix #2312 (#2314) ([f23e6f6](https://github.com/niklasvh/html2canvas/commit/f23e6f6f2690dc0dbd02621c3bb81025904e6647)), closes [#2312](https://github.com/niklasvh/html2canvas/issues/2312) [#2314](https://github.com/niklasvh/html2canvas/issues/2314)
+
+
+
 # [1.0.0-rc.5](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.4...v1.0.0-rc.5) (2019-09-27)
 
 

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)
+[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+![CI](https://github.com/niklasvh/html2canvas/workflows/CI/badge.svg?branch=master)
 [![NPM Downloads](https://img.shields.io/npm/dm/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
 [![NPM Version](https://img.shields.io/npm/v/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
 
@@ -28,7 +28,8 @@ The library should work fine on the following browsers (with `Promise` polyfill)
 * Firefox 3.5+
 * Google Chrome
 * Opera 12+
-* IE9+
+* IE10+
+* Edge
 * Safari 6+
 
 As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.

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/documentation.md

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

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)

karma.conf.js

@@ -4,32 +4,49 @@
 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'
         },
-        SauceLabs_IE9: {
-            base: 'SauceLabs',
-            browserName: 'internet explorer',
-            version: '9.0',
-            platform: 'Windows 7'
+        Safari_IOS_13: {
+            base: 'MobileSafari',
+            name: 'iPhone 8',
+            platform: 'iOS',
+            sdk: '13.6'
+        },
+        Safari_IOS_14: {
+            base: 'MobileSafari',
+            name: 'iPhone 8',
+            platform: 'iOS',
+            sdk: '14.0'
+        },
+        Safari_IOS_15: {
+            base: 'MobileSafari',
+            name: 'iPhone 8',
+            platform: 'iOS',
+            sdk: '15.0'
         },
         SauceLabs_IE10: {
             base: 'SauceLabs',
@@ -70,11 +87,6 @@ module.exports = function(config) {
             version: '9.3',
             device: 'iPhone 6 Plus Simulator'
         },
-        IE_9: {
-            base: 'IE',
-            'x-ua-compatible': 'IE=EmulateIE9',
-            flags: ['-extoff']
-        },
         IE_10: {
             base: 'IE',
             'x-ua-compatible': 'IE=EmulateIE10',
@@ -85,10 +97,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 +111,7 @@ module.exports = function(config) {
 
     const customLaunchers = ciLauncher ? {target_browser: ciLauncher} : {
         stable_chrome: {
-            base: 'Chrome'
+            base: 'ChromeHeadless'
         },
         stable_firefox: {
             base: 'Firefox'
@@ -125,8 +137,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 +220,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.5",
+  "version": "1.2.1",
   "author": {
     "name": "Niklas von Hertzen",
     "email": "niklasvh@gmail.com",
@@ -27,68 +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/jest": "^24.0.18",
-    "@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",
-    "jest": "^24.9.0",
-    "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-jest": "^24.1.0",
-    "ts-loader": "^5.3.3",
-    "ts-node": "^8.0.3",
-    "typescript": "^3.4.3",
-    "uglify-js": "^3.5.11",
-    "uglifyjs-webpack-plugin": "^1.1.2",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0"
+    "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",
@@ -100,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": "jest",
-    "karma": "node karma",
+    "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.1"
   }
 }

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

@@ -21,7 +21,6 @@ jest.mock('../render/stacking-context');
 jest.mock('../render/canvas/canvas-renderer');
 
 describe('html2canvas', () => {
-    // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
     const element = {
         ownerDocument: {
             defaultView: {
@@ -35,6 +34,11 @@ describe('html2canvas', () => {
         DocumentCloner.destroy = jest.fn().mockReturnValue(true);
         await html2canvas(element);
         expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            expect.objectContaining({
+                cache: expect.any(Object),
+                logger: expect.any(Object),
+                windowBounds: expect.objectContaining({left: 12, top: 34})
+            }),
             expect.objectContaining({
                 backgroundColor: 0xffffffff,
                 scale: 1,
@@ -42,8 +46,6 @@ describe('html2canvas', () => {
                 width: 200,
                 x: 0,
                 y: 0,
-                scrollX: 12,
-                scrollY: 34,
                 canvas: undefined
             })
         );
@@ -53,6 +55,7 @@ describe('html2canvas', () => {
     it('should have transparent background with backgroundColor: null', async () => {
         await html2canvas(element, {backgroundColor: null});
         expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            expect.anything(),
             expect.objectContaining({
                 backgroundColor: COLORS.TRANSPARENT
             })
@@ -60,10 +63,10 @@ describe('html2canvas', () => {
     });
 
     it('should use existing canvas when given as option', async () => {
-        // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
         const canvas = {} as HTMLCanvasElement;
         await html2canvas(element, {canvas});
         expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            expect.anything(),
             expect.objectContaining({
                 canvas
             })
@@ -74,6 +77,7 @@ describe('html2canvas', () => {
         DocumentCloner.destroy = jest.fn();
         await html2canvas(element, {removeContainer: false});
         expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            expect.anything(),
             expect.objectContaining({
                 backgroundColor: 0xffffffff,
                 scale: 1,
@@ -81,8 +85,6 @@ describe('html2canvas', () => {
                 width: 200,
                 x: 0,
                 y: 0,
-                scrollX: 12,
-                scrollY: 34,
                 canvas: undefined
             })
         );

src/core/__mocks__/cache-storage.ts

@@ -1,22 +1 @@
-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;
-    }
-}
+export class CacheStorage {}

src/core/__mocks__/context.ts

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

src/core/__mocks__/logger.ts

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

src/core/__tests__/cache-storage.ts

@@ -1,7 +1,8 @@
 import {deepStrictEqual, fail} from 'assert';
 import {FEATURES} from '../features';
 import {CacheStorage} from '../cache-storage';
-import {Logger} from '../logger';
+import {Context} from '../context';
+import {Bounds} from '../../css/layout/bounds';
 
 const proxy = 'http://example.com/proxy';
 
@@ -35,24 +36,28 @@ const createMockContext = (origin: string, opts = {}) => {
     };
 
     CacheStorage.setContext(context as Window);
-    Logger.create({id: 'test', enabled: false});
-    return CacheStorage.create('test', {
-        imageTimeout: 0,
-        useCORS: false,
-        allowTaint: false,
-        proxy,
-        ...opts
-    });
+
+    return new Context(
+        {
+            logging: false,
+            imageTimeout: 0,
+            useCORS: false,
+            allowTaint: false,
+            proxy,
+            ...opts
+        },
+        new Bounds(0, 0, 0, 0)
+    );
 };
 
 const images: ImageMock[] = [];
 const xhr: XMLHttpRequestMock[] = [];
-const sleep = async (timeout: number) => await new Promise(resolve => setTimeout(resolve, timeout));
+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);
     }
@@ -65,8 +70,8 @@ class XMLHttpRequestMock {
     method?: string;
     url?: string;
     response?: string;
-    onload?: () => {};
-    ontimeout?: () => {};
+    onload?: () => void;
+    ontimeout?: () => void;
     constructor() {
         this.sent = false;
         this.status = 500;
@@ -106,7 +111,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
@@ -121,7 +126,7 @@ describe('cache-storage', () => {
         images.splice(0, images.length);
     });
     it('addImage adds images to cache', async () => {
-        const cache = createMockContext('http://example.com', {proxy: null});
+        const {cache} = createMockContext('http://example.com', {proxy: null});
         await cache.addImage('http://example.com/test.jpg');
         await cache.addImage('http://example.com/test2.jpg');
 
@@ -131,7 +136,7 @@ describe('cache-storage', () => {
     });
 
     it('addImage should not add duplicate entries', async () => {
-        const cache = createMockContext('http://example.com');
+        const {cache} = createMockContext('http://example.com');
         await cache.addImage('http://example.com/test.jpg');
         await cache.addImage('http://example.com/test.jpg');
 
@@ -141,7 +146,7 @@ describe('cache-storage', () => {
 
     describe('svg', () => {
         it('should add svg images correctly', async () => {
-            const cache = createMockContext('http://example.com');
+            const {cache} = createMockContext('http://example.com');
             await cache.addImage('http://example.com/test.svg');
             await cache.addImage('http://example.com/test2.svg');
 
@@ -152,7 +157,7 @@ describe('cache-storage', () => {
 
         it('should omit svg images if not supported', async () => {
             setFeatures({SUPPORT_SVG_DRAWING: false});
-            const cache = createMockContext('http://example.com');
+            const {cache} = createMockContext('http://example.com');
             await cache.addImage('http://example.com/test.svg');
             await cache.addImage('http://example.com/test2.svg');
 
@@ -162,7 +167,7 @@ describe('cache-storage', () => {
 
     describe('cross-origin', () => {
         it('addImage should not add images it cannot load/render', async () => {
-            const cache = createMockContext('http://example.com', {
+            const {cache} = createMockContext('http://example.com', {
                 proxy: undefined
             });
             await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
@@ -170,7 +175,7 @@ describe('cache-storage', () => {
         });
 
         it('addImage should add images if tainting enabled', async () => {
-            const cache = createMockContext('http://example.com', {
+            const {cache} = createMockContext('http://example.com', {
                 allowTaint: true,
                 proxy: undefined
             });
@@ -181,7 +186,7 @@ describe('cache-storage', () => {
         });
 
         it('addImage should add images if cors enabled', async () => {
-            const cache = createMockContext('http://example.com', {useCORS: true});
+            const {cache} = createMockContext('http://example.com', {useCORS: true});
             await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
             deepStrictEqual(images.length, 1);
             deepStrictEqual(images[0].src, 'http://html2canvas.hertzen.com/test.jpg');
@@ -191,7 +196,7 @@ describe('cache-storage', () => {
         it('addImage should not add images if cors enabled but not supported', async () => {
             setFeatures({SUPPORT_CORS_IMAGES: false});
 
-            const cache = createMockContext('http://example.com', {
+            const {cache} = createMockContext('http://example.com', {
                 useCORS: true,
                 proxy: undefined
             });
@@ -200,7 +205,7 @@ describe('cache-storage', () => {
         });
 
         it('addImage should not add images to proxy if cors enabled', async () => {
-            const cache = createMockContext('http://example.com', {useCORS: true});
+            const {cache} = createMockContext('http://example.com', {useCORS: true});
             await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
             deepStrictEqual(images.length, 1);
             deepStrictEqual(images[0].src, 'http://html2canvas.hertzen.com/test.jpg');
@@ -208,7 +213,7 @@ describe('cache-storage', () => {
         });
 
         it('addImage should use proxy ', async () => {
-            const cache = createMockContext('http://example.com');
+            const {cache} = createMockContext('http://example.com');
             await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
             deepStrictEqual(xhr.length, 1);
             deepStrictEqual(
@@ -222,7 +227,7 @@ describe('cache-storage', () => {
         });
 
         it('proxy should respect imageTimeout', async () => {
-            const cache = createMockContext('http://example.com', {
+            const {cache} = createMockContext('http://example.com', {
                 imageTimeout: 10
             });
             await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
@@ -244,7 +249,7 @@ describe('cache-storage', () => {
     });
 
     it('match should return cache entry', async () => {
-        const cache = createMockContext('http://example.com');
+        const {cache} = createMockContext('http://example.com');
         await cache.addImage('http://example.com/test.jpg');
 
         if (images[0].onload) {
@@ -257,7 +262,7 @@ describe('cache-storage', () => {
     });
 
     it('image should respect imageTimeout', async () => {
-        const cache = createMockContext('http://example.com', {imageTimeout: 10});
+        const {cache} = createMockContext('http://example.com', {imageTimeout: 10});
         cache.addImage('http://example.com/test.jpg');
 
         try {

src/core/__tests__/logger.ts

@@ -1,10 +1,13 @@
 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(() => {});
+        infoSpy = jest.spyOn(console, 'info').mockImplementation(() => {
+            // do nothing
+        });
     });
 
     afterEach(() => {

src/core/cache-storage.ts

@@ -1,28 +1,9 @@
 import {FEATURES} from './features';
-import {Logger} from './logger';
+import {Context} from './context';
 
 export class CacheStorage {
-    private static _caches: {[key: string]: Cache} = {};
     private static _link?: HTMLAnchorElement;
-    private static _origin: string = 'about:blank';
-    private static _current: Cache | null = null;
-
-    static create(name: string, options: ResourceOptions): Cache {
-        return (CacheStorage._caches[name] = new Cache(name, options));
-    }
-
-    static destroy(name: string): void {
-        delete CacheStorage._caches[name];
-    }
-
-    static open(name: string): Cache {
-        const cache = CacheStorage._caches[name];
-        if (typeof cache !== 'undefined') {
-            return cache;
-        }
-
-        throw new Error(`Cache with key "${name}" not found`);
-    }
+    private static _origin = 'about:blank';
 
     static getOrigin(url: string): string {
         const link = CacheStorage._link;
@@ -31,7 +12,6 @@ export class CacheStorage {
         }
 
         link.href = url;
-        link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/
         return link.protocol + link.hostname + link.port;
     }
 
@@ -39,26 +19,10 @@ 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);
     }
-
-    static getInstance(): Cache {
-        const current = CacheStorage._current;
-        if (current === null) {
-            throw new Error(`No cache instance attached`);
-        }
-        return current;
-    }
-
-    static attachInstance(cache: Cache) {
-        CacheStorage._current = cache;
-    }
-
-    static detachInstance() {
-        CacheStorage._current = null;
-    }
 }
 
 export interface ResourceOptions {
@@ -70,15 +34,9 @@ export interface ResourceOptions {
 
 export class Cache {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    private readonly _cache: {[key: string]: Promise<any>};
-    private readonly _options: ResourceOptions;
-    private readonly id: string;
+    private readonly _cache: {[key: string]: Promise<any>} = {};
 
-    constructor(id: string, options: ResourceOptions) {
-        this.id = id;
-        this._options = options;
-        this._cache = {};
-    }
+    constructor(private readonly context: Context, private readonly _options: ResourceOptions) {}
 
     addImage(src: string): Promise<void> {
         const result = Promise.resolve();
@@ -87,7 +45,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 +66,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;
         }
 
@@ -118,7 +86,7 @@ export class Cache {
             src = await this.proxy(src);
         }
 
-        Logger.getInstance(this.id).debug(`Added image ${key.substring(0, 256)}`);
+        this.context.logger.debug(`Added image ${key.substring(0, 256)}`);
 
         return await new Promise((resolve, reject) => {
             const img = new Image();
@@ -169,7 +137,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 +146,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/context.ts

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

src/core/features.ts

@@ -1,3 +1,5 @@
+import {fromCodePoint, toCodePoints} from 'css-line-break';
+
 const testRangeBounds = (document: Document) => {
     const TEST_HEIGHT = 123;
 
@@ -22,6 +24,45 @@ const testRangeBounds = (document: Document) => {
     return false;
 };
 
+const testIOSLineBreak = (document: Document) => {
+    const testElement = document.createElement('boundtest');
+    testElement.style.width = '50px';
+    testElement.style.display = 'block';
+    testElement.style.fontSize = '12px';
+    testElement.style.letterSpacing = '0px';
+    testElement.style.wordSpacing = '0px';
+    document.body.appendChild(testElement);
+    const range = document.createRange();
+
+    testElement.innerHTML = typeof ''.repeat === 'function' ? '👨'.repeat(10) : '';
+
+    const node = testElement.firstChild as Text;
+
+    const textList = toCodePoints(node.data).map((i) => fromCodePoint(i));
+    let offset = 0;
+    let prev: DOMRect = {} as DOMRect;
+
+    // ios 13 does not handle range getBoundingClientRect line changes correctly #2177
+    const supports = textList.every((text, i) => {
+        range.setStart(node, offset);
+        range.setEnd(node, offset + text.length);
+        const rect = range.getBoundingClientRect();
+
+        offset += text.length;
+        const boundAhead = rect.x > prev.x || rect.y > prev.y;
+
+        prev = rect;
+        if (i === 0) {
+            return true;
+        }
+
+        return boundAhead;
+    });
+
+    document.body.removeChild(testElement);
+    return supports;
+};
+
 const testCORS = (): boolean => typeof new Image().crossOrigin !== 'undefined';
 
 const testResponseType = (): boolean => typeof new XMLHttpRequest().responseType === 'string';
@@ -90,7 +131,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 +167,25 @@ 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_WORD_BREAKING(): boolean {
+        'use strict';
+        const value = FEATURES.SUPPORT_RANGE_BOUNDS && testIOSLineBreak(document);
+        Object.defineProperty(FEATURES, 'SUPPORT_WORD_BREAKING', {value});
+        return value;
+    },
+    get SUPPORT_SVG_DRAWING(): boolean {
         'use strict';
         const value = testSVG(document);
         Object.defineProperty(FEATURES, 'SUPPORT_SVG_DRAWING', {value});
         return value;
     },
-    get SUPPORT_FOREIGNOBJECT_DRAWING() {
+    get SUPPORT_FOREIGNOBJECT_DRAWING(): Promise<boolean> {
         'use strict';
         const value =
             typeof Array.from === 'function' && typeof window.fetch === 'function'
@@ -141,19 +194,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

@@ -17,7 +17,7 @@ export class Logger {
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    debug(...args: any) {
+    debug(...args: unknown[]): void {
         if (this.enabled) {
             // eslint-disable-next-line no-console
             if (typeof window !== 'undefined' && window.console && typeof console.debug === 'function') {
@@ -33,24 +33,8 @@ export class Logger {
         return Date.now() - this.start;
     }
 
-    static create(options: LoggerOptions) {
-        Logger.instances[options.id] = new Logger(options);
-    }
-
-    static destroy(id: string) {
-        delete Logger.instances[id];
-    }
-
-    static getInstance(id: string): Logger {
-        const instance = Logger.instances[id];
-        if (typeof instance === 'undefined') {
-            throw new Error(`No logger instance found with id ${id}`);
-        }
-        return instance;
-    }
-
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    info(...args: any) {
+    info(...args: unknown[]): void {
         if (this.enabled) {
             // eslint-disable-next-line no-console
             if (typeof window !== 'undefined' && window.console && typeof console.info === 'function') {
@@ -61,7 +45,20 @@ export class Logger {
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    error(...args: any) {
+    warn(...args: unknown[]): void {
+        if (this.enabled) {
+            // eslint-disable-next-line no-console
+            if (typeof window !== 'undefined' && window.console && typeof console.warn === 'function') {
+                // eslint-disable-next-line no-console
+                console.warn(this.id, `${this.getTime()}ms`, ...args);
+            } else {
+                this.info(...args);
+            }
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    error(...args: unknown[]): void {
         if (this.enabled) {
             // eslint-disable-next-line no-console
             if (typeof window !== 'undefined' && window.console && typeof console.error === 'function') {

src/css/IPropertyDescriptor.ts

@@ -1,5 +1,6 @@
 import {CSSValue} from './syntax/parser';
 import {CSSTypes} from './types/index';
+import {Context} from '../core/context';
 
 export enum PropertyDescriptorParsingType {
     VALUE,
@@ -18,7 +19,7 @@ export interface IPropertyDescriptor {
 
 export interface IPropertyIdentValueDescriptor<T> extends IPropertyDescriptor {
     type: PropertyDescriptorParsingType.IDENT_VALUE;
-    parse: (token: string) => T;
+    parse: (context: Context, token: string) => T;
 }
 
 export interface IPropertyTypeValueDescriptor extends IPropertyDescriptor {
@@ -28,12 +29,12 @@ export interface IPropertyTypeValueDescriptor extends IPropertyDescriptor {
 
 export interface IPropertyValueDescriptor<T> extends IPropertyDescriptor {
     type: PropertyDescriptorParsingType.VALUE;
-    parse: (token: CSSValue) => T;
+    parse: (context: Context, token: CSSValue) => T;
 }
 
 export interface IPropertyListDescriptor<T> extends IPropertyDescriptor {
     type: PropertyDescriptorParsingType.LIST;
-    parse: (tokens: CSSValue[]) => T;
+    parse: (context: Context, tokens: CSSValue[]) => T;
 }
 
 export interface IPropertyTokenValueDescriptor extends IPropertyDescriptor {

src/css/ITypeDescriptor.ts

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

src/css/index.ts

@@ -73,6 +73,10 @@ 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';
+import {Context} from '../core/context';
 
 export class CSSParsedDeclaration {
     backgroundClip: ReturnType<typeof backgroundClip.parse>;
@@ -125,6 +129,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,72 +139,85 @@ 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>;
 
-    constructor(declaration: CSSStyleDeclaration) {
-        this.backgroundClip = parse(backgroundClip, declaration.backgroundClip);
-        this.backgroundColor = parse(backgroundColor, declaration.backgroundColor);
-        this.backgroundImage = parse(backgroundImage, declaration.backgroundImage);
-        this.backgroundOrigin = parse(backgroundOrigin, declaration.backgroundOrigin);
-        this.backgroundPosition = parse(backgroundPosition, declaration.backgroundPosition);
-        this.backgroundRepeat = parse(backgroundRepeat, declaration.backgroundRepeat);
-        this.backgroundSize = parse(backgroundSize, declaration.backgroundSize);
-        this.borderTopColor = parse(borderTopColor, declaration.borderTopColor);
-        this.borderRightColor = parse(borderRightColor, declaration.borderRightColor);
-        this.borderBottomColor = parse(borderBottomColor, declaration.borderBottomColor);
-        this.borderLeftColor = parse(borderLeftColor, declaration.borderLeftColor);
-        this.borderTopLeftRadius = parse(borderTopLeftRadius, declaration.borderTopLeftRadius);
-        this.borderTopRightRadius = parse(borderTopRightRadius, declaration.borderTopRightRadius);
-        this.borderBottomRightRadius = parse(borderBottomRightRadius, declaration.borderBottomRightRadius);
-        this.borderBottomLeftRadius = parse(borderBottomLeftRadius, declaration.borderBottomLeftRadius);
-        this.borderTopStyle = parse(borderTopStyle, declaration.borderTopStyle);
-        this.borderRightStyle = parse(borderRightStyle, declaration.borderRightStyle);
-        this.borderBottomStyle = parse(borderBottomStyle, declaration.borderBottomStyle);
-        this.borderLeftStyle = parse(borderLeftStyle, declaration.borderLeftStyle);
-        this.borderTopWidth = parse(borderTopWidth, declaration.borderTopWidth);
-        this.borderRightWidth = parse(borderRightWidth, declaration.borderRightWidth);
-        this.borderBottomWidth = parse(borderBottomWidth, declaration.borderBottomWidth);
-        this.borderLeftWidth = parse(borderLeftWidth, declaration.borderLeftWidth);
-        this.boxShadow = parse(boxShadow, declaration.boxShadow);
-        this.color = parse(color, declaration.color);
-        this.display = parse(display, declaration.display);
-        this.float = parse(float, declaration.cssFloat);
-        this.fontFamily = parse(fontFamily, declaration.fontFamily);
-        this.fontSize = parse(fontSize, declaration.fontSize);
-        this.fontStyle = parse(fontStyle, declaration.fontStyle);
-        this.fontVariant = parse(fontVariant, declaration.fontVariant);
-        this.fontWeight = parse(fontWeight, declaration.fontWeight);
-        this.letterSpacing = parse(letterSpacing, declaration.letterSpacing);
-        this.lineBreak = parse(lineBreak, declaration.lineBreak);
-        this.lineHeight = parse(lineHeight, declaration.lineHeight);
-        this.listStyleImage = parse(listStyleImage, declaration.listStyleImage);
-        this.listStylePosition = parse(listStylePosition, declaration.listStylePosition);
-        this.listStyleType = parse(listStyleType, declaration.listStyleType);
-        this.marginTop = parse(marginTop, declaration.marginTop);
-        this.marginRight = parse(marginRight, declaration.marginRight);
-        this.marginBottom = parse(marginBottom, declaration.marginBottom);
-        this.marginLeft = parse(marginLeft, declaration.marginLeft);
-        this.opacity = parse(opacity, declaration.opacity);
-        const overflowTuple = parse(overflow, declaration.overflow);
+    constructor(context: Context, declaration: CSSStyleDeclaration) {
+        this.backgroundClip = parse(context, backgroundClip, declaration.backgroundClip);
+        this.backgroundColor = parse(context, backgroundColor, declaration.backgroundColor);
+        this.backgroundImage = parse(context, backgroundImage, declaration.backgroundImage);
+        this.backgroundOrigin = parse(context, backgroundOrigin, declaration.backgroundOrigin);
+        this.backgroundPosition = parse(context, backgroundPosition, declaration.backgroundPosition);
+        this.backgroundRepeat = parse(context, backgroundRepeat, declaration.backgroundRepeat);
+        this.backgroundSize = parse(context, backgroundSize, declaration.backgroundSize);
+        this.borderTopColor = parse(context, borderTopColor, declaration.borderTopColor);
+        this.borderRightColor = parse(context, borderRightColor, declaration.borderRightColor);
+        this.borderBottomColor = parse(context, borderBottomColor, declaration.borderBottomColor);
+        this.borderLeftColor = parse(context, borderLeftColor, declaration.borderLeftColor);
+        this.borderTopLeftRadius = parse(context, borderTopLeftRadius, declaration.borderTopLeftRadius);
+        this.borderTopRightRadius = parse(context, borderTopRightRadius, declaration.borderTopRightRadius);
+        this.borderBottomRightRadius = parse(context, borderBottomRightRadius, declaration.borderBottomRightRadius);
+        this.borderBottomLeftRadius = parse(context, borderBottomLeftRadius, declaration.borderBottomLeftRadius);
+        this.borderTopStyle = parse(context, borderTopStyle, declaration.borderTopStyle);
+        this.borderRightStyle = parse(context, borderRightStyle, declaration.borderRightStyle);
+        this.borderBottomStyle = parse(context, borderBottomStyle, declaration.borderBottomStyle);
+        this.borderLeftStyle = parse(context, borderLeftStyle, declaration.borderLeftStyle);
+        this.borderTopWidth = parse(context, borderTopWidth, declaration.borderTopWidth);
+        this.borderRightWidth = parse(context, borderRightWidth, declaration.borderRightWidth);
+        this.borderBottomWidth = parse(context, borderBottomWidth, declaration.borderBottomWidth);
+        this.borderLeftWidth = parse(context, borderLeftWidth, declaration.borderLeftWidth);
+        this.boxShadow = parse(context, boxShadow, declaration.boxShadow);
+        this.color = parse(context, color, declaration.color);
+        this.display = parse(context, display, declaration.display);
+        this.float = parse(context, float, declaration.cssFloat);
+        this.fontFamily = parse(context, fontFamily, declaration.fontFamily);
+        this.fontSize = parse(context, fontSize, declaration.fontSize);
+        this.fontStyle = parse(context, fontStyle, declaration.fontStyle);
+        this.fontVariant = parse(context, fontVariant, declaration.fontVariant);
+        this.fontWeight = parse(context, fontWeight, declaration.fontWeight);
+        this.letterSpacing = parse(context, letterSpacing, declaration.letterSpacing);
+        this.lineBreak = parse(context, lineBreak, declaration.lineBreak);
+        this.lineHeight = parse(context, lineHeight, declaration.lineHeight);
+        this.listStyleImage = parse(context, listStyleImage, declaration.listStyleImage);
+        this.listStylePosition = parse(context, listStylePosition, declaration.listStylePosition);
+        this.listStyleType = parse(context, listStyleType, declaration.listStyleType);
+        this.marginTop = parse(context, marginTop, declaration.marginTop);
+        this.marginRight = parse(context, marginRight, declaration.marginRight);
+        this.marginBottom = parse(context, marginBottom, declaration.marginBottom);
+        this.marginLeft = parse(context, marginLeft, declaration.marginLeft);
+        this.opacity = parse(context, opacity, declaration.opacity);
+        const overflowTuple = parse(context, overflow, declaration.overflow);
         this.overflowX = overflowTuple[0];
         this.overflowY = overflowTuple[overflowTuple.length > 1 ? 1 : 0];
-        this.overflowWrap = parse(overflowWrap, declaration.overflowWrap);
-        this.paddingTop = parse(paddingTop, declaration.paddingTop);
-        this.paddingRight = parse(paddingRight, declaration.paddingRight);
-        this.paddingBottom = parse(paddingBottom, declaration.paddingBottom);
-        this.paddingLeft = parse(paddingLeft, declaration.paddingLeft);
-        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.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.wordBreak = parse(wordBreak, declaration.wordBreak);
-        this.zIndex = parse(zIndex, declaration.zIndex);
+        this.overflowWrap = parse(context, overflowWrap, declaration.overflowWrap);
+        this.paddingTop = parse(context, paddingTop, declaration.paddingTop);
+        this.paddingRight = parse(context, paddingRight, declaration.paddingRight);
+        this.paddingBottom = parse(context, paddingBottom, declaration.paddingBottom);
+        this.paddingLeft = parse(context, paddingLeft, declaration.paddingLeft);
+        this.paintOrder = parse(context, paintOrder, declaration.paintOrder);
+        this.position = parse(context, position, declaration.position);
+        this.textAlign = parse(context, textAlign, declaration.textAlign);
+        this.textDecorationColor = parse(
+            context,
+            textDecorationColor,
+            declaration.textDecorationColor ?? declaration.color
+        );
+        this.textDecorationLine = parse(
+            context,
+            textDecorationLine,
+            declaration.textDecorationLine ?? declaration.textDecoration
+        );
+        this.textShadow = parse(context, textShadow, declaration.textShadow);
+        this.textTransform = parse(context, textTransform, declaration.textTransform);
+        this.transform = parse(context, transform, declaration.transform);
+        this.transformOrigin = parse(context, transformOrigin, declaration.transformOrigin);
+        this.visibility = parse(context, visibility, declaration.visibility);
+        this.webkitTextStrokeColor = parse(context, webkitTextStrokeColor, declaration.webkitTextStrokeColor);
+        this.webkitTextStrokeWidth = parse(context, webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
+        this.wordBreak = parse(context, wordBreak, declaration.wordBreak);
+        this.zIndex = parse(context, zIndex, declaration.zIndex);
     }
 
     isVisible(): boolean {
@@ -242,9 +260,9 @@ export class CSSParsedPseudoDeclaration {
     content: ReturnType<typeof content.parse>;
     quotes: ReturnType<typeof quotes.parse>;
 
-    constructor(declaration: CSSStyleDeclaration) {
-        this.content = parse(content, declaration.content);
-        this.quotes = parse(quotes, declaration.quotes);
+    constructor(context: Context, declaration: CSSStyleDeclaration) {
+        this.content = parse(context, content, declaration.content);
+        this.quotes = parse(context, quotes, declaration.quotes);
     }
 }
 
@@ -252,14 +270,14 @@ export class CSSParsedCounterDeclaration {
     counterIncrement: ReturnType<typeof counterIncrement.parse>;
     counterReset: ReturnType<typeof counterReset.parse>;
 
-    constructor(declaration: CSSStyleDeclaration) {
-        this.counterIncrement = parse(counterIncrement, declaration.counterIncrement);
-        this.counterReset = parse(counterReset, declaration.counterReset);
+    constructor(context: Context, declaration: CSSStyleDeclaration) {
+        this.counterIncrement = parse(context, counterIncrement, declaration.counterIncrement);
+        this.counterReset = parse(context, counterReset, declaration.counterReset);
     }
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const parse = (descriptor: CSSPropertyDescriptor<any>, style?: string | null) => {
+const parse = (context: Context, descriptor: CSSPropertyDescriptor<any>, style?: string | null) => {
     const tokenizer = new Tokenizer();
     const value = style !== null && typeof style !== 'undefined' ? style.toString() : descriptor.initialValue;
     tokenizer.write(value);
@@ -267,21 +285,21 @@ const parse = (descriptor: CSSPropertyDescriptor<any>, style?: string | null) =>
     switch (descriptor.type) {
         case PropertyDescriptorParsingType.IDENT_VALUE:
             const token = parser.parseComponentValue();
-            return descriptor.parse(isIdentToken(token) ? token.value : descriptor.initialValue);
+            return descriptor.parse(context, isIdentToken(token) ? token.value : descriptor.initialValue);
         case PropertyDescriptorParsingType.VALUE:
-            return descriptor.parse(parser.parseComponentValue());
+            return descriptor.parse(context, parser.parseComponentValue());
         case PropertyDescriptorParsingType.LIST:
-            return descriptor.parse(parser.parseComponentValues());
+            return descriptor.parse(context, parser.parseComponentValues());
         case PropertyDescriptorParsingType.TOKEN_VALUE:
             return parser.parseComponentValue();
         case PropertyDescriptorParsingType.TYPE_VALUE:
             switch (descriptor.format) {
                 case 'angle':
-                    return angle.parse(parser.parseComponentValue());
+                    return angle.parse(context, parser.parseComponentValue());
                 case 'color':
-                    return colorType.parse(parser.parseComponentValue());
+                    return colorType.parse(context, parser.parseComponentValue());
                 case 'image':
-                    return image.parse(parser.parseComponentValue());
+                    return image.parse(context, parser.parseComponentValue());
                 case 'length':
                     const length = parser.parseComponentValue();
                     return isLength(length) ? length : ZERO_LENGTH;
@@ -289,7 +307,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

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

src/css/layout/bounds.ts

@@ -1,27 +1,38 @@
-export class Bounds {
-    readonly top: number;
-    readonly left: number;
-    readonly width: number;
-    readonly height: number;
+import {Context} from '../../core/context';
 
-    constructor(x: number, y: number, w: number, h: number) {
-        this.left = x;
-        this.top = y;
-        this.width = w;
-        this.height = h;
-    }
+export class Bounds {
+    constructor(readonly left: number, readonly top: number, readonly width: number, readonly height: number) {}
 
     add(x: number, y: number, w: number, h: number): Bounds {
         return new Bounds(this.left + x, this.top + y, this.width + w, this.height + h);
     }
 
-    static fromClientRect(clientRect: ClientRect): Bounds {
-        return new Bounds(clientRect.left, clientRect.top, clientRect.width, clientRect.height);
+    static fromClientRect(context: Context, clientRect: ClientRect): Bounds {
+        return new Bounds(
+            clientRect.left + context.windowBounds.left,
+            clientRect.top + context.windowBounds.top,
+            clientRect.width,
+            clientRect.height
+        );
     }
+
+    static fromDOMRectList(context: Context, domRectList: DOMRectList): Bounds {
+        const domRect = domRectList[0];
+        return domRect
+            ? new Bounds(
+                  domRect.x + context.windowBounds.left,
+                  domRect.y + context.windowBounds.top,
+                  domRect.width,
+                  domRect.height
+              )
+            : Bounds.EMPTY;
+    }
+
+    static EMPTY = new Bounds(0, 0, 0, 0);
 }
 
-export const parseBounds = (node: Element): Bounds => {
-    return Bounds.fromClientRect(node.getBoundingClientRect());
+export const parseBounds = (context: Context, node: Element): Bounds => {
+    return Bounds.fromClientRect(context, node.getBoundingClientRect());
 };
 
 export const parseDocumentSize = (document: Document): Bounds => {

src/css/layout/text.ts

@@ -3,6 +3,7 @@ import {CSSParsedDeclaration} from '../index';
 import {fromCodePoint, LineBreaker, toCodePoints} from 'css-line-break';
 import {Bounds, parseBounds} from './bounds';
 import {FEATURES} from '../../core/features';
+import {Context} from '../../core/context';
 
 export class TextBounds {
     readonly text: string;
@@ -14,17 +15,31 @@ export class TextBounds {
     }
 }
 
-export const parseTextBounds = (value: string, styles: CSSParsedDeclaration, node: Text): TextBounds[] => {
+export const parseTextBounds = (
+    context: Context,
+    value: string,
+    styles: CSSParsedDeclaration,
+    node: Text
+): TextBounds[] => {
     const textList = breakText(value, styles);
     const textBounds: TextBounds[] = [];
     let offset = 0;
-    textList.forEach(text => {
+    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)));
+                if (!FEATURES.SUPPORT_WORD_BREAKING) {
+                    textBounds.push(
+                        new TextBounds(
+                            text,
+                            Bounds.fromDOMRectList(context, createRange(node, offset, text.length).getClientRects())
+                        )
+                    );
+                } else {
+                    textBounds.push(new TextBounds(text, getRangeBounds(context, node, offset, text.length)));
+                }
             } else {
                 const replacementNode = node.splitText(text.length);
-                textBounds.push(new TextBounds(text, getWrapperBounds(node)));
+                textBounds.push(new TextBounds(text, getWrapperBounds(context, node)));
                 node = replacementNode;
             }
         } else if (!FEATURES.SUPPORT_RANGE_BOUNDS) {
@@ -36,7 +51,7 @@ export const parseTextBounds = (value: string, styles: CSSParsedDeclaration, nod
     return textBounds;
 };
 
-const getWrapperBounds = (node: Text): Bounds => {
+const getWrapperBounds = (context: Context, node: Text): Bounds => {
     const ownerDocument = node.ownerDocument;
     if (ownerDocument) {
         const wrapper = ownerDocument.createElement('html2canvaswrapper');
@@ -44,7 +59,7 @@ const getWrapperBounds = (node: Text): Bounds => {
         const parentNode = node.parentNode;
         if (parentNode) {
             parentNode.replaceChild(wrapper, node);
-            const bounds = parseBounds(wrapper);
+            const bounds = parseBounds(context, wrapper);
             if (wrapper.firstChild) {
                 parentNode.replaceChild(wrapper.firstChild, wrapper);
             }
@@ -52,10 +67,10 @@ const getWrapperBounds = (node: Text): Bounds => {
         }
     }
 
-    return new Bounds(0, 0, 0, 0);
+    return Bounds.EMPTY;
 };
 
-const getRangeBounds = (node: Text, offset: number, length: number): Bounds => {
+const createRange = (node: Text, offset: number, length: number): Range => {
     const ownerDocument = node.ownerDocument;
     if (!ownerDocument) {
         throw new Error('Node has no owner document');
@@ -63,13 +78,20 @@ const getRangeBounds = (node: Text, offset: number, length: number): Bounds => {
     const range = ownerDocument.createRange();
     range.setStart(node, offset);
     range.setEnd(node, offset + length);
-    return Bounds.fromClientRect(range.getBoundingClientRect());
+    return range;
+};
+
+const getRangeBounds = (context: Context, node: Text, offset: number, length: number): Bounds => {
+    return Bounds.fromClientRect(context, createRange(node, offset, length).getBoundingClientRect());
 };
 
 const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
-    return styles.letterSpacing !== 0 ? 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 +103,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

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

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

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

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

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

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

@@ -4,9 +4,10 @@ import {color, COLORS} from '../../types/color';
 import {textShadow} from '../text-shadow';
 import {FLAG_INTEGER, DimensionToken, TokenType} from '../../syntax/tokenizer';
 import {ZERO_LENGTH} from '../../types/length-percentage';
+import {Context} from '../../../core/context';
 
-const textShadowParse = (value: string) => textShadow.parse(Parser.parseValues(value));
-const colorParse = (value: string) => color.parse(Parser.parseValue(value));
+const textShadowParse = (value: string) => textShadow.parse({} as Context, Parser.parseValues(value));
+const colorParse = (value: string) => color.parse({} as Context, Parser.parseValue(value));
 const dimension = (number: number, unit: string): DimensionToken => ({
     flags: FLAG_INTEGER,
     number,

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

@@ -1,7 +1,8 @@
 import {transform} from '../transform';
 import {Parser} from '../../syntax/parser';
 import {deepStrictEqual} from 'assert';
-const parseValue = (value: string) => transform.parse(Parser.parseValue(value));
+import {Context} from '../../../core/context';
+const parseValue = (value: string) => transform.parse({} as Context, Parser.parseValue(value));
 
 describe('property-descriptors', () => {
     describe('transform', () => {
@@ -9,13 +10,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

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

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken, parseFunctionArgs} from '../syntax/parser';
+import {Context} from '../../core/context';
 export type BackgroundRepeat = BACKGROUND_REPEAT[];
 
 export enum BACKGROUND_REPEAT {
@@ -14,12 +15,12 @@ export const backgroundRepeat: IPropertyListDescriptor<BackgroundRepeat> = {
     initialValue: 'repeat',
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]): BackgroundRepeat => {
+    parse: (_context: Context, 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

@@ -2,6 +2,7 @@ import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IProper
 import {CSSValue, isIdentToken, parseFunctionArgs} from '../syntax/parser';
 import {isLengthPercentage, LengthPercentage} from '../types/length-percentage';
 import {StringValueToken} from '../syntax/tokenizer';
+import {Context} from '../../core/context';
 
 export enum BACKGROUND_SIZE {
     AUTO = 'auto',
@@ -17,8 +18,8 @@ export const backgroundSize: IPropertyListDescriptor<BackgroundSize> = {
     initialValue: '0',
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]): BackgroundSize => {
-        return parseFunctionArgs(tokens).map(values => values.filter(isBackgroundSizeInfoToken));
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundSize => {
+        return parseFunctionArgs(tokens).map((values) => values.filter(isBackgroundSizeInfoToken));
     }
 };
 

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

@@ -1,6 +1,7 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue} from '../syntax/parser';
 import {isLengthPercentage, LengthPercentageTuple, parseLengthPercentageTuple} from '../types/length-percentage';
+import {Context} from '../../core/context';
 export type BorderRadius = LengthPercentageTuple;
 
 const borderRadiusForSide = (side: string): IPropertyListDescriptor<BorderRadius> => ({
@@ -8,7 +9,8 @@ const borderRadiusForSide = (side: string): IPropertyListDescriptor<BorderRadius
     initialValue: '0 0',
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]): BorderRadius => parseLengthPercentageTuple(tokens.filter(isLengthPercentage))
+    parse: (_context: Context, tokens: CSSValue[]): BorderRadius =>
+        parseLengthPercentageTuple(tokens.filter(isLengthPercentage))
 });
 
 export const borderTopLeftRadius: IPropertyListDescriptor<BorderRadius> = borderRadiusForSide('top-left');

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

@@ -1,7 +1,11 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum BORDER_STYLE {
     NONE = 0,
-    SOLID = 1
+    SOLID = 1,
+    DASHED = 2,
+    DOTTED = 3,
+    DOUBLE = 4
 }
 
 const borderStyleForSide = (side: string): IPropertyIdentValueDescriptor<BORDER_STYLE> => ({
@@ -9,10 +13,16 @@ const borderStyleForSide = (side: string): IPropertyIdentValueDescriptor<BORDER_
     initialValue: 'solid',
     prefix: false,
     type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (style: string): BORDER_STYLE => {
+    parse: (_context: Context, style: string): BORDER_STYLE => {
         switch (style) {
             case 'none':
                 return BORDER_STYLE.NONE;
+            case 'dashed':
+                return BORDER_STYLE.DASHED;
+            case 'dotted':
+                return BORDER_STYLE.DOTTED;
+            case 'double':
+                return BORDER_STYLE.DOUBLE;
         }
         return BORDER_STYLE.SOLID;
     }

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

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

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

@@ -3,6 +3,7 @@ import {CSSValue, isIdentWithValue, parseFunctionArgs} from '../syntax/parser';
 import {ZERO_LENGTH} from '../types/length-percentage';
 import {color, Color} from '../types/color';
 import {isLength, Length} from '../types/length';
+import {Context} from '../../core/context';
 
 export type BoxShadow = BoxShadowItem[];
 interface BoxShadowItem {
@@ -19,7 +20,7 @@ export const boxShadow: IPropertyListDescriptor<BoxShadow> = {
     initialValue: 'none',
     type: PropertyDescriptorParsingType.LIST,
     prefix: false,
-    parse: (tokens: CSSValue[]): BoxShadow => {
+    parse: (context: Context, tokens: CSSValue[]): BoxShadow => {
         if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
             return [];
         }
@@ -50,7 +51,7 @@ export const boxShadow: IPropertyListDescriptor<BoxShadow> = {
                     }
                     c++;
                 } else {
-                    shadow.color = color.parse(token);
+                    shadow.color = color.parse(context, token);
                 }
             }
             return shadow;

src/css/property-descriptors/content.ts

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

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

@@ -1,6 +1,7 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isNumberToken, nonWhiteSpace} from '../syntax/parser';
 import {TokenType} from '../syntax/tokenizer';
+import {Context} from '../../core/context';
 
 export interface COUNTER_INCREMENT {
     counter: string;
@@ -14,7 +15,7 @@ export const counterIncrement: IPropertyListDescriptor<CounterIncrement> = {
     initialValue: 'none',
     prefix: true,
     type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]) => {
+    parse: (_context: Context, tokens: CSSValue[]) => {
         if (tokens.length === 0) {
             return null;
         }

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

@@ -1,5 +1,6 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken, isNumberToken, nonWhiteSpace} from '../syntax/parser';
+import {Context} from '../../core/context';
 
 export interface COUNTER_RESET {
     counter: string;
@@ -13,7 +14,7 @@ export const counterReset: IPropertyListDescriptor<CounterReset> = {
     initialValue: 'none',
     prefix: true,
     type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]) => {
+    parse: (_context: Context, tokens: CSSValue[]) => {
         if (tokens.length === 0) {
             return [];
         }

src/css/property-descriptors/display.ts

@@ -1,5 +1,6 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';
 export const enum DISPLAY {
     NONE = 0,
     BLOCK = 1 << 1,
@@ -40,7 +41,7 @@ export const display: IPropertyListDescriptor<Display> = {
     initialValue: 'inline-block',
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]): Display => {
+    parse: (_context: Context, tokens: CSSValue[]): Display => {
         return tokens.filter(isIdentToken).reduce((bit, token) => {
             return bit | parseDisplayValue(token.value);
         }, DISPLAY.NONE);
@@ -50,6 +51,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;

src/css/property-descriptors/float.ts

@@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum FLOAT {
     NONE = 0,
     LEFT = 1,
@@ -12,7 +13,7 @@ export const float: IPropertyIdentValueDescriptor<FLOAT> = {
     initialValue: 'none',
     prefix: false,
     type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (float: string) => {
+    parse: (_context: Context, float: string) => {
         switch (float) {
             case 'left':
                 return FLOAT.LEFT;

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

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

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

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

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

@@ -1,11 +1,12 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';
 export const fontVariant: IPropertyListDescriptor<string[]> = {
     name: 'font-variant',
     initialValue: 'none',
     type: PropertyDescriptorParsingType.LIST,
     prefix: false,
-    parse: (tokens: CSSValue[]): string[] => {
-        return tokens.filter(isIdentToken).map(token => token.value);
+    parse: (_context: Context, tokens: CSSValue[]): string[] => {
+        return tokens.filter(isIdentToken).map((token) => token.value);
     }
 };

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

@@ -1,11 +1,12 @@
 import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken, isNumberToken} from '../syntax/parser';
+import {Context} from '../../core/context';
 export const fontWeight: IPropertyValueDescriptor<number> = {
     name: 'font-weight',
     initialValue: 'normal',
     type: PropertyDescriptorParsingType.VALUE,
     prefix: false,
-    parse: (token: CSSValue): number => {
+    parse: (_context: Context, token: CSSValue): number => {
         if (isNumberToken(token)) {
             return token.number;
         }

src/css/property-descriptors/letter-spacing.ts

@@ -1,12 +1,13 @@
 import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue} from '../syntax/parser';
 import {TokenType} from '../syntax/tokenizer';
+import {Context} from '../../core/context';
 export const letterSpacing: IPropertyValueDescriptor<number> = {
     name: 'letter-spacing',
     initialValue: '0',
     prefix: false,
     type: PropertyDescriptorParsingType.VALUE,
-    parse: (token: CSSValue) => {
+    parse: (_context: Context, token: CSSValue) => {
         if (token.type === TokenType.IDENT_TOKEN && token.value === 'normal') {
             return 0;
         }

src/css/property-descriptors/line-break.ts

@@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum LINE_BREAK {
     NORMAL = 'normal',
     STRICT = 'strict'
@@ -9,7 +10,7 @@ export const lineBreak: IPropertyIdentValueDescriptor<LINE_BREAK> = {
     initialValue: 'normal',
     prefix: false,
     type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (lineBreak: string): LINE_BREAK => {
+    parse: (_context: Context, lineBreak: string): LINE_BREAK => {
         switch (lineBreak) {
             case 'strict':
                 return LINE_BREAK.STRICT;

src/css/property-descriptors/list-style-image.ts

@@ -2,17 +2,18 @@ import {TokenType} from '../syntax/tokenizer';
 import {ICSSImage, image} from '../types/image';
 import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue} from '../syntax/parser';
+import {Context} from '../../core/context';
 
 export const listStyleImage: IPropertyValueDescriptor<ICSSImage | null> = {
     name: 'list-style-image',
     initialValue: 'none',
     type: PropertyDescriptorParsingType.VALUE,
     prefix: false,
-    parse: (token: CSSValue) => {
+    parse: (context: Context, token: CSSValue) => {
         if (token.type === TokenType.IDENT_TOKEN && token.value === 'none') {
             return null;
         }
 
-        return image.parse(token);
+        return image.parse(context, token);
     }
 };

src/css/property-descriptors/list-style-position.ts

@@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum LIST_STYLE_POSITION {
     INSIDE = 0,
     OUTSIDE = 1
@@ -9,7 +10,7 @@ export const listStylePosition: IPropertyIdentValueDescriptor<LIST_STYLE_POSITIO
     initialValue: 'outside',
     prefix: false,
     type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (position: string) => {
+    parse: (_context: Context, position: string) => {
         switch (position) {
             case 'inside':
                 return LIST_STYLE_POSITION.INSIDE;

src/css/property-descriptors/list-style-type.ts

@@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum LIST_STYLE_TYPE {
     NONE = -1,
     DISC = 0,
@@ -61,7 +62,7 @@ export const listStyleType: IPropertyIdentValueDescriptor<LIST_STYLE_TYPE> = {
     initialValue: 'none',
     prefix: false,
     type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (type: string) => {
+    parse: (_context: Context, type: string) => {
         switch (type) {
             case 'disc':
                 return LIST_STYLE_TYPE.DISC;

src/css/property-descriptors/opacity.ts

@@ -1,11 +1,12 @@
 import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isNumberToken} from '../syntax/parser';
+import {Context} from '../../core/context';
 export const opacity: IPropertyValueDescriptor<number> = {
     name: 'opacity',
     initialValue: '1',
     type: PropertyDescriptorParsingType.VALUE,
     prefix: false,
-    parse: (token: CSSValue): number => {
+    parse: (_context: Context, token: CSSValue): number => {
         if (isNumberToken(token)) {
             return token.number;
         }

src/css/property-descriptors/overflow-wrap.ts

@@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum OVERFLOW_WRAP {
     NORMAL = 'normal',
     BREAK_WORD = 'break-word'
@@ -9,7 +10,7 @@ export const overflowWrap: IPropertyIdentValueDescriptor<OVERFLOW_WRAP> = {
     initialValue: 'normal',
     prefix: false,
     type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (overflow: string) => {
+    parse: (_context: Context, overflow: string) => {
         switch (overflow) {
             case 'break-word':
                 return OVERFLOW_WRAP.BREAK_WORD;

src/css/property-descriptors/overflow.ts

@@ -1,5 +1,6 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';
 export enum OVERFLOW {
     VISIBLE = 0,
     HIDDEN = 1,
@@ -12,8 +13,8 @@ export const overflow: IPropertyListDescriptor<OVERFLOW[]> = {
     initialValue: 'visible',
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]): OVERFLOW[] => {
-        return tokens.filter(isIdentToken).map(overflow => {
+    parse: (_context: Context, tokens: CSSValue[]): 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,42 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';
+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: (_context: Context, tokens: CSSValue[]): PaintOrder => {
+        const DEFAULT_VALUE = [PAINT_ORDER_LAYER.FILL, PAINT_ORDER_LAYER.STROKE, PAINT_ORDER_LAYER.MARKERS];
+        const 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/position.ts

@@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum POSITION {
     STATIC = 0,
     RELATIVE = 1,
@@ -12,7 +13,7 @@ export const position: IPropertyIdentValueDescriptor<POSITION> = {
     initialValue: 'static',
     prefix: false,
     type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (position: string) => {
+    parse: (_context: Context, position: string) => {
         switch (position) {
             case 'relative':
                 return POSITION.RELATIVE;

src/css/property-descriptors/quotes.ts

@@ -1,6 +1,7 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isStringToken} from '../syntax/parser';
 import {TokenType} from '../syntax/tokenizer';
+import {Context} from '../../core/context';
 
 export interface QUOTE {
     open: string;
@@ -14,7 +15,7 @@ export const quotes: IPropertyListDescriptor<Quotes> = {
     initialValue: 'none',
     prefix: true,
     type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]) => {
+    parse: (_context: Context, tokens: CSSValue[]) => {
         if (tokens.length === 0) {
             return null;
         }

src/css/property-descriptors/text-align.ts

@@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum TEXT_ALIGN {
     LEFT = 0,
     CENTER = 1,
@@ -10,7 +11,7 @@ export const textAlign: IPropertyIdentValueDescriptor<TEXT_ALIGN> = {
     initialValue: 'left',
     prefix: false,
     type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (textAlign: string) => {
+    parse: (_context: Context, textAlign: string) => {
         switch (textAlign) {
             case 'right':
                 return TEXT_ALIGN.RIGHT;

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

@@ -1,5 +1,6 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';
 
 export const enum TEXT_DECORATION_LINE {
     NONE = 0,
@@ -16,10 +17,10 @@ export const textDecorationLine: IPropertyListDescriptor<TextDecorationLine> = {
     initialValue: 'none',
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]): TextDecorationLine => {
+    parse: (_context: Context, tokens: CSSValue[]): TextDecorationLine => {
         return tokens
             .filter(isIdentToken)
-            .map(token => {
+            .map((token) => {
                 switch (token.value) {
                     case 'underline':
                         return TEXT_DECORATION_LINE.UNDERLINE;
@@ -32,6 +33,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/text-shadow.ts

@@ -3,6 +3,7 @@ import {CSSValue, isIdentWithValue, parseFunctionArgs} from '../syntax/parser';
 import {ZERO_LENGTH} from '../types/length-percentage';
 import {color, Color, COLORS} from '../types/color';
 import {isLength, Length} from '../types/length';
+import {Context} from '../../core/context';
 
 export type TextShadow = TextShadowItem[];
 interface TextShadowItem {
@@ -17,7 +18,7 @@ export const textShadow: IPropertyListDescriptor<TextShadow> = {
     initialValue: 'none',
     type: PropertyDescriptorParsingType.LIST,
     prefix: false,
-    parse: (tokens: CSSValue[]): TextShadow => {
+    parse: (context: Context, tokens: CSSValue[]): TextShadow => {
         if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
             return [];
         }
@@ -42,7 +43,7 @@ export const textShadow: IPropertyListDescriptor<TextShadow> = {
                     }
                     c++;
                 } else {
-                    shadow.color = color.parse(token);
+                    shadow.color = color.parse(context, token);
                 }
             }
             return shadow;

src/css/property-descriptors/text-transform.ts

@@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum TEXT_TRANSFORM {
     NONE = 0,
     LOWERCASE = 1,
@@ -11,7 +12,7 @@ export const textTransform: IPropertyIdentValueDescriptor<TEXT_TRANSFORM> = {
     initialValue: 'none',
     prefix: false,
     type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (textTransform: string) => {
+    parse: (_context: Context, textTransform: string) => {
         switch (textTransform) {
             case 'uppercase':
                 return TEXT_TRANSFORM.UPPERCASE;

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

@@ -2,6 +2,7 @@ import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IProper
 import {CSSValue} from '../syntax/parser';
 import {isLengthPercentage, LengthPercentage} from '../types/length-percentage';
 import {FLAG_INTEGER, TokenType} from '../syntax/tokenizer';
+import {Context} from '../../core/context';
 export type TransformOrigin = [LengthPercentage, LengthPercentage];
 
 const DEFAULT_VALUE: LengthPercentage = {
@@ -16,7 +17,7 @@ export const transformOrigin: IPropertyListDescriptor<TransformOrigin> = {
     initialValue: '50% 50%',
     prefix: true,
     type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]) => {
+    parse: (_context: Context, tokens: CSSValue[]) => {
         const origins: LengthPercentage[] = tokens.filter(isLengthPercentage);
 
         if (origins.length !== 2) {

src/css/property-descriptors/transform.ts

@@ -1,6 +1,7 @@
 import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue} from '../syntax/parser';
 import {NumberValueToken, TokenType} from '../syntax/tokenizer';
+import {Context} from '../../core/context';
 export type Matrix = [number, number, number, number, number, number];
 export type Transform = Matrix | null;
 
@@ -9,7 +10,7 @@ export const transform: IPropertyValueDescriptor<Transform> = {
     initialValue: 'none',
     prefix: true,
     type: PropertyDescriptorParsingType.VALUE,
-    parse: (token: CSSValue) => {
+    parse: (_context: Context, token: CSSValue) => {
         if (token.type === TokenType.IDENT_TOKEN && token.value === 'none') {
             return null;
         }
@@ -27,14 +28,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/visibility.ts

@@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum VISIBILITY {
     VISIBLE = 0,
     HIDDEN = 1,
@@ -10,7 +11,7 @@ export const visibility: IPropertyIdentValueDescriptor<VISIBILITY> = {
     initialValue: 'none',
     prefix: false,
     type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (visibility: string) => {
+    parse: (_context: Context, visibility: string) => {
         switch (visibility) {
             case 'hidden':
                 return VISIBILITY.HIDDEN;

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,15 @@
+import {CSSValue, isDimensionToken} from '../syntax/parser';
+import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
+export const webkitTextStrokeWidth: IPropertyValueDescriptor<number> = {
+    name: `-webkit-text-stroke-width`,
+    initialValue: '0',
+    type: PropertyDescriptorParsingType.VALUE,
+    prefix: false,
+    parse: (_context: Context, token: CSSValue): number => {
+        if (isDimensionToken(token)) {
+            return token.number;
+        }
+        return 0;
+    }
+};

src/css/property-descriptors/word-break.ts

@@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum WORD_BREAK {
     NORMAL = 'normal',
     BREAK_ALL = 'break-all',
@@ -10,7 +11,7 @@ export const wordBreak: IPropertyIdentValueDescriptor<WORD_BREAK> = {
     initialValue: 'normal',
     prefix: false,
     type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (wordBreak: string): WORD_BREAK => {
+    parse: (_context: Context, wordBreak: string): WORD_BREAK => {
         switch (wordBreak) {
             case 'break-all':
                 return WORD_BREAK.BREAK_ALL;

src/css/property-descriptors/z-index.ts

@@ -1,6 +1,7 @@
 import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isNumberToken} from '../syntax/parser';
 import {TokenType} from '../syntax/tokenizer';
+import {Context} from '../../core/context';
 
 interface zIndex {
     order: number;
@@ -12,7 +13,7 @@ export const zIndex: IPropertyValueDescriptor<zIndex> = {
     initialValue: 'auto',
     prefix: false,
     type: PropertyDescriptorParsingType.VALUE,
-    parse: (token: CSSValue): zIndex => {
+    parse: (_context: Context, token: CSSValue): zIndex => {
         if (token.type === TokenType.IDENT_TOKEN) {
             return {auto: true, order: 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 nonFunctionArgSeparator = (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;
             }
@@ -702,7 +705,7 @@ export class Tokenizer {
     }
 
     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__/color-tests.ts

@@ -1,8 +1,9 @@
 import {strictEqual} from 'assert';
 import {asString, color, isTransparent, pack} from '../color';
 import {Parser} from '../../syntax/parser';
+import {Context} from '../../../core/context';
 
-const parse = (value: string) => color.parse(Parser.parseValue(value));
+const parse = (value: string) => color.parse({} as Context, Parser.parseValue(value));
 
 describe('types', () => {
     describe('<color>', () => {

src/css/types/__tests__/image-tests.ts

@@ -5,30 +5,38 @@ import {color, pack} from '../color';
 import {FLAG_INTEGER, TokenType} from '../../syntax/tokenizer';
 import {deg} from '../angle';
 
-const parse = (value: string) => image.parse(Parser.parseValue(value));
-const colorParse = (value: string) => color.parse(Parser.parseValue(value));
+const parse = (context: Context, value: string) => image.parse(context, Parser.parseValue(value));
+const colorParse = (context: Context, value: string) => color.parse(context, Parser.parseValue(value));
 
-jest.mock('../../../core/cache-storage');
 jest.mock('../../../core/features');
 
+jest.mock('../../../core/context');
+import {Context} from '../../../core/context';
+
 describe('types', () => {
+    let context: Context;
+    beforeEach(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        context = new Context({} as any, {} as any);
+    });
+
     describe('<image>', () => {
         describe('parsing', () => {
             describe('url', () => {
                 it('url(test.jpg)', () =>
-                    deepStrictEqual(parse('url(http://example.com/test.jpg)'), {
+                    deepStrictEqual(parse(context, 'url(http://example.com/test.jpg)'), {
                         url: 'http://example.com/test.jpg',
                         type: CSSImageType.URL
                     }));
                 it('url("test.jpg")', () =>
-                    deepStrictEqual(parse('url("http://example.com/test.jpg")'), {
+                    deepStrictEqual(parse(context, 'url("http://example.com/test.jpg")'), {
                         url: 'http://example.com/test.jpg',
                         type: CSSImageType.URL
                     }));
             });
             describe('linear-gradient', () => {
                 it('linear-gradient(#f69d3c, #3f87a6)', () =>
-                    deepStrictEqual(parse('linear-gradient(#f69d3c, #3f87a6)'), {
+                    deepStrictEqual(parse(context, 'linear-gradient(#f69d3c, #3f87a6)'), {
                         angle: deg(180),
                         type: CSSImageType.LINEAR_GRADIENT,
                         stops: [
@@ -37,45 +45,60 @@ describe('types', () => {
                         ]
                     }));
                 it('linear-gradient(yellow, blue)', () =>
-                    deepStrictEqual(parse('linear-gradient(yellow, blue)'), {
+                    deepStrictEqual(parse(context, '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(context, 'yellow'), stop: null},
+                            {color: colorParse(context, 'blue'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(to bottom, yellow, blue)', () =>
-                    deepStrictEqual(parse('linear-gradient(to bottom, yellow, blue)'), {
+                    deepStrictEqual(parse(context, '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(context, 'yellow'), stop: null},
+                            {color: colorParse(context, 'blue'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(180deg, yellow, blue)', () =>
-                    deepStrictEqual(parse('linear-gradient(180deg, yellow, blue)'), {
+                    deepStrictEqual(parse(context, '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(context, 'yellow'), stop: null},
+                            {color: colorParse(context, 'blue'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(to top, blue, yellow)', () =>
-                    deepStrictEqual(parse('linear-gradient(to top, blue, yellow)'), {
+                    deepStrictEqual(parse(context, '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(context, 'blue'), stop: null},
+                            {color: colorParse(context, 'yellow'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(to top right, blue, yellow)', () =>
-                    deepStrictEqual(parse('linear-gradient(to top right, blue, yellow)'), {
+                    deepStrictEqual(parse(context, 'linear-gradient(to top right, blue, yellow)'), {
                         angle: [
                             {type: TokenType.PERCENTAGE_TOKEN, number: 100, flags: 4},
                             {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(context, 'blue'), stop: null},
+                            {color: colorParse(context, 'yellow'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(to bottom, yellow 0%, blue 100%)', () =>
-                    deepStrictEqual(parse('linear-gradient(to bottom, yellow 0%, blue 100%)'), {
+                    deepStrictEqual(parse(context, 'linear-gradient(to bottom, yellow 0%, blue 100%)'), {
                         angle: deg(180),
                         type: CSSImageType.LINEAR_GRADIENT,
                         stops: [
                             {
-                                color: colorParse('yellow'),
+                                color: colorParse(context, 'yellow'),
                                 stop: {
                                     type: TokenType.PERCENTAGE_TOKEN,
                                     number: 0,
@@ -83,7 +106,7 @@ describe('types', () => {
                                 }
                             },
                             {
-                                color: colorParse('blue'),
+                                color: colorParse(context, 'blue'),
                                 stop: {
                                     type: TokenType.PERCENTAGE_TOKEN,
                                     number: 100,
@@ -94,7 +117,7 @@ describe('types', () => {
                     }));
                 it('linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px)', () =>
                     deepStrictEqual(
-                        parse('linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px)'),
+                        parse(context, 'linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px)'),
                         {
                             angle: [
                                 {type: TokenType.PERCENTAGE_TOKEN, number: 100, flags: 4},
@@ -102,9 +125,9 @@ describe('types', () => {
                             ],
                             type: CSSImageType.LINEAR_GRADIENT,
                             stops: [
-                                {color: colorParse('lightpink'), stop: null},
+                                {color: colorParse(context, 'lightpink'), stop: null},
                                 {
-                                    color: colorParse('lightpink'),
+                                    color: colorParse(context, 'lightpink'),
                                     stop: {
                                         type: TokenType.DIMENSION_TOKEN,
                                         number: 5,
@@ -113,7 +136,7 @@ describe('types', () => {
                                     }
                                 },
                                 {
-                                    color: colorParse('white'),
+                                    color: colorParse(context, 'white'),
                                     stop: {
                                         type: TokenType.DIMENSION_TOKEN,
                                         number: 5,
@@ -122,7 +145,7 @@ describe('types', () => {
                                     }
                                 },
                                 {
-                                    color: colorParse('white'),
+                                    color: colorParse(context, 'white'),
                                     stop: {
                                         type: TokenType.DIMENSION_TOKEN,
                                         number: 10,
@@ -137,13 +160,16 @@ describe('types', () => {
             describe('-prefix-linear-gradient', () => {
                 it('-webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #3a8bc2 84%, #26558b 100%)', () =>
                     deepStrictEqual(
-                        parse('-webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #3a8bc2 84%, #26558b 100%)'),
+                        parse(
+                            context,
+                            '-webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #3a8bc2 84%, #26558b 100%)'
+                        ),
                         {
                             angle: deg(90),
                             type: CSSImageType.LINEAR_GRADIENT,
                             stops: [
                                 {
-                                    color: colorParse('#cedbe9'),
+                                    color: colorParse(context, '#cedbe9'),
                                     stop: {
                                         type: TokenType.PERCENTAGE_TOKEN,
                                         number: 0,
@@ -151,7 +177,7 @@ describe('types', () => {
                                     }
                                 },
                                 {
-                                    color: colorParse('#aac5de'),
+                                    color: colorParse(context, '#aac5de'),
                                     stop: {
                                         type: TokenType.PERCENTAGE_TOKEN,
                                         number: 17,
@@ -159,7 +185,7 @@ describe('types', () => {
                                     }
                                 },
                                 {
-                                    color: colorParse('#3a8bc2'),
+                                    color: colorParse(context, '#3a8bc2'),
                                     stop: {
                                         type: TokenType.PERCENTAGE_TOKEN,
                                         number: 84,
@@ -167,7 +193,7 @@ describe('types', () => {
                                     }
                                 },
                                 {
-                                    color: colorParse('#26558b'),
+                                    color: colorParse(context, '#26558b'),
                                     stop: {
                                         type: TokenType.PERCENTAGE_TOKEN,
                                         number: 100,
@@ -178,12 +204,12 @@ describe('types', () => {
                         }
                     ));
                 it('-moz-linear-gradient(top, #cce5f4 0%, #00263c 100%)', () =>
-                    deepStrictEqual(parse('-moz-linear-gradient(top, #cce5f4 0%, #00263c 100%)'), {
+                    deepStrictEqual(parse(context, '-moz-linear-gradient(top, #cce5f4 0%, #00263c 100%)'), {
                         angle: deg(180),
                         type: CSSImageType.LINEAR_GRADIENT,
                         stops: [
                             {
-                                color: colorParse('#cce5f4'),
+                                color: colorParse(context, '#cce5f4'),
                                 stop: {
                                     type: TokenType.PERCENTAGE_TOKEN,
                                     number: 0,
@@ -191,7 +217,7 @@ describe('types', () => {
                                 }
                             },
                             {
-                                color: colorParse('#00263c'),
+                                color: colorParse(context, '#00263c'),
                                 stop: {
                                     type: TokenType.PERCENTAGE_TOKEN,
                                     number: 100,

src/css/types/angle.ts

@@ -3,6 +3,7 @@ import {TokenType} from '../syntax/tokenizer';
 import {ITypeDescriptor} from '../ITypeDescriptor';
 import {HUNDRED_PERCENT, ZERO_LENGTH} from './length-percentage';
 import {GradientCorner} from './image';
+import {Context} from '../../core/context';
 
 const DEG = 'deg';
 const GRAD = 'grad';
@@ -11,7 +12,7 @@ const TURN = 'turn';
 
 export const angle: ITypeDescriptor<number> = {
     name: 'angle',
-    parse: (value: CSSValue): number => {
+    parse: (_context: Context, value: CSSValue): number => {
         if (value.type === TokenType.DIMENSION_TOKEN) {
             switch (value.unit) {
                 case DEG:
@@ -41,7 +42,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,19 +1,20 @@
-import {CSSValue, nonFunctionArgSeparator} from '../syntax/parser';
+import {CSSValue, nonFunctionArgSeparator, Parser} from '../syntax/parser';
 import {TokenType} from '../syntax/tokenizer';
 import {ITypeDescriptor} from '../ITypeDescriptor';
 import {angle, deg} from './angle';
 import {getAbsoluteValue, isLengthPercentage} from './length-percentage';
+import {Context} from '../../core/context';
 export type Color = number;
 
 export const color: ITypeDescriptor<Color> = {
     name: 'color',
-    parse: (value: CSSValue): Color => {
+    parse: (context: Context, value: CSSValue): Color => {
         if (value.type === TokenType.FUNCTION) {
             const colorFunction = SUPPORTED_COLOR_FUNCTIONS[value.name];
             if (typeof colorFunction === 'undefined') {
                 throw new Error(`Attempting to parse an unsupported color function "${value.name}"`);
             }
-            return colorFunction(value.values);
+            return colorFunction(context, value.values);
         }
 
         if (value.type === TokenType.HASH_TOKEN) {
@@ -59,9 +60,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);
@@ -85,7 +86,7 @@ const getTokenColorValue = (token: CSSValue, i: number): number => {
     return 0;
 };
 
-const rgb = (args: CSSValue[]): number => {
+const rgb = (_context: Context, args: CSSValue[]): number => {
     const tokens = args.filter(nonFunctionArgSeparator);
 
     if (tokens.length === 3) {
@@ -120,11 +121,11 @@ function hue2rgb(t1: number, t2: number, hue: number): number {
     }
 }
 
-const hsl = (args: CSSValue[]): number => {
+const hsl = (context: Context, args: CSSValue[]): number => {
     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);
+    const h = (hue.type === TokenType.NUMBER_TOKEN ? deg(hue.number) : angle.parse(context, hue)) / (Math.PI * 2);
     const s = isLengthPercentage(saturation) ? saturation.number / 100 : 0;
     const l = isLengthPercentage(lightness) ? lightness.number / 100 : 0;
     const a = typeof alpha !== 'undefined' && isLengthPercentage(alpha) ? getAbsoluteValue(alpha, 1) : 1;
@@ -143,7 +144,7 @@ const hsl = (args: CSSValue[]): number => {
 };
 
 const SUPPORTED_COLOR_FUNCTIONS: {
-    [key: string]: (args: CSSValue[]) => number;
+    [key: string]: (context: Context, args: CSSValue[]) => number;
 } = {
     hsl: hsl,
     hsla: hsl,
@@ -151,6 +152,9 @@ const SUPPORTED_COLOR_FUNCTIONS: {
     rgba: rgb
 };
 
+export const parseColor = (context: Context, value: string): Color =>
+    color.parse(context, Parser.create(value).parseComponentValue());
+
 export const COLORS: {[key: string]: Color} = {
     ALICEBLUE: 0xf0f8ffff,
     ANTIQUEWHITE: 0xfaebd7ff,

src/css/types/functions/-prefix-linear-gradient.ts

@@ -3,8 +3,9 @@ import {CSSImageType, CSSLinearGradientImage, GradientCorner, UnprocessedGradien
 import {TokenType} from '../../syntax/tokenizer';
 import {isAngle, angle as angleType, parseNamedSide, deg} from '../angle';
 import {parseColorStop} from './gradient';
+import {Context} from '../../../core/context';
 
-export const prefixLinearGradient = (tokens: CSSValue[]): CSSLinearGradientImage => {
+export const prefixLinearGradient = (context: Context, tokens: CSSValue[]): CSSLinearGradientImage => {
     let angle: number | GradientCorner = deg(180);
     const stops: UnprocessedGradientColorStop[] = [];
 
@@ -18,11 +19,11 @@ export const prefixLinearGradient = (tokens: CSSValue[]): CSSLinearGradientImage
                 angle = parseNamedSide(arg);
                 return;
             } else if (isAngle(firstToken)) {
-                angle = (angleType.parse(firstToken) + deg(270)) % deg(360);
+                angle = (angleType.parse(context, firstToken) + deg(270)) % deg(360);
                 return;
             }
         }
-        const colorStop = parseColorStop(arg);
+        const colorStop = parseColorStop(context, arg);
         stops.push(colorStop);
     });
 

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

@@ -20,8 +20,9 @@ import {
     FARTHEST_CORNER,
     FARTHEST_SIDE
 } from './radial-gradient';
+import {Context} from '../../../core/context';
 
-export const prefixRadialGradient = (tokens: CSSValue[]): CSSRadialGradientImage => {
+export const prefixRadialGradient = (context: Context, tokens: CSSValue[]): CSSRadialGradientImage => {
     let shape: CSSRadialShape = CSSRadialShape.CIRCLE;
     let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
     const stops: UnprocessedGradientColorStop[] = [];
@@ -90,7 +91,7 @@ export const prefixRadialGradient = (tokens: CSSValue[]): CSSRadialGradientImage
         }
 
         if (isColorStop) {
-            const colorStop = parseColorStop(arg);
+            const colorStop = parseColorStop(context, arg);
             stops.push(colorStop);
         }
     });

src/css/types/functions/-webkit-gradient.ts

@@ -12,13 +12,17 @@ import {deg} from '../angle';
 import {TokenType} from '../../syntax/tokenizer';
 import {color as colorType} from '../color';
 import {HUNDRED_PERCENT, LengthPercentage, ZERO_LENGTH} from '../length-percentage';
+import {Context} from '../../../core/context';
 
-export const webkitGradient = (tokens: CSSValue[]): CSSLinearGradientImage | CSSRadialGradientImage => {
-    let angle = deg(180);
+export const webkitGradient = (
+    context: Context,
+    tokens: CSSValue[]
+): CSSLinearGradientImage | CSSRadialGradientImage => {
+    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];
@@ -34,15 +38,15 @@ export const webkitGradient = (tokens: CSSValue[]): CSSLinearGradientImage | CSS
 
         if (firstToken.type === TokenType.FUNCTION) {
             if (firstToken.name === 'from') {
-                const color = colorType.parse(firstToken.values[0]);
+                const color = colorType.parse(context, firstToken.values[0]);
                 stops.push({stop: ZERO_LENGTH, color});
             } else if (firstToken.name === 'to') {
-                const color = colorType.parse(firstToken.values[0]);
+                const color = colorType.parse(context, firstToken.values[0]);
                 stops.push({stop: HUNDRED_PERCENT, color});
             } else if (firstToken.name === 'color-stop') {
                 const values = firstToken.values.filter(nonFunctionArgSeparator);
                 if (values.length === 2) {
-                    const color = colorType.parse(values[1]);
+                    const color = colorType.parse(context, values[1]);
                     const stop = values[0];
                     if (isNumberToken(stop)) {
                         stops.push({

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

@@ -5,9 +5,10 @@ import {CSSImageType, CSSRadialExtent, CSSRadialShape} from '../../image';
 import {color} from '../../color';
 import {TokenType} from '../../../syntax/tokenizer';
 import {FIFTY_PERCENT, HUNDRED_PERCENT} from '../../length-percentage';
+import {Context} from '../../../../core/context';
 
-const parse = (value: string) => radialGradient((Parser.parseValues(value)[0] as CSSFunction).values);
-const colorParse = (value: string) => color.parse(Parser.parseValue(value));
+const parse = (value: string) => radialGradient({} as Context, (Parser.parseValues(value)[0] as CSSFunction).values);
+const colorParse = (value: string) => color.parse({} as Context, Parser.parseValue(value));
 
 describe('functions', () => {
     describe('radial-gradient', () => {
@@ -55,7 +56,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,8 +23,8 @@ 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[] {
@@ -33,7 +33,7 @@ export class CounterState {
         let canReset = true;
 
         if (counterIncrement !== null) {
-            counterIncrement.forEach(entry => {
+            counterIncrement.forEach((entry) => {
                 const counter = this.counters[entry.counter];
                 if (counter && entry.increment !== 0) {
                     canReset = false;
@@ -44,7 +44,7 @@ export class CounterState {
 
         const counterNames: string[] = [];
         if (canReset) {
-            counterReset.forEach(entry => {
+            counterReset.forEach((entry) => {
                 let counter = this.counters[entry.counter];
                 counterNames.push(entry.counter);
                 if (!counter) {
@@ -70,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: [
         'Ք',
@@ -149,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: [
         'י׳',
@@ -230,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: [
         'ჵ',
@@ -362,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
     );
 };
@@ -405,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

@@ -9,9 +9,10 @@ import {
 } from '../image';
 import {color as colorType} from '../color';
 import {getAbsoluteValue, HUNDRED_PERCENT, isLengthPercentage, ZERO_LENGTH} from '../length-percentage';
+import {Context} from '../../../core/context';
 
-export const parseColorStop = (args: CSSValue[]): UnprocessedGradientColorStop => {
-    const color = colorType.parse(args[0]);
+export const parseColorStop = (context: Context, args: CSSValue[]): UnprocessedGradientColorStop => {
+    const color = colorType.parse(context, args[0]);
     const stop = args[1];
     return stop && isLengthPercentage(stop) ? {color, stop} : {color, stop: null};
 };
@@ -98,7 +99,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/functions/linear-gradient.ts

@@ -3,8 +3,9 @@ import {TokenType} from '../../syntax/tokenizer';
 import {isAngle, angle as angleType, parseNamedSide, deg} from '../angle';
 import {CSSImageType, CSSLinearGradientImage, GradientCorner, UnprocessedGradientColorStop} from '../image';
 import {parseColorStop} from './gradient';
+import {Context} from '../../../core/context';
 
-export const linearGradient = (tokens: CSSValue[]): CSSLinearGradientImage => {
+export const linearGradient = (context: Context, tokens: CSSValue[]): CSSLinearGradientImage => {
     let angle: number | GradientCorner = deg(180);
     const stops: UnprocessedGradientColorStop[] = [];
 
@@ -15,11 +16,11 @@ export const linearGradient = (tokens: CSSValue[]): CSSLinearGradientImage => {
                 angle = parseNamedSide(arg);
                 return;
             } else if (isAngle(firstToken)) {
-                angle = angleType.parse(firstToken);
+                angle = angleType.parse(context, firstToken);
                 return;
             }
         }
-        const colorStop = parseColorStop(arg);
+        const colorStop = parseColorStop(context, arg);
         stops.push(colorStop);
     });
 

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

@@ -10,6 +10,7 @@ import {
 import {parseColorStop} from './gradient';
 import {FIFTY_PERCENT, HUNDRED_PERCENT, isLengthPercentage, LengthPercentage, ZERO_LENGTH} from '../length-percentage';
 import {isLength} from '../length';
+import {Context} from '../../../core/context';
 export const CLOSEST_SIDE = 'closest-side';
 export const FARTHEST_SIDE = 'farthest-side';
 export const CLOSEST_CORNER = 'closest-corner';
@@ -19,7 +20,7 @@ export const ELLIPSE = 'ellipse';
 export const COVER = 'cover';
 export const CONTAIN = 'contain';
 
-export const radialGradient = (tokens: CSSValue[]): CSSRadialGradientImage => {
+export const radialGradient = (context: Context, tokens: CSSValue[]): CSSRadialGradientImage => {
     let shape: CSSRadialShape = CSSRadialShape.CIRCLE;
     let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
     const stops: UnprocessedGradientColorStop[] = [];
@@ -85,7 +86,7 @@ export const radialGradient = (tokens: CSSValue[]): CSSRadialGradientImage => {
         }
 
         if (isColorStop) {
-            const colorStop = parseColorStop(arg);
+            const colorStop = parseColorStop(context, arg);
             stops.push(colorStop);
         }
     });

src/css/types/image.ts

@@ -4,11 +4,11 @@ import {Color} from './color';
 import {linearGradient} from './functions/linear-gradient';
 import {prefixLinearGradient} from './functions/-prefix-linear-gradient';
 import {ITypeDescriptor} from '../ITypeDescriptor';
-import {CacheStorage} from '../../core/cache-storage';
 import {LengthPercentage} from './length-percentage';
 import {webkitGradient} from './functions/-webkit-gradient';
 import {radialGradient} from './functions/radial-gradient';
 import {prefixRadialGradient} from './functions/-prefix-radial-gradient';
+import {Context} from '../../core/context';
 
 export enum CSSImageType {
     URL,
@@ -79,10 +79,10 @@ export interface CSSRadialGradientImage extends ICSSGradientImage {
 
 export const image: ITypeDescriptor<ICSSImage> = {
     name: 'image',
-    parse: (value: CSSValue): ICSSImage => {
+    parse: (context: Context, value: CSSValue): ICSSImage => {
         if (value.type === TokenType.URL_TOKEN) {
             const image: CSSURLImage = {url: value.value, type: CSSImageType.URL};
-            CacheStorage.getInstance().addImage(value.value);
+            context.cache.addImage(value.value);
             return image;
         }
 
@@ -91,18 +91,21 @@ export const image: ITypeDescriptor<ICSSImage> = {
             if (typeof imageFunction === 'undefined') {
                 throw new Error(`Attempting to parse an unsupported image function "${value.name}"`);
             }
-            return imageFunction(value.values);
+            return imageFunction(context, value.values);
         }
 
-        throw new Error(`Unsupported image type`);
+        throw new Error(`Unsupported image type ${value.type}`);
     }
 };
 
-export function isSupportedImage(value: CSSValue) {
-    return value.type !== TokenType.FUNCTION || SUPPORTED_IMAGE_FUNCTIONS[value.name];
+export function isSupportedImage(value: CSSValue): boolean {
+    return (
+        !(value.type === TokenType.IDENT_TOKEN && value.value === 'none') &&
+        (value.type !== TokenType.FUNCTION || !!SUPPORTED_IMAGE_FUNCTIONS[value.name])
+    );
 }
 
-const SUPPORTED_IMAGE_FUNCTIONS: Record<string, (args: CSSValue[]) => ICSSImage> = {
+const SUPPORTED_IMAGE_FUNCTIONS: Record<string, (context: Context, 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

@@ -2,15 +2,21 @@ export class DocumentCloner {
     clonedReferenceElement?: HTMLElement;
 
     constructor() {
-        // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
-        this.clonedReferenceElement = {} as HTMLElement;
+        this.clonedReferenceElement = {
+            ownerDocument: {
+                defaultView: {
+                    pageXOffset: 12,
+                    pageYOffset: 34
+                }
+            }
+        } as HTMLElement;
     }
 
-    toIFrame() {
-        return Promise.resolve({});
+    toIFrame(): Promise<HTMLIFrameElement> {
+        return Promise.resolve({} as HTMLIFrameElement);
     }
 
-    static destroy() {
+    static destroy(): boolean {
         return true;
     }
 }

src/dom/document-cloner.ts

@@ -5,24 +5,32 @@ import {
     isElementNode,
     isHTMLElementNode,
     isIFrameElement,
+    isImageElement,
     isScriptElement,
     isSelectElement,
     isStyleElement,
+    isSVGElementNode,
     isTextareaElement,
     isTextNode
 } from './node-parser';
-import {Logger} from '../core/logger';
 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';
 import {CSSParsedCounterDeclaration, CSSParsedPseudoDeclaration} from '../css/index';
 import {getQuote} from '../css/property-descriptors/quotes';
+import {Context} from '../core/context';
 
 export interface CloneOptions {
-    id: string;
     ignoreElements?: (element: Element) => boolean;
-    onclone?: (document: Document) => void;
+    onclone?: (document: Document, element: HTMLElement) => void;
+}
+
+export interface WindowOptions {
+    scrollX: number;
+    scrollY: number;
+    windowWidth: number;
+    windowHeight: number;
 }
 
 export type CloneConfigurations = CloneOptions & {
@@ -34,15 +42,17 @@ const IGNORE_ATTRIBUTE = 'data-html2canvas-ignore';
 
 export class DocumentCloner {
     private readonly scrolledElements: [Element, number, number][];
-    private readonly options: CloneConfigurations;
     private readonly referenceElement: HTMLElement;
     clonedReferenceElement?: HTMLElement;
     private readonly documentElement: HTMLElement;
     private readonly counters: CounterState;
     private quoteDepth: number;
 
-    constructor(element: HTMLElement, options: CloneConfigurations) {
-        this.options = options;
+    constructor(
+        private readonly context: Context,
+        element: HTMLElement,
+        private readonly options: CloneConfigurations
+    ) {
         this.scrolledElements = [];
         this.referenceElement = element;
         this.counters = new CounterState();
@@ -79,15 +89,21 @@ export class DocumentCloner {
                     /(iPad|iPhone|iPod)/g.test(navigator.userAgent) &&
                     (cloneWindow.scrollY !== windowSize.top || cloneWindow.scrollX !== windowSize.left)
                 ) {
-                    documentClone.documentElement.style.top = -windowSize.top + 'px';
-                    documentClone.documentElement.style.left = -windowSize.left + 'px';
-                    documentClone.documentElement.style.position = 'absolute';
+                    this.context.logger.warn('Unable to restore scroll position for cloned document');
+                    this.context.windowBounds = this.context.windowBounds.add(
+                        cloneWindow.scrollX - windowSize.left,
+                        cloneWindow.scrollY - windowSize.top,
+                        0,
+                        0
+                    );
                 }
             }
 
             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`);
             }
 
@@ -95,9 +111,13 @@ export class DocumentCloner {
                 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);
             }
 
@@ -114,20 +134,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 {
@@ -146,7 +174,7 @@ export class DocumentCloner {
             }
         } catch (e) {
             // accessing node.sheet.cssRules throws a DOMException
-            Logger.getInstance(this.options.id).error('Unable to access cssRules property', e);
+            this.context.logger.error('Unable to access cssRules property', e);
             if (e.name !== 'SecurityError') {
                 throw e;
             }
@@ -161,7 +189,7 @@ export class DocumentCloner {
                 img.src = canvas.toDataURL();
                 return img;
             } catch (e) {
-                Logger.getInstance(this.options.id).info(`Unable to clone canvas contents, canvas is tainted`);
+                this.context.logger.info(`Unable to clone canvas contents, canvas is tainted`);
             }
         }
 
@@ -184,67 +212,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);
@@ -256,21 +224,21 @@ 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)) {
                 createPseudoHideStyles(clone);
             }
 
-            const counters = this.counters.parse(new CSSParsedCounterDeclaration(style));
+            const counters = this.counters.parse(new CSSParsedCounterDeclaration(this.context, style));
             const before = this.resolvePseudoContent(node, clone, styleBefore, PseudoElementType.BEFORE);
 
             for (let child = node.firstChild; child; child = child.nextSibling) {
@@ -297,12 +265,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]);
             }
@@ -336,13 +302,13 @@ export class DocumentCloner {
             return;
         }
 
-        this.counters.parse(new CSSParsedCounterDeclaration(style));
-        const declaration = new CSSParsedPseudoDeclaration(style);
+        this.counters.parse(new CSSParsedCounterDeclaration(this.context, style));
+        const declaration = new CSSParsedPseudoDeclaration(this.context, style);
 
         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) {
@@ -364,7 +330,7 @@ export class DocumentCloner {
                         const counterState = this.counters.getCounterValue(counter.value);
                         const counterType =
                             counterStyle && isIdentToken(counterStyle)
-                                ? listStyleType.parse(counterStyle.value)
+                                ? listStyleType.parse(this.context, counterStyle.value)
                                 : LIST_STYLE_TYPE.DECIMAL;
 
                         anonymousReplacedElement.appendChild(
@@ -377,11 +343,11 @@ export class DocumentCloner {
                         const counterStates = this.counters.getCounterValues(counter.value);
                         const counterType =
                             counterStyle && isIdentToken(counterStyle)
-                                ? listStyleType.parse(counterStyle.value)
+                                ? listStyleType.parse(this.context, counterStyle.value)
                                 : 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));
@@ -409,10 +375,17 @@ export class DocumentCloner {
         });
 
         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;
     }
 
@@ -448,6 +421,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;
@@ -458,8 +450,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);
@@ -470,12 +462,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/element-container.ts

@@ -2,6 +2,7 @@ import {CSSParsedDeclaration} from '../css/index';
 import {TextContainer} from './text-container';
 import {Bounds, parseBounds} from '../css/layout/bounds';
 import {isHTMLElementNode} from './node-parser';
+import {Context} from '../core/context';
 
 export const enum FLAGS {
     CREATES_STACKING_CONTEXT = 1 << 1,
@@ -16,15 +17,15 @@ export class ElementContainer {
     bounds: Bounds;
     flags: number;
 
-    constructor(element: Element) {
-        this.styles = new CSSParsedDeclaration(window.getComputedStyle(element, null));
+    constructor(protected readonly context: Context, element: Element) {
+        this.styles = new CSSParsedDeclaration(context, window.getComputedStyle(element, null));
         this.textNodes = [];
         this.elements = [];
         if (this.styles.transform !== null && isHTMLElementNode(element)) {
             // getBoundingClientRect takes transforms into account
             element.style.transform = 'none';
         }
-        this.bounds = parseBounds(element);
+        this.bounds = parseBounds(this.context, element);
         this.flags = 0;
     }
 }

src/dom/elements/li-element-container.ts

@@ -1,9 +1,10 @@
 import {ElementContainer} from '../element-container';
+import {Context} from '../../core/context';
 export class LIElementContainer extends ElementContainer {
     readonly value: number;
 
-    constructor(element: HTMLLIElement) {
-        super(element);
+    constructor(context: Context, element: HTMLLIElement) {
+        super(context, element);
         this.value = element.value;
     }
 }