chore(release): 1.1.5

fix: natural sizes for images with srcset (#2622 )
fix: emoji line breaking (fix #1813 ) (#2621 )
2023-08-10 21:13:10 +03:00 · 2021-08-02 10:38:51 +00:00 · 2021-08-02 18:27:03 +08:00 · 2021-08-02 17:49:46 +08:00 · 2021-07-17 17:24:15 +08:00 · 2021-07-15 16:44:42 +00:00
31 changed files with 1265 additions and 301 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -309,3 +309,43 @@ jobs:
          FOLDER: docs
          SINGLE_COMMIT: true
          CLEAN: true
+  diff-reftests:
+    runs-on: ubuntu-latest
+    name: Diff reftest screenshots
+    needs: browser-test
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Npm install
+        run: npm ci
+      - name: Checkout current snapshots
+        run: git checkout origin/gh-pages results
+      - name: Download test results
+        uses: actions/download-artifact@v2
+        with:
+          name: reftest-results
+          path: tmp/reftests
+      - name: Run diff
+        run: npm run reftests-diff
+        continue-on-error: true
+      - name: Upload diff
+        uses: actions/upload-artifact@v2
+        with:
+          name: snapshot-diffs
+          path: tmp/snapshot-diffs
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,6 +2,76 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+## [1.1.5](https://github.com/niklasvh/html2canvas/compare/v1.1.4...v1.1.5) (2021-08-02)
+
+
+### docs
+
+* update README to github discussion Q/A ([5dea36b](https://github.com/niklasvh/html2canvas/commit/5dea36bd6964164e8ba3f8780309e792f5d16255))
+
+### fix
+
+* emoji line breaking (fix #1813) (#2621) ([7d788c6](https://github.com/niklasvh/html2canvas/commit/7d788c6f3d221b87f6b59fcda8517731340b2d1f)), closes [#1813](https://github.com/niklasvh/html2canvas/issues/1813) [#2621](https://github.com/niklasvh/html2canvas/issues/2621) [#1813](https://github.com/niklasvh/html2canvas/issues/1813)
+* natural sizes for images with srcset (#2622) ([96e23d1](https://github.com/niklasvh/html2canvas/commit/96e23d185198b7131cf0cfa31c14c165790464e9)), closes [#2622](https://github.com/niklasvh/html2canvas/issues/2622)
+
+
+
+## [1.1.4](https://github.com/niklasvh/html2canvas/compare/v1.1.3...v1.1.4) (2021-07-15)
+
+
+### feat
+
+* add support for webkit-text-stroke and paint-order (#2591) ([522e5aa](https://github.com/niklasvh/html2canvas/commit/522e5aac5fdad090953d095b5d558053a5e2d43d)), closes [#2591](https://github.com/niklasvh/html2canvas/issues/2591)
+
+### fix
+
+* don't copy 'all' css property (#2586) ([fa60716](https://github.com/niklasvh/html2canvas/commit/fa60716d07ed590ec64543a586a7960cbc8557df)), closes [#2586](https://github.com/niklasvh/html2canvas/issues/2586)
+* svg d path getting truncated on copy (#2589) ([dd6d885](https://github.com/niklasvh/html2canvas/commit/dd6d8856eca820a13a0990c467b9e531433fd4a9)), closes [#2589](https://github.com/niklasvh/html2canvas/issues/2589)
+* text position for form elements and list markers (#2588) ([cd99f11](https://github.com/niklasvh/html2canvas/commit/cd99f11b1b9eb1260a548a63e2a370a0a5ddafa0)), closes [#2588](https://github.com/niklasvh/html2canvas/issues/2588)
+* this.canvas.ownerDocument is undefined (#2590) ([45efe54](https://github.com/niklasvh/html2canvas/commit/45efe54da8145f97b9ee0463e686103280e3c8b1)), closes [#2590](https://github.com/niklasvh/html2canvas/issues/2590)
+* word-break seperators (#2593) ([e9f7f48](https://github.com/niklasvh/html2canvas/commit/e9f7f48d571304be14610a181feedca3c3b42864)), closes [#2593](https://github.com/niklasvh/html2canvas/issues/2593)
+
+### test
+
+* refactor language tests (#2594) ([4c360fc](https://github.com/niklasvh/html2canvas/commit/4c360fc1f059f4dcab71a79f9dc8a5b2e25411ea)), closes [#2594](https://github.com/niklasvh/html2canvas/issues/2594)
+* update box-shadow with radius ([578bb77](https://github.com/niklasvh/html2canvas/commit/578bb771bfeb7e81362e9e355d6cc9ae910e3920))
+
+
+
+## [1.1.3](https://github.com/niklasvh/html2canvas/compare/v1.1.2...v1.1.3) (2021-07-14)
+
+
+### feat
+
+* allow access to reference element in onclone (#2584) ([58b4591](https://github.com/niklasvh/html2canvas/commit/58b45911741c0dbbccd462b2976560bb3999eaef)), closes [#2584](https://github.com/niklasvh/html2canvas/issues/2584)
+* support for custom and slot elements (#2581) ([acb4cd2](https://github.com/niklasvh/html2canvas/commit/acb4cd24b85527908c02a60794768949578678f0)), closes [#2581](https://github.com/niklasvh/html2canvas/issues/2581)
+
+### fix
+
+* iframe load to ensure images are loaded (#2577) ([eeb5a3e](https://github.com/niklasvh/html2canvas/commit/eeb5a3ea1d6c94e0f6dcfd40695eb88ebb3e0041)), closes [#2577](https://github.com/niklasvh/html2canvas/issues/2577)
+* image blob rendering ([1acdc82](https://github.com/niklasvh/html2canvas/commit/1acdc827a4e05933c2f7c9558405c66b7cd82f58))
+* responsive svg images (#2583) ([92fa448](https://github.com/niklasvh/html2canvas/commit/92fa448913192d5e4e82bfe14f6644b669d4e6ef)), closes [#2583](https://github.com/niklasvh/html2canvas/issues/2583)
+
+### test
+
+* add test cases for text-stroke and textarea from (#1540 and #2132) (#2585) ([1d00bfe](https://github.com/niklasvh/html2canvas/commit/1d00bfe175d51e663d0bae88b6dbd10a266a71f1)), closes [#1540](https://github.com/niklasvh/html2canvas/issues/1540) [#2132](https://github.com/niklasvh/html2canvas/issues/2132) [#2585](https://github.com/niklasvh/html2canvas/issues/2585)
+
+
+
+## [1.1.2](https://github.com/niklasvh/html2canvas/compare/v1.1.1...v1.1.2) (2021-07-13)
+
+
+### ci
+
+* implement screenshot diffing (#2571) ([e29af58](https://github.com/niklasvh/html2canvas/commit/e29af586618125bbad10ad6bee3d69fddbc5d22a)), closes [#2571](https://github.com/niklasvh/html2canvas/issues/2571)
+
+### fix
+
+* logger unique names (#2575) ([1715854](https://github.com/niklasvh/html2canvas/commit/171585491dd1bee4f30691328bd22e978f3ac79e)), closes [#2575](https://github.com/niklasvh/html2canvas/issues/2575)
+* text-shadow position with baseline (#2576) ([439e365](https://github.com/niklasvh/html2canvas/commit/439e365ea8c703b528778a268dcfc3bf9ccad6a9)), closes [#2576](https://github.com/niklasvh/html2canvas/issues/2576)
+
+
+
 ## [1.1.1](https://github.com/niklasvh/html2canvas/compare/v1.1.0...v1.1.1) (2021-07-12)


--- a/README.md
+++ b/README.md
@ -1,7 +1,7 @@
 html2canvas
 ===========

-[Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](http://stackoverflow.com/questions/tagged/html2canvas?sort=newest)
+[Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](https://github.com/niklasvh/html2canvas/discussions/categories/q-a)

 [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 
 ![CI](https://github.com/niklasvh/html2canvas/workflows/CI/badge.svg?branch=master)
--- a/docs/features.md
+++ b/docs/features.md
@ -12,9 +12,9 @@ Below is a list of all the supported CSS properties and values.
       - url()
       - linear-gradient()
       - radial-gradient()
-   - background-origin 
+   - background-origin
   - background-position
-   - background-size   
+   - background-size
 - border
   - border-color
   - border-radius
@ -50,6 +50,7 @@ Below is a list of all the supported CSS properties and values.
 - overflow
 - overflow-wrap
 - padding
+ - paint-order
 - position
 - right
 - text-align
@ -58,17 +59,18 @@ Below is a list of all the supported CSS properties and values.
   - text-decoration-line
   - text-decoration-style (**Only supports `solid`**)
 - text-shadow
- - text-transform 
+ - text-transform
 - top
 - transform (**Limited support**)
 - visibility
 - white-space
 - width
+ - webkit-text-stroke
 - word-break
 - word-spacing
 - word-wrap
 - z-index
-    
+
 ## Unsupported CSS properties
 These CSS properties are **NOT** currently supported
 - [background-blend-mode](https://github.com/niklasvh/html2canvas/issues/966)
--- a/package-lock.json
+++ b/package-lock.json
@ -1,14 +1,14 @@
 {
  "name": "html2canvas",
-  "version": "1.1.1",
+  "version": "1.1.5",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
-      "version": "1.0.0",
+      "version": "1.1.4",
      "license": "MIT",
      "dependencies": {
-        "css-line-break": "1.1.1"
+        "css-line-break": "2.0.0"
      },
      "devDependencies": {
        "@babel/cli": "^7.4.3",
@ -23,6 +23,7 @@
        "@types/express": "^4.17.13",
        "@types/glob": "^7.1.1",
        "@types/jest": "^26.0.24",
+        "@types/jest-image-snapshot": "^4.3.1",
        "@types/karma": "^6.3.0",
        "@types/mocha": "^8.2.3",
        "@types/node": "^16.3.1",
@ -49,6 +50,7 @@
        "glob": "7.1.3",
        "html2canvas-proxy": "1.0.1",
        "jest": "^27.0.6",
+        "jest-image-snapshot": "^4.5.1",
        "jquery": "^3.5.1",
        "js-polyfills": "^0.1.42",
        "karma": "^6.3.2",
@ -3758,6 +3760,17 @@
        "pretty-format": "^26.0.0"
      }
    },
+    "node_modules/@types/jest-image-snapshot": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@types/jest-image-snapshot/-/jest-image-snapshot-4.3.1.tgz",
+      "integrity": "sha512-WDdUruGF14C53axe/mNDgQP2YIhtcwXrwmmVP8eOGyfNTVD+FbxWjWR7RTU+lzEy4K6V6+z7nkVDm/auI/r3xQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/jest": "*",
+        "@types/pixelmatch": "*",
+        "ssim.js": "^3.1.1"
+      }
+    },
    "node_modules/@types/jest/node_modules/@jest/types": {
      "version": "26.6.2",
      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
@ -3962,6 +3975,15 @@
      "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
      "dev": true
    },
+    "node_modules/@types/pixelmatch": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@types/pixelmatch/-/pixelmatch-5.2.4.tgz",
+      "integrity": "sha512-HDaSHIAv9kwpMN7zlmwfTv6gax0PiporJOipcrGsVNF3Ba+kryOZc0Pio5pn6NhisgWr7TaajlPEKTbTAypIBQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@types/platform": {
      "version": "1.3.4",
      "resolved": "https://registry.npmjs.org/@types/platform/-/platform-1.3.4.tgz",
@ -8608,9 +8630,9 @@
      }
    },
    "node_modules/css-line-break": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
-      "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.0.0.tgz",
+      "integrity": "sha512-zEKNpyrJHt4R3qAXLTdJkJc7F/4dkNWG+ij2CHF6/o346QJ6GSjD+oaKOUQoibOy0Wvl3F8IYdEEx3yb/+rdJw==",
      "dependencies": {
        "base64-arraybuffer": "^0.2.0"
      }
@ -12886,6 +12908,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/glur": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/glur/-/glur-1.1.2.tgz",
+      "integrity": "sha1-8g6jbbEDv8KSNDkh8fkeg8NGdok=",
+      "dev": true
+    },
    "node_modules/graceful-fs": {
      "version": "4.2.6",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@ -12978,6 +13006,18 @@
        "node": ">= 0.4.0"
      }
    },
+    "node_modules/has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/has-flag": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@ -15313,6 +15353,105 @@
        "node": ">=8.0"
      }
    },
+    "node_modules/jest-image-snapshot": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/jest-image-snapshot/-/jest-image-snapshot-4.5.1.tgz",
+      "integrity": "sha512-0YkgupgkkCx0wIZkxvqs/oNiUT0X0d2WTpUhaAp+Dy6CpqBUZMRTIZo4KR1f+dqmx6WXrLCvecjnHLIsLkI+gQ==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^1.1.3",
+        "get-stdin": "^5.0.1",
+        "glur": "^1.1.2",
+        "lodash": "^4.17.4",
+        "mkdirp": "^0.5.1",
+        "pixelmatch": "^5.1.0",
+        "pngjs": "^3.4.0",
+        "rimraf": "^2.6.2",
+        "ssim.js": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 10.14.2"
+      },
+      "peerDependencies": {
+        "jest": ">=20 <=27"
+      }
+    },
+    "node_modules/jest-image-snapshot/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jest-image-snapshot/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jest-image-snapshot/node_modules/get-stdin": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz",
+      "integrity": "sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jest-image-snapshot/node_modules/pixelmatch": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-5.2.1.tgz",
+      "integrity": "sha512-WjcAdYSnKrrdDdqTcVEY7aB7UhhwjYQKYhHiBXdJef0MOaQeYpUdQ+iVyBLa5YBKS8MPVPPMX7rpOByISLpeEQ==",
+      "dev": true,
+      "dependencies": {
+        "pngjs": "^4.0.1"
+      },
+      "bin": {
+        "pixelmatch": "bin/pixelmatch"
+      }
+    },
+    "node_modules/jest-image-snapshot/node_modules/pixelmatch/node_modules/pngjs": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-4.0.1.tgz",
+      "integrity": "sha512-rf5+2/ioHeQxR6IxuYNYGFytUyG3lma/WW1nsmjeHlWwtb2aByla6dkVc8pmJ9nplzkTA0q2xx7mMWrOTqT4Gg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/jest-image-snapshot/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/jest-image-snapshot/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
    "node_modules/jest-jasmine2": {
      "version": "27.0.6",
      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-27.0.6.tgz",
@ -22207,6 +22346,12 @@
        "tweetnacl": "~0.14.0"
      }
    },
+    "node_modules/ssim.js": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/ssim.js/-/ssim.js-3.5.0.tgz",
+      "integrity": "sha512-Aj6Jl2z6oDmgYFFbQqK7fght19bXdOxY7Tj03nF+03M9gCBAjeIiO8/PlEGMfKDwYpw4q6iBqVq2YuREorGg/g==",
+      "dev": true
+    },
    "node_modules/ssri": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
@ -28773,6 +28918,17 @@
        }
      }
    },
+    "@types/jest-image-snapshot": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@types/jest-image-snapshot/-/jest-image-snapshot-4.3.1.tgz",
+      "integrity": "sha512-WDdUruGF14C53axe/mNDgQP2YIhtcwXrwmmVP8eOGyfNTVD+FbxWjWR7RTU+lzEy4K6V6+z7nkVDm/auI/r3xQ==",
+      "dev": true,
+      "requires": {
+        "@types/jest": "*",
+        "@types/pixelmatch": "*",
+        "ssim.js": "^3.1.1"
+      }
+    },
    "@types/json-schema": {
      "version": "7.0.8",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.8.tgz",
@ -28825,6 +28981,15 @@
      "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
      "dev": true
    },
+    "@types/pixelmatch": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@types/pixelmatch/-/pixelmatch-5.2.4.tgz",
+      "integrity": "sha512-HDaSHIAv9kwpMN7zlmwfTv6gax0PiporJOipcrGsVNF3Ba+kryOZc0Pio5pn6NhisgWr7TaajlPEKTbTAypIBQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
    "@types/platform": {
      "version": "1.3.4",
      "resolved": "https://registry.npmjs.org/@types/platform/-/platform-1.3.4.tgz",
@ -32646,9 +32811,9 @@
      }
    },
    "css-line-break": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
-      "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.0.0.tgz",
+      "integrity": "sha512-zEKNpyrJHt4R3qAXLTdJkJc7F/4dkNWG+ij2CHF6/o346QJ6GSjD+oaKOUQoibOy0Wvl3F8IYdEEx3yb/+rdJw==",
      "requires": {
        "base64-arraybuffer": "^0.2.0"
      }
@ -36075,6 +36240,12 @@
        }
      }
    },
+    "glur": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/glur/-/glur-1.1.2.tgz",
+      "integrity": "sha1-8g6jbbEDv8KSNDkh8fkeg8NGdok=",
+      "dev": true
+    },
    "graceful-fs": {
      "version": "4.2.6",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@ -36145,6 +36316,15 @@
        "function-bind": "^1.1.1"
      }
    },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
    "has-flag": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@ -37990,6 +38170,82 @@
        }
      }
    },
+    "jest-image-snapshot": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/jest-image-snapshot/-/jest-image-snapshot-4.5.1.tgz",
+      "integrity": "sha512-0YkgupgkkCx0wIZkxvqs/oNiUT0X0d2WTpUhaAp+Dy6CpqBUZMRTIZo4KR1f+dqmx6WXrLCvecjnHLIsLkI+gQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.1.3",
+        "get-stdin": "^5.0.1",
+        "glur": "^1.1.2",
+        "lodash": "^4.17.4",
+        "mkdirp": "^0.5.1",
+        "pixelmatch": "^5.1.0",
+        "pngjs": "^3.4.0",
+        "rimraf": "^2.6.2",
+        "ssim.js": "^3.1.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "get-stdin": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz",
+          "integrity": "sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g=",
+          "dev": true
+        },
+        "pixelmatch": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-5.2.1.tgz",
+          "integrity": "sha512-WjcAdYSnKrrdDdqTcVEY7aB7UhhwjYQKYhHiBXdJef0MOaQeYpUdQ+iVyBLa5YBKS8MPVPPMX7rpOByISLpeEQ==",
+          "dev": true,
+          "requires": {
+            "pngjs": "^4.0.1"
+          },
+          "dependencies": {
+            "pngjs": {
+              "version": "4.0.1",
+              "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-4.0.1.tgz",
+              "integrity": "sha512-rf5+2/ioHeQxR6IxuYNYGFytUyG3lma/WW1nsmjeHlWwtb2aByla6dkVc8pmJ9nplzkTA0q2xx7mMWrOTqT4Gg==",
+              "dev": true
+            }
+          }
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
+      }
+    },
    "jest-jasmine2": {
      "version": "27.0.6",
      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-27.0.6.tgz",
@ -43377,6 +43633,12 @@
        "tweetnacl": "~0.14.0"
      }
    },
+    "ssim.js": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/ssim.js/-/ssim.js-3.5.0.tgz",
+      "integrity": "sha512-Aj6Jl2z6oDmgYFFbQqK7fght19bXdOxY7Tj03nF+03M9gCBAjeIiO8/PlEGMfKDwYpw4q6iBqVq2YuREorGg/g==",
+      "dev": true
+    },
    "ssri": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
--- a/package.json
+++ b/package.json
@ -6,7 +6,7 @@
  "module": "dist/html2canvas.esm.js",
  "typings": "dist/types/index.d.ts",
  "browser": "dist/html2canvas.js",
-  "version": "1.1.1",
+  "version": "1.1.5",
  "author": {
    "name": "Niklas von Hertzen",
    "email": "niklasvh@gmail.com",
@ -35,6 +35,7 @@
    "@types/express": "^4.17.13",
    "@types/glob": "^7.1.1",
    "@types/jest": "^26.0.24",
+    "@types/jest-image-snapshot": "^4.3.1",
    "@types/karma": "^6.3.0",
    "@types/mocha": "^8.2.3",
    "@types/node": "^16.3.1",
@ -61,6 +62,7 @@
    "glob": "7.1.3",
    "html2canvas-proxy": "1.0.1",
    "jest": "^27.0.6",
+    "jest-image-snapshot": "^4.5.1",
    "jquery": "^3.5.1",
    "js-polyfills": "^0.1.42",
    "karma": "^6.3.2",
@ -107,6 +109,7 @@
    "lint": "eslint src/**/*.ts --max-warnings 0",
    "test": "npm run lint && npm run unittest && npm run karma",
    "unittest": "jest",
+    "reftests-diff": "mkdirp tmp/snapshots && jest --roots=tests --testMatch=**/reftest-diff.ts",
    "karma": "ts-node tests/karma",
    "watch": "rollup -c rollup.config.ts -w",
    "watch:unittest": "mocha --require ts-node/register --watch-extensions ts -w src/**/__tests__/*.ts",
@ -115,6 +118,6 @@
  "homepage": "https://html2canvas.hertzen.com",
  "license": "MIT",
  "dependencies": {
-    "css-line-break": "1.1.1"
+    "css-line-break": "2.0.0"
  }
 }
--- a/src/core/cache-storage.ts
+++ b/src/core/cache-storage.ts
@ -108,10 +108,18 @@ export class Cache {
        const useProxy =
            !isInlineImage(key) &&
            !isSameOrigin &&
+            !isBlobImage(key) &&
            typeof this._options.proxy === 'string' &&
            FEATURES.SUPPORT_CORS_XHR &&
            !useCORS;
-        if (!isSameOrigin && this._options.allowTaint === false && !isInlineImage(key) && !useProxy && !useCORS) {
+        if (
+            !isSameOrigin &&
+            this._options.allowTaint === false &&
+            !isInlineImage(key) &&
+            !isBlobImage(key) &&
+            !useProxy &&
+            !useCORS
+        ) {
            return;
        }

--- a/src/css/index.ts
+++ b/src/css/index.ts
@ -73,6 +73,9 @@ import {counterIncrement} from './property-descriptors/counter-increment';
 import {counterReset} from './property-descriptors/counter-reset';
 import {quotes} from './property-descriptors/quotes';
 import {boxShadow} from './property-descriptors/box-shadow';
+import {paintOrder} from './property-descriptors/paint-order';
+import {webkitTextStrokeColor} from './property-descriptors/webkit-text-stroke-color';
+import {webkitTextStrokeWidth} from './property-descriptors/webkit-text-stroke-width';

 export class CSSParsedDeclaration {
    backgroundClip: ReturnType<typeof backgroundClip.parse>;
@ -125,6 +128,7 @@ export class CSSParsedDeclaration {
    paddingRight: LengthPercentage;
    paddingBottom: LengthPercentage;
    paddingLeft: LengthPercentage;
+    paintOrder: ReturnType<typeof paintOrder.parse>;
    position: ReturnType<typeof position.parse>;
    textAlign: ReturnType<typeof textAlign.parse>;
    textDecorationColor: Color;
@ -134,6 +138,8 @@ export class CSSParsedDeclaration {
    transform: ReturnType<typeof transform.parse>;
    transformOrigin: ReturnType<typeof transformOrigin.parse>;
    visibility: ReturnType<typeof visibility.parse>;
+    webkitTextStrokeColor: Color;
+    webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>;
    wordBreak: ReturnType<typeof wordBreak.parse>;
    zIndex: ReturnType<typeof zIndex.parse>;

@ -189,6 +195,7 @@ export class CSSParsedDeclaration {
        this.paddingRight = parse(paddingRight, declaration.paddingRight);
        this.paddingBottom = parse(paddingBottom, declaration.paddingBottom);
        this.paddingLeft = parse(paddingLeft, declaration.paddingLeft);
+        this.paintOrder = parse(paintOrder, declaration.paintOrder);
        this.position = parse(position, declaration.position);
        this.textAlign = parse(textAlign, declaration.textAlign);
        this.textDecorationColor = parse(textDecorationColor, declaration.textDecorationColor ?? declaration.color);
@ -201,6 +208,8 @@ export class CSSParsedDeclaration {
        this.transform = parse(transform, declaration.transform);
        this.transformOrigin = parse(transformOrigin, declaration.transformOrigin);
        this.visibility = parse(visibility, declaration.visibility);
+        this.webkitTextStrokeColor = parse(webkitTextStrokeColor, declaration.webkitTextStrokeColor);
+        this.webkitTextStrokeWidth = parse(webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
        this.wordBreak = parse(wordBreak, declaration.wordBreak);
        this.zIndex = parse(zIndex, declaration.zIndex);
    }
--- a/src/css/layout/text.ts
+++ b/src/css/layout/text.ts
@ -70,6 +70,9 @@ const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
    return styles.letterSpacing !== 0 ? toCodePoints(value).map((i) => fromCodePoint(i)) : breakWords(value, styles);
 };

+// https://drafts.csswg.org/css-text/#word-separator
+const wordSeparators = [0x0020, 0x00a0, 0x1361, 0x10100, 0x10101, 0x1039, 0x1091];
+
 const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {
    const breaker = LineBreaker(str, {
        lineBreak: styles.lineBreak,
@ -81,7 +84,24 @@ const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {

    while (!(bk = breaker.next()).done) {
        if (bk.value) {
-            words.push(bk.value.slice());
+            const value = bk.value.slice();
+            const codePoints = toCodePoints(value);
+            let word = '';
+            codePoints.forEach((codePoint) => {
+                if (wordSeparators.indexOf(codePoint) === -1) {
+                    word += fromCodePoint(codePoint);
+                } else {
+                    if (word.length) {
+                        words.push(word);
+                    }
+                    words.push(fromCodePoint(codePoint));
+                    word = '';
+                }
+            });
+
+            if (word.length) {
+                words.push(word);
+            }
        }
    }

--- a/src/css/property-descriptors/tests/paint-order.ts
+++ b/src/css/property-descriptors/tests/paint-order.ts
@ -0,0 +1,86 @@
+import {deepStrictEqual} from 'assert';
+import {Parser} from '../../syntax/parser';
+import {paintOrder, PAINT_ORDER_LAYER} from '../paint-order';
+
+const paintOrderParse = (value: string) => paintOrder.parse(Parser.parseValues(value));
+
+describe('property-descriptors', () => {
+    describe('paint-order', () => {
+        it('none', () =>
+            deepStrictEqual(paintOrderParse('none'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('EMPTY', () =>
+            deepStrictEqual(paintOrderParse(''), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('other values', () =>
+            deepStrictEqual(paintOrderParse('other values'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('normal', () =>
+            deepStrictEqual(paintOrderParse('normal'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('stroke', () =>
+            deepStrictEqual(paintOrderParse('stroke'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('fill', () =>
+            deepStrictEqual(paintOrderParse('fill'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('markers', () =>
+            deepStrictEqual(paintOrderParse('markers'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE
+            ]));
+
+        it('stroke fill', () =>
+            deepStrictEqual(paintOrderParse('stroke fill'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('markers stroke', () =>
+            deepStrictEqual(paintOrderParse('markers stroke'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL
+            ]));
+
+        it('markers stroke fill', () =>
+            deepStrictEqual(paintOrderParse('markers stroke fill'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL
+            ]));
+
+        it('stroke fill markers', () =>
+            deepStrictEqual(paintOrderParse('stroke fill markers'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+    });
+});
--- a/src/css/property-descriptors/paint-order.ts
+++ b/src/css/property-descriptors/paint-order.ts
@ -0,0 +1,41 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, isIdentToken} from '../syntax/parser';
+export enum PAINT_ORDER_LAYER {
+    FILL,
+    STROKE,
+    MARKERS
+}
+
+export type PaintOrder = PAINT_ORDER_LAYER[];
+
+export const paintOrder: IPropertyListDescriptor<PaintOrder> = {
+    name: 'paint-order',
+    initialValue: 'normal',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (tokens: CSSValue[]): PaintOrder => {
+        const DEFAULT_VALUE = [PAINT_ORDER_LAYER.FILL, PAINT_ORDER_LAYER.STROKE, PAINT_ORDER_LAYER.MARKERS];
+        let layers: PaintOrder = [];
+
+        tokens.filter(isIdentToken).forEach((token) => {
+            switch (token.value) {
+                case 'stroke':
+                    layers.push(PAINT_ORDER_LAYER.STROKE);
+                    break;
+                case 'fill':
+                    layers.push(PAINT_ORDER_LAYER.FILL);
+                    break;
+                case 'markers':
+                    layers.push(PAINT_ORDER_LAYER.MARKERS);
+                    break;
+            }
+        });
+        DEFAULT_VALUE.forEach((value) => {
+            if (layers.indexOf(value) === -1) {
+                layers.push(value);
+            }
+        });
+
+        return layers;
+    }
+};
--- a/src/css/property-descriptors/webkit-text-stroke-color.ts
+++ b/src/css/property-descriptors/webkit-text-stroke-color.ts
@ -0,0 +1,8 @@
+import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+export const webkitTextStrokeColor: IPropertyTypeValueDescriptor = {
+    name: `-webkit-text-stroke-color`,
+    initialValue: 'currentcolor',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'color'
+};
--- a/src/css/property-descriptors/webkit-text-stroke-width.ts
+++ b/src/css/property-descriptors/webkit-text-stroke-width.ts
@ -0,0 +1,14 @@
+import {CSSValue, isDimensionToken} from '../syntax/parser';
+import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+export const webkitTextStrokeWidth: IPropertyValueDescriptor<number> = {
+    name: `-webkit-text-stroke-width`,
+    initialValue: '0',
+    type: PropertyDescriptorParsingType.VALUE,
+    prefix: false,
+    parse: (token: CSSValue): number => {
+        if (isDimensionToken(token)) {
+            return token.number;
+        }
+        return 0;
+    }
+};
--- a/src/dom/document-cloner.ts
+++ b/src/dom/document-cloner.ts
@ -24,7 +24,7 @@ import {getQuote} from '../css/property-descriptors/quotes';
 export interface CloneOptions {
    id: string;
    ignoreElements?: (element: Element) => boolean;
-    onclone?: (document: Document) => void;
+    onclone?: (document: Document, element: HTMLElement) => void;
 }

 export type CloneConfigurations = CloneOptions & {
@ -89,7 +89,9 @@ export class DocumentCloner {

            const onclone = this.options.onclone;

-            if (typeof this.clonedReferenceElement === 'undefined') {
+            const referenceElement = this.clonedReferenceElement;
+
+            if (typeof referenceElement === 'undefined') {
                return Promise.reject(`Error finding the ${this.referenceElement.nodeName} in the cloned document`);
            }

@ -97,9 +99,13 @@ export class DocumentCloner {
                await documentClone.fonts.ready;
            }

+            if (/(AppleWebKit)/g.test(navigator.userAgent)) {
+                await imagesReady(documentClone);
+            }
+
            if (typeof onclone === 'function') {
                return Promise.resolve()
-                    .then(() => onclone(documentClone))
+                    .then(() => onclone(documentClone, referenceElement))
                    .then(() => iframe);
            }

@ -120,18 +126,21 @@ export class DocumentCloner {
        if (isCanvasElement(node)) {
            return this.createCanvasClone(node);
        }
-        /*
-        if (isIFrameElement(node)) {
-            return this.createIFrameClone(node);
-        }
-*/
+
        if (isStyleElement(node)) {
            return this.createStyleClone(node);
        }

        const clone = node.cloneNode(false) as T;
-        if (isImageElement(clone) && clone.loading === 'lazy') {
-            clone.loading = 'eager';
+        if (isImageElement(clone)) {
+            if (isImageElement(node) && node.currentSrc && node.currentSrc !== node.src) {
+                clone.src = node.currentSrc;
+                clone.srcset = '';
+            }
+
+            if (clone.loading === 'lazy') {
+                clone.loading = 'eager';
+            }
        }

        return clone;
@ -191,67 +200,7 @@ export class DocumentCloner {

        return clonedCanvas;
    }
-    /*
-    createIFrameClone(iframe: HTMLIFrameElement) {
-        const tempIframe = <HTMLIFrameElement>iframe.cloneNode(false);
-        const iframeKey = generateIframeKey();
-        tempIframe.setAttribute('data-html2canvas-internal-iframe-key', iframeKey);

-        const {width, height} = parseBounds(iframe);
-
-        this.resourceLoader.cache[iframeKey] = getIframeDocumentElement(iframe, this.options)
-            .then(documentElement => {
-                return this.renderer(
-                    documentElement,
-                    {
-                        allowTaint: this.options.allowTaint,
-                        backgroundColor: '#ffffff',
-                        canvas: null,
-                        imageTimeout: this.options.imageTimeout,
-                        logging: this.options.logging,
-                        proxy: this.options.proxy,
-                        removeContainer: this.options.removeContainer,
-                        scale: this.options.scale,
-                        foreignObjectRendering: this.options.foreignObjectRendering,
-                        useCORS: this.options.useCORS,
-                        target: new CanvasRenderer(),
-                        width,
-                        height,
-                        x: 0,
-                        y: 0,
-                        windowWidth: documentElement.ownerDocument.defaultView.innerWidth,
-                        windowHeight: documentElement.ownerDocument.defaultView.innerHeight,
-                        scrollX: documentElement.ownerDocument.defaultView.pageXOffset,
-                        scrollY: documentElement.ownerDocument.defaultView.pageYOffset
-                    },
-                );
-            })
-            .then(
-                (canvas: HTMLCanvasElement) =>
-                    new Promise((resolve, reject) => {
-                        const iframeCanvas = document.createElement('img');
-                        iframeCanvas.onload = () => resolve(canvas);
-                        iframeCanvas.onerror = (event) => {
-                            // Empty iframes may result in empty "data:," URLs, which are invalid from the <img>'s point of view
-                            // and instead of `onload` cause `onerror` and unhandled rejection warnings
-                            // https://github.com/niklasvh/html2canvas/issues/1502
-                            iframeCanvas.src == 'data:,' ? resolve(canvas) : reject(event);
-                        };
-                        iframeCanvas.src = canvas.toDataURL();
-                        if (tempIframe.parentNode && iframe.ownerDocument && iframe.ownerDocument.defaultView) {
-                            tempIframe.parentNode.replaceChild(
-                                copyCSSStyles(
-                                    iframe.ownerDocument.defaultView.getComputedStyle(iframe),
-                                    iframeCanvas
-                                ),
-                                tempIframe
-                            );
-                        }
-                    })
-            );
-        return tempIframe;
-    }
-*/
    cloneNode(node: Node): Node {
        if (isTextNode(node)) {
            return document.createTextNode(node.data);
@ -308,8 +257,6 @@ export class DocumentCloner {
                copyCSSStyles(style, clone);
            }

-            //this.inlineAllImages(clone);
-
            if (node.scrollTop !== 0 || node.scrollLeft !== 0) {
                this.scrolledElements.push([clone, node.scrollLeft, node.scrollTop]);
            }
@ -462,6 +409,25 @@ const createIFrameContainer = (ownerDocument: Document, bounds: Bounds): HTMLIFr
    return cloneIframeContainer;
 };

+const imageReady = (img: HTMLImageElement): Promise<Event | void | string> => {
+    return new Promise((resolve) => {
+        if (img.complete) {
+            resolve();
+            return;
+        }
+        if (!img.src) {
+            resolve();
+            return;
+        }
+        img.onload = resolve;
+        img.onerror = resolve;
+    });
+};
+
+const imagesReady = (document: HTMLDocument): Promise<unknown[]> => {
+    return Promise.all([].slice.call(document.images, 0).map(imageReady));
+};
+
 const iframeLoader = (iframe: HTMLIFrameElement): Promise<HTMLIFrameElement> => {
    return new Promise((resolve, reject) => {
        const cloneWindow = iframe.contentWindow;
@ -472,27 +438,29 @@ const iframeLoader = (iframe: HTMLIFrameElement): Promise<HTMLIFrameElement> =>

        const documentClone = cloneWindow.document;

-        cloneWindow.onload =
-            iframe.onload =
-            documentClone.onreadystatechange =
-                () => {
-                    cloneWindow.onload = iframe.onload = documentClone.onreadystatechange = null;
-                    const interval = setInterval(() => {
-                        if (documentClone.body.childNodes.length > 0 && documentClone.readyState === 'complete') {
-                            clearInterval(interval);
-                            resolve(iframe);
-                        }
-                    }, 50);
-                };
+        cloneWindow.onload = iframe.onload = () => {
+            cloneWindow.onload = iframe.onload = null;
+            const interval = setInterval(() => {
+                if (documentClone.body.childNodes.length > 0 && documentClone.readyState === 'complete') {
+                    clearInterval(interval);
+                    resolve(iframe);
+                }
+            }, 50);
+        };
    });
 };

+const ignoredStyleProperties = [
+    'all', // #2476
+    'd', // #2483
+    'content' // Safari shows pseudoelements if content is set
+];
+
 export const copyCSSStyles = <T extends HTMLElement | SVGElement>(style: CSSStyleDeclaration, target: T): T => {
    // Edge does not provide value for cssText
    for (let i = style.length - 1; i >= 0; i--) {
        const property = style.item(i);
-        // Safari shows pseudoelements if content is set
-        if (property !== 'content') {
+        if (ignoredStyleProperties.indexOf(property) === -1) {
            target.style.setProperty(property, style.getPropertyValue(property));
        }
    }
--- a/src/dom/node-parser.ts
+++ b/src/dom/node-parser.ts
@ -20,21 +20,32 @@ const parseNodeTree = (node: Node, parent: ElementContainer, root: ElementContai
        if (isTextNode(childNode) && childNode.data.trim().length > 0) {
            parent.textNodes.push(new TextContainer(childNode, parent.styles));
        } else if (isElementNode(childNode)) {
-            const container = createContainer(childNode);
-            if (container.styles.isVisible()) {
-                if (createsRealStackingContext(childNode, container, root)) {
-                    container.flags |= FLAGS.CREATES_REAL_STACKING_CONTEXT;
-                } else if (createsStackingContext(container.styles)) {
-                    container.flags |= FLAGS.CREATES_STACKING_CONTEXT;
-                }
+            if (isSlotElement(childNode) && childNode.assignedNodes) {
+                childNode.assignedNodes().forEach((childNode) => parseNodeTree(childNode, parent, root));
+            } else {
+                const container = createContainer(childNode);
+                if (container.styles.isVisible()) {
+                    if (createsRealStackingContext(childNode, container, root)) {
+                        container.flags |= FLAGS.CREATES_REAL_STACKING_CONTEXT;
+                    } else if (createsStackingContext(container.styles)) {
+                        container.flags |= FLAGS.CREATES_STACKING_CONTEXT;
+                    }

-                if (LIST_OWNERS.indexOf(childNode.tagName) !== -1) {
-                    container.flags |= FLAGS.IS_LIST_OWNER;
-                }
+                    if (LIST_OWNERS.indexOf(childNode.tagName) !== -1) {
+                        container.flags |= FLAGS.IS_LIST_OWNER;
+                    }

-                parent.elements.push(container);
-                if (!isTextareaElement(childNode) && !isSVGElement(childNode) && !isSelectElement(childNode)) {
-                    parseNodeTree(childNode, container, root);
+                    parent.elements.push(container);
+                    childNode.slot;
+                    if (childNode.shadowRoot) {
+                        parseNodeTree(childNode.shadowRoot, container, root);
+                    } else if (
+                        !isTextareaElement(childNode) &&
+                        !isSVGElement(childNode) &&
+                        !isSelectElement(childNode)
+                    ) {
+                        parseNodeTree(childNode, container, root);
+                    }
                }
            }
        }
@ -118,3 +129,4 @@ export const isStyleElement = (node: Element): node is HTMLStyleElement => node.
 export const isScriptElement = (node: Element): node is HTMLScriptElement => node.tagName === 'SCRIPT';
 export const isTextareaElement = (node: Element): node is HTMLTextAreaElement => node.tagName === 'TEXTAREA';
 export const isSelectElement = (node: Element): node is HTMLSelectElement => node.tagName === 'SELECT';
+export const isSlotElement = (node: Element): node is HTMLSlotElement => node.tagName === 'SLOT';
--- a/src/dom/replaced-elements/svg-element-container.ts
+++ b/src/dom/replaced-elements/svg-element-container.ts
@ -1,5 +1,6 @@
 import {ElementContainer} from '../element-container';
 import {CacheStorage} from '../../core/cache-storage';
+import {parseBounds} from '../../css/layout/bounds';

 export class SVGElementContainer extends ElementContainer {
    svg: string;
@ -9,6 +10,10 @@ export class SVGElementContainer extends ElementContainer {
    constructor(img: SVGSVGElement) {
        super(img);
        const s = new XMLSerializer();
+        const bounds = parseBounds(img);
+        img.setAttribute('width', `${bounds.width}px`);
+        img.setAttribute('height', `${bounds.height}px`);
+
        this.svg = `data:image/svg+xml,${encodeURIComponent(s.serializeToString(img))}`;
        this.intrinsicWidth = img.width.baseVal.value;
        this.intrinsicHeight = img.height.baseVal.value;
--- a/src/index.ts
+++ b/src/index.ts
@ -29,7 +29,12 @@ if (typeof window !== 'undefined') {
    CacheStorage.setContext(window);
 }

+let instanceCount = 1;
+
 const renderElement = async (element: HTMLElement, opts: Partial<Options>): Promise<HTMLCanvasElement> => {
+    if (!element || typeof element !== 'object') {
+        return Promise.reject('Invalid element provided as first argument');
+    }
    const ownerDocument = element.ownerDocument;

    if (!ownerDocument) {
@ -42,7 +47,7 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
        throw new Error(`Document is not attached to a Window`);
    }

-    const instanceName = (Math.round(Math.random() * 1000) + Date.now()).toString(16);
+    const instanceName = `#${instanceCount++}`;

    const {width, height, left, top} =
        isBodyElement(element) || isHTMLElement(element) ? parseDocumentSize(ownerDocument) : parseBounds(element);
--- a/src/render/canvas/canvas-renderer.ts
+++ b/src/render/canvas/canvas-renderer.ts
@ -43,6 +43,7 @@ import {TextareaElementContainer} from '../../dom/elements/textarea-element-cont
 import {SelectElementContainer} from '../../dom/elements/select-element-container';
 import {IFrameElementContainer} from '../../dom/replaced-elements/iframe-element-container';
 import {TextShadow} from '../../css/property-descriptors/text-shadow';
+import {PAINT_ORDER_LAYER} from '../../css/property-descriptors/paint-order';

 export type RenderConfigurations = RenderOptions & {
    backgroundColor: Color | null;
@ -179,65 +180,88 @@ export class CanvasRenderer {
        const [font, fontFamily, fontSize] = this.createFontStyle(styles);

        this.ctx.font = font;
-        this.ctx.textBaseline = 'alphabetic';

+        this.ctx.textBaseline = 'alphabetic';
        const {baseline, middle} = this.fontMetrics.getMetrics(fontFamily, fontSize);
+        const paintOrder = styles.paintOrder;

        text.textBounds.forEach((text) => {
-            this.ctx.fillStyle = asString(styles.color);
-            this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
-            const textShadows: TextShadow = styles.textShadow;
+            paintOrder.forEach((paintOrderLayer) => {
+                switch (paintOrderLayer) {
+                    case PAINT_ORDER_LAYER.FILL:
+                        this.ctx.fillStyle = asString(styles.color);
+                        this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
+                        const textShadows: TextShadow = styles.textShadow;

-            if (textShadows.length && text.text.trim().length) {
-                textShadows
-                    .slice(0)
-                    .reverse()
-                    .forEach((textShadow) => {
-                        this.ctx.shadowColor = asString(textShadow.color);
-                        this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
-                        this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
-                        this.ctx.shadowBlur = textShadow.blur.number;
+                        if (textShadows.length && text.text.trim().length) {
+                            textShadows
+                                .slice(0)
+                                .reverse()
+                                .forEach((textShadow) => {
+                                    this.ctx.shadowColor = asString(textShadow.color);
+                                    this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
+                                    this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
+                                    this.ctx.shadowBlur = textShadow.blur.number;

-                        this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
-                    });
+                                    this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
+                                });

-                this.ctx.shadowColor = '';
-                this.ctx.shadowOffsetX = 0;
-                this.ctx.shadowOffsetY = 0;
-                this.ctx.shadowBlur = 0;
-            }
+                            this.ctx.shadowColor = '';
+                            this.ctx.shadowOffsetX = 0;
+                            this.ctx.shadowOffsetY = 0;
+                            this.ctx.shadowBlur = 0;
+                        }

-            if (styles.textDecorationLine.length) {
-                this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
-                styles.textDecorationLine.forEach((textDecorationLine) => {
-                    switch (textDecorationLine) {
-                        case TEXT_DECORATION_LINE.UNDERLINE:
-                            // Draws a line at the baseline of the font
-                            // TODO As some browsers display the line as more than 1px if the font-size is big,
-                            // need to take that into account both in position and size
-                            this.ctx.fillRect(
-                                text.bounds.left,
-                                Math.round(text.bounds.top + baseline),
-                                text.bounds.width,
-                                1
-                            );
+                        if (styles.textDecorationLine.length) {
+                            this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
+                            styles.textDecorationLine.forEach((textDecorationLine) => {
+                                switch (textDecorationLine) {
+                                    case TEXT_DECORATION_LINE.UNDERLINE:
+                                        // Draws a line at the baseline of the font
+                                        // TODO As some browsers display the line as more than 1px if the font-size is big,
+                                        // need to take that into account both in position and size
+                                        this.ctx.fillRect(
+                                            text.bounds.left,
+                                            Math.round(text.bounds.top + baseline),
+                                            text.bounds.width,
+                                            1
+                                        );

-                            break;
-                        case TEXT_DECORATION_LINE.OVERLINE:
-                            this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top), text.bounds.width, 1);
-                            break;
-                        case TEXT_DECORATION_LINE.LINE_THROUGH:
-                            // TODO try and find exact position for line-through
-                            this.ctx.fillRect(
-                                text.bounds.left,
-                                Math.ceil(text.bounds.top + middle),
-                                text.bounds.width,
-                                1
-                            );
-                            break;
-                    }
-                });
-            }
+                                        break;
+                                    case TEXT_DECORATION_LINE.OVERLINE:
+                                        this.ctx.fillRect(
+                                            text.bounds.left,
+                                            Math.round(text.bounds.top),
+                                            text.bounds.width,
+                                            1
+                                        );
+                                        break;
+                                    case TEXT_DECORATION_LINE.LINE_THROUGH:
+                                        // TODO try and find exact position for line-through
+                                        this.ctx.fillRect(
+                                            text.bounds.left,
+                                            Math.ceil(text.bounds.top + middle),
+                                            text.bounds.width,
+                                            1
+                                        );
+                                        break;
+                                }
+                            });
+                        }
+                        break;
+                    case PAINT_ORDER_LAYER.STROKE:
+                        if (styles.webkitTextStrokeWidth && text.text.trim().length) {
+                            this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
+                            this.ctx.lineWidth = styles.webkitTextStrokeWidth;
+                            this.ctx.lineJoin = !!(window as any).chrome ? 'miter' : 'round';
+                            this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline);
+                        }
+                        this.ctx.strokeStyle = '';
+                        this.ctx.lineWidth = 0;
+                        this.ctx.lineJoin = 'miter';
+                        break;
+                }
+            });
        });
    }

@ -376,7 +400,7 @@ export class CanvasRenderer {
            this.ctx.font = fontFamily;
            this.ctx.fillStyle = asString(styles.color);

-            this.ctx.textBaseline = 'middle';
+            this.ctx.textBaseline = 'alphabetic';
            this.ctx.textAlign = canvasTextAlign(container.styles.textAlign);

            const bounds = contentBox(container);
@ -409,7 +433,7 @@ export class CanvasRenderer {
                baseline
            );
            this.ctx.restore();
-            this.ctx.textBaseline = 'bottom';
+            this.ctx.textBaseline = 'alphabetic';
            this.ctx.textAlign = 'left';
        }

@ -427,7 +451,7 @@ export class CanvasRenderer {
                    }
                }
            } else if (paint.listValue && container.styles.listStyleType !== LIST_STYLE_TYPE.NONE) {
-                const [fontFamily, fontSize] = this.createFontStyle(styles);
+                const [fontFamily] = this.createFontStyle(styles);

                this.ctx.font = fontFamily;
                this.ctx.fillStyle = asString(styles.color);
@ -441,12 +465,10 @@ export class CanvasRenderer {
                    computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 1
                );

-                const {baseline} = this.fontMetrics.getMetrics(fontFamily, fontSize);
-
                this.renderTextWithLetterSpacing(
                    new TextBounds(paint.listValue, bounds),
                    styles.letterSpacing,
-                    baseline
+                    computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 2
                );
                this.ctx.textBaseline = 'bottom';
                this.ctx.textAlign = 'left';
@ -554,7 +576,8 @@ export class CanvasRenderer {
            return image;
        }

-        const canvas = (this.canvas.ownerDocument as Document).createElement('canvas');
+        const ownerDocument = this.canvas.ownerDocument ?? document;
+        const canvas = ownerDocument.createElement('canvas');
        canvas.width = Math.max(1, width);
        canvas.height = Math.max(1, height);
        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
--- a/tests/reftest-diff.ts
+++ b/tests/reftest-diff.ts
@ -0,0 +1,32 @@
+import {sync} from 'glob';
+import {resolve, basename} from 'path';
+import {existsSync, promises} from 'fs';
+import {toMatchImageSnapshot} from 'jest-image-snapshot';
+
+const resultsDir = resolve(__dirname, '../results');
+const customSnapshotsDir = resolve(__dirname, '../tmp/snapshots');
+const customDiffDir = resolve(__dirname, '../tmp/snapshot-diffs');
+
+expect.extend({toMatchImageSnapshot});
+
+describe('Image diff', () => {
+    const files: string[] = sync('../tmp/reftests/**/*.png', {
+        cwd: __dirname,
+        root: resolve(__dirname, '../../')
+    }).filter((path) => existsSync(resolve(resultsDir, basename(path))));
+
+    it.each(files.map((path) => basename(path)))('%s', async (filename) => {
+        const previous = resolve(resultsDir, filename);
+        const previousSnap = resolve(customSnapshotsDir, `${filename}-snap.png`);
+        await promises.copyFile(previous, previousSnap);
+        const updated = resolve(__dirname, '../tmp/reftests/', filename);
+        const buffer = await promises.readFile(updated);
+
+        // @ts-ignore
+        expect(buffer).toMatchImageSnapshot({
+            customSnapshotsDir,
+            customSnapshotIdentifier: () => filename,
+            customDiffDir
+        });
+    });
+});
--- a/tests/reftests/background/box-shadow.html
+++ b/tests/reftests/background/box-shadow.html
@ -9,7 +9,7 @@
            margin: 10px;
            display: inline-block;
            min-height: 50px;
-       //     border-radius: 10px;
+            border-radius: 10px;
        }

        body {
--- a/tests/reftests/images/images.html
+++ b/tests/reftests/images/images.html
@ -24,5 +24,22 @@

    <img src="../../assets/image.jpg" style="width:0px;height:0px;border:1px solid black" />
    <img src="../../assets/image.jpg" style="width:0px;height:0px;" />
+
+    <img srcset="../../assets/image.jpg, ../../assets/image2.jpg 2x" src="../../assets/image.jpg" style="width: 75px">
+
+    <script>
+      const base64 = "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";
+      const bytes = atob(base64);
+      const uInt8Array = new Uint8Array(bytes.length);
+
+      for (let i = 0; i < bytes.length; ++i) {
+          uInt8Array[i] = bytes.charCodeAt(i);
+      }
+
+      const blob = new Blob([uInt8Array], { type: "image/jpeg" });
+      const img = document.createElement("img");
+      img.src = URL.createObjectURL(blob);
+      document.body.appendChild(img);
+    </script>
  </body>
 </html>
--- a/tests/reftests/images/svg/native_only.html
+++ b/tests/reftests/images/svg/native_only.html
@ -34,11 +34,19 @@
                  style="fill:#40aa54;fill-opacity:1;stroke:#20552a;stroke-width:7.99999952;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
        </g>
    </svg>
-    <svg width="240" height="160" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
+    <svg width="50%" height="75%" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
        <text x="40" y="20" class="html">html</text>
        <text x="55" y="25" class="two">2</text>
        <text x="65" y="35" class="canvas">canvas</text>
    </svg>
    <img width="200" height="200" src="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjMwNiIgaGVpZ2h0PSIyOTYiPjxkZWZzIGlkPSJkZWZzNCIgLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYyLjQ2OTk1LC00NzcuMjg2MykiIGlkPSJsYXllcjEiPjxwYXRoIGQ9Im0gMzE0LjE1NzQ1LDQ4MS42OTU1OCBjIC01OS4yMDA4OSwwLjUzNzc0IC0xMTQuODA5NzksMzYuNzIyMTkgLTEzNy4zMTI1LDk1LjM0Mzc1IC0yOS4zOTEyOSw3Ni41NjY5MyA4LjgzOTMyLDE2Mi40NTI0NiA4NS40MDYyNSwxOTEuODQzNzUgbCAzNC4wMzEyNSwtODguNjg3NSBjIC0yMC4wNjc4LC03LjcxMzU4IC0zNC4zMTI1LC0yNy4xNTMyNCAtMzQuMzEyNSwtNDkuOTM3NSAwLC0yOS41NDcyMyAyMy45NTI3NywtNTMuNSA1My41LC01My41IDI5LjU0NzIzLDAgNTMuNSwyMy45NTI3NyA1My41LDUzLjUgMCwyMi43ODQyNiAtMTQuMjQ0Nyw0Mi4yMjM5MiAtMzQuMzEyNSw0OS45Mzc1IGwgMzQuMDMxMjUsODguNjg3NSBjIDM5LjI5MDg1LC0xNS4wODIzNCA3MC4zMjM5LC00Ni4xMTU0IDg1LjQwNjI1LC04NS40MDYyNSAyOS4zOTEyOSwtNzYuNTY2OTMgLTguODM5MzIsLTE2Mi40ODM3MSAtODUuNDA2MjUsLTE5MS44NzUgLTE3Ljk0NTM3LC02Ljg4ODU5IC0zNi40MDg1MywtMTAuMDcwODcgLTU0LjUzMTI1LC05LjkwNjI1IHoiIGlkPSJwYXRoMjgzMCIgc3R5bGU9ImZpbGw6IzQwYWE1NDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzIwNTUyYTtzdHJva2Utd2lkdGg6Ny45OTk5OTk1MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1vcGFjaXR5OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAvPjwvZz48L3N2Zz4=" /></div>
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width=50 height=20>
+        <g data-z-index="0.1" opacity="1" transform="translate(-974,-30) scale(1 1)">
+            <path fill="#7cb5ec" d="M 990 37.734399999999994 A 4 4 0 1 1 990.0039999993332 37.73439800000016 Z" opacity="1" stroke-width="0.00015790535835003006"></path>
+            <path fill="#7cb5ec" d="M 999 37.734399999999994 A 4 4 0 1 1 999.0039999993332 37.73439800000016 Z" opacity="1" stroke-width="0.00015790535835003006"></path>
+            <path fill="#7cb5ec" d="M 1009 37.734399999999994 A 4 4 0 1 1 1009.0039999993332 37.73439800000016 Z" opacity="1" stroke-width="0.00015790535835003006"></path>
+            <path fill="#7cb5ec" d="M 1019 37.734399999999994 A 4 4 0 1 1 1019.0039999993332 37.73439800000016 Z" opacity="1" stroke-width="0.00015790535835003006"></path>
+        </g>
+    </svg>
 </body>
 </html>
--- a/tests/reftests/text/lang/chinese.html
+++ b/tests/reftests/text/lang/chinese.html
@ -3,7 +3,7 @@
  <head>
    <title>Chinese text</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <script type="text/javascript" src="../../test.js"></script>
+    <script type="text/javascript" src="../../../test.js"></script>
    <style>
      .chn-text-block {
        width: 500px;
--- a/tests/reftests/text/lang/persian.html
+++ b/tests/reftests/text/lang/persian.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html dir="rtl" lang="fa-IR">
+<head>
+    <title>Persian rtl</title>
+
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../../test.js"></script>
+    <style>
+        body{
+            font-family: Arial;
+        }
+        .test{
+            padding: 10px 25px;
+            direction: rtl;
+        }
+    </style>
+</head>
+<body>
+<div class="test" lang="fa">
+    <p>
+        سلام دنیا! این یک تست است...
+    </p>
+</div>
+<span class="test" lang="fa">من می‌توانم. این است قدرت جاوااسکریپت!</span>
+</body>
+</html>
--- a/tests/reftests/text/lang/thai.html
+++ b/tests/reftests/text/lang/thai.html
@ -3,7 +3,7 @@
 <head>
    <title>Thai text</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <script type="text/javascript" src="../../test.js"></script>
+    <script type="text/javascript" src="../../../test.js"></script>
    <style>
        .text-block {
            width: 500px;
--- a/tests/reftests/text/stroke.html
+++ b/tests/reftests/text/stroke.html
@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Text stroke tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        div span:first-child {
+            font-size: 2em;
+        }
+
+        div span:nth-child(2) {
+            font-size: 5em;
+        }
+
+        .stroke1 {
+            -webkit-text-stroke-width: .09em;
+            -webkit-text-stroke-color: red;
+            font-size: 1em;
+        }
+
+        .stroke2 {
+            -webkit-text-stroke-width: .12em;
+            -webkit-text-stroke-color: green;
+            font-size: 2em;
+        }
+
+        .stroke3 {
+            -webkit-text-stroke-width: .19em;
+            -webkit-text-stroke-color: blue;
+            font-size: 3em;
+        }
+
+        .ordered {
+            paint-order: stroke fill;
+        }
+
+        body {
+            font-family: Arial;
+        }
+    </style>
+</head>
+<body>
+<div class="stroke1">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke2">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke3">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke1 ordered">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke2 ordered">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke3 ordered">
+    Some text <span> with bigger text </span> that should have a stroke
+    <strong>Bolder stroke</strong> that makes things pretty
+</div>
+<div class="stroke4">
+    Some text <span> with bigger text </span> that should have no stroke
+    <strong>Bolder text</strong> that makes things pretty
+</div>
+</body>
+</html>
--- a/tests/reftests/text/text.html
+++ b/tests/reftests/text/text.html
@ -1,137 +1,153 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Text tests</title>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <script type="text/javascript" src="../../test.js"></script>
-        <style>
-            body {
-                font-family: Arial;
-            }
-            .small{
-                font-size:14px;
-                line-height: 1vw;
-            }
+<head>
+    <title>Text tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        body {
+            font-family: Arial;
+        }

-            .medium{
-                font-size:18px;
-                line-height: 2vw;
-            }
-            .large{
-                font-size:24px;
-                line-height: 3vw;
-            }
-            div{
-                float:left;
-            }
-            h2 {
-                clear:both;
-            }
-            h1 {
-                font-size: 36px;
-                line-height: 4vw;
-            }
+        .small {
+            font-size: 14px;
+            line-height: 1vw;
+        }

-            h2 {
-                font-size: 24px;
-                line-height: 3vw;
-            }
+        .medium {
+            font-size: 18px;
+            line-height: 2vw;
+        }

-            h3 {
-                font-size: 16px;
-                line-height: 2vw;
-            }
-        </style>
+        .large {
+            font-size: 24px;
+            line-height: 3vw;
+        }

-    </head>
-    <body>           <h1>&lt;h1&gt; text-decoration</h1>
-        <div style="font-family:Arial;">
-            <h2>Arial</h2>
-            <ol class="small">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
+        div {
+            float: left;
+        }

-            <ol class="medium">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-            <ol class="large">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-        </div>
+        h2 {
+            clear: both;
+        }

-        <div style="font-family:Verdana;">
-            <h2>Verdana</h2>
-            <ol class="small">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
+        h1 {
+            font-size: 36px;
+            line-height: 4vw;
+        }

-            <ol class="medium">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-            <ol class="large">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-        </div>
+        h2 {
+            font-size: 24px;
+            line-height: 3vw;
+        }

-        <div style="font-family:Tahoma;">
-            <h2>Tahoma</h2>
-            <ol class="small">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
+        h3 {
+            font-size: 16px;
+            line-height: 2vw;
+        }

-            <ol class="medium">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-            <ol class="large">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-        </div>
+        .raw {
+            font-size: 60px;
+            word-spacing: 30px;
+        }
+    </style>

-        <h2>&lt;h2&gt; text-transform</h2>
-        <ul>
-            <li style="text-transform:none;">text-transform:none;</li>
-            <li style="text-transform:capitalize;">text-transform: capitalize; (including foreign characters such as Öaäå)</li>
-            <li style="text-transform:uppercase;">text-transform:uppercase;</li>
-            <li style="text-transform:lowercase;">text-transform:lowercase;</li>
-        </ul>
-        <h3>&lt;h3&gt; misc text alignments</h3>
-        <ul>
-            <li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always be correct)</li>
-            <li style="line-height:35px;">line-height:35px; <br />(same goes for line-height)</li>
-            <li style="letter-spacing:5px;">letter-spacing:5px;</li>
-            <li style="letter-spacing:0.9px;">letter-spacing:0.9px;</li>
-            <li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
-            <li style="font-variant:small-caps;">font-variant:small-caps; </li>
-        </ul>
+</head>
+<body>

-        <div style="font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace">npm install --save html2canvas</div>
+<h1>&lt;h1&gt; text-decoration</h1>
+<div style="font-family:Arial;">
+    <h2>Arial</h2>
+    <ol class="small">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>

-    </body>
+    <ol class="medium">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+    <ol class="large">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+</div>
+
+<div style="font-family:Verdana;">
+    <h2>Verdana</h2>
+    <ol class="small">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+    <ol class="medium">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+    <ol class="large">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+</div>
+<div style="font-family:Tahoma;">
+    <h2>Tahoma</h2>
+    <ol class="small">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+
+    <ol class="medium">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+    <ol class="large">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+</div>
+
+<h2>&lt;h2&gt; text-transform</h2>
+<ul>
+    <li style="text-transform:none;">text-transform:none;</li>
+    <li style="text-transform:capitalize;">text-transform: capitalize; (including foreign characters such as Öaäå)
+    </li>
+    <li style="text-transform:uppercase;">text-transform:uppercase;</li>
+    <li style="text-transform:lowercase;">text-transform:lowercase;</li>
+</ul>
+<h3>&lt;h3&gt; misc text alignments</h3>
+<ul>
+    <li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always
+        be correct)
+    </li>
+    <li style="line-height:35px;">line-height:35px; <br/>(same goes for line-height)</li>
+    <li style="letter-spacing:5px;">letter-spacing:5px;</li>
+    <li style="letter-spacing:0.9px;">letter-spacing:0.9px;</li>
+    <li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
+    <li style="font-variant:small-caps;">font-variant:small-caps;</li>
+</ul>
+
+<div style="font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace">npm install --save html2canvas</div>
+<div class="raw" style="">
+    <span>[AB / CD]</span>
+</div>
+<div>Emojis 🤷🏾‍♂️👨‍👩‍👧‍👦 :)</div>
+</body>
 </html>
--- a/tests/reftests/text/textarea.html
+++ b/tests/reftests/text/textarea.html
@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>textarea</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        textarea{
+            font-family: Arial;
+            font-size: 14px;
+            width: 10em;
+            height: 90px;
+        }
+        div {
+            display: inline-block;
+        }
+    </style>
+
+</head>
+<body>
+<div>
+    <p>1. word wrap</p>
+    <textarea> A long text with many words that should be wrapped on various lines.
+    </textarea>
+
+    <p>2. padding</p>
+    <textarea style="padding: 1em">A long text with many words that should be wrapped on various lines.
+    </textarea>
+
+    <p>3. line height</p>
+    <textarea style="line-height: 25px">A long text with many words.
+    </textarea>
+
+    <p>4. letter spacing</p>
+    <textarea style="letter-spacing: 5px"> A long text with many words that should be wrapped on various lines.</textarea>
+</div>
+<div>
+    <p>5. multiple spaces</p>
+    <textarea>A long text with many           words     that should be wrapped on various lines.
+    </textarea>
+
+    <p>6. newlines</p>
+    <textarea>A long text with many
+          words that
+
+        should be wrapped on various lines.
+    </textarea>
+
+    <p>7. long word</p>
+    <textarea>Donaudampfschifffahrtsgesellschaftskapitänskochmütze</textarea>
+
+    <p>8. hyphen</p>
+    <textarea>A text with many-manymany manys.</textarea>
+</div>
+<div>
+    <p>9. kerning</p>
+    <textarea>AVAVAVAVAVAVAVAV TeTeTeTeTeTeTeTeTe YaYaYaYaYaYaYaYaY</textarea>
+
+    <p>10. kerning with letter spacing</p>
+    <textarea style="letter-spacing: 1px">AVAVAVAVAVAVAV TeTeTeTeTeTeTeTe YaYaYaYaYaYaYaY</textarea>
+
+    <p>11. kerning with letter spacing</p>
+    <textarea style="letter-spacing: 5px">AVAVAVAVAV TeTeTeTeTeT YaYaYaYaYa</textarea>
+
+</div>
+</body>
+</html>
--- a/tests/reftests/webcomponents/autonomous-custom-element.js
+++ b/tests/reftests/webcomponents/autonomous-custom-element.js
@ -0,0 +1,45 @@
+class AutonomousCustomElement extends HTMLElement {
+    constructor() {
+        super();
+
+        const shadow = this.attachShadow({mode: 'open'});
+        const wrapper = document.createElement('span');
+        wrapper.setAttribute('class', 'wrapper');
+
+        const info = document.createElement('span');
+        info.setAttribute('class', 'info');
+
+        info.textContent = this.getAttribute('text');
+
+        const img = document.createElement('img');
+        img.src = this.getAttribute('img');
+
+        // Create some CSS to apply to the shadow dom
+        const style = document.createElement('style');
+
+        style.textContent = `
+      .wrapper {
+        position: relative;
+      }
+      .info {
+        font-size: 0.8rem;
+        width: 200px;
+        display: inline-block;
+        border: 1px solid black;
+        padding: 10px;
+        background: white;
+        border-radius: 10px;
+      }
+      img {
+        width: 100px;
+      }
+    `;
+
+        shadow.appendChild(style);
+        shadow.appendChild(wrapper);
+        wrapper.appendChild(img);
+        wrapper.appendChild(info);
+    }
+}
+
+customElements.define('autonomous-custom-element', AutonomousCustomElement);
--- a/tests/reftests/webcomponents/slot-element.js
+++ b/tests/reftests/webcomponents/slot-element.js
@ -0,0 +1,51 @@
+customElements.define('summary-display',
+    class extends HTMLElement {
+        constructor() {
+            super();
+
+            const template = document.getElementById('summary-display-template');
+            const templateContent = template.content;
+
+            const shadowRoot = this.attachShadow({mode: 'open'});
+            shadowRoot.appendChild(templateContent.cloneNode(true));
+
+            const items = Array.from(this.querySelectorAll('li'));
+            const descriptions = Array.from(this.querySelectorAll('p'));
+
+            items.forEach(item => {
+                handleClick(item);
+            });
+
+            descriptions.forEach(description => {
+                updateDisplay(description, items[1]);
+            });
+
+            function handleClick(item) {
+                item.addEventListener('click', function() {
+                    items.forEach(item => {
+                        item.style.backgroundColor = 'white';
+                    });
+
+                    descriptions.forEach(description => {
+                        updateDisplay(description, item);
+                    });
+                });
+            }
+
+            function updateDisplay(description, item) {
+                description.removeAttribute('slot');
+
+                if(description.getAttribute('data-name') === item.textContent) {
+                    description.setAttribute('slot', 'choice');
+                    item.style.backgroundColor = '#bad0e4';
+                }
+            }
+
+            const slots = this.shadowRoot.querySelectorAll('slot');
+            slots[1].addEventListener('slotchange', function(e) {
+                const nodes = slots[1].assignedNodes();
+                console.log(`Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`);
+            });
+        }
+    }
+);
--- a/tests/reftests/webcomponents/webcomponents.html
+++ b/tests/reftests/webcomponents/webcomponents.html
@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Web components tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+
+    </style>
+</head>
+<body>
+<div>
+    <h1>Autonomous custom element</h1>
+    <autonomous-custom-element img="../../assets/image.jpg" text="This is text"></autonomous-custom-element>
+    <h1>Slot element</h1>
+    <summary-display>
+        <ul slot="master-list">
+            <li>Apples</li>
+            <li>Pears</li>
+            <li>Bananas</li>
+            <li>Oranges</li>
+            <li>Peaches</li>
+            <li>Strawberries</li>
+            <li>Blueberries</li>
+        </ul>
+
+        <p data-name="Apples">A common, sweet, crunchy fruit, usually green or yellow in color.</p>
+        <p data-name="Pears">A fairly common, sweet, usually green fruit, usually softer than Apples.</p>
+        <p data-name="Bananas">A long, curved, yellow fruit, with a fairly gentle flavor.</p>
+        <p data-name="Oranges">Orange in color, usually sweet but can be sharp, often contains pips.</p>
+        <p data-name="Peaches">An orange fruit with big stone in the middle, and sweet, juicy flesh.</p>
+        <p data-name="Strawberries">A red fruit with yellow seeds on the outside; has a sweet flavor and a pretty shape.</p>
+        <p data-name="Blueberries">They are berries and they are blue; sweet in flavor, small in size, round.</p>
+    </summary-display>
+
+    <template id="summary-display-template">
+        <article>
+            <div>
+                <slot name="master-list"></slot>
+            </div>
+            <div>
+                <slot name="choice"></slot>
+            </div>
+        </article>
+    </template>
+
+    <script src="autonomous-custom-element.js"></script>
+    <script src="slot-element.js"></script>
+</div>
+
+
+</body>
+</html>
Author	SHA1	Message	Date
CI	f284752295	chore(release): 1.1.5	2021-08-02 10:38:51 +00:00
Niklas von Hertzen	96e23d1851	fix: natural sizes for images with srcset (#2622 )	2021-08-02 18:27:03 +08:00
Niklas von Hertzen	7d788c6f3d	fix: emoji line breaking (fix #1813 ) (#2621 ) * fix: emoji line breaking (fix #1813) * test: fix text.html reftest	2021-08-02 17:49:46 +08:00
Niklas von Hertzen	5dea36bd69	docs: update README to github discussion Q/A	2021-07-17 17:24:15 +08:00
CI	11d16d2b77	chore(release): 1.1.4	2021-07-15 16:44:42 +00:00
Niklas von Hertzen	e9f7f48d57	fix: word-break seperators (#2593 )	2021-07-15 21:05:26 +08:00
Niklas von Hertzen	4c360fc1f0	test: refactor language tests (#2594 )	2021-07-15 20:58:04 +08:00
Niklas von Hertzen	578bb771bf	test: update box-shadow with radius	2021-07-15 18:24:39 +08:00
Niklas von Hertzen	522e5aac5f	feat: add support for webkit-text-stroke and paint-order (#2591 )	2021-07-15 18:19:26 +08:00
Niklas von Hertzen	dd6d8856ec	fix: svg d path getting truncated on copy (#2589 )	2021-07-15 17:15:47 +08:00
Niklas von Hertzen	45efe54da8	fix: this.canvas.ownerDocument is undefined (#2590 )	2021-07-15 17:08:43 +08:00
Niklas von Hertzen	cd99f11b1b	fix: text position for form elements and list markers (#2588 )	2021-07-15 16:54:01 +08:00
Niklas von Hertzen	fa60716d07	fix: don't copy 'all' css property (#2586 )	2021-07-14 22:49:52 +08:00
CI	99b687c412	chore(release): 1.1.3	2021-07-14 13:08:25 +00:00
Niklas von Hertzen	1d00bfe175	test: add test cases for text-stroke and textarea from (#1540 and #2132 ) (#2585 )	2021-07-14 21:07:39 +08:00
Niklas von Hertzen	58b4591174	feat: allow access to reference element in onclone (#2584 )	2021-07-14 21:07:10 +08:00
Niklas von Hertzen	92fa448913	fix: responsive svg images (#2583 )	2021-07-14 20:44:04 +08:00
Niklas von Hertzen	1acdc827a4	fix: image blob rendering	2021-07-14 20:21:57 +08:00
Niklas von Hertzen	acb4cd24b8	feat: support for custom and slot elements (#2581 )	2021-07-14 17:59:08 +08:00
Niklas von Hertzen	eeb5a3ea1d	fix: iframe load to ensure images are loaded (#2577 )	2021-07-14 16:18:43 +08:00
CI	52a03c76b6	chore(release): 1.1.2	2021-07-13 14:01:24 +00:00
Niklas von Hertzen	439e365ea8	fix: text-shadow position with baseline (#2576 )	2021-07-13 19:14:27 +08:00
Niklas von Hertzen	e29af58661	ci: implement screenshot diffing (#2571 )	2021-07-13 18:48:18 +08:00
Niklas von Hertzen	171585491d	fix: logger unique names (#2575 )	2021-07-13 18:07:09 +08:00