chore(release): 1.0.0

* test: update karma runner

* fix: Promise polyfill for testrunner

.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

.github/workflows/ci.yml

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

.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
+.npmignore
-azure-pipelines.yml
+.prettierrc
-karma.js
+jest.config.js
 karma.conf.js
-rollup.config.js
+karma.js
-webpack.config.js
+rollup.config.ts
-.rpt2_cache

CHANGELOG.md

@@ -1,7 +1,64 @@
-# Change Log
+# Changelog
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+# [1.0.0](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.7...v1.0.0) (2021-07-04)
+
+
+### ci
+
+* update docs publish action (#2451) ([7222aba](https://github.com/niklasvh/html2canvas/commit/7222aba1b42138c3d466525172411b3d9869095f)), closes [#2451](https://github.com/niklasvh/html2canvas/issues/2451)
+
+### deps
+
+* update www deps (#2525) ([2a013e2](https://github.com/niklasvh/html2canvas/commit/2a013e20c814b7dbaea98f54f0bde8f553eb79a2)), closes [#2525](https://github.com/niklasvh/html2canvas/issues/2525)
+
+### fix
+
+* opacity with overflow hidden (#2450) ([82b7da5](https://github.com/niklasvh/html2canvas/commit/82b7da558c342e7f53d298bb1d843a5db86c3b21)), closes [#2450](https://github.com/niklasvh/html2canvas/issues/2450)
+
+### test
+
+* update karma runner (#2524) ([ff35c7d](https://github.com/niklasvh/html2canvas/commit/ff35c7dbd33f863f5b614d778baf8cb1e8dded60)), closes [#2524](https://github.com/niklasvh/html2canvas/issues/2524)
+
+
+
+# [1.0.0-rc.7](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.6...v1.0.0-rc.7) (2020-08-09)
+
+
+### fix
+
+* concatenate contiguous font-family tokens (#2219) ([bacfadf](https://github.com/niklasvh/html2canvas/commit/bacfadff96d907d9e8ab4ef515ca6487de9e51fc)), closes [#2219](https://github.com/niklasvh/html2canvas/issues/2219)
+* external styles on svg elements (#2320) ([1514220](https://github.com/niklasvh/html2canvas/commit/1514220812cfb22d64d0974558d9c14fe90a41d3)), closes [#2320](https://github.com/niklasvh/html2canvas/issues/2320)
+
+
+
+# [1.0.0-rc.6](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.5...v1.0.0-rc.6) (2020-08-08)
+
+
+### ci
+
+* Azure Pipelines: upgrade from macOS 10.13 -> 10.14 (#2204) ([c366e87](https://github.com/niklasvh/html2canvas/commit/c366e8790d346ea981b24b7425aef6bf6d7ebcec)), closes [#2204](https://github.com/niklasvh/html2canvas/issues/2204)
+* build docs (#2305) ([51de347](https://github.com/niklasvh/html2canvas/commit/51de34787ad8aba3f213800be45e878cddb064e9)), closes [#2305](https://github.com/niklasvh/html2canvas/issues/2305)
+
+### fix
+
+* #1868 Clone node, Setting className for SVG element raises error (#2079) ([f139b51](https://github.com/niklasvh/html2canvas/commit/f139b513c5cf9673dc727fd47124e0d779891e3a)), closes [#1868](https://github.com/niklasvh/html2canvas/issues/1868) [#2079](https://github.com/niklasvh/html2canvas/issues/2079) [#1868](https://github.com/niklasvh/html2canvas/issues/1868)
+* image loading="lazy" fix #2312 (#2314) ([f23e6f6](https://github.com/niklasvh/html2canvas/commit/f23e6f6f2690dc0dbd02621c3bb81025904e6647)), closes [#2312](https://github.com/niklasvh/html2canvas/issues/2312) [#2314](https://github.com/niklasvh/html2canvas/issues/2314)
+
+
+
+# [1.0.0-rc.5](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.4...v1.0.0-rc.5) (2019-09-27)
+
+
+### fix
+
+* correctly respect logging option (#2013) ([34b06d6365603c3b16664ab7804efe94c7945946](https://github.com/niklasvh/html2canvas/commit/34b06d6365603c3b16664ab7804efe94c7945946)), closes [#2013](https://github.com/niklasvh/html2canvas/issues/2013)
+* safari pseudo element content parsing (#2018) ([3f599103fb139f218ffe917800e74af2c7cc7ad5](https://github.com/niklasvh/html2canvas/commit/3f599103fb139f218ffe917800e74af2c7cc7ad5)), closes [#2018](https://github.com/niklasvh/html2canvas/issues/2018)
+* using existing canvas option (#2017) ([076492042a73d67b30e4562f2964200e07d25f5e](https://github.com/niklasvh/html2canvas/commit/076492042a73d67b30e4562f2964200e07d25f5e)), closes [#2017](https://github.com/niklasvh/html2canvas/issues/2017)
+
+
+
 # [1.0.0-rc.4](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.3...v1.0.0-rc.4) (2019-09-22)
 
 

README.md

@@ -4,7 +4,7 @@ html2canvas
 [Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](http://stackoverflow.com/questions/tagged/html2canvas?sort=newest)
 
 [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 
-[![Build Status](https://dev.azure.com/niklasvh/html2canvas/_apis/build/status/niklasvh.html2canvas?branchName=master)](https://dev.azure.com/niklasvh/html2canvas/_build/latest?definitionId=1&branchName=master)
+![CI](https://github.com/niklasvh/html2canvas/workflows/CI/badge.svg?branch=master)
 [![NPM Downloads](https://img.shields.io/npm/dm/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
 [![NPM Version](https://img.shields.io/npm/v/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
 

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

examples/existing_canvas.html

@@ -42,7 +42,7 @@
     ctx.stroke();
 
     document.querySelector("button").addEventListener("click", function() {
-        html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
+        html2canvas(document.querySelector("#content"), {canvas: canvas, scale: 1}).then(function(canvas) {
             console.log('Drew on the existing canvas');
         });
     }, false);

jest.config.js

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

karma.conf.js

@@ -4,26 +4,43 @@
 const path = require('path');
 const simctl = require('node-simctl');
 const iosSimulator = require('appium-ios-simulator');
+const listenAddress = 'localhost';
 const port = 9876;
 
 const log = require('karma/lib/logger').create('launcher:MobileSafari');
 
 module.exports = function(config) {
+    // https://github.com/actions/virtual-environments/blob/master/images/macos/macos-10.15-Readme.md
     const launchers = {
         Safari_IOS_9: {
             base: 'MobileSafari',
             name: 'iPhone 5s',
+            platform: 'iOS',
             sdk: '9.0'
         },
         Safari_IOS_10: {
             base: 'MobileSafari',
             name: 'iPhone 5s',
+            platform: 'iOS',
             sdk: '10.0'
         },
         Safari_IOS_12: {
             base: 'MobileSafari',
             name: 'iPhone 5s',
-            sdk: '12.1'
+            platform: 'iOS',
+            sdk: '12.4'
+        },
+        Safari_IOS_13: {
+            base: 'MobileSafari',
+            name: 'iPhone 8',
+            platform: 'iOS',
+            sdk: '13.6'
+        },
+        Safari_IOS_14: {
+            base: 'MobileSafari',
+            name: 'iPhone 8',
+            platform: 'iOS',
+            sdk: '14.0'
         },
         SauceLabs_IE9: {
             base: 'SauceLabs',
@@ -85,10 +102,10 @@ module.exports = function(config) {
             flags: ['-extoff']
         },
         Safari_Stable: {
-            base: 'Safari'
+            base: 'SafariNative'
         },
         Chrome_Stable: {
-            base: 'Chrome'
+            base: 'ChromeHeadless'
         },
         Firefox_Stable: {
             base: 'Firefox'
@@ -99,7 +116,7 @@ module.exports = function(config) {
 
     const customLaunchers = ciLauncher ? {target_browser: ciLauncher} : {
         stable_chrome: {
-            base: 'Chrome'
+            base: 'ChromeHeadless'
         },
         stable_firefox: {
             base: 'Firefox'
@@ -125,8 +142,8 @@ module.exports = function(config) {
         }
         baseBrowserDecorator(this);
         this.on('start', url => {
-            simctl.getDevices().then(devices => {
+            simctl.getDevices(args.sdk, args.platform).then(devices => {
-                const d = devices[args.sdk].find(d => {
+                const d = devices.find(d => {
                     return d.name === args.name;
                 });
 
@@ -208,6 +225,9 @@ module.exports = function(config) {
             outputDir: 'tmp/junit/'
         },
 
+        // web server listen address,
+        listenAddress,
+
         // web server port
         port,
 

karma.js

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

package.json

@@ -6,7 +6,7 @@
   "module": "dist/html2canvas.esm.js",
   "typings": "dist/types/index.d.ts",
   "browser": "dist/html2canvas.js",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0",
   "author": {
     "name": "Niklas von Hertzen",
     "email": "niklasvh@gmail.com",
@@ -28,7 +28,10 @@
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-flow": "^7.0.0",
     "@types/chai": "^4.1.7",
+    "@types/express": "^4.17.11",
     "@types/glob": "^7.1.1",
+    "@types/jest": "^24.0.18",
+    "@types/karma": "^6.3.0",
     "@types/mocha": "^5.2.6",
     "@types/node": "^11.13.2",
     "@types/platform": "^1.3.2",
@@ -38,7 +41,7 @@
     "appium-ios-simulator": "^3.10.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
-    "babel-plugin-add-module-exports": "^1.0.0",
+    "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-dev-expression": "^0.2.1",
     "base64-arraybuffer": "0.2.0",
     "body-parser": "^1.18.3",
@@ -49,23 +52,24 @@
     "eslint": "^5.16.0",
     "eslint-config-prettier": "^4.2.0",
     "eslint-plugin-prettier": "3.0.1",
-    "express": "^4.16.4",
+    "express": "^4.17.1",
     "filenamify-url": "1.0.0",
     "glob": "7.1.3",
     "html2canvas-proxy": "1.0.1",
-    "jquery": "^3.4.0",
+    "jest": "^24.9.0",
+    "jquery": "^3.5.1",
     "js-polyfills": "^0.1.42",
-    "karma": "^4.0.1",
+    "karma": "^6.3.2",
-    "karma-chrome-launcher": "^2.2.0",
+    "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-junit-reporter": "^2.0.1",
-    "karma-mocha": "^1.3.0",
+    "karma-mocha": "^2.0.1",
-    "karma-safari-launcher": "^1.0.0",
+    "karma-safarinative-launcher": "^1.1.0",
     "karma-sauce-launcher": "^2.0.2",
     "mocha": "^6.1.4",
-    "node-simctl": "^5.0.0",
+    "node-simctl": "^5.3.0",
     "platform": "1.3.4",
     "prettier": "1.17.0",
     "replace-in-file": "^3.0.0",
@@ -78,14 +82,16 @@
     "rollup-plugin-typescript2": "^0.21.0",
     "serve-index": "^1.9.1",
     "slash": "1.0.0",
-    "standard-version": "^5.0.2",
+    "standard-version": "^8.0.2",
+    "ts-jest": "^24.1.0",
     "ts-loader": "^5.3.3",
     "ts-node": "^8.0.3",
     "typescript": "^3.4.3",
     "uglify-js": "^3.5.11",
     "uglifyjs-webpack-plugin": "^1.1.2",
     "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0"
+    "webpack-cli": "^3.3.12",
+    "yargs": "^17.0.1"
   },
   "scripts": {
     "prebuild": "rimraf dist/ && rimraf build/ && mkdirp dist && mkdirp build",
@@ -99,11 +105,11 @@
     "format": "prettier --write \"{src,www/src,tests,scripts}/**/*.ts\"",
     "lint": "eslint src/**/*.ts",
     "test": "npm run lint && npm run unittest && npm run karma",
-    "unittest": "mocha --require ts-node/register src/**/__tests__/*.ts",
+    "unittest": "jest",
-    "karma": "node karma",
+    "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",

src/__tests__/index.ts

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

src/core/__mocks__/cache-storage.ts

@@ -0,0 +1,22 @@
+class MockCache {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private readonly _cache: {[key: string]: Promise<any>};
+
+    constructor() {
+        this._cache = {};
+    }
+
+    addImage(src: string): Promise<void> {
+        const result = Promise.resolve();
+        this._cache[src] = result;
+        return result;
+    }
+}
+
+const current = new MockCache();
+
+export class CacheStorage {
+    static getInstance(): MockCache {
+        return current;
+    }
+}

src/core/__mocks__/features.ts

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

src/core/__mocks__/logger.ts

@@ -0,0 +1,17 @@
+export class Logger {
+    debug() {}
+
+    static create() {}
+
+    static destroy() {}
+
+    static getInstance(): Logger {
+        return logger;
+    }
+
+    info() {}
+
+    error() {}
+}
+
+const logger = new Logger();

src/core/__tests__/cache-storage.ts

@@ -1,6 +1,49 @@
 import {deepStrictEqual, fail} from 'assert';
 import {FEATURES} from '../features';
-import {createMockContext, proxy} from './mock-context';
+import {CacheStorage} from '../cache-storage';
+import {Logger} from '../logger';
+
+const proxy = 'http://example.com/proxy';
+
+const createMockContext = (origin: string, opts = {}) => {
+    const context = {
+        location: {
+            href: origin
+        },
+        document: {
+            createElement(_name: string) {
+                let _href = '';
+                return {
+                    set href(value: string) {
+                        _href = value;
+                    },
+                    get href() {
+                        return _href;
+                    },
+                    get protocol() {
+                        return new URL(_href).protocol;
+                    },
+                    get hostname() {
+                        return new URL(_href).hostname;
+                    },
+                    get port() {
+                        return new URL(_href).port;
+                    }
+                };
+            }
+        }
+    };
+
+    CacheStorage.setContext(context as Window);
+    Logger.create({id: 'test', enabled: false});
+    return CacheStorage.create('test', {
+        imageTimeout: 0,
+        useCORS: false,
+        allowTaint: false,
+        proxy,
+        ...opts
+    });
+};
 
 const images: ImageMock[] = [];
 const xhr: XMLHttpRequestMock[] = [];

src/core/__tests__/logger.ts

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

src/core/__tests__/mock-context.ts

@@ -1,45 +0,0 @@
-import {CacheStorage} from '../cache-storage';
-import {URL} from 'url';
-import {Logger} from '../logger';
-
-export const proxy = 'http://example.com/proxy';
-
-export const createMockContext = (origin: string, opts = {}) => {
-    const context = {
-        location: {
-            href: origin
-        },
-        document: {
-            createElement(_name: string) {
-                let _href = '';
-                return {
-                    set href(value: string) {
-                        _href = value;
-                    },
-                    get href() {
-                        return _href;
-                    },
-                    get protocol() {
-                        return new URL(_href).protocol;
-                    },
-                    get hostname() {
-                        return new URL(_href).hostname;
-                    },
-                    get port() {
-                        return new URL(_href).port;
-                    }
-                };
-            }
-        }
-    };
-
-    CacheStorage.setContext(context as Window);
-    Logger.create('test');
-    return CacheStorage.create('test', {
-        imageTimeout: 0,
-        useCORS: false,
-        allowTaint: false,
-        proxy,
-        ...opts
-    });
-};

src/core/logger.ts

@@ -1,22 +1,31 @@
+export interface LoggerOptions {
+    id: string;
+    enabled: boolean;
+}
+
 export class Logger {
     static instances: {[key: string]: Logger} = {};
 
     private readonly id: string;
+    private readonly enabled: boolean;
     private readonly start: number;
 
-    constructor(id: string) {
+    constructor({id, enabled}: LoggerOptions) {
         this.id = id;
+        this.enabled = enabled;
         this.start = Date.now();
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     debug(...args: any) {
-        // eslint-disable-next-line no-console
+        if (this.enabled) {
-        if (typeof window !== 'undefined' && window.console && typeof console.debug === 'function') {
             // eslint-disable-next-line no-console
-            console.debug(this.id, `${this.getTime()}ms`, ...args);
+            if (typeof window !== 'undefined' && window.console && typeof console.debug === 'function') {
-        } else {
+                // eslint-disable-next-line no-console
-            this.info(...args);
+                console.debug(this.id, `${this.getTime()}ms`, ...args);
+            } else {
+                this.info(...args);
+            }
         }
     }
 
@@ -24,8 +33,8 @@ export class Logger {
         return Date.now() - this.start;
     }
 
-    static create(id: string) {
+    static create(options: LoggerOptions) {
-        Logger.instances[id] = new Logger(id);
+        Logger.instances[options.id] = new Logger(options);
     }
 
     static destroy(id: string) {
@@ -42,21 +51,25 @@ export class Logger {
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     info(...args: any) {
-        // eslint-disable-next-line no-console
+        if (this.enabled) {
-        if (typeof window !== 'undefined' && window.console && typeof console.info === 'function') {
             // eslint-disable-next-line no-console
-            console.info(this.id, `${this.getTime()}ms`, ...args);
+            if (typeof window !== 'undefined' && window.console && typeof console.info === 'function') {
+                // eslint-disable-next-line no-console
+                console.info(this.id, `${this.getTime()}ms`, ...args);
+            }
         }
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     error(...args: any) {
-        // eslint-disable-next-line no-console
+        if (this.enabled) {
-        if (typeof window !== 'undefined' && window.console && typeof console.error === 'function') {
             // eslint-disable-next-line no-console
-            console.error(this.id, `${this.getTime()}ms`, ...args);
+            if (typeof window !== 'undefined' && window.console && typeof console.error === 'function') {
-        } else {
+                // eslint-disable-next-line no-console
-            this.info(...args);
+                console.error(this.id, `${this.getTime()}ms`, ...args);
+            } else {
+                this.info(...args);
+            }
         }
     }
 }

src/css/layout/__mocks__/bounds.ts

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

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

@@ -4,15 +4,13 @@ import {backgroundImage} from '../background-image';
 import {CSSImageType} from '../../types/image';
 import {pack} from '../../types/color';
 import {deg} from '../../types/angle';
-import {createMockContext} from '../../../core/__tests__/mock-context';
+
-import {CacheStorage} from '../../../core/cache-storage';
+jest.mock('../../../core/cache-storage');
+jest.mock('../../../core/features');
 
 const backgroundImageParse = (value: string) => backgroundImage.parse(Parser.parseValues(value));
 
 describe('property-descriptors', () => {
-    before(() => {
-        CacheStorage.attachInstance(createMockContext('http://example.com'));
-    });
     describe('background-image', () => {
         it('none', () => deepStrictEqual(backgroundImageParse('none'), []));
 

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

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

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

@@ -1,7 +1,10 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 export enum BORDER_STYLE {
     NONE = 0,
-    SOLID = 1
+    SOLID = 1,
+    DASHED = 2,
+    DOTTED = 3,
+    DOUBLE = 4
 }
 
 const borderStyleForSide = (side: string): IPropertyIdentValueDescriptor<BORDER_STYLE> => ({
@@ -13,6 +16,12 @@ const borderStyleForSide = (side: string): IPropertyIdentValueDescriptor<BORDER_
         switch (style) {
             case 'none':
                 return BORDER_STYLE.NONE;
+            case 'dashed':
+                return BORDER_STYLE.DASHED;
+            case 'dotted':
+                return BORDER_STYLE.DOTTED;
+            case 'double':
+                return BORDER_STYLE.DOUBLE;
         }
         return BORDER_STYLE.SOLID;
     }

src/css/property-descriptors/display.ts

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

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

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

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

@@ -8,6 +8,9 @@ import {deg} from '../angle';
 const parse = (value: string) => image.parse(Parser.parseValue(value));
 const colorParse = (value: string) => color.parse(Parser.parseValue(value));
 
+jest.mock('../../../core/cache-storage');
+jest.mock('../../../core/features');
+
 describe('types', () => {
     describe('<image>', () => {
         describe('parsing', () => {

src/css/types/functions/counter.ts

@@ -30,25 +30,29 @@ export class CounterState {
     parse(style: CSSParsedCounterDeclaration): string[] {
         const counterIncrement = style.counterIncrement;
         const counterReset = style.counterReset;
+        let canReset = true;
 
         if (counterIncrement !== null) {
             counterIncrement.forEach(entry => {
                 const counter = this.counters[entry.counter];
-                if (counter) {
+                if (counter && entry.increment !== 0) {
+                    canReset = false;
                     counter[Math.max(0, counter.length - 1)] += entry.increment;
                 }
             });
         }
 
         const counterNames: string[] = [];
-        counterReset.forEach(entry => {
+        if (canReset) {
-            let counter = this.counters[entry.counter];
+            counterReset.forEach(entry => {
-            counterNames.push(entry.counter);
+                let counter = this.counters[entry.counter];
-            if (!counter) {
+                counterNames.push(entry.counter);
-                counter = this.counters[entry.counter] = [];
+                if (!counter) {
-            }
+                    counter = this.counters[entry.counter] = [];
-            counter.push(entry.reset);
+                }
-        });
+                counter.push(entry.reset);
+            });
+        }
 
         return counterNames;
     }

src/dom/__mocks__/document-cloner.ts

@@ -0,0 +1,16 @@
+export class DocumentCloner {
+    clonedReferenceElement?: HTMLElement;
+
+    constructor() {
+        // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
+        this.clonedReferenceElement = {} as HTMLElement;
+    }
+
+    toIFrame() {
+        return Promise.resolve({});
+    }
+
+    static destroy() {
+        return true;
+    }
+}

src/dom/document-cloner.ts

@@ -5,9 +5,11 @@ import {
     isElementNode,
     isHTMLElementNode,
     isIFrameElement,
+    isImageElement,
     isScriptElement,
     isSelectElement,
     isStyleElement,
+    isSVGElementNode,
     isTextareaElement,
     isTextNode
 } from './node-parser';
@@ -71,7 +73,7 @@ export class DocumentCloner {
          if window url is about:blank, we can assign the url to current by writing onto the document
          */
 
-        const iframeLoad = iframeLoader(iframe).then(() => {
+        const iframeLoad = iframeLoader(iframe).then(async () => {
             this.scrolledElements.forEach(restoreNodeScroll);
             if (cloneWindow) {
                 cloneWindow.scrollTo(windowSize.left, windowSize.top);
@@ -91,6 +93,10 @@ export class DocumentCloner {
                 return Promise.reject(`Error finding the ${this.referenceElement.nodeName} in the cloned document`);
             }
 
+            if (documentClone.fonts && documentClone.fonts.ready) {
+                await documentClone.fonts.ready;
+            }
+
             if (typeof onclone === 'function') {
                 return Promise.resolve()
                     .then(() => onclone(documentClone))
@@ -110,7 +116,7 @@ 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);
         }
@@ -123,7 +129,14 @@ export class DocumentCloner {
             return this.createStyleClone(node);
         }
 
-        return node.cloneNode(false) as HTMLElement;
+        const clone = node.cloneNode(false) as T;
+        // @ts-ignore
+        if (isImageElement(clone) && clone.loading === 'lazy') {
+            // @ts-ignore
+            clone.loading = 'eager';
+        }
+
+        return clone;
     }
 
     createStyleClone(node: HTMLStyleElement): HTMLStyleElement {
@@ -252,14 +265,14 @@ export class DocumentCloner {
 
         const window = node.ownerDocument.defaultView;
 
-        if (isHTMLElementNode(node) && window) {
+        if (window && isElementNode(node) && (isHTMLElementNode(node) || isSVGElementNode(node))) {
             const clone = this.createElementClone(node);
 
             const style = window.getComputedStyle(node);
             const styleBefore = window.getComputedStyle(node, ':before');
             const styleAfter = window.getComputedStyle(node, ':after');
 
-            if (this.referenceElement === node) {
+            if (this.referenceElement === node && isHTMLElementNode(clone)) {
                 this.clonedReferenceElement = clone;
             }
             if (isBodyElement(clone)) {
@@ -293,7 +306,7 @@ 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);
             }
 
@@ -398,18 +411,34 @@ export class DocumentCloner {
                         );
                         break;
                     default:
-                    //    console.log('ident', token, declaration);
+                        // safari doesn't parse string tokens correctly because of lack of quotes
+                        anonymousReplacedElement.appendChild(document.createTextNode(token.value));
                 }
             }
         });
 
         anonymousReplacedElement.className = `${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE} ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
-        clone.className +=
+        const newClassName =
             pseudoElt === PseudoElementType.BEFORE
                 ? ` ${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}`
                 : ` ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
+
+        if (isSVGElementNode(clone)) {
+            clone.className.baseValue += newClassName;
+        } else {
+            clone.className += newClassName;
+        }
+
         return anonymousReplacedElement;
     }
+
+    static destroy(container: HTMLIFrameElement): boolean {
+        if (container.parentNode) {
+            container.parentNode.removeChild(container);
+            return true;
+        }
+        return false;
+    }
 }
 
 enum PseudoElementType {
@@ -457,7 +486,7 @@ const iframeLoader = (iframe: HTMLIFrameElement): Promise<HTMLIFrameElement> =>
     });
 };
 
-export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement): HTMLElement => {
+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);

src/dom/node-parser.ts

@@ -102,8 +102,9 @@ const createsStackingContext = (styles: CSSParsedDeclaration): boolean => styles
 export const isTextNode = (node: Node): node is Text => node.nodeType === Node.TEXT_NODE;
 export const isElementNode = (node: Node): node is Element => node.nodeType === Node.ELEMENT_NODE;
 export const isHTMLElementNode = (node: Node): node is HTMLElement =>
-    typeof (node as HTMLElement).style !== 'undefined';
+    isElementNode(node) && typeof (node as HTMLElement).style !== 'undefined' && !isSVGElementNode(node);
-
+export const isSVGElementNode = (element: Element): element is SVGElement =>
+    typeof (element as SVGElement).className === 'object';
 export const isLIElement = (node: Element): node is HTMLLIElement => node.tagName === 'LI';
 export const isOLElement = (node: Element): node is HTMLOListElement => node.tagName === 'OL';
 export const isInputElement = (node: Element): node is HTMLInputElement => node.tagName === 'INPUT';

src/global.d.ts

@@ -1,9 +1,13 @@
 interface CSSStyleDeclaration {
-    textDecorationColor: string | null;
+    textDecorationColor: string;
-    textDecorationLine: string | null;
+    textDecorationLine: string;
-    overflowWrap: string | null;
+    overflowWrap: string;
 }
 
 interface DocumentType extends Node, ChildNode {
     readonly internalSubset: string | null;
 }
+
+interface Document {
+    fonts: any;
+}

src/index.ts

@@ -11,7 +11,7 @@ import {ForeignObjectRenderer} from './render/canvas/foreignobject-renderer';
 export type Options = CloneOptions &
     RenderOptions &
     ResourceOptions & {
-        backgroundColor: string;
+        backgroundColor: string | null;
         foreignObjectRendering: boolean;
         logging: boolean;
         removeContainer?: boolean;
@@ -25,7 +25,9 @@ const html2canvas = (element: HTMLElement, options: Partial<Options> = {}): Prom
 
 export default html2canvas;
 
-CacheStorage.setContext(window);
+if (typeof window !== 'undefined') {
+    CacheStorage.setContext(window);
+}
 
 const renderElement = async (element: HTMLElement, opts: Partial<Options>): Promise<HTMLCanvasElement> => {
     const ownerDocument = element.ownerDocument;
@@ -76,7 +78,7 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
 
     const windowBounds = new Bounds(options.scrollX, options.scrollY, options.windowWidth, options.windowHeight);
 
-    Logger.create(instanceName);
+    Logger.create({id: instanceName, enabled: options.logging});
     Logger.getInstance(instanceName).debug(`Starting document clone`);
     const documentCloner = new DocumentCloner(element, {
         id: instanceName,
@@ -101,7 +103,8 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
         : COLORS.TRANSPARENT;
 
     const bgColor = opts.backgroundColor;
-    const defaultBackgroundColor = typeof bgColor === 'string' ? parseColor(bgColor) : bgColor === null ? COLORS.TRANSPARENT : 0xffffffff;
+    const defaultBackgroundColor =
+        typeof bgColor === 'string' ? parseColor(bgColor) : bgColor === null ? COLORS.TRANSPARENT : 0xffffffff;
 
     const backgroundColor =
         element === ownerDocument.documentElement
@@ -115,6 +118,7 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
     const renderOptions = {
         id: instanceName,
         cache: options.cache,
+        canvas: options.canvas,
         backgroundColor,
         scale: options.scale,
         x: options.x,
@@ -152,7 +156,7 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
     }
 
     if (options.removeContainer === true) {
-        if (!cleanContainer(container)) {
+        if (!DocumentCloner.destroy(container)) {
             Logger.getInstance(instanceName).error(`Cannot detach cloned iframe as it is not in the DOM anymore`);
         }
     }
@@ -162,11 +166,3 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
     CacheStorage.destroy(instanceName);
     return canvas;
 };
-
-const cleanContainer = (container: HTMLIFrameElement): boolean => {
-    if (container.parentNode) {
-        container.parentNode.removeChild(container);
-        return true;
-    }
-    return false;
-};

src/render/border.ts

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

src/render/bound-curves.ts

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

src/render/canvas/canvas-renderer.ts

@@ -8,10 +8,15 @@ import {TextContainer} from '../../dom/text-container';
 import {Path, transformPath} from '../path';
 import {BACKGROUND_CLIP} from '../../css/property-descriptors/background-clip';
 import {BoundCurves, calculateBorderBoxPath, calculateContentBoxPath, calculatePaddingBoxPath} from '../bound-curves';
-import {isBezierCurve} from '../bezier-curve';
+import {BezierCurve, isBezierCurve} from '../bezier-curve';
 import {Vector} from '../vector';
 import {CSSImageType, CSSURLImage, isLinearGradient, isRadialGradient} from '../../css/types/image';
-import {parsePathForBorder} from '../border';
+import {
+    parsePathForBorder,
+    parsePathForBorderDoubleInner,
+    parsePathForBorderDoubleOuter,
+    parsePathForBorderStroke
+} from '../border';
 import {Cache} from '../../core/cache-storage';
 import {calculateBackgroundRendering, getBackgroundValueForIndex} from '../background';
 import {isDimensionToken} from '../../css/syntax/parser';
@@ -22,7 +27,7 @@ import {contentBox} from '../box-sizing';
 import {CanvasElementContainer} from '../../dom/replaced-elements/canvas-element-container';
 import {SVGElementContainer} from '../../dom/replaced-elements/svg-element-container';
 import {ReplacedElementContainer} from '../../dom/replaced-elements/index';
-import {EffectTarget, IElementEffect, isClipEffect, isTransformEffect} from '../effects';
+import {EffectTarget, IElementEffect, isClipEffect, isOpacityEffect, isTransformEffect} from '../effects';
 import {contains} from '../../core/bitwise';
 import {calculateGradientDirection, calculateRadius, processColorStops} from '../../css/types/functions/gradient';
 import {FIFTY_PERCENT, getAbsoluteValue} from '../../css/types/length-percentage';
@@ -71,10 +76,12 @@ export class CanvasRenderer {
         this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
         this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
         this.options = options;
-        this.canvas.width = Math.floor(options.width * options.scale);
+        if (!options.canvas) {
-        this.canvas.height = Math.floor(options.height * options.scale);
+            this.canvas.width = Math.floor(options.width * options.scale);
-        this.canvas.style.width = `${options.width}px`;
+            this.canvas.height = Math.floor(options.height * options.scale);
-        this.canvas.style.height = `${options.height}px`;
+            this.canvas.style.width = `${options.width}px`;
+            this.canvas.style.height = `${options.height}px`;
+        }
         this.fontMetrics = new FontMetrics(document);
         this.ctx.scale(this.options.scale, this.options.scale);
         this.ctx.translate(-options.x + options.scrollX, -options.y + options.scrollY);
@@ -97,6 +104,10 @@ export class CanvasRenderer {
 
     applyEffect(effect: IElementEffect) {
         this.ctx.save();
+        if (isOpacityEffect(effect)) {
+            this.ctx.globalAlpha = effect.opacity;
+        }
+
         if (isTransformEffect(effect)) {
             this.ctx.translate(effect.offsetX, effect.offsetY);
             this.ctx.transform(
@@ -126,7 +137,6 @@ export class CanvasRenderer {
     async renderStack(stack: StackingContext) {
         const styles = stack.element.container.styles;
         if (styles.isVisible()) {
-            this.ctx.globalAlpha = styles.opacity;
             await this.renderStackContent(stack);
         }
     }
@@ -578,10 +588,10 @@ export class CanvasRenderer {
 
                 ctx.fillStyle = gradient;
                 ctx.fillRect(0, 0, width, height);
-                if ((width > 0) && (height > 0)) {
+                if (width > 0 && height > 0) {
-					const pattern = this.ctx.createPattern(canvas, 'repeat') as CanvasPattern;
+                    const pattern = this.ctx.createPattern(canvas, 'repeat') as CanvasPattern;
-					this.renderRepeat(path, pattern, x, y);
+                    this.renderRepeat(path, pattern, x, y);
-				}
+                }
             } else if (isRadialGradient(backgroundImage)) {
                 const [path, left, top, width, height] = calculateBackgroundRendering(container, index, [
                     null,
@@ -625,22 +635,37 @@ export class CanvasRenderer {
         }
     }
 
-    async renderBorder(color: Color, side: number, curvePoints: BoundCurves) {
+    async renderSolidBorder(color: Color, side: number, curvePoints: BoundCurves) {
         this.path(parsePathForBorder(curvePoints, side));
         this.ctx.fillStyle = asString(color);
         this.ctx.fill();
     }
 
+    async renderDoubleBorder(color: Color, width: number, side: number, curvePoints: BoundCurves) {
+        if (width < 3) {
+            await this.renderSolidBorder(color, side, curvePoints);
+            return;
+        }
+
+        const outerPaths = parsePathForBorderDoubleOuter(curvePoints, side);
+        this.path(outerPaths);
+        this.ctx.fillStyle = asString(color);
+        this.ctx.fill();
+        const innerPaths = parsePathForBorderDoubleInner(curvePoints, side);
+        this.path(innerPaths);
+        this.ctx.fill();
+    }
+
     async renderNodeBackgroundAndBorders(paint: ElementPaint) {
         this.applyEffects(paint.effects, EffectTarget.BACKGROUND_BORDERS);
         const styles = paint.container.styles;
         const hasBackground = !isTransparent(styles.backgroundColor) || styles.backgroundImage.length;
 
         const borders = [
-            {style: styles.borderTopStyle, color: styles.borderTopColor},
+            {style: styles.borderTopStyle, color: styles.borderTopColor, width: styles.borderTopWidth},
-            {style: styles.borderRightStyle, color: styles.borderRightColor},
+            {style: styles.borderRightStyle, color: styles.borderRightColor, width: styles.borderRightWidth},
-            {style: styles.borderBottomStyle, color: styles.borderBottomColor},
+            {style: styles.borderBottomStyle, color: styles.borderBottomColor, width: styles.borderBottomWidth},
-            {style: styles.borderLeftStyle, color: styles.borderLeftColor}
+            {style: styles.borderLeftStyle, color: styles.borderLeftColor, width: styles.borderLeftWidth}
         ];
 
         const backgroundPaintingArea = calculateBackgroundCurvedPaintingArea(
@@ -700,13 +725,143 @@ export class CanvasRenderer {
 
         let side = 0;
         for (const border of borders) {
-            if (border.style !== BORDER_STYLE.NONE && !isTransparent(border.color)) {
+            if (border.style !== BORDER_STYLE.NONE && !isTransparent(border.color) && border.width > 0) {
-                await this.renderBorder(border.color, side, paint.curves);
+                if (border.style === BORDER_STYLE.DASHED) {
+                    await this.renderDashedDottedBorder(
+                        border.color,
+                        border.width,
+                        side,
+                        paint.curves,
+                        BORDER_STYLE.DASHED
+                    );
+                } else if (border.style === BORDER_STYLE.DOTTED) {
+                    await this.renderDashedDottedBorder(
+                        border.color,
+                        border.width,
+                        side,
+                        paint.curves,
+                        BORDER_STYLE.DOTTED
+                    );
+                } else if (border.style === BORDER_STYLE.DOUBLE) {
+                    await this.renderDoubleBorder(border.color, border.width, side, paint.curves);
+                } else {
+                    await this.renderSolidBorder(border.color, side, paint.curves);
+                }
             }
             side++;
         }
     }
 
+    async renderDashedDottedBorder(
+        color: Color,
+        width: number,
+        side: number,
+        curvePoints: BoundCurves,
+        style: BORDER_STYLE
+    ) {
+        this.ctx.save();
+
+        const strokePaths = parsePathForBorderStroke(curvePoints, side);
+        const boxPaths = parsePathForBorder(curvePoints, side);
+
+        if (style === BORDER_STYLE.DASHED) {
+            this.path(boxPaths);
+            this.ctx.clip();
+        }
+
+        let startX, startY, endX, endY;
+        if (isBezierCurve(boxPaths[0])) {
+            startX = (boxPaths[0] as BezierCurve).start.x;
+            startY = (boxPaths[0] as BezierCurve).start.y;
+        } else {
+            startX = (boxPaths[0] as Vector).x;
+            startY = (boxPaths[0] as Vector).y;
+        }
+        if (isBezierCurve(boxPaths[1])) {
+            endX = (boxPaths[1] as BezierCurve).end.x;
+            endY = (boxPaths[1] as BezierCurve).end.y;
+        } else {
+            endX = (boxPaths[1] as Vector).x;
+            endY = (boxPaths[1] as Vector).y;
+        }
+
+        let length;
+        if (side === 0 || side === 2) {
+            length = Math.abs(startX - endX);
+        } else {
+            length = Math.abs(startY - endY);
+        }
+
+        this.ctx.beginPath();
+        if (style === BORDER_STYLE.DOTTED) {
+            this.formatPath(strokePaths);
+        } else {
+            this.formatPath(boxPaths.slice(0, 2));
+        }
+
+        let dashLength = width < 3 ? width * 3 : width * 2;
+        let spaceLength = width < 3 ? width * 2 : width;
+        if (style === BORDER_STYLE.DOTTED) {
+            dashLength = width;
+            spaceLength = width;
+        }
+
+        let useLineDash = true;
+        if (length <= dashLength * 2) {
+            useLineDash = false;
+        } else if (length <= dashLength * 2 + spaceLength) {
+            const multiplier = length / (2 * dashLength + spaceLength);
+            dashLength *= multiplier;
+            spaceLength *= multiplier;
+        } else {
+            const numberOfDashes = Math.floor((length + spaceLength) / (dashLength + spaceLength));
+            const minSpace = (length - numberOfDashes * dashLength) / (numberOfDashes - 1);
+            const maxSpace = (length - (numberOfDashes + 1) * dashLength) / numberOfDashes;
+            spaceLength =
+                maxSpace <= 0 || Math.abs(spaceLength - minSpace) < Math.abs(spaceLength - maxSpace)
+                    ? minSpace
+                    : maxSpace;
+        }
+
+        if (useLineDash) {
+            if (style === BORDER_STYLE.DOTTED) {
+                this.ctx.setLineDash([0, dashLength + spaceLength]);
+            } else {
+                this.ctx.setLineDash([dashLength, spaceLength]);
+            }
+        }
+
+        if (style === BORDER_STYLE.DOTTED) {
+            this.ctx.lineCap = 'round';
+            this.ctx.lineWidth = width;
+        } else {
+            this.ctx.lineWidth = width * 2 + 1.1;
+        }
+        this.ctx.strokeStyle = asString(color);
+        this.ctx.stroke();
+        this.ctx.setLineDash([]);
+
+        // dashed round edge gap
+        if (style === BORDER_STYLE.DASHED) {
+            if (isBezierCurve(boxPaths[0])) {
+                const path1 = boxPaths[3] as BezierCurve;
+                const path2 = boxPaths[0] as BezierCurve;
+                this.ctx.beginPath();
+                this.formatPath([new Vector(path1.end.x, path1.end.y), new Vector(path2.start.x, path2.start.y)]);
+                this.ctx.stroke();
+            }
+            if (isBezierCurve(boxPaths[1])) {
+                const path1 = boxPaths[1] as BezierCurve;
+                const path2 = boxPaths[2] as BezierCurve;
+                this.ctx.beginPath();
+                this.formatPath([new Vector(path1.end.x, path1.end.y), new Vector(path2.start.x, path2.start.y)]);
+                this.ctx.stroke();
+            }
+        }
+
+        this.ctx.restore();
+    }
+
     async render(element: ElementContainer): Promise<HTMLCanvasElement> {
         if (this.options.backgroundColor) {
             this.ctx.fillStyle = asString(this.options.backgroundColor);

src/render/effects.ts

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

src/render/stacking-context.ts

@@ -1,7 +1,7 @@
 import {ElementContainer, FLAGS} from '../dom/element-container';
 import {contains} from '../core/bitwise';
 import {BoundCurves, calculateBorderBoxPath, calculatePaddingBoxPath} from './bound-curves';
-import {ClipEffect, EffectTarget, IElementEffect, TransformEffect} from './effects';
+import {ClipEffect, EffectTarget, IElementEffect, OpacityEffect, TransformEffect} from './effects';
 import {OVERFLOW} from '../css/property-descriptors/overflow';
 import {equalPath} from './path';
 import {DISPLAY} from '../css/property-descriptors/display';
@@ -41,6 +41,10 @@ export class ElementPaint {
         this.container = element;
         this.effects = parentStack.slice(0);
         this.curves = new BoundCurves(element);
+        if (element.styles.opacity < 1) {
+            this.effects.push(new OpacityEffect(element.styles.opacity));
+        }
+
         if (element.styles.transform !== null) {
             const offsetX = element.bounds.left + element.styles.transformOrigin[0].number;
             const offsetY = element.bounds.top + element.styles.transformOrigin[1].number;
@@ -115,7 +119,7 @@ const parseStackTree = (
                 } else if (order > 0) {
                     let index = 0;
                     parentStack.positiveZIndex.some((current, i) => {
-                        if (order > current.element.container.styles.zIndex.order) {
+                        if (order >= current.element.container.styles.zIndex.order) {
                             index = i + 1;
                             return false;
                         } else if (index > 0) {

tests/karma.ts

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

tests/reftests/border/radius.html

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

tests/reftests/images/images.html

@@ -7,6 +7,7 @@
   </head>
   <body>
     <img src="../../assets/image.jpg" />
+    <img src="../../assets/image.jpg" loading="lazy" />
     <img src="../../assets/image.jpg" style="width:50px;height:400px;" />
     <img src="../../assets/image.jpg" style="width:500px;"  />
     <img src="../../assets/image.jpg" style="width:100px;border-radius:50px;"  />

tests/reftests/images/svg/native_only.html

@@ -11,13 +11,22 @@
         body {
             font-family: Arial;
         }
+        svg:before {
+            content: " ";
+        }
     </style>
+    <style>
+        .html { font: italic 13px sans-serif; }
+        .two { font: bold 14px sans-serif; }
+        .canvas { font: italic 15px serif; fill: red; }
+    </style>
+
 </head>
 <body>
 <div>
     <img src="../../../assets/image.svg" />
     <img width="200" height="200" src='data:image/svg+xml,<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="306" height="296"><defs id="defs4" /><g transform="translate(-162.46995,-477.2863)" id="layer1"><path d="m 314.15745,481.69558 c -59.20089,0.53774 -114.80979,36.72219 -137.3125,95.34375 -29.39129,76.56693 8.83932,162.45246 85.40625,191.84375 l 34.03125,-88.6875 c -20.0678,-7.71358 -34.3125,-27.15324 -34.3125,-49.9375 0,-29.54723 23.95277,-53.5 53.5,-53.5 29.54723,0 53.5,23.95277 53.5,53.5 0,22.78426 -14.2447,42.22392 -34.3125,49.9375 l 34.03125,88.6875 c 39.29085,-15.08234 70.3239,-46.1154 85.40625,-85.40625 29.39129,-76.56693 -8.83932,-162.48371 -85.40625,-191.875 -17.94537,-6.88859 -36.40853,-10.07087 -54.53125,-9.90625 z" id="path2830" style="fill:#40aa54;fill-opacity:1;stroke:#20552a;stroke-width:7.99999952;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></g></svg>' />
-    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="306" height="296" id="svg2">
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="306" height="296" id="svg2" class="test">
         <defs id="defs4"/>
         <g transform="translate(-162.46995,-477.2863)" id="layer1">
             <path d="m 314.15745,481.69558 c -59.20089,0.53774 -114.80979,36.72219 -137.3125,95.34375 -29.39129,76.56693 8.83932,162.45246 85.40625,191.84375 l 34.03125,-88.6875 c -20.0678,-7.71358 -34.3125,-27.15324 -34.3125,-49.9375 0,-29.54723 23.95277,-53.5 53.5,-53.5 29.54723,0 53.5,23.95277 53.5,53.5 0,22.78426 -14.2447,42.22392 -34.3125,49.9375 l 34.03125,88.6875 c 39.29085,-15.08234 70.3239,-46.1154 85.40625,-85.40625 29.39129,-76.56693 -8.83932,-162.48371 -85.40625,-191.875 -17.94537,-6.88859 -36.40853,-10.07087 -54.53125,-9.90625 z"
@@ -25,6 +34,11 @@
                   style="fill:#40aa54;fill-opacity:1;stroke:#20552a;stroke-width:7.99999952;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
         </g>
     </svg>
+    <svg width="240" height="160" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
+        <text x="40" y="20" class="html">html</text>
+        <text x="55" y="25" class="two">2</text>
+        <text x="65" y="35" class="canvas">canvas</text>
+    </svg>
     <img width="200" height="200" src="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjMwNiIgaGVpZ2h0PSIyOTYiPjxkZWZzIGlkPSJkZWZzNCIgLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYyLjQ2OTk1LC00NzcuMjg2MykiIGlkPSJsYXllcjEiPjxwYXRoIGQ9Im0gMzE0LjE1NzQ1LDQ4MS42OTU1OCBjIC01OS4yMDA4OSwwLjUzNzc0IC0xMTQuODA5NzksMzYuNzIyMTkgLTEzNy4zMTI1LDk1LjM0Mzc1IC0yOS4zOTEyOSw3Ni41NjY5MyA4LjgzOTMyLDE2Mi40NTI0NiA4NS40MDYyNSwxOTEuODQzNzUgbCAzNC4wMzEyNSwtODguNjg3NSBjIC0yMC4wNjc4LC03LjcxMzU4IC0zNC4zMTI1LC0yNy4xNTMyNCAtMzQuMzEyNSwtNDkuOTM3NSAwLC0yOS41NDcyMyAyMy45NTI3NywtNTMuNSA1My41LC01My41IDI5LjU0NzIzLDAgNTMuNSwyMy45NTI3NyA1My41LDUzLjUgMCwyMi43ODQyNiAtMTQuMjQ0Nyw0Mi4yMjM5MiAtMzQuMzEyNSw0OS45Mzc1IGwgMzQuMDMxMjUsODguNjg3NSBjIDM5LjI5MDg1LC0xNS4wODIzNCA3MC4zMjM5LC00Ni4xMTU0IDg1LjQwNjI1LC04NS40MDYyNSAyOS4zOTEyOSwtNzYuNTY2OTMgLTguODM5MzIsLTE2Mi40ODM3MSAtODUuNDA2MjUsLTE5MS44NzUgLTE3Ljk0NTM3LC02Ljg4ODU5IC0zNi40MDg1MywtMTAuMDcwODcgLTU0LjUzMTI1LC05LjkwNjI1IHoiIGlkPSJwYXRoMjgzMCIgc3R5bGU9ImZpbGw6IzQwYWE1NDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzIwNTUyYTtzdHJva2Utd2lkdGg6Ny45OTk5OTk1MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1vcGFjaXR5OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAvPjwvZz48L3N2Zz4=" /></div>
 </body>
 </html>

tests/reftests/overflow/overflow.html

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

tests/reftests/text/fontawesome.html

@@ -3,7 +3,8 @@
 <head lang="en">
     <meta charset="UTF-8">
     <title>fontawesome icons</title>
-    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet">
+    <link href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css" rel="stylesheet">
     <script type="text/javascript" src="../../test.js"></script>
     <style>
         body {

tests/reftests/zindex/z-index20.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+    <head lang="en">
+        <meta charset="UTF-8" />
+        <title>z-index20</title>
+        <style>
+            .container {
+                width: 375px;
+                height: 603px;
+                background-color: #999;
+                position: relative;
+                margin-bottom: 30px;
+            }
+            .child1 {
+                height: 500px;
+                width: 200px;
+                background-color: red;
+                z-index: 20;
+                position: absolute;
+                left: 0;
+                top: 0;
+            }
+            .child2 {
+                height: 50px;
+                width: 100px;
+                background-color: blue;
+                z-index: 20;
+                position: absolute;
+                left: 30px;
+                top: 30px;
+            }
+        </style>
+        <script type="text/javascript" src="../../test.js"></script>
+    </head>
+    <body>
+        <div class="container" id="___id___">
+            <div class="child1"></div>
+            <div class="child2"></div>
+        </div>
+    </body>
+</html>

tests/rollup.config.ts

@@ -36,7 +36,7 @@ export default {
         // Allow json resolution
         json(),
         // Compile TypeScript files
-        typescript({useTsconfigDeclarationDir: true}),
+        typescript({useTsconfigDeclarationDir: true, tsconfig: resolve(__dirname, 'tsconfig.json')}),
         // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
         commonjs({
             include: 'node_modules/**',

tests/server.js

@@ -1,24 +0,0 @@
-const express = require('express');
-const cors = require('cors');
-const path = require('path');
-const fs = require('fs');
-const serveIndex = require('serve-index');
-const proxy = require('html2canvas-proxy');
-
-const PORT = 8080;
-const CORS_PORT = 8081;
-
-const app = express();
-app.use('/', serveIndex(path.resolve(__dirname, '../'), {icons: true}));
-app.use('/', express.static(path.resolve(__dirname, '../')));
-app.listen(PORT, () => {
-    console.log(`Server running on port ${PORT}`);
-});
-
-const corsApp = express();
-corsApp.use('/proxy', proxy());
-corsApp.use('/cors', cors(), express.static(path.resolve(__dirname, '../')));
-corsApp.use('/', express.static(path.resolve(__dirname, '.')));
-corsApp.listen(CORS_PORT, () => {
-    console.log(`CORS server running on port ${CORS_PORT}`);
-});

tests/server.ts

@@ -0,0 +1,93 @@
+import * as express from 'express';
+const cors = require('cors');
+const path = require('path');
+const serveIndex = require('serve-index');
+const proxy = require('html2canvas-proxy');
+import yargs from 'yargs';
+import {ScreenshotRequest} from './types';
+const fs = require('fs');
+const bodyParser = require('body-parser');
+const filenamifyUrl = require('filenamify-url');
+const mkdirp = require('mkdirp');
+
+export const app = express();
+app.use('/', serveIndex(path.resolve(__dirname, '../'), {icons: true}));
+app.use('/', express.static(path.resolve(__dirname, '../')));
+
+export const corsApp = express();
+corsApp.use('/proxy', proxy());
+corsApp.use('/cors', cors(), express.static(path.resolve(__dirname, '../')));
+corsApp.use('/', express.static(path.resolve(__dirname, '.')));
+
+export const screenshotApp = express();
+screenshotApp.use(cors());
+screenshotApp.use((req: express.Request, _res: express.Response, next: express.NextFunction) => {
+    // IE9 doesn't set headers for cross-domain ajax requests
+    if (typeof req.headers['content-type'] === 'undefined') {
+        req.headers['content-type'] = 'application/json';
+    }
+    next();
+});
+screenshotApp.use(
+    bodyParser.json({
+        limit: '15mb',
+        type: '*/*'
+    })
+);
+
+const prefix = 'data:image/png;base64,';
+const screenshotFolder = '../tmp/reftests';
+const metadataFolder = '../tmp/reftests/metadata';
+
+mkdirp.sync(path.resolve(__dirname, screenshotFolder));
+mkdirp.sync(path.resolve(__dirname, metadataFolder));
+
+const writeScreenshot = (buffer: Buffer, body: ScreenshotRequest) => {
+    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;
+};
+
+screenshotApp.post('/screenshot', (req: express.Request<{}, void, ScreenshotRequest>, res: express.Response) => {
+    if (!req.body || !req.body.screenshot) {
+        return res.sendStatus(400);
+    }
+
+    const buffer = Buffer.from(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);
+});
+
+screenshotApp.use((error: Error, _req: express.Request, _res: express.Response, next: express.NextFunction) => {
+    console.error(error);
+    next();
+});
+
+const args = yargs(process.argv.slice(2)).number(['port', 'cors']).argv;
+
+if (args.port) {
+    app.listen(args.port, () => {
+        console.log(`Server running on port ${args.port}`);
+    });
+}
+
+if (args.cors) {
+    corsApp.listen(args.cors, () => {
+        console.log(`CORS server running on port ${args.cors}`);
+    });
+}

tests/testrunner.ts

@@ -3,7 +3,10 @@ import {testList, ignoredTests} from '../build/reftests';
 import {default as platform} from 'platform';
 // @ts-ignore
 import Promise from 'es6-promise';
+import {ScreenshotRequest} from './types';
 
+// @ts-ignore
+window.Promise = Promise;
 const testRunnerUrl = location.href;
 const hasHistoryApi = typeof window.history !== 'undefined' && typeof window.history.replaceState !== 'undefined';
 
@@ -21,20 +24,20 @@ const uploadResults = (canvas: HTMLCanvasElement, url: string) => {
         };
         xhr.onerror = reject;
 
+        const request: ScreenshotRequest = {
+            screenshot: canvas.toDataURL(),
+            test: url,
+            platform: {
+                name: platform.name,
+                version: platform.version
+            },
+            devicePixelRatio: window.devicePixelRatio || 1,
+            windowWidth: window.innerWidth,
+            windowHeight: window.innerHeight
+        };
+
         xhr.open('POST', 'http://localhost:8000/screenshot', true);
-        xhr.send(
+        xhr.send(JSON.stringify(request));
-            JSON.stringify({
-                screenshot: canvas.toDataURL(),
-                test: url,
-                platform: {
-                    name: platform.name,
-                    version: platform.version
-                },
-                devicePixelRatio: window.devicePixelRatio || 1,
-                windowWidth: window.innerWidth,
-                windowHeight: window.innerHeight
-            })
-        );
     });
 };
 
@@ -76,40 +79,38 @@ testList
                 }
                 document.body.removeChild(testContainer);
             });
-            it('Should render untainted canvas', () => {
+
+            it('Should render untainted canvas', async () => {
                 const contentWindow = testContainer.contentWindow;
                 if (!contentWindow) {
                     throw new Error('Window not found for iframe');
                 }
 
-                return (
+                const canvas: HTMLCanvasElement = await contentWindow
-                    contentWindow
+                    // @ts-ignore
+                    .html2canvas(contentWindow.forceElement || contentWindow.document.documentElement, {
+                        removeContainer: true,
+                        backgroundColor: '#ffffff',
+                        proxy: 'http://localhost:8081/proxy',
                         // @ts-ignore
-                        .html2canvas(contentWindow.forceElement || contentWindow.document.documentElement, {
+                        ...(contentWindow.h2cOptions || {})
-                            removeContainer: true,
+                    });
-                            backgroundColor: '#ffffff',
-                            proxy: 'http://localhost:8081/proxy',
-                            // @ts-ignore
-                            ...(contentWindow.h2cOptions || {})
-                        })
-                        .then((canvas: HTMLCanvasElement) => {
-                            try {
-                                (canvas.getContext('2d') as CanvasRenderingContext2D).getImageData(
-                                    0,
-                                    0,
-                                    canvas.width,
-                                    canvas.height
-                                );
-                            } catch (e) {
-                                return Promise.reject('Canvas is tainted');
-                            }
 
-                            // @ts-ignore
+                try {
-                            if (window.__karma__) {
+                    (canvas.getContext('2d') as CanvasRenderingContext2D).getImageData(
-                                return uploadResults(canvas, url);
+                        0,
-                            }
+                        0,
-                        })
+                        canvas.width,
-                );
+                        canvas.height
+                    );
+                } catch (e) {
+                    throw new Error('Canvas is tainted');
+                }
+
+                // @ts-ignore
+                if (window.__karma__) {
+                    return uploadResults(canvas, url);
+                }
             });
         });
     });

tests/tsconfig.json

@@ -0,0 +1,6 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "types": ["node", "mocha"]
+    }
+}

tests/types.ts

@@ -0,0 +1,13 @@
+export interface PlatformDetails {
+    name: string;
+    version: string;
+}
+
+export interface ScreenshotRequest {
+    screenshot: string;
+    test: string;
+    platform: PlatformDetails;
+    devicePixelRatio: number;
+    windowWidth: number;
+    windowHeight: number;
+}

tsconfig.json

@@ -7,7 +7,7 @@
         "strictNullChecks": true,
         "strictPropertyInitialization": true,
         "resolveJsonModule": true,
-        "typeRoots": [ "./types", "./node_modules/@types"],
+        "types": ["node", "jest"],
         "target": "es5",
         "lib": ["es2015", "dom"],
         "sourceMap": true,

www/src/preview.ts

@@ -42,6 +42,10 @@ function onBrowserChange(browserTest: Test) {
         previewImage.src = `/results/${browserTest.screenshot}.png`;
         if (browserTest.devicePixelRatio > 1) {
             previewImage.style.transform = `scale(${1 / browserTest.devicePixelRatio})`;
+            previewImage.style.transformOrigin = 'top left';
+        } else {
+            previewImage.style.transform = '';
+            previewImage.style.transformOrigin = '';
         }
     }
 }