fix: ios grapheme layout

chore(release): 1.3.2
fix: overflows with absolutely positioned content (#2663 )
2023-08-10 21:13:10 +03:00 · 2021-08-16 20:21:04 +08:00 · 2021-08-15 12:54:26 +00:00 · 2021-08-15 19:41:57 +08:00 · 2021-08-14 17:18:30 +08:00 · 2021-08-14 16:48:22 +08:00
130 changed files with 3248 additions and 2881 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -113,6 +113,10 @@ jobs:
            name: iOS Simulator Safari 14
            targetBrowser: Safari_IOS_14
            xcode: /Applications/Xcode_12_beta.app
+          - os: macos-11
+            name: iOS Simulator Safari 15
+            targetBrowser: Safari_IOS_15
+            xcode: /Applications/Xcode_13.0.app
          - os: windows-latest
            name: Windows Internet Explorer 9 (Emulated)
            targetBrowser: IE_9
@ -309,3 +313,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,170 @@

 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.3.2](https://github.com/niklasvh/html2canvas/compare/v1.3.1...v1.3.2) (2021-08-15)
+
+
+### docs
+
+* add warning for webgl cloning with preserveDrawingBuffer=false (#2661) ([01ed879](https://github.com/niklasvh/html2canvas/commit/01ed87907ad9c7688880e2c5cb8ebc22ef73a4d8)), closes [#2661](https://github.com/niklasvh/html2canvas/issues/2661)
+* include src files on www (#2660) ([58ff000](https://github.com/niklasvh/html2canvas/commit/58ff0003f77d825ac027eeec95fa80c0123eaf8f)), closes [#2660](https://github.com/niklasvh/html2canvas/issues/2660)
+
+### feat
+
+* add support for data-html2canvas-debug property for debugging (#2658) ([cd0d725](https://github.com/niklasvh/html2canvas/commit/cd0d7258c3a93f2989d5d9ec0244ba2763ea2d23)), closes [#2658](https://github.com/niklasvh/html2canvas/issues/2658)
+
+### fix
+
+* disable transition properties (#2659) ([f143166](https://github.com/niklasvh/html2canvas/commit/f1431665513e0a4636fb167a241f4a0571ba728a)), closes [#2659](https://github.com/niklasvh/html2canvas/issues/2659)
+* overflows with absolutely positioned content (#2663) ([38c6829](https://github.com/niklasvh/html2canvas/commit/38c682955a9299ca7785af71d8f251df799405b0)), closes [#2663](https://github.com/niklasvh/html2canvas/issues/2663)
+
+
+
+## [1.3.1](https://github.com/niklasvh/html2canvas/compare/v1.3.0...v1.3.1) (2021-08-14)
+
+
+### fix
+
+* multi arg transition/animation duration (#2657) ([1b55ed5](https://github.com/niklasvh/html2canvas/commit/1b55ed5668dcbbe1c6d8d7e94736d8f2da2d31c5)), closes [#2657](https://github.com/niklasvh/html2canvas/issues/2657)
+
+
+
+# [1.3.0](https://github.com/niklasvh/html2canvas/compare/v1.2.2...v1.3.0) (2021-08-13)
+
+
+### feat
+
+* add rtl render support (#2653) ([6947982](https://github.com/niklasvh/html2canvas/commit/694798284838b16882e648914da0905818aa366c)), closes [#2653](https://github.com/niklasvh/html2canvas/issues/2653)
+* correctly break graphemes (#2652) ([437b367](https://github.com/niklasvh/html2canvas/commit/437b367d3ba9dfd7f9a4c8042ac8d00208c09770)), closes [#2652](https://github.com/niklasvh/html2canvas/issues/2652)
+
+### fix
+
+* correctly handle allowTaint canvas cloning (#2649) ([c378e22](https://github.com/niklasvh/html2canvas/commit/c378e220694c14cb7b3b4b8650a7757f8fc23c7a)), closes [#2649](https://github.com/niklasvh/html2canvas/issues/2649)
+* finish animation/transitions for elements (#2632) ([969638f](https://github.com/niklasvh/html2canvas/commit/969638fb94a0a14c64a667fa6e5689f79d9f1044)), closes [#2632](https://github.com/niklasvh/html2canvas/issues/2632)
+
+### test
+
+* add letter-spacing test for zwj emoji (#2650) ([f919204](https://github.com/niklasvh/html2canvas/commit/f919204efa06af219f155ca279f96124bb92862b)), closes [#2650](https://github.com/niklasvh/html2canvas/issues/2650)
+
+
+
+## [1.2.2](https://github.com/niklasvh/html2canvas/compare/v1.2.1...v1.2.2) (2021-08-10)
+
+
+### ci
+
+* add ios15 target (#2564) ([e429e04](https://github.com/niklasvh/html2canvas/commit/e429e0443adf5c7ca3041b97a8157b8911302206)), closes [#2564](https://github.com/niklasvh/html2canvas/issues/2564)
+
+### docs
+
+* update test previewer (#2637) ([7a06d0c](https://github.com/niklasvh/html2canvas/commit/7a06d0c2c2f3b8a1d1a8a85c540f8288b782e8c6)), closes [#2637](https://github.com/niklasvh/html2canvas/issues/2637)
+
+### fix
+
+* parsing counter content in pseudo element (#2640) ([1941b9e](https://github.com/niklasvh/html2canvas/commit/1941b9e0acfd9243da0beaf70e1643cab1b4a963)), closes [#2640](https://github.com/niklasvh/html2canvas/issues/2640)
+* radial gradient ry check (#2631) ([a0dd38a](https://github.com/niklasvh/html2canvas/commit/a0dd38a8be4e540ae1c1f4b4e41f6c386f3e454f)), closes [#2631](https://github.com/niklasvh/html2canvas/issues/2631)
+* test for ios range line break error (#2635) ([f43f942](https://github.com/niklasvh/html2canvas/commit/f43f942fcd793dde9cdc6c0438f379ec3c05c405)), closes [#2635](https://github.com/niklasvh/html2canvas/issues/2635)
+
+### test
+
+* large base64 encoded background (#2636) ([e36408a](https://github.com/niklasvh/html2canvas/commit/e36408ad030fe31acd9969a37fe24c1621c0bd04)), closes [#2636](https://github.com/niklasvh/html2canvas/issues/2636)
+
+
+
+## [1.2.1](https://github.com/niklasvh/html2canvas/compare/v1.2.0...v1.2.1) (2021-08-05)
+
+
+### fix
+
+* none image (#2627) ([6651fc6](https://github.com/niklasvh/html2canvas/commit/6651fc6789d5902d171dc53b4094887870433018)), closes [#2627](https://github.com/niklasvh/html2canvas/issues/2627)
+* type import that is only available ts 3.8 or higher (#2629) ([c5c6fa0](https://github.com/niklasvh/html2canvas/commit/c5c6fa00d71f36ef963ba5170ebc7b668d39c407)), closes [#2629](https://github.com/niklasvh/html2canvas/issues/2629)
+
+
+
+# [1.2.0](https://github.com/niklasvh/html2canvas/compare/v1.1.5...v1.2.0) (2021-08-04)
+
+
+### fix
+
+* element cropping & scrolling (#2625) ([878e37a](https://github.com/niklasvh/html2canvas/commit/878e37a24272d0412fe589975ef8eed931c56e0b)), closes [#2625](https://github.com/niklasvh/html2canvas/issues/2625)
+* overflow-wrap break-word (#2626) ([95a46b0](https://github.com/niklasvh/html2canvas/commit/95a46b00c53563722c035a0e45fdf5fb507275e4)), closes [#2626](https://github.com/niklasvh/html2canvas/issues/2626)
+
+### test
+
+* element with scrolled window (#2624) ([1338c7b](https://github.com/niklasvh/html2canvas/commit/1338c7b203535d53509416358d74014200a994eb)), closes [#2624](https://github.com/niklasvh/html2canvas/issues/2624)
+
+
+
+## [1.1.5](https://github.com/niklasvh/html2canvas/compare/v1.1.4...v1.1.5) (2021-08-02)
+
+
+### docs
+
+* update README to github discussion Q/A ([5dea36b](https://github.com/niklasvh/html2canvas/commit/5dea36bd6964164e8ba3f8780309e792f5d16255))
+
+### fix
+
+* emoji line breaking (fix #1813) (#2621) ([7d788c6](https://github.com/niklasvh/html2canvas/commit/7d788c6f3d221b87f6b59fcda8517731340b2d1f)), closes [#1813](https://github.com/niklasvh/html2canvas/issues/1813) [#2621](https://github.com/niklasvh/html2canvas/issues/2621) [#1813](https://github.com/niklasvh/html2canvas/issues/1813)
+* natural sizes for images with srcset (#2622) ([96e23d1](https://github.com/niklasvh/html2canvas/commit/96e23d185198b7131cf0cfa31c14c165790464e9)), closes [#2622](https://github.com/niklasvh/html2canvas/issues/2622)
+
+
+
+## [1.1.4](https://github.com/niklasvh/html2canvas/compare/v1.1.3...v1.1.4) (2021-07-15)
+
+
+### feat
+
+* add support for webkit-text-stroke and paint-order (#2591) ([522e5aa](https://github.com/niklasvh/html2canvas/commit/522e5aac5fdad090953d095b5d558053a5e2d43d)), closes [#2591](https://github.com/niklasvh/html2canvas/issues/2591)
+
+### fix
+
+* don't copy 'all' css property (#2586) ([fa60716](https://github.com/niklasvh/html2canvas/commit/fa60716d07ed590ec64543a586a7960cbc8557df)), closes [#2586](https://github.com/niklasvh/html2canvas/issues/2586)
+* svg d path getting truncated on copy (#2589) ([dd6d885](https://github.com/niklasvh/html2canvas/commit/dd6d8856eca820a13a0990c467b9e531433fd4a9)), closes [#2589](https://github.com/niklasvh/html2canvas/issues/2589)
+* text position for form elements and list markers (#2588) ([cd99f11](https://github.com/niklasvh/html2canvas/commit/cd99f11b1b9eb1260a548a63e2a370a0a5ddafa0)), closes [#2588](https://github.com/niklasvh/html2canvas/issues/2588)
+* this.canvas.ownerDocument is undefined (#2590) ([45efe54](https://github.com/niklasvh/html2canvas/commit/45efe54da8145f97b9ee0463e686103280e3c8b1)), closes [#2590](https://github.com/niklasvh/html2canvas/issues/2590)
+* word-break seperators (#2593) ([e9f7f48](https://github.com/niklasvh/html2canvas/commit/e9f7f48d571304be14610a181feedca3c3b42864)), closes [#2593](https://github.com/niklasvh/html2canvas/issues/2593)
+
+### test
+
+* refactor language tests (#2594) ([4c360fc](https://github.com/niklasvh/html2canvas/commit/4c360fc1f059f4dcab71a79f9dc8a5b2e25411ea)), closes [#2594](https://github.com/niklasvh/html2canvas/issues/2594)
+* update box-shadow with radius ([578bb77](https://github.com/niklasvh/html2canvas/commit/578bb771bfeb7e81362e9e355d6cc9ae910e3920))
+
+
+
+## [1.1.3](https://github.com/niklasvh/html2canvas/compare/v1.1.2...v1.1.3) (2021-07-14)
+
+
+### feat
+
+* allow access to reference element in onclone (#2584) ([58b4591](https://github.com/niklasvh/html2canvas/commit/58b45911741c0dbbccd462b2976560bb3999eaef)), closes [#2584](https://github.com/niklasvh/html2canvas/issues/2584)
+* support for custom and slot elements (#2581) ([acb4cd2](https://github.com/niklasvh/html2canvas/commit/acb4cd24b85527908c02a60794768949578678f0)), closes [#2581](https://github.com/niklasvh/html2canvas/issues/2581)
+
+### fix
+
+* iframe load to ensure images are loaded (#2577) ([eeb5a3e](https://github.com/niklasvh/html2canvas/commit/eeb5a3ea1d6c94e0f6dcfd40695eb88ebb3e0041)), closes [#2577](https://github.com/niklasvh/html2canvas/issues/2577)
+* image blob rendering ([1acdc82](https://github.com/niklasvh/html2canvas/commit/1acdc827a4e05933c2f7c9558405c66b7cd82f58))
+* responsive svg images (#2583) ([92fa448](https://github.com/niklasvh/html2canvas/commit/92fa448913192d5e4e82bfe14f6644b669d4e6ef)), closes [#2583](https://github.com/niklasvh/html2canvas/issues/2583)
+
+### test
+
+* add test cases for text-stroke and textarea from (#1540 and #2132) (#2585) ([1d00bfe](https://github.com/niklasvh/html2canvas/commit/1d00bfe175d51e663d0bae88b6dbd10a266a71f1)), closes [#1540](https://github.com/niklasvh/html2canvas/issues/1540) [#2132](https://github.com/niklasvh/html2canvas/issues/2132) [#2585](https://github.com/niklasvh/html2canvas/issues/2585)
+
+
+
+## [1.1.2](https://github.com/niklasvh/html2canvas/compare/v1.1.1...v1.1.2) (2021-07-13)
+
+
+### ci
+
+* implement screenshot diffing (#2571) ([e29af58](https://github.com/niklasvh/html2canvas/commit/e29af586618125bbad10ad6bee3d69fddbc5d22a)), closes [#2571](https://github.com/niklasvh/html2canvas/issues/2571)
+
+### fix
+
+* logger unique names (#2575) ([1715854](https://github.com/niklasvh/html2canvas/commit/171585491dd1bee4f30691328bd22e978f3ac79e)), closes [#2575](https://github.com/niklasvh/html2canvas/issues/2575)
+* text-shadow position with baseline (#2576) ([439e365](https://github.com/niklasvh/html2canvas/commit/439e365ea8c703b528778a268dcfc3bf9ccad6a9)), closes [#2576](https://github.com/niklasvh/html2canvas/issues/2576)
+
+
+
 ## [1.1.1](https://github.com/niklasvh/html2canvas/compare/v1.1.0...v1.1.1) (2021-07-12)


--- 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/karma.conf.js
+++ b/karma.conf.js
@ -42,6 +42,12 @@ module.exports = function(config) {
            platform: 'iOS',
            sdk: '14.0'
        },
+        Safari_IOS_15: {
+            base: 'MobileSafari',
+            name: 'iPhone 8',
+            platform: 'iOS',
+            sdk: '15.0'
+        },
        SauceLabs_IE9: {
            base: 'SauceLabs',
            browserName: 'internet explorer',
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -6,7 +6,7 @@
  "module": "dist/html2canvas.esm.js",
  "typings": "dist/types/index.d.ts",
  "browser": "dist/html2canvas.js",
-  "version": "1.1.1",
+  "version": "1.3.2",
  "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",
@ -47,7 +48,7 @@
    "babel-loader": "^8.0.5",
    "babel-plugin-add-module-exports": "^1.0.2",
    "babel-plugin-dev-expression": "^0.2.1",
-    "base64-arraybuffer": "0.2.0",
+    "base64-arraybuffer": "1.0.1",
    "body-parser": "^1.19.0",
    "chai": "4.1.1",
    "chromeless": "^1.5.2",
@ -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,7 @@
  "homepage": "https://html2canvas.hertzen.com",
  "license": "MIT",
  "dependencies": {
-    "css-line-break": "1.1.1"
+    "css-line-break": "2.0.1",
+    "text-segmentation": "^1.0.2"
  }
 }
--- a/src/tests/index.ts
+++ b/src/tests/index.ts
@ -34,6 +34,11 @@ describe('html2canvas', () => {
        DocumentCloner.destroy = jest.fn().mockReturnValue(true);
        await html2canvas(element);
        expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            expect.objectContaining({
+                cache: expect.any(Object),
+                logger: expect.any(Object),
+                windowBounds: expect.objectContaining({left: 12, top: 34})
+            }),
            expect.objectContaining({
                backgroundColor: 0xffffffff,
                scale: 1,
@ -41,8 +46,6 @@ describe('html2canvas', () => {
                width: 200,
                x: 0,
                y: 0,
-                scrollX: 12,
-                scrollY: 34,
                canvas: undefined
            })
        );
@ -52,6 +55,7 @@ describe('html2canvas', () => {
    it('should have transparent background with backgroundColor: null', async () => {
        await html2canvas(element, {backgroundColor: null});
        expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            expect.anything(),
            expect.objectContaining({
                backgroundColor: COLORS.TRANSPARENT
            })
@ -62,6 +66,7 @@ describe('html2canvas', () => {
        const canvas = {} as HTMLCanvasElement;
        await html2canvas(element, {canvas});
        expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            expect.anything(),
            expect.objectContaining({
                canvas
            })
@ -72,6 +77,7 @@ describe('html2canvas', () => {
        DocumentCloner.destroy = jest.fn();
        await html2canvas(element, {removeContainer: false});
        expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            expect.anything(),
            expect.objectContaining({
                backgroundColor: 0xffffffff,
                scale: 1,
@ -79,8 +85,6 @@ describe('html2canvas', () => {
                width: 200,
                x: 0,
                y: 0,
-                scrollX: 12,
-                scrollY: 34,
                canvas: undefined
            })
        );
--- a/src/core/mocks/cache-storage.ts
+++ b/src/core/mocks/cache-storage.ts
@ -1,22 +1 @@
-class MockCache {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    private readonly _cache: {[key: string]: Promise<any>};
-
-    constructor() {
-        this._cache = {};
-    }
-
-    addImage(src: string): Promise<void> {
-        const result = Promise.resolve();
-        this._cache[src] = result;
-        return result;
-    }
-}
-
-const current = new MockCache();
-
-export class CacheStorage {
-    static getInstance(): MockCache {
-        return current;
-    }
-}
+export class CacheStorage {}
--- a/src/core/mocks/context.ts
+++ b/src/core/mocks/context.ts
@ -0,0 +1,19 @@
+import {logger, Logger} from './logger';
+
+export class Context {
+    readonly logger: Logger = logger;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    readonly _cache: {[key: string]: Promise<any>} = {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    readonly cache: any;
+
+    constructor() {
+        this.cache = {
+            addImage: jest.fn().mockImplementation((src: string): Promise<void> => {
+                const result = Promise.resolve();
+                this._cache[src] = result;
+                return result;
+            })
+        };
+    }
+}
--- a/src/core/mocks/logger.ts
+++ b/src/core/mocks/logger.ts
@ -19,4 +19,4 @@ export class Logger {
    error(): void {}
 }

-const logger = new Logger();
+export const logger = new Logger();
--- a/src/core/tests/cache-storage.ts
+++ b/src/core/tests/cache-storage.ts
@ -1,7 +1,8 @@
 import {deepStrictEqual, fail} from 'assert';
 import {FEATURES} from '../features';
 import {CacheStorage} from '../cache-storage';
-import {Logger} from '../logger';
+import {Context} from '../context';
+import {Bounds} from '../../css/layout/bounds';

 const proxy = 'http://example.com/proxy';

@ -35,14 +36,18 @@ const createMockContext = (origin: string, opts = {}) => {
    };

    CacheStorage.setContext(context as Window);
-    Logger.create({id: 'test', enabled: false});
-    return CacheStorage.create('test', {
-        imageTimeout: 0,
-        useCORS: false,
-        allowTaint: false,
-        proxy,
-        ...opts
-    });
+
+    return new Context(
+        {
+            logging: false,
+            imageTimeout: 0,
+            useCORS: false,
+            allowTaint: false,
+            proxy,
+            ...opts
+        },
+        new Bounds(0, 0, 0, 0)
+    );
 };

 const images: ImageMock[] = [];
@ -121,7 +126,7 @@ describe('cache-storage', () => {
        images.splice(0, images.length);
    });
    it('addImage adds images to cache', async () => {
-        const cache = createMockContext('http://example.com', {proxy: null});
+        const {cache} = createMockContext('http://example.com', {proxy: null});
        await cache.addImage('http://example.com/test.jpg');
        await cache.addImage('http://example.com/test2.jpg');

@ -131,7 +136,7 @@ describe('cache-storage', () => {
    });

    it('addImage should not add duplicate entries', async () => {
-        const cache = createMockContext('http://example.com');
+        const {cache} = createMockContext('http://example.com');
        await cache.addImage('http://example.com/test.jpg');
        await cache.addImage('http://example.com/test.jpg');

@ -141,7 +146,7 @@ describe('cache-storage', () => {

    describe('svg', () => {
        it('should add svg images correctly', async () => {
-            const cache = createMockContext('http://example.com');
+            const {cache} = createMockContext('http://example.com');
            await cache.addImage('http://example.com/test.svg');
            await cache.addImage('http://example.com/test2.svg');

@ -152,7 +157,7 @@ describe('cache-storage', () => {

        it('should omit svg images if not supported', async () => {
            setFeatures({SUPPORT_SVG_DRAWING: false});
-            const cache = createMockContext('http://example.com');
+            const {cache} = createMockContext('http://example.com');
            await cache.addImage('http://example.com/test.svg');
            await cache.addImage('http://example.com/test2.svg');

@ -162,7 +167,7 @@ describe('cache-storage', () => {

    describe('cross-origin', () => {
        it('addImage should not add images it cannot load/render', async () => {
-            const cache = createMockContext('http://example.com', {
+            const {cache} = createMockContext('http://example.com', {
                proxy: undefined
            });
            await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
@ -170,7 +175,7 @@ describe('cache-storage', () => {
        });

        it('addImage should add images if tainting enabled', async () => {
-            const cache = createMockContext('http://example.com', {
+            const {cache} = createMockContext('http://example.com', {
                allowTaint: true,
                proxy: undefined
            });
@ -181,7 +186,7 @@ describe('cache-storage', () => {
        });

        it('addImage should add images if cors enabled', async () => {
-            const cache = createMockContext('http://example.com', {useCORS: true});
+            const {cache} = createMockContext('http://example.com', {useCORS: true});
            await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
            deepStrictEqual(images.length, 1);
            deepStrictEqual(images[0].src, 'http://html2canvas.hertzen.com/test.jpg');
@ -191,7 +196,7 @@ describe('cache-storage', () => {
        it('addImage should not add images if cors enabled but not supported', async () => {
            setFeatures({SUPPORT_CORS_IMAGES: false});

-            const cache = createMockContext('http://example.com', {
+            const {cache} = createMockContext('http://example.com', {
                useCORS: true,
                proxy: undefined
            });
@ -200,7 +205,7 @@ describe('cache-storage', () => {
        });

        it('addImage should not add images to proxy if cors enabled', async () => {
-            const cache = createMockContext('http://example.com', {useCORS: true});
+            const {cache} = createMockContext('http://example.com', {useCORS: true});
            await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
            deepStrictEqual(images.length, 1);
            deepStrictEqual(images[0].src, 'http://html2canvas.hertzen.com/test.jpg');
@ -208,7 +213,7 @@ describe('cache-storage', () => {
        });

        it('addImage should use proxy ', async () => {
-            const cache = createMockContext('http://example.com');
+            const {cache} = createMockContext('http://example.com');
            await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
            deepStrictEqual(xhr.length, 1);
            deepStrictEqual(
@ -222,7 +227,7 @@ describe('cache-storage', () => {
        });

        it('proxy should respect imageTimeout', async () => {
-            const cache = createMockContext('http://example.com', {
+            const {cache} = createMockContext('http://example.com', {
                imageTimeout: 10
            });
            await cache.addImage('http://html2canvas.hertzen.com/test.jpg');
@ -244,7 +249,7 @@ describe('cache-storage', () => {
    });

    it('match should return cache entry', async () => {
-        const cache = createMockContext('http://example.com');
+        const {cache} = createMockContext('http://example.com');
        await cache.addImage('http://example.com/test.jpg');

        if (images[0].onload) {
@ -257,7 +262,7 @@ describe('cache-storage', () => {
    });

    it('image should respect imageTimeout', async () => {
-        const cache = createMockContext('http://example.com', {imageTimeout: 10});
+        const {cache} = createMockContext('http://example.com', {imageTimeout: 10});
        cache.addImage('http://example.com/test.jpg');

        try {
--- a/src/core/cache-storage.ts
+++ b/src/core/cache-storage.ts
@ -1,28 +1,9 @@
 import {FEATURES} from './features';
-import {Logger} from './logger';
+import {Context} from './context';

 export class CacheStorage {
-    private static _caches: {[key: string]: Cache} = {};
    private static _link?: HTMLAnchorElement;
    private static _origin = 'about:blank';
-    private static _current: Cache | null = null;
-
-    static create(name: string, options: ResourceOptions): Cache {
-        return (CacheStorage._caches[name] = new Cache(name, options));
-    }
-
-    static destroy(name: string): void {
-        delete CacheStorage._caches[name];
-    }
-
-    static open(name: string): Cache {
-        const cache = CacheStorage._caches[name];
-        if (typeof cache !== 'undefined') {
-            return cache;
-        }
-
-        throw new Error(`Cache with key "${name}" not found`);
-    }

    static getOrigin(url: string): string {
        const link = CacheStorage._link;
@ -43,22 +24,6 @@ export class CacheStorage {
        CacheStorage._link = window.document.createElement('a');
        CacheStorage._origin = CacheStorage.getOrigin(window.location.href);
    }
-
-    static getInstance(): Cache {
-        const current = CacheStorage._current;
-        if (current === null) {
-            throw new Error(`No cache instance attached`);
-        }
-        return current;
-    }
-
-    static attachInstance(cache: Cache): void {
-        CacheStorage._current = cache;
-    }
-
-    static detachInstance(): void {
-        CacheStorage._current = null;
-    }
 }

 export interface ResourceOptions {
@ -70,15 +35,9 @@ export interface ResourceOptions {

 export class Cache {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    private readonly _cache: {[key: string]: Promise<any>};
-    private readonly _options: ResourceOptions;
-    private readonly id: string;
+    private readonly _cache: {[key: string]: Promise<any>} = {};

-    constructor(id: string, options: ResourceOptions) {
-        this.id = id;
-        this._options = options;
-        this._cache = {};
-    }
+    constructor(private readonly context: Context, private readonly _options: ResourceOptions) {}

    addImage(src: string): Promise<void> {
        const result = Promise.resolve();
@ -108,10 +67,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;
        }

@ -120,7 +87,7 @@ export class Cache {
            src = await this.proxy(src);
        }

-        Logger.getInstance(this.id).debug(`Added image ${key.substring(0, 256)}`);
+        this.context.logger.debug(`Added image ${key.substring(0, 256)}`);

        return await new Promise((resolve, reject) => {
            const img = new Image();
--- a/src/core/context.ts
+++ b/src/core/context.ts
@ -0,0 +1,21 @@
+import {Logger} from './logger';
+import {Cache, ResourceOptions} from './cache-storage';
+import {Bounds} from '../css/layout/bounds';
+
+export type ContextOptions = {
+    logging: boolean;
+    cache?: Cache;
+} & ResourceOptions;
+
+export class Context {
+    private readonly instanceName = `#${Context.instanceCount++}`;
+    readonly logger: Logger;
+    readonly cache: Cache;
+
+    private static instanceCount = 1;
+
+    constructor(options: ContextOptions, public windowBounds: Bounds) {
+        this.logger = new Logger({id: this.instanceName, enabled: options.logging});
+        this.cache = options.cache ?? new Cache(this, options);
+    }
+}
--- a/src/core/debugger.ts
+++ b/src/core/debugger.ts
@ -0,0 +1,29 @@
+const elementDebuggerAttribute = 'data-html2canvas-debug';
+export const enum DebuggerType {
+    NONE,
+    ALL,
+    CLONE,
+    PARSE,
+    RENDER
+}
+
+const getElementDebugType = (element: Element): DebuggerType => {
+    const attribute = element.getAttribute(elementDebuggerAttribute);
+    switch (attribute) {
+        case 'all':
+            return DebuggerType.ALL;
+        case 'clone':
+            return DebuggerType.CLONE;
+        case 'parse':
+            return DebuggerType.PARSE;
+        case 'render':
+            return DebuggerType.RENDER;
+        default:
+            return DebuggerType.NONE;
+    }
+};
+
+export const isDebugging = (element: Element, type: Omit<DebuggerType, DebuggerType.NONE>): boolean => {
+    const elementType = getElementDebugType(element);
+    return elementType === DebuggerType.ALL || type === elementType;
+};
--- a/src/core/features.ts
+++ b/src/core/features.ts
@ -1,3 +1,5 @@
+import {fromCodePoint, toCodePoints} from 'css-line-break';
+
 const testRangeBounds = (document: Document) => {
    const TEST_HEIGHT = 123;

@ -22,6 +24,45 @@ const testRangeBounds = (document: Document) => {
    return false;
 };

+const testIOSLineBreak = (document: Document) => {
+    const testElement = document.createElement('boundtest');
+    testElement.style.width = '50px';
+    testElement.style.display = 'block';
+    testElement.style.fontSize = '12px';
+    testElement.style.letterSpacing = '0px';
+    testElement.style.wordSpacing = '0px';
+    document.body.appendChild(testElement);
+    const range = document.createRange();
+
+    testElement.innerHTML = typeof ''.repeat === 'function' ? '&#128104;'.repeat(10) : '';
+
+    const node = testElement.firstChild as Text;
+
+    const textList = toCodePoints(node.data).map((i) => fromCodePoint(i));
+    let offset = 0;
+    let prev: DOMRect = {} as DOMRect;
+
+    // ios 13 does not handle range getBoundingClientRect line changes correctly #2177
+    const supports = textList.every((text, i) => {
+        range.setStart(node, offset);
+        range.setEnd(node, offset + text.length);
+        const rect = range.getBoundingClientRect();
+
+        offset += text.length;
+        const boundAhead = rect.x > prev.x || rect.y > prev.y;
+
+        prev = rect;
+        if (i === 0) {
+            return true;
+        }
+
+        return boundAhead;
+    });
+
+    document.body.removeChild(testElement);
+    return supports;
+};
+
 const testCORS = (): boolean => typeof new Image().crossOrigin !== 'undefined';

 const testResponseType = (): boolean => typeof new XMLHttpRequest().responseType === 'string';
@ -132,6 +173,12 @@ export const FEATURES = {
        Object.defineProperty(FEATURES, 'SUPPORT_RANGE_BOUNDS', {value});
        return value;
    },
+    get SUPPORT_WORD_BREAKING(): boolean {
+        'use strict';
+        const value = FEATURES.SUPPORT_RANGE_BOUNDS && testIOSLineBreak(document);
+        Object.defineProperty(FEATURES, 'SUPPORT_WORD_BREAKING', {value});
+        return value;
+    },
    get SUPPORT_SVG_DRAWING(): boolean {
        'use strict';
        const value = testSVG(document);
--- a/src/core/logger.ts
+++ b/src/core/logger.ts
@ -33,22 +33,6 @@ export class Logger {
        return Date.now() - this.start;
    }

-    static create(options: LoggerOptions): void {
-        Logger.instances[options.id] = new Logger(options);
-    }
-
-    static destroy(id: string): void {
-        delete Logger.instances[id];
-    }
-
-    static getInstance(id: string): Logger {
-        const instance = Logger.instances[id];
-        if (typeof instance === 'undefined') {
-            throw new Error(`No logger instance found with id ${id}`);
-        }
-        return instance;
-    }
-
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    info(...args: unknown[]): void {
        if (this.enabled) {
@ -60,6 +44,19 @@ export class Logger {
        }
    }

+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    warn(...args: unknown[]): void {
+        if (this.enabled) {
+            // eslint-disable-next-line no-console
+            if (typeof window !== 'undefined' && window.console && typeof console.warn === 'function') {
+                // eslint-disable-next-line no-console
+                console.warn(this.id, `${this.getTime()}ms`, ...args);
+            } else {
+                this.info(...args);
+            }
+        }
+    }
+
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    error(...args: unknown[]): void {
        if (this.enabled) {
--- a/src/css/IPropertyDescriptor.ts
+++ b/src/css/IPropertyDescriptor.ts
@ -1,7 +1,8 @@
 import {CSSValue} from './syntax/parser';
-import {CSSTypes} from './types/index';
+import {CSSTypes} from './types';
+import {Context} from '../core/context';

-export enum PropertyDescriptorParsingType {
+export const enum PropertyDescriptorParsingType {
    VALUE,
    LIST,
    IDENT_VALUE,
@ -18,7 +19,7 @@ export interface IPropertyDescriptor {

 export interface IPropertyIdentValueDescriptor<T> extends IPropertyDescriptor {
    type: PropertyDescriptorParsingType.IDENT_VALUE;
-    parse: (token: string) => T;
+    parse: (context: Context, token: string) => T;
 }

 export interface IPropertyTypeValueDescriptor extends IPropertyDescriptor {
@ -28,12 +29,12 @@ export interface IPropertyTypeValueDescriptor extends IPropertyDescriptor {

 export interface IPropertyValueDescriptor<T> extends IPropertyDescriptor {
    type: PropertyDescriptorParsingType.VALUE;
-    parse: (token: CSSValue) => T;
+    parse: (context: Context, token: CSSValue) => T;
 }

 export interface IPropertyListDescriptor<T> extends IPropertyDescriptor {
    type: PropertyDescriptorParsingType.LIST;
-    parse: (tokens: CSSValue[]) => T;
+    parse: (context: Context, tokens: CSSValue[]) => T;
 }

 export interface IPropertyTokenValueDescriptor extends IPropertyDescriptor {
--- a/src/css/ITypeDescriptor.ts
+++ b/src/css/ITypeDescriptor.ts
@ -1,6 +1,7 @@
 import {CSSValue} from './syntax/parser';
+import {Context} from '../core/context';

 export interface ITypeDescriptor<T> {
    name: string;
-    parse: (value: CSSValue) => T;
+    parse: (context: Context, value: CSSValue) => T;
 }
--- a/src/css/index.ts
+++ b/src/css/index.ts
@ -31,6 +31,7 @@ import {
    borderTopWidth
 } from './property-descriptors/border-width';
 import {color} from './property-descriptors/color';
+import {direction} from './property-descriptors/direction';
 import {display, DISPLAY} from './property-descriptors/display';
 import {float, FLOAT} from './property-descriptors/float';
 import {letterSpacing} from './property-descriptors/letter-spacing';
@ -57,6 +58,7 @@ import {Tokenizer} from './syntax/tokenizer';
 import {Color, color as colorType, isTransparent} from './types/color';
 import {angle} from './types/angle';
 import {image} from './types/image';
+import {time} from './types/time';
 import {opacity} from './property-descriptors/opacity';
 import {textDecorationColor} from './property-descriptors/text-decoration-color';
 import {textDecorationLine} from './property-descriptors/text-decoration-line';
@ -71,10 +73,16 @@ import {contains} from '../core/bitwise';
 import {content} from './property-descriptors/content';
 import {counterIncrement} from './property-descriptors/counter-increment';
 import {counterReset} from './property-descriptors/counter-reset';
+import {duration} from './property-descriptors/duration';
 import {quotes} from './property-descriptors/quotes';
 import {boxShadow} from './property-descriptors/box-shadow';
+import {paintOrder} from './property-descriptors/paint-order';
+import {webkitTextStrokeColor} from './property-descriptors/webkit-text-stroke-color';
+import {webkitTextStrokeWidth} from './property-descriptors/webkit-text-stroke-width';
+import {Context} from '../core/context';

 export class CSSParsedDeclaration {
+    animationDuration: ReturnType<typeof duration.parse>;
    backgroundClip: ReturnType<typeof backgroundClip.parse>;
    backgroundColor: Color;
    backgroundImage: ReturnType<typeof backgroundImage.parse>;
@ -100,6 +108,7 @@ export class CSSParsedDeclaration {
    borderLeftWidth: ReturnType<typeof borderLeftWidth.parse>;
    boxShadow: ReturnType<typeof boxShadow.parse>;
    color: Color;
+    direction: ReturnType<typeof direction.parse>;
    display: ReturnType<typeof display.parse>;
    float: ReturnType<typeof float.parse>;
    fontFamily: ReturnType<typeof fontFamily.parse>;
@ -125,6 +134,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,75 +144,87 @@ export class CSSParsedDeclaration {
    transform: ReturnType<typeof transform.parse>;
    transformOrigin: ReturnType<typeof transformOrigin.parse>;
    visibility: ReturnType<typeof visibility.parse>;
+    webkitTextStrokeColor: Color;
+    webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>;
    wordBreak: ReturnType<typeof wordBreak.parse>;
    zIndex: ReturnType<typeof zIndex.parse>;

-    constructor(declaration: CSSStyleDeclaration) {
-        this.backgroundClip = parse(backgroundClip, declaration.backgroundClip);
-        this.backgroundColor = parse(backgroundColor, declaration.backgroundColor);
-        this.backgroundImage = parse(backgroundImage, declaration.backgroundImage);
-        this.backgroundOrigin = parse(backgroundOrigin, declaration.backgroundOrigin);
-        this.backgroundPosition = parse(backgroundPosition, declaration.backgroundPosition);
-        this.backgroundRepeat = parse(backgroundRepeat, declaration.backgroundRepeat);
-        this.backgroundSize = parse(backgroundSize, declaration.backgroundSize);
-        this.borderTopColor = parse(borderTopColor, declaration.borderTopColor);
-        this.borderRightColor = parse(borderRightColor, declaration.borderRightColor);
-        this.borderBottomColor = parse(borderBottomColor, declaration.borderBottomColor);
-        this.borderLeftColor = parse(borderLeftColor, declaration.borderLeftColor);
-        this.borderTopLeftRadius = parse(borderTopLeftRadius, declaration.borderTopLeftRadius);
-        this.borderTopRightRadius = parse(borderTopRightRadius, declaration.borderTopRightRadius);
-        this.borderBottomRightRadius = parse(borderBottomRightRadius, declaration.borderBottomRightRadius);
-        this.borderBottomLeftRadius = parse(borderBottomLeftRadius, declaration.borderBottomLeftRadius);
-        this.borderTopStyle = parse(borderTopStyle, declaration.borderTopStyle);
-        this.borderRightStyle = parse(borderRightStyle, declaration.borderRightStyle);
-        this.borderBottomStyle = parse(borderBottomStyle, declaration.borderBottomStyle);
-        this.borderLeftStyle = parse(borderLeftStyle, declaration.borderLeftStyle);
-        this.borderTopWidth = parse(borderTopWidth, declaration.borderTopWidth);
-        this.borderRightWidth = parse(borderRightWidth, declaration.borderRightWidth);
-        this.borderBottomWidth = parse(borderBottomWidth, declaration.borderBottomWidth);
-        this.borderLeftWidth = parse(borderLeftWidth, declaration.borderLeftWidth);
-        this.boxShadow = parse(boxShadow, declaration.boxShadow);
-        this.color = parse(color, declaration.color);
-        this.display = parse(display, declaration.display);
-        this.float = parse(float, declaration.cssFloat);
-        this.fontFamily = parse(fontFamily, declaration.fontFamily);
-        this.fontSize = parse(fontSize, declaration.fontSize);
-        this.fontStyle = parse(fontStyle, declaration.fontStyle);
-        this.fontVariant = parse(fontVariant, declaration.fontVariant);
-        this.fontWeight = parse(fontWeight, declaration.fontWeight);
-        this.letterSpacing = parse(letterSpacing, declaration.letterSpacing);
-        this.lineBreak = parse(lineBreak, declaration.lineBreak);
-        this.lineHeight = parse(lineHeight, declaration.lineHeight);
-        this.listStyleImage = parse(listStyleImage, declaration.listStyleImage);
-        this.listStylePosition = parse(listStylePosition, declaration.listStylePosition);
-        this.listStyleType = parse(listStyleType, declaration.listStyleType);
-        this.marginTop = parse(marginTop, declaration.marginTop);
-        this.marginRight = parse(marginRight, declaration.marginRight);
-        this.marginBottom = parse(marginBottom, declaration.marginBottom);
-        this.marginLeft = parse(marginLeft, declaration.marginLeft);
-        this.opacity = parse(opacity, declaration.opacity);
-        const overflowTuple = parse(overflow, declaration.overflow);
+    constructor(context: Context, declaration: CSSStyleDeclaration) {
+        this.animationDuration = parse(context, duration, declaration.animationDuration);
+        this.backgroundClip = parse(context, backgroundClip, declaration.backgroundClip);
+        this.backgroundColor = parse(context, backgroundColor, declaration.backgroundColor);
+        this.backgroundImage = parse(context, backgroundImage, declaration.backgroundImage);
+        this.backgroundOrigin = parse(context, backgroundOrigin, declaration.backgroundOrigin);
+        this.backgroundPosition = parse(context, backgroundPosition, declaration.backgroundPosition);
+        this.backgroundRepeat = parse(context, backgroundRepeat, declaration.backgroundRepeat);
+        this.backgroundSize = parse(context, backgroundSize, declaration.backgroundSize);
+        this.borderTopColor = parse(context, borderTopColor, declaration.borderTopColor);
+        this.borderRightColor = parse(context, borderRightColor, declaration.borderRightColor);
+        this.borderBottomColor = parse(context, borderBottomColor, declaration.borderBottomColor);
+        this.borderLeftColor = parse(context, borderLeftColor, declaration.borderLeftColor);
+        this.borderTopLeftRadius = parse(context, borderTopLeftRadius, declaration.borderTopLeftRadius);
+        this.borderTopRightRadius = parse(context, borderTopRightRadius, declaration.borderTopRightRadius);
+        this.borderBottomRightRadius = parse(context, borderBottomRightRadius, declaration.borderBottomRightRadius);
+        this.borderBottomLeftRadius = parse(context, borderBottomLeftRadius, declaration.borderBottomLeftRadius);
+        this.borderTopStyle = parse(context, borderTopStyle, declaration.borderTopStyle);
+        this.borderRightStyle = parse(context, borderRightStyle, declaration.borderRightStyle);
+        this.borderBottomStyle = parse(context, borderBottomStyle, declaration.borderBottomStyle);
+        this.borderLeftStyle = parse(context, borderLeftStyle, declaration.borderLeftStyle);
+        this.borderTopWidth = parse(context, borderTopWidth, declaration.borderTopWidth);
+        this.borderRightWidth = parse(context, borderRightWidth, declaration.borderRightWidth);
+        this.borderBottomWidth = parse(context, borderBottomWidth, declaration.borderBottomWidth);
+        this.borderLeftWidth = parse(context, borderLeftWidth, declaration.borderLeftWidth);
+        this.boxShadow = parse(context, boxShadow, declaration.boxShadow);
+        this.color = parse(context, color, declaration.color);
+        this.direction = parse(context, direction, declaration.direction);
+        this.display = parse(context, display, declaration.display);
+        this.float = parse(context, float, declaration.cssFloat);
+        this.fontFamily = parse(context, fontFamily, declaration.fontFamily);
+        this.fontSize = parse(context, fontSize, declaration.fontSize);
+        this.fontStyle = parse(context, fontStyle, declaration.fontStyle);
+        this.fontVariant = parse(context, fontVariant, declaration.fontVariant);
+        this.fontWeight = parse(context, fontWeight, declaration.fontWeight);
+        this.letterSpacing = parse(context, letterSpacing, declaration.letterSpacing);
+        this.lineBreak = parse(context, lineBreak, declaration.lineBreak);
+        this.lineHeight = parse(context, lineHeight, declaration.lineHeight);
+        this.listStyleImage = parse(context, listStyleImage, declaration.listStyleImage);
+        this.listStylePosition = parse(context, listStylePosition, declaration.listStylePosition);
+        this.listStyleType = parse(context, listStyleType, declaration.listStyleType);
+        this.marginTop = parse(context, marginTop, declaration.marginTop);
+        this.marginRight = parse(context, marginRight, declaration.marginRight);
+        this.marginBottom = parse(context, marginBottom, declaration.marginBottom);
+        this.marginLeft = parse(context, marginLeft, declaration.marginLeft);
+        this.opacity = parse(context, opacity, declaration.opacity);
+        const overflowTuple = parse(context, overflow, declaration.overflow);
        this.overflowX = overflowTuple[0];
        this.overflowY = overflowTuple[overflowTuple.length > 1 ? 1 : 0];
-        this.overflowWrap = parse(overflowWrap, declaration.overflowWrap);
-        this.paddingTop = parse(paddingTop, declaration.paddingTop);
-        this.paddingRight = parse(paddingRight, declaration.paddingRight);
-        this.paddingBottom = parse(paddingBottom, declaration.paddingBottom);
-        this.paddingLeft = parse(paddingLeft, declaration.paddingLeft);
-        this.position = parse(position, declaration.position);
-        this.textAlign = parse(textAlign, declaration.textAlign);
-        this.textDecorationColor = parse(textDecorationColor, declaration.textDecorationColor ?? declaration.color);
+        this.overflowWrap = parse(context, overflowWrap, declaration.overflowWrap);
+        this.paddingTop = parse(context, paddingTop, declaration.paddingTop);
+        this.paddingRight = parse(context, paddingRight, declaration.paddingRight);
+        this.paddingBottom = parse(context, paddingBottom, declaration.paddingBottom);
+        this.paddingLeft = parse(context, paddingLeft, declaration.paddingLeft);
+        this.paintOrder = parse(context, paintOrder, declaration.paintOrder);
+        this.position = parse(context, position, declaration.position);
+        this.textAlign = parse(context, textAlign, declaration.textAlign);
+        this.textDecorationColor = parse(
+            context,
+            textDecorationColor,
+            declaration.textDecorationColor ?? declaration.color
+        );
        this.textDecorationLine = parse(
+            context,
            textDecorationLine,
            declaration.textDecorationLine ?? declaration.textDecoration
        );
-        this.textShadow = parse(textShadow, declaration.textShadow);
-        this.textTransform = parse(textTransform, declaration.textTransform);
-        this.transform = parse(transform, declaration.transform);
-        this.transformOrigin = parse(transformOrigin, declaration.transformOrigin);
-        this.visibility = parse(visibility, declaration.visibility);
-        this.wordBreak = parse(wordBreak, declaration.wordBreak);
-        this.zIndex = parse(zIndex, declaration.zIndex);
+        this.textShadow = parse(context, textShadow, declaration.textShadow);
+        this.textTransform = parse(context, textTransform, declaration.textTransform);
+        this.transform = parse(context, transform, declaration.transform);
+        this.transformOrigin = parse(context, transformOrigin, declaration.transformOrigin);
+        this.visibility = parse(context, visibility, declaration.visibility);
+        this.webkitTextStrokeColor = parse(context, webkitTextStrokeColor, declaration.webkitTextStrokeColor);
+        this.webkitTextStrokeWidth = parse(context, webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
+        this.wordBreak = parse(context, wordBreak, declaration.wordBreak);
+        this.zIndex = parse(context, zIndex, declaration.zIndex);
    }

    isVisible(): boolean {
@ -245,9 +267,9 @@ export class CSSParsedPseudoDeclaration {
    content: ReturnType<typeof content.parse>;
    quotes: ReturnType<typeof quotes.parse>;

-    constructor(declaration: CSSStyleDeclaration) {
-        this.content = parse(content, declaration.content);
-        this.quotes = parse(quotes, declaration.quotes);
+    constructor(context: Context, declaration: CSSStyleDeclaration) {
+        this.content = parse(context, content, declaration.content);
+        this.quotes = parse(context, quotes, declaration.quotes);
    }
 }

@ -255,14 +277,14 @@ export class CSSParsedCounterDeclaration {
    counterIncrement: ReturnType<typeof counterIncrement.parse>;
    counterReset: ReturnType<typeof counterReset.parse>;

-    constructor(declaration: CSSStyleDeclaration) {
-        this.counterIncrement = parse(counterIncrement, declaration.counterIncrement);
-        this.counterReset = parse(counterReset, declaration.counterReset);
+    constructor(context: Context, declaration: CSSStyleDeclaration) {
+        this.counterIncrement = parse(context, counterIncrement, declaration.counterIncrement);
+        this.counterReset = parse(context, counterReset, declaration.counterReset);
    }
 }

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const parse = (descriptor: CSSPropertyDescriptor<any>, style?: string | null) => {
+const parse = (context: Context, descriptor: CSSPropertyDescriptor<any>, style?: string | null) => {
    const tokenizer = new Tokenizer();
    const value = style !== null && typeof style !== 'undefined' ? style.toString() : descriptor.initialValue;
    tokenizer.write(value);
@ -270,27 +292,29 @@ const parse = (descriptor: CSSPropertyDescriptor<any>, style?: string | null) =>
    switch (descriptor.type) {
        case PropertyDescriptorParsingType.IDENT_VALUE:
            const token = parser.parseComponentValue();
-            return descriptor.parse(isIdentToken(token) ? token.value : descriptor.initialValue);
+            return descriptor.parse(context, isIdentToken(token) ? token.value : descriptor.initialValue);
        case PropertyDescriptorParsingType.VALUE:
-            return descriptor.parse(parser.parseComponentValue());
+            return descriptor.parse(context, parser.parseComponentValue());
        case PropertyDescriptorParsingType.LIST:
-            return descriptor.parse(parser.parseComponentValues());
+            return descriptor.parse(context, parser.parseComponentValues());
        case PropertyDescriptorParsingType.TOKEN_VALUE:
            return parser.parseComponentValue();
        case PropertyDescriptorParsingType.TYPE_VALUE:
            switch (descriptor.format) {
                case 'angle':
-                    return angle.parse(parser.parseComponentValue());
+                    return angle.parse(context, parser.parseComponentValue());
                case 'color':
-                    return colorType.parse(parser.parseComponentValue());
+                    return colorType.parse(context, parser.parseComponentValue());
                case 'image':
-                    return image.parse(parser.parseComponentValue());
+                    return image.parse(context, parser.parseComponentValue());
                case 'length':
                    const length = parser.parseComponentValue();
                    return isLength(length) ? length : ZERO_LENGTH;
                case 'length-percentage':
                    const value = parser.parseComponentValue();
                    return isLengthPercentage(value) ? value : ZERO_LENGTH;
+                case 'time':
+                    return time.parse(context, parser.parseComponentValue());
            }
            break;
    }
--- a/src/css/layout/bounds.ts
+++ b/src/css/layout/bounds.ts
@ -1,27 +1,38 @@
-export class Bounds {
-    readonly top: number;
-    readonly left: number;
-    readonly width: number;
-    readonly height: number;
+import {Context} from '../../core/context';

-    constructor(x: number, y: number, w: number, h: number) {
-        this.left = x;
-        this.top = y;
-        this.width = w;
-        this.height = h;
-    }
+export class Bounds {
+    constructor(readonly left: number, readonly top: number, readonly width: number, readonly height: number) {}

    add(x: number, y: number, w: number, h: number): Bounds {
        return new Bounds(this.left + x, this.top + y, this.width + w, this.height + h);
    }

-    static fromClientRect(clientRect: ClientRect): Bounds {
-        return new Bounds(clientRect.left, clientRect.top, clientRect.width, clientRect.height);
+    static fromClientRect(context: Context, clientRect: ClientRect): Bounds {
+        return new Bounds(
+            clientRect.left + context.windowBounds.left,
+            clientRect.top + context.windowBounds.top,
+            clientRect.width,
+            clientRect.height
+        );
    }
+
+    static fromDOMRectList(context: Context, domRectList: DOMRectList): Bounds {
+        const domRect = domRectList[0];
+        return domRect
+            ? new Bounds(
+                  domRect.x + context.windowBounds.left,
+                  domRect.y + context.windowBounds.top,
+                  domRect.width,
+                  domRect.height
+              )
+            : Bounds.EMPTY;
+    }
+
+    static EMPTY = new Bounds(0, 0, 0, 0);
 }

-export const parseBounds = (node: Element): Bounds => {
-    return Bounds.fromClientRect(node.getBoundingClientRect());
+export const parseBounds = (context: Context, node: Element): Bounds => {
+    return Bounds.fromClientRect(context, node.getBoundingClientRect());
 };

 export const parseDocumentSize = (document: Document): Bounds => {
--- a/src/css/layout/text.ts
+++ b/src/css/layout/text.ts
@ -1,8 +1,10 @@
 import {OVERFLOW_WRAP} from '../property-descriptors/overflow-wrap';
 import {CSSParsedDeclaration} from '../index';
 import {fromCodePoint, LineBreaker, toCodePoints} from 'css-line-break';
+import {splitGraphemes} from 'text-segmentation';
 import {Bounds, parseBounds} from './bounds';
 import {FEATURES} from '../../core/features';
+import {Context} from '../../core/context';

 export class TextBounds {
    readonly text: string;
@ -14,17 +16,43 @@ export class TextBounds {
    }
 }

-export const parseTextBounds = (value: string, styles: CSSParsedDeclaration, node: Text): TextBounds[] => {
+export const parseTextBounds = (
+    context: Context,
+    value: string,
+    styles: CSSParsedDeclaration,
+    node: Text
+): TextBounds[] => {
    const textList = breakText(value, styles);
    const textBounds: TextBounds[] = [];
    let offset = 0;
    textList.forEach((text) => {
        if (styles.textDecorationLine.length || text.trim().length > 0) {
            if (FEATURES.SUPPORT_RANGE_BOUNDS) {
-                textBounds.push(new TextBounds(text, getRangeBounds(node, offset, text.length)));
+                if (!FEATURES.SUPPORT_WORD_BREAKING) {
+                    const rects = createRange(node, offset, text.length).getClientRects();
+                    if (rects.length > 1) {
+                        let graphemeOffset = 0;
+                        splitGraphemes(text).forEach((grapheme) => {
+                            textBounds.push(
+                                new TextBounds(
+                                    grapheme,
+                                    Bounds.fromDOMRectList(
+                                        context,
+                                        createRange(node, graphemeOffset + offset, grapheme.length).getClientRects()
+                                    )
+                                )
+                            );
+                            graphemeOffset += grapheme.length;
+                        });
+                    } else {
+                        textBounds.push(new TextBounds(text, Bounds.fromDOMRectList(context, rects)));
+                    }
+                } else {
+                    textBounds.push(new TextBounds(text, getRangeBounds(context, node, offset, text.length)));
+                }
            } else {
                const replacementNode = node.splitText(text.length);
-                textBounds.push(new TextBounds(text, getWrapperBounds(node)));
+                textBounds.push(new TextBounds(text, getWrapperBounds(context, node)));
                node = replacementNode;
            }
        } else if (!FEATURES.SUPPORT_RANGE_BOUNDS) {
@ -36,7 +64,7 @@ export const parseTextBounds = (value: string, styles: CSSParsedDeclaration, nod
    return textBounds;
 };

-const getWrapperBounds = (node: Text): Bounds => {
+const getWrapperBounds = (context: Context, node: Text): Bounds => {
    const ownerDocument = node.ownerDocument;
    if (ownerDocument) {
        const wrapper = ownerDocument.createElement('html2canvaswrapper');
@ -44,7 +72,7 @@ const getWrapperBounds = (node: Text): Bounds => {
        const parentNode = node.parentNode;
        if (parentNode) {
            parentNode.replaceChild(wrapper, node);
-            const bounds = parseBounds(wrapper);
+            const bounds = parseBounds(context, wrapper);
            if (wrapper.firstChild) {
                parentNode.replaceChild(wrapper.firstChild, wrapper);
            }
@ -52,10 +80,10 @@ const getWrapperBounds = (node: Text): Bounds => {
        }
    }

-    return new Bounds(0, 0, 0, 0);
+    return Bounds.EMPTY;
 };

-const getRangeBounds = (node: Text, offset: number, length: number): Bounds => {
+const createRange = (node: Text, offset: number, length: number): Range => {
    const ownerDocument = node.ownerDocument;
    if (!ownerDocument) {
        throw new Error('Node has no owner document');
@ -63,13 +91,20 @@ const getRangeBounds = (node: Text, offset: number, length: number): Bounds => {
    const range = ownerDocument.createRange();
    range.setStart(node, offset);
    range.setEnd(node, offset + length);
-    return Bounds.fromClientRect(range.getBoundingClientRect());
+    return range;
+};
+
+const getRangeBounds = (context: Context, node: Text, offset: number, length: number): Bounds => {
+    return Bounds.fromClientRect(context, createRange(node, offset, length).getBoundingClientRect());
 };

 const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
-    return styles.letterSpacing !== 0 ? toCodePoints(value).map((i) => fromCodePoint(i)) : breakWords(value, styles);
+    return styles.letterSpacing !== 0 ? splitGraphemes(value) : 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 +116,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/background-tests.ts
+++ b/src/css/property-descriptors/tests/background-tests.ts
@ -5,27 +5,42 @@ import {CSSImageType} from '../../types/image';
 import {pack} from '../../types/color';
 import {deg} from '../../types/angle';

-jest.mock('../../../core/cache-storage');
+jest.mock('../../../core/context');
+import {Context} from '../../../core/context';
+
 jest.mock('../../../core/features');

-const backgroundImageParse = (value: string) => backgroundImage.parse(Parser.parseValues(value));
+const backgroundImageParse = (context: Context, value: string) =>
+    backgroundImage.parse(context, Parser.parseValues(value));

 describe('property-descriptors', () => {
+    let context: Context;
+    beforeEach(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        context = new Context({} as any, {} as any);
+    });
    describe('background-image', () => {
-        it('none', () => deepStrictEqual(backgroundImageParse('none'), []));
+        it('none', () => {
+            deepStrictEqual(backgroundImageParse(context, 'none'), []);
+            expect(context.cache.addImage).not.toHaveBeenCalled();
+        });

-        it('url(test.jpg), url(test2.jpg)', () =>
+        it('url(test.jpg), url(test2.jpg)', () => {
            deepStrictEqual(
-                backgroundImageParse('url(http://example.com/test.jpg), url(http://example.com/test2.jpg)'),
+                backgroundImageParse(context, 'url(http://example.com/test.jpg), url(http://example.com/test2.jpg)'),
                [
                    {url: 'http://example.com/test.jpg', type: CSSImageType.URL},
                    {url: 'http://example.com/test2.jpg', type: CSSImageType.URL}
                ]
-            ));
+            );
+            expect(context.cache.addImage).toHaveBeenCalledWith('http://example.com/test.jpg');
+            expect(context.cache.addImage).toHaveBeenCalledWith('http://example.com/test2.jpg');
+        });

        it(`linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://html2canvas.hertzen.com')`, () =>
            deepStrictEqual(
                backgroundImageParse(
+                    context,
                    `linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://html2canvas.hertzen.com')`
                ),
                [
--- a/src/css/property-descriptors/tests/font-family.ts
+++ b/src/css/property-descriptors/tests/font-family.ts
@ -1,8 +1,9 @@
 import {deepEqual} from 'assert';
 import {Parser} from '../../syntax/parser';
 import {fontFamily} from '../font-family';
+import {Context} from '../../../core/context';

-const fontFamilyParse = (value: string) => fontFamily.parse(Parser.parseValues(value));
+const fontFamilyParse = (value: string) => fontFamily.parse({} as Context, Parser.parseValues(value));

 describe('property-descriptors', () => {
    describe('font-family', () => {
--- a/src/css/property-descriptors/tests/paint-order.ts
+++ b/src/css/property-descriptors/tests/paint-order.ts
@ -0,0 +1,87 @@
+import {deepStrictEqual} from 'assert';
+import {Parser} from '../../syntax/parser';
+import {paintOrder, PAINT_ORDER_LAYER} from '../paint-order';
+import {Context} from '../../../core/context';
+
+const paintOrderParse = (value: string) => paintOrder.parse({} as Context, Parser.parseValues(value));
+
+describe('property-descriptors', () => {
+    describe('paint-order', () => {
+        it('none', () =>
+            deepStrictEqual(paintOrderParse('none'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('EMPTY', () =>
+            deepStrictEqual(paintOrderParse(''), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('other values', () =>
+            deepStrictEqual(paintOrderParse('other values'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('normal', () =>
+            deepStrictEqual(paintOrderParse('normal'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('stroke', () =>
+            deepStrictEqual(paintOrderParse('stroke'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('fill', () =>
+            deepStrictEqual(paintOrderParse('fill'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('markers', () =>
+            deepStrictEqual(paintOrderParse('markers'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE
+            ]));
+
+        it('stroke fill', () =>
+            deepStrictEqual(paintOrderParse('stroke fill'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('markers stroke', () =>
+            deepStrictEqual(paintOrderParse('markers stroke'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL
+            ]));
+
+        it('markers stroke fill', () =>
+            deepStrictEqual(paintOrderParse('markers stroke fill'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL
+            ]));
+
+        it('stroke fill markers', () =>
+            deepStrictEqual(paintOrderParse('stroke fill markers'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+    });
+});
--- a/src/css/property-descriptors/tests/text-shadow.ts
+++ b/src/css/property-descriptors/tests/text-shadow.ts
@ -4,9 +4,10 @@ import {color, COLORS} from '../../types/color';
 import {textShadow} from '../text-shadow';
 import {FLAG_INTEGER, DimensionToken, TokenType} from '../../syntax/tokenizer';
 import {ZERO_LENGTH} from '../../types/length-percentage';
+import {Context} from '../../../core/context';

-const textShadowParse = (value: string) => textShadow.parse(Parser.parseValues(value));
-const colorParse = (value: string) => color.parse(Parser.parseValue(value));
+const textShadowParse = (value: string) => textShadow.parse({} as Context, Parser.parseValues(value));
+const colorParse = (value: string) => color.parse({} as Context, Parser.parseValue(value));
 const dimension = (number: number, unit: string): DimensionToken => ({
    flags: FLAG_INTEGER,
    number,
--- a/src/css/property-descriptors/tests/transform-tests.ts
+++ b/src/css/property-descriptors/tests/transform-tests.ts
@ -1,7 +1,8 @@
 import {transform} from '../transform';
 import {Parser} from '../../syntax/parser';
 import {deepStrictEqual} from 'assert';
-const parseValue = (value: string) => transform.parse(Parser.parseValue(value));
+import {Context} from '../../../core/context';
+const parseValue = (value: string) => transform.parse({} as Context, Parser.parseValue(value));

 describe('property-descriptors', () => {
    describe('transform', () => {
--- a/src/css/property-descriptors/background-clip.ts
+++ b/src/css/property-descriptors/background-clip.ts
@ -1,5 +1,6 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';
 export enum BACKGROUND_CLIP {
    BORDER_BOX = 0,
    PADDING_BOX = 1,
@ -13,7 +14,7 @@ export const backgroundClip: IPropertyListDescriptor<BackgroundClip> = {
    initialValue: 'border-box',
    prefix: false,
    type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]): BackgroundClip => {
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundClip => {
        return tokens.map((token) => {
            if (isIdentToken(token)) {
                switch (token.value) {
--- a/src/css/property-descriptors/background-image.ts
+++ b/src/css/property-descriptors/background-image.ts
@ -2,13 +2,14 @@ import {TokenType} from '../syntax/tokenizer';
 import {ICSSImage, image, isSupportedImage} from '../types/image';
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, nonFunctionArgSeparator} from '../syntax/parser';
+import {Context} from '../../core/context';

 export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = {
    name: 'background-image',
    initialValue: 'none',
    type: PropertyDescriptorParsingType.LIST,
    prefix: false,
-    parse: (tokens: CSSValue[]) => {
+    parse: (context: Context, tokens: CSSValue[]) => {
        if (tokens.length === 0) {
            return [];
        }
@ -19,6 +20,8 @@ export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = {
            return [];
        }

-        return tokens.filter((value) => nonFunctionArgSeparator(value) && isSupportedImage(value)).map(image.parse);
+        return tokens
+            .filter((value) => nonFunctionArgSeparator(value) && isSupportedImage(value))
+            .map((value) => image.parse(context, value));
    }
 };
--- a/src/css/property-descriptors/background-origin.ts
+++ b/src/css/property-descriptors/background-origin.ts
@ -1,5 +1,6 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';

 export const enum BACKGROUND_ORIGIN {
    BORDER_BOX = 0,
@ -14,7 +15,7 @@ export const backgroundOrigin: IPropertyListDescriptor<BackgroundOrigin> = {
    initialValue: 'border-box',
    prefix: false,
    type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]): BackgroundOrigin => {
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundOrigin => {
        return tokens.map((token) => {
            if (isIdentToken(token)) {
                switch (token.value) {
--- a/src/css/property-descriptors/background-position.ts
+++ b/src/css/property-descriptors/background-position.ts
@ -1,6 +1,7 @@
 import {PropertyDescriptorParsingType, IPropertyListDescriptor} from '../IPropertyDescriptor';
 import {CSSValue, parseFunctionArgs} from '../syntax/parser';
 import {isLengthPercentage, LengthPercentageTuple, parseLengthPercentageTuple} from '../types/length-percentage';
+import {Context} from '../../core/context';
 export type BackgroundPosition = BackgroundImagePosition[];

 export type BackgroundImagePosition = LengthPercentageTuple;
@ -10,7 +11,7 @@ export const backgroundPosition: IPropertyListDescriptor<BackgroundPosition> = {
    initialValue: '0% 0%',
    type: PropertyDescriptorParsingType.LIST,
    prefix: false,
-    parse: (tokens: CSSValue[]): BackgroundPosition => {
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundPosition => {
        return parseFunctionArgs(tokens)
            .map((values: CSSValue[]) => values.filter(isLengthPercentage))
            .map(parseLengthPercentageTuple);
--- a/src/css/property-descriptors/background-repeat.ts
+++ b/src/css/property-descriptors/background-repeat.ts
@ -1,5 +1,6 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken, parseFunctionArgs} from '../syntax/parser';
+import {Context} from '../../core/context';
 export type BackgroundRepeat = BACKGROUND_REPEAT[];

 export enum BACKGROUND_REPEAT {
@ -14,7 +15,7 @@ export const backgroundRepeat: IPropertyListDescriptor<BackgroundRepeat> = {
    initialValue: 'repeat',
    prefix: false,
    type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]): BackgroundRepeat => {
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundRepeat => {
        return parseFunctionArgs(tokens)
            .map((values) =>
                values
--- a/src/css/property-descriptors/background-size.ts
+++ b/src/css/property-descriptors/background-size.ts
@ -2,6 +2,7 @@ import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IProper
 import {CSSValue, isIdentToken, parseFunctionArgs} from '../syntax/parser';
 import {isLengthPercentage, LengthPercentage} from '../types/length-percentage';
 import {StringValueToken} from '../syntax/tokenizer';
+import {Context} from '../../core/context';

 export enum BACKGROUND_SIZE {
    AUTO = 'auto',
@ -17,7 +18,7 @@ export const backgroundSize: IPropertyListDescriptor<BackgroundSize> = {
    initialValue: '0',
    prefix: false,
    type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]): BackgroundSize => {
+    parse: (_context: Context, tokens: CSSValue[]): BackgroundSize => {
        return parseFunctionArgs(tokens).map((values) => values.filter(isBackgroundSizeInfoToken));
    }
 };
--- a/src/css/property-descriptors/border-radius.ts
+++ b/src/css/property-descriptors/border-radius.ts
@ -1,6 +1,7 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue} from '../syntax/parser';
 import {isLengthPercentage, LengthPercentageTuple, parseLengthPercentageTuple} from '../types/length-percentage';
+import {Context} from '../../core/context';
 export type BorderRadius = LengthPercentageTuple;

 const borderRadiusForSide = (side: string): IPropertyListDescriptor<BorderRadius> => ({
@ -8,7 +9,8 @@ const borderRadiusForSide = (side: string): IPropertyListDescriptor<BorderRadius
    initialValue: '0 0',
    prefix: false,
    type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]): BorderRadius => parseLengthPercentageTuple(tokens.filter(isLengthPercentage))
+    parse: (_context: Context, tokens: CSSValue[]): BorderRadius =>
+        parseLengthPercentageTuple(tokens.filter(isLengthPercentage))
 });

 export const borderTopLeftRadius: IPropertyListDescriptor<BorderRadius> = borderRadiusForSide('top-left');
--- a/src/css/property-descriptors/border-style.ts
+++ b/src/css/property-descriptors/border-style.ts
@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum BORDER_STYLE {
    NONE = 0,
    SOLID = 1,
@ -12,7 +13,7 @@ const borderStyleForSide = (side: string): IPropertyIdentValueDescriptor<BORDER_
    initialValue: 'solid',
    prefix: false,
    type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (style: string): BORDER_STYLE => {
+    parse: (_context: Context, style: string): BORDER_STYLE => {
        switch (style) {
            case 'none':
                return BORDER_STYLE.NONE;
--- a/src/css/property-descriptors/border-width.ts
+++ b/src/css/property-descriptors/border-width.ts
@ -1,11 +1,12 @@
 import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isDimensionToken} from '../syntax/parser';
+import {Context} from '../../core/context';
 const borderWidthForSide = (side: string): IPropertyValueDescriptor<number> => ({
    name: `border-${side}-width`,
    initialValue: '0',
    type: PropertyDescriptorParsingType.VALUE,
    prefix: false,
-    parse: (token: CSSValue): number => {
+    parse: (_context: Context, token: CSSValue): number => {
        if (isDimensionToken(token)) {
            return token.number;
        }
--- a/src/css/property-descriptors/box-shadow.ts
+++ b/src/css/property-descriptors/box-shadow.ts
@ -3,6 +3,7 @@ import {CSSValue, isIdentWithValue, parseFunctionArgs} from '../syntax/parser';
 import {ZERO_LENGTH} from '../types/length-percentage';
 import {color, Color} from '../types/color';
 import {isLength, Length} from '../types/length';
+import {Context} from '../../core/context';

 export type BoxShadow = BoxShadowItem[];
 interface BoxShadowItem {
@ -19,7 +20,7 @@ export const boxShadow: IPropertyListDescriptor<BoxShadow> = {
    initialValue: 'none',
    type: PropertyDescriptorParsingType.LIST,
    prefix: false,
-    parse: (tokens: CSSValue[]): BoxShadow => {
+    parse: (context: Context, tokens: CSSValue[]): BoxShadow => {
        if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
            return [];
        }
@ -50,7 +51,7 @@ export const boxShadow: IPropertyListDescriptor<BoxShadow> = {
                    }
                    c++;
                } else {
-                    shadow.color = color.parse(token);
+                    shadow.color = color.parse(context, token);
                }
            }
            return shadow;
--- a/src/css/property-descriptors/content.ts
+++ b/src/css/property-descriptors/content.ts
@ -1,6 +1,7 @@
 import {TokenType} from '../syntax/tokenizer';
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue} from '../syntax/parser';
+import {Context} from '../../core/context';

 export type Content = CSSValue[];

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

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

 export interface COUNTER_RESET {
    counter: string;
@ -13,7 +14,7 @@ export const counterReset: IPropertyListDescriptor<CounterReset> = {
    initialValue: 'none',
    prefix: true,
    type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]) => {
+    parse: (_context: Context, tokens: CSSValue[]) => {
        if (tokens.length === 0) {
            return [];
        }
--- a/src/css/property-descriptors/direction.ts
+++ b/src/css/property-descriptors/direction.ts
@ -0,0 +1,23 @@
+import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
+
+export const enum DIRECTION {
+    LTR = 0,
+    RTL = 1
+}
+
+export const direction: IPropertyIdentValueDescriptor<DIRECTION> = {
+    name: 'direction',
+    initialValue: 'ltr',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, direction: string) => {
+        switch (direction) {
+            case 'rtl':
+                return DIRECTION.RTL;
+            case 'ltr':
+            default:
+                return DIRECTION.LTR;
+        }
+    }
+};
--- a/src/css/property-descriptors/display.ts
+++ b/src/css/property-descriptors/display.ts
@ -1,5 +1,6 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';
 export const enum DISPLAY {
    NONE = 0,
    BLOCK = 1 << 1,
@ -40,7 +41,7 @@ export const display: IPropertyListDescriptor<Display> = {
    initialValue: 'inline-block',
    prefix: false,
    type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]): Display => {
+    parse: (_context: Context, tokens: CSSValue[]): Display => {
        return tokens.filter(isIdentToken).reduce((bit, token) => {
            return bit | parseDisplayValue(token.value);
        }, DISPLAY.NONE);
--- a/src/css/property-descriptors/duration.ts
+++ b/src/css/property-descriptors/duration.ts
@ -0,0 +1,14 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
+import {CSSValue, isDimensionToken} from '../syntax/parser';
+import {time} from '../types/time';
+
+export const duration: IPropertyListDescriptor<number[]> = {
+    name: 'duration',
+    initialValue: '0s',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (context: Context, tokens: CSSValue[]) => {
+        return tokens.filter(isDimensionToken).map((token) => time.parse(context, token));
+    }
+};
--- a/src/css/property-descriptors/float.ts
+++ b/src/css/property-descriptors/float.ts
@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum FLOAT {
    NONE = 0,
    LEFT = 1,
@ -12,7 +13,7 @@ export const float: IPropertyIdentValueDescriptor<FLOAT> = {
    initialValue: 'none',
    prefix: false,
    type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (float: string) => {
+    parse: (_context: Context, float: string) => {
        switch (float) {
            case 'left':
                return FLOAT.LEFT;
--- a/src/css/property-descriptors/font-family.ts
+++ b/src/css/property-descriptors/font-family.ts
@ -1,6 +1,7 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue} from '../syntax/parser';
 import {TokenType} from '../syntax/tokenizer';
+import {Context} from '../../core/context';

 export type FONT_FAMILY = string;

@ -11,7 +12,7 @@ export const fontFamily: IPropertyListDescriptor<FontFamily> = {
    initialValue: '',
    prefix: false,
    type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]) => {
+    parse: (_context: Context, tokens: CSSValue[]) => {
        const accumulator: string[] = [];
        const results: string[] = [];
        tokens.forEach((token) => {
--- a/src/css/property-descriptors/font-style.ts
+++ b/src/css/property-descriptors/font-style.ts
@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum FONT_STYLE {
    NORMAL = 'normal',
    ITALIC = 'italic',
@ -10,7 +11,7 @@ export const fontStyle: IPropertyIdentValueDescriptor<FONT_STYLE> = {
    initialValue: 'normal',
    prefix: false,
    type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (overflow: string) => {
+    parse: (_context: Context, overflow: string) => {
        switch (overflow) {
            case 'oblique':
                return FONT_STYLE.OBLIQUE;
--- a/src/css/property-descriptors/font-variant.ts
+++ b/src/css/property-descriptors/font-variant.ts
@ -1,11 +1,12 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';
 export const fontVariant: IPropertyListDescriptor<string[]> = {
    name: 'font-variant',
    initialValue: 'none',
    type: PropertyDescriptorParsingType.LIST,
    prefix: false,
-    parse: (tokens: CSSValue[]): string[] => {
+    parse: (_context: Context, tokens: CSSValue[]): string[] => {
        return tokens.filter(isIdentToken).map((token) => token.value);
    }
 };
--- a/src/css/property-descriptors/font-weight.ts
+++ b/src/css/property-descriptors/font-weight.ts
@ -1,11 +1,12 @@
 import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken, isNumberToken} from '../syntax/parser';
+import {Context} from '../../core/context';
 export const fontWeight: IPropertyValueDescriptor<number> = {
    name: 'font-weight',
    initialValue: 'normal',
    type: PropertyDescriptorParsingType.VALUE,
    prefix: false,
-    parse: (token: CSSValue): number => {
+    parse: (_context: Context, token: CSSValue): number => {
        if (isNumberToken(token)) {
            return token.number;
        }
--- a/src/css/property-descriptors/letter-spacing.ts
+++ b/src/css/property-descriptors/letter-spacing.ts
@ -1,12 +1,13 @@
 import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue} from '../syntax/parser';
 import {TokenType} from '../syntax/tokenizer';
+import {Context} from '../../core/context';
 export const letterSpacing: IPropertyValueDescriptor<number> = {
    name: 'letter-spacing',
    initialValue: '0',
    prefix: false,
    type: PropertyDescriptorParsingType.VALUE,
-    parse: (token: CSSValue) => {
+    parse: (_context: Context, token: CSSValue) => {
        if (token.type === TokenType.IDENT_TOKEN && token.value === 'normal') {
            return 0;
        }
--- a/src/css/property-descriptors/line-break.ts
+++ b/src/css/property-descriptors/line-break.ts
@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum LINE_BREAK {
    NORMAL = 'normal',
    STRICT = 'strict'
@ -9,7 +10,7 @@ export const lineBreak: IPropertyIdentValueDescriptor<LINE_BREAK> = {
    initialValue: 'normal',
    prefix: false,
    type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (lineBreak: string): LINE_BREAK => {
+    parse: (_context: Context, lineBreak: string): LINE_BREAK => {
        switch (lineBreak) {
            case 'strict':
                return LINE_BREAK.STRICT;
--- a/src/css/property-descriptors/list-style-image.ts
+++ b/src/css/property-descriptors/list-style-image.ts
@ -2,17 +2,18 @@ import {TokenType} from '../syntax/tokenizer';
 import {ICSSImage, image} from '../types/image';
 import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue} from '../syntax/parser';
+import {Context} from '../../core/context';

 export const listStyleImage: IPropertyValueDescriptor<ICSSImage | null> = {
    name: 'list-style-image',
    initialValue: 'none',
    type: PropertyDescriptorParsingType.VALUE,
    prefix: false,
-    parse: (token: CSSValue) => {
+    parse: (context: Context, token: CSSValue) => {
        if (token.type === TokenType.IDENT_TOKEN && token.value === 'none') {
            return null;
        }

-        return image.parse(token);
+        return image.parse(context, token);
    }
 };
--- a/src/css/property-descriptors/list-style-position.ts
+++ b/src/css/property-descriptors/list-style-position.ts
@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum LIST_STYLE_POSITION {
    INSIDE = 0,
    OUTSIDE = 1
@ -9,7 +10,7 @@ export const listStylePosition: IPropertyIdentValueDescriptor<LIST_STYLE_POSITIO
    initialValue: 'outside',
    prefix: false,
    type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (position: string) => {
+    parse: (_context: Context, position: string) => {
        switch (position) {
            case 'inside':
                return LIST_STYLE_POSITION.INSIDE;
--- a/src/css/property-descriptors/list-style-type.ts
+++ b/src/css/property-descriptors/list-style-type.ts
@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum LIST_STYLE_TYPE {
    NONE = -1,
    DISC = 0,
@ -61,7 +62,7 @@ export const listStyleType: IPropertyIdentValueDescriptor<LIST_STYLE_TYPE> = {
    initialValue: 'none',
    prefix: false,
    type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (type: string) => {
+    parse: (_context: Context, type: string) => {
        switch (type) {
            case 'disc':
                return LIST_STYLE_TYPE.DISC;
--- a/src/css/property-descriptors/opacity.ts
+++ b/src/css/property-descriptors/opacity.ts
@ -1,11 +1,12 @@
 import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isNumberToken} from '../syntax/parser';
+import {Context} from '../../core/context';
 export const opacity: IPropertyValueDescriptor<number> = {
    name: 'opacity',
    initialValue: '1',
    type: PropertyDescriptorParsingType.VALUE,
    prefix: false,
-    parse: (token: CSSValue): number => {
+    parse: (_context: Context, token: CSSValue): number => {
        if (isNumberToken(token)) {
            return token.number;
        }
--- a/src/css/property-descriptors/overflow-wrap.ts
+++ b/src/css/property-descriptors/overflow-wrap.ts
@ -1,5 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
-export enum OVERFLOW_WRAP {
+import {Context} from '../../core/context';
+export const enum OVERFLOW_WRAP {
    NORMAL = 'normal',
    BREAK_WORD = 'break-word'
 }
@ -9,7 +10,7 @@ export const overflowWrap: IPropertyIdentValueDescriptor<OVERFLOW_WRAP> = {
    initialValue: 'normal',
    prefix: false,
    type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (overflow: string) => {
+    parse: (_context: Context, overflow: string) => {
        switch (overflow) {
            case 'break-word':
                return OVERFLOW_WRAP.BREAK_WORD;
--- a/src/css/property-descriptors/overflow.ts
+++ b/src/css/property-descriptors/overflow.ts
@ -1,10 +1,12 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';
 export enum OVERFLOW {
    VISIBLE = 0,
    HIDDEN = 1,
    SCROLL = 2,
-    AUTO = 3
+    CLIP = 3,
+    AUTO = 4
 }

 export const overflow: IPropertyListDescriptor<OVERFLOW[]> = {
@ -12,13 +14,15 @@ export const overflow: IPropertyListDescriptor<OVERFLOW[]> = {
    initialValue: 'visible',
    prefix: false,
    type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]): OVERFLOW[] => {
+    parse: (_context: Context, tokens: CSSValue[]): OVERFLOW[] => {
        return tokens.filter(isIdentToken).map((overflow) => {
            switch (overflow.value) {
                case 'hidden':
                    return OVERFLOW.HIDDEN;
                case 'scroll':
                    return OVERFLOW.SCROLL;
+                case 'clip':
+                    return OVERFLOW.CLIP;
                case 'auto':
                    return OVERFLOW.AUTO;
                case 'visible':
--- a/src/css/property-descriptors/paint-order.ts
+++ b/src/css/property-descriptors/paint-order.ts
@ -0,0 +1,42 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';
+export enum PAINT_ORDER_LAYER {
+    FILL,
+    STROKE,
+    MARKERS
+}
+
+export type PaintOrder = PAINT_ORDER_LAYER[];
+
+export const paintOrder: IPropertyListDescriptor<PaintOrder> = {
+    name: 'paint-order',
+    initialValue: 'normal',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (_context: Context, tokens: CSSValue[]): PaintOrder => {
+        const DEFAULT_VALUE = [PAINT_ORDER_LAYER.FILL, PAINT_ORDER_LAYER.STROKE, PAINT_ORDER_LAYER.MARKERS];
+        const layers: PaintOrder = [];
+
+        tokens.filter(isIdentToken).forEach((token) => {
+            switch (token.value) {
+                case 'stroke':
+                    layers.push(PAINT_ORDER_LAYER.STROKE);
+                    break;
+                case 'fill':
+                    layers.push(PAINT_ORDER_LAYER.FILL);
+                    break;
+                case 'markers':
+                    layers.push(PAINT_ORDER_LAYER.MARKERS);
+                    break;
+            }
+        });
+        DEFAULT_VALUE.forEach((value) => {
+            if (layers.indexOf(value) === -1) {
+                layers.push(value);
+            }
+        });
+
+        return layers;
+    }
+};
--- a/src/css/property-descriptors/position.ts
+++ b/src/css/property-descriptors/position.ts
@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum POSITION {
    STATIC = 0,
    RELATIVE = 1,
@ -12,7 +13,7 @@ export const position: IPropertyIdentValueDescriptor<POSITION> = {
    initialValue: 'static',
    prefix: false,
    type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (position: string) => {
+    parse: (_context: Context, position: string) => {
        switch (position) {
            case 'relative':
                return POSITION.RELATIVE;
--- a/src/css/property-descriptors/quotes.ts
+++ b/src/css/property-descriptors/quotes.ts
@ -1,6 +1,7 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isStringToken} from '../syntax/parser';
 import {TokenType} from '../syntax/tokenizer';
+import {Context} from '../../core/context';

 export interface QUOTE {
    open: string;
@ -14,7 +15,7 @@ export const quotes: IPropertyListDescriptor<Quotes> = {
    initialValue: 'none',
    prefix: true,
    type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]) => {
+    parse: (_context: Context, tokens: CSSValue[]) => {
        if (tokens.length === 0) {
            return null;
        }
--- a/src/css/property-descriptors/text-align.ts
+++ b/src/css/property-descriptors/text-align.ts
@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum TEXT_ALIGN {
    LEFT = 0,
    CENTER = 1,
@ -10,7 +11,7 @@ export const textAlign: IPropertyIdentValueDescriptor<TEXT_ALIGN> = {
    initialValue: 'left',
    prefix: false,
    type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (textAlign: string) => {
+    parse: (_context: Context, textAlign: string) => {
        switch (textAlign) {
            case 'right':
                return TEXT_ALIGN.RIGHT;
--- a/src/css/property-descriptors/text-decoration-line.ts
+++ b/src/css/property-descriptors/text-decoration-line.ts
@ -1,5 +1,6 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
+import {Context} from '../../core/context';

 export const enum TEXT_DECORATION_LINE {
    NONE = 0,
@ -16,7 +17,7 @@ export const textDecorationLine: IPropertyListDescriptor<TextDecorationLine> = {
    initialValue: 'none',
    prefix: false,
    type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]): TextDecorationLine => {
+    parse: (_context: Context, tokens: CSSValue[]): TextDecorationLine => {
        return tokens
            .filter(isIdentToken)
            .map((token) => {
--- a/src/css/property-descriptors/text-shadow.ts
+++ b/src/css/property-descriptors/text-shadow.ts
@ -3,6 +3,7 @@ import {CSSValue, isIdentWithValue, parseFunctionArgs} from '../syntax/parser';
 import {ZERO_LENGTH} from '../types/length-percentage';
 import {color, Color, COLORS} from '../types/color';
 import {isLength, Length} from '../types/length';
+import {Context} from '../../core/context';

 export type TextShadow = TextShadowItem[];
 interface TextShadowItem {
@ -17,7 +18,7 @@ export const textShadow: IPropertyListDescriptor<TextShadow> = {
    initialValue: 'none',
    type: PropertyDescriptorParsingType.LIST,
    prefix: false,
-    parse: (tokens: CSSValue[]): TextShadow => {
+    parse: (context: Context, tokens: CSSValue[]): TextShadow => {
        if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
            return [];
        }
@ -42,7 +43,7 @@ export const textShadow: IPropertyListDescriptor<TextShadow> = {
                    }
                    c++;
                } else {
-                    shadow.color = color.parse(token);
+                    shadow.color = color.parse(context, token);
                }
            }
            return shadow;
--- a/src/css/property-descriptors/text-transform.ts
+++ b/src/css/property-descriptors/text-transform.ts
@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum TEXT_TRANSFORM {
    NONE = 0,
    LOWERCASE = 1,
@ -11,7 +12,7 @@ export const textTransform: IPropertyIdentValueDescriptor<TEXT_TRANSFORM> = {
    initialValue: 'none',
    prefix: false,
    type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (textTransform: string) => {
+    parse: (_context: Context, textTransform: string) => {
        switch (textTransform) {
            case 'uppercase':
                return TEXT_TRANSFORM.UPPERCASE;
--- a/src/css/property-descriptors/transform-origin.ts
+++ b/src/css/property-descriptors/transform-origin.ts
@ -2,6 +2,7 @@ import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IProper
 import {CSSValue} from '../syntax/parser';
 import {isLengthPercentage, LengthPercentage} from '../types/length-percentage';
 import {FLAG_INTEGER, TokenType} from '../syntax/tokenizer';
+import {Context} from '../../core/context';
 export type TransformOrigin = [LengthPercentage, LengthPercentage];

 const DEFAULT_VALUE: LengthPercentage = {
@ -16,7 +17,7 @@ export const transformOrigin: IPropertyListDescriptor<TransformOrigin> = {
    initialValue: '50% 50%',
    prefix: true,
    type: PropertyDescriptorParsingType.LIST,
-    parse: (tokens: CSSValue[]) => {
+    parse: (_context: Context, tokens: CSSValue[]) => {
        const origins: LengthPercentage[] = tokens.filter(isLengthPercentage);

        if (origins.length !== 2) {
--- a/src/css/property-descriptors/transform.ts
+++ b/src/css/property-descriptors/transform.ts
@ -1,6 +1,7 @@
 import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue} from '../syntax/parser';
 import {NumberValueToken, TokenType} from '../syntax/tokenizer';
+import {Context} from '../../core/context';
 export type Matrix = [number, number, number, number, number, number];
 export type Transform = Matrix | null;

@ -9,7 +10,7 @@ export const transform: IPropertyValueDescriptor<Transform> = {
    initialValue: 'none',
    prefix: true,
    type: PropertyDescriptorParsingType.VALUE,
-    parse: (token: CSSValue) => {
+    parse: (_context: Context, token: CSSValue) => {
        if (token.type === TokenType.IDENT_TOKEN && token.value === 'none') {
            return null;
        }
--- a/src/css/property-descriptors/visibility.ts
+++ b/src/css/property-descriptors/visibility.ts
@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum VISIBILITY {
    VISIBLE = 0,
    HIDDEN = 1,
@ -10,7 +11,7 @@ export const visibility: IPropertyIdentValueDescriptor<VISIBILITY> = {
    initialValue: 'none',
    prefix: false,
    type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (visibility: string) => {
+    parse: (_context: Context, visibility: string) => {
        switch (visibility) {
            case 'hidden':
                return VISIBILITY.HIDDEN;
--- 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,15 @@
+import {CSSValue, isDimensionToken} from '../syntax/parser';
+import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
+export const webkitTextStrokeWidth: IPropertyValueDescriptor<number> = {
+    name: `-webkit-text-stroke-width`,
+    initialValue: '0',
+    type: PropertyDescriptorParsingType.VALUE,
+    prefix: false,
+    parse: (_context: Context, token: CSSValue): number => {
+        if (isDimensionToken(token)) {
+            return token.number;
+        }
+        return 0;
+    }
+};
--- a/src/css/property-descriptors/word-break.ts
+++ b/src/css/property-descriptors/word-break.ts
@ -1,4 +1,5 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
 export enum WORD_BREAK {
    NORMAL = 'normal',
    BREAK_ALL = 'break-all',
@ -10,7 +11,7 @@ export const wordBreak: IPropertyIdentValueDescriptor<WORD_BREAK> = {
    initialValue: 'normal',
    prefix: false,
    type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (wordBreak: string): WORD_BREAK => {
+    parse: (_context: Context, wordBreak: string): WORD_BREAK => {
        switch (wordBreak) {
            case 'break-all':
                return WORD_BREAK.BREAK_ALL;
--- a/src/css/property-descriptors/z-index.ts
+++ b/src/css/property-descriptors/z-index.ts
@ -1,6 +1,7 @@
 import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isNumberToken} from '../syntax/parser';
 import {TokenType} from '../syntax/tokenizer';
+import {Context} from '../../core/context';

 interface zIndex {
    order: number;
@ -12,7 +13,7 @@ export const zIndex: IPropertyValueDescriptor<zIndex> = {
    initialValue: 'auto',
    prefix: false,
    type: PropertyDescriptorParsingType.VALUE,
-    parse: (token: CSSValue): zIndex => {
+    parse: (_context: Context, token: CSSValue): zIndex => {
        if (token.type === TokenType.IDENT_TOKEN) {
            return {auto: true, order: 0};
        }
--- a/src/css/syntax/tokenizer.ts
+++ b/src/css/syntax/tokenizer.ts
@ -2,7 +2,7 @@

 import {fromCodePoint, toCodePoints} from 'css-line-break';

-export enum TokenType {
+export const enum TokenType {
    STRING_TOKEN,
    BAD_STRING_TOKEN,
    LEFT_PARENTHESIS_TOKEN,
--- a/src/css/types/tests/color-tests.ts
+++ b/src/css/types/tests/color-tests.ts
@ -1,8 +1,9 @@
 import {strictEqual} from 'assert';
 import {asString, color, isTransparent, pack} from '../color';
 import {Parser} from '../../syntax/parser';
+import {Context} from '../../../core/context';

-const parse = (value: string) => color.parse(Parser.parseValue(value));
+const parse = (value: string) => color.parse({} as Context, Parser.parseValue(value));

 describe('types', () => {
    describe('<color>', () => {
--- a/src/css/types/tests/image-tests.ts
+++ b/src/css/types/tests/image-tests.ts
@ -5,30 +5,38 @@ import {color, pack} from '../color';
 import {FLAG_INTEGER, TokenType} from '../../syntax/tokenizer';
 import {deg} from '../angle';

-const parse = (value: string) => image.parse(Parser.parseValue(value));
-const colorParse = (value: string) => color.parse(Parser.parseValue(value));
+const parse = (context: Context, value: string) => image.parse(context, Parser.parseValue(value));
+const colorParse = (context: Context, value: string) => color.parse(context, Parser.parseValue(value));

-jest.mock('../../../core/cache-storage');
 jest.mock('../../../core/features');

+jest.mock('../../../core/context');
+import {Context} from '../../../core/context';
+
 describe('types', () => {
+    let context: Context;
+    beforeEach(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        context = new Context({} as any, {} as any);
+    });
+
    describe('<image>', () => {
        describe('parsing', () => {
            describe('url', () => {
                it('url(test.jpg)', () =>
-                    deepStrictEqual(parse('url(http://example.com/test.jpg)'), {
+                    deepStrictEqual(parse(context, 'url(http://example.com/test.jpg)'), {
                        url: 'http://example.com/test.jpg',
                        type: CSSImageType.URL
                    }));
                it('url("test.jpg")', () =>
-                    deepStrictEqual(parse('url("http://example.com/test.jpg")'), {
+                    deepStrictEqual(parse(context, 'url("http://example.com/test.jpg")'), {
                        url: 'http://example.com/test.jpg',
                        type: CSSImageType.URL
                    }));
            });
            describe('linear-gradient', () => {
                it('linear-gradient(#f69d3c, #3f87a6)', () =>
-                    deepStrictEqual(parse('linear-gradient(#f69d3c, #3f87a6)'), {
+                    deepStrictEqual(parse(context, 'linear-gradient(#f69d3c, #3f87a6)'), {
                        angle: deg(180),
                        type: CSSImageType.LINEAR_GRADIENT,
                        stops: [
@ -37,60 +45,60 @@ describe('types', () => {
                        ]
                    }));
                it('linear-gradient(yellow, blue)', () =>
-                    deepStrictEqual(parse('linear-gradient(yellow, blue)'), {
+                    deepStrictEqual(parse(context, 'linear-gradient(yellow, blue)'), {
                        angle: deg(180),
                        type: CSSImageType.LINEAR_GRADIENT,
                        stops: [
-                            {color: colorParse('yellow'), stop: null},
-                            {color: colorParse('blue'), stop: null}
+                            {color: colorParse(context, 'yellow'), stop: null},
+                            {color: colorParse(context, 'blue'), stop: null}
                        ]
                    }));
                it('linear-gradient(to bottom, yellow, blue)', () =>
-                    deepStrictEqual(parse('linear-gradient(to bottom, yellow, blue)'), {
+                    deepStrictEqual(parse(context, 'linear-gradient(to bottom, yellow, blue)'), {
                        angle: deg(180),
                        type: CSSImageType.LINEAR_GRADIENT,
                        stops: [
-                            {color: colorParse('yellow'), stop: null},
-                            {color: colorParse('blue'), stop: null}
+                            {color: colorParse(context, 'yellow'), stop: null},
+                            {color: colorParse(context, 'blue'), stop: null}
                        ]
                    }));
                it('linear-gradient(180deg, yellow, blue)', () =>
-                    deepStrictEqual(parse('linear-gradient(180deg, yellow, blue)'), {
+                    deepStrictEqual(parse(context, 'linear-gradient(180deg, yellow, blue)'), {
                        angle: deg(180),
                        type: CSSImageType.LINEAR_GRADIENT,
                        stops: [
-                            {color: colorParse('yellow'), stop: null},
-                            {color: colorParse('blue'), stop: null}
+                            {color: colorParse(context, 'yellow'), stop: null},
+                            {color: colorParse(context, 'blue'), stop: null}
                        ]
                    }));
                it('linear-gradient(to top, blue, yellow)', () =>
-                    deepStrictEqual(parse('linear-gradient(to top, blue, yellow)'), {
+                    deepStrictEqual(parse(context, 'linear-gradient(to top, blue, yellow)'), {
                        angle: 0,
                        type: CSSImageType.LINEAR_GRADIENT,
                        stops: [
-                            {color: colorParse('blue'), stop: null},
-                            {color: colorParse('yellow'), stop: null}
+                            {color: colorParse(context, 'blue'), stop: null},
+                            {color: colorParse(context, 'yellow'), stop: null}
                        ]
                    }));
                it('linear-gradient(to top right, blue, yellow)', () =>
-                    deepStrictEqual(parse('linear-gradient(to top right, blue, yellow)'), {
+                    deepStrictEqual(parse(context, 'linear-gradient(to top right, blue, yellow)'), {
                        angle: [
                            {type: TokenType.PERCENTAGE_TOKEN, number: 100, flags: 4},
                            {type: TokenType.NUMBER_TOKEN, number: 0, flags: 4}
                        ],
                        type: CSSImageType.LINEAR_GRADIENT,
                        stops: [
-                            {color: colorParse('blue'), stop: null},
-                            {color: colorParse('yellow'), stop: null}
+                            {color: colorParse(context, 'blue'), stop: null},
+                            {color: colorParse(context, 'yellow'), stop: null}
                        ]
                    }));
                it('linear-gradient(to bottom, yellow 0%, blue 100%)', () =>
-                    deepStrictEqual(parse('linear-gradient(to bottom, yellow 0%, blue 100%)'), {
+                    deepStrictEqual(parse(context, 'linear-gradient(to bottom, yellow 0%, blue 100%)'), {
                        angle: deg(180),
                        type: CSSImageType.LINEAR_GRADIENT,
                        stops: [
                            {
-                                color: colorParse('yellow'),
+                                color: colorParse(context, 'yellow'),
                                stop: {
                                    type: TokenType.PERCENTAGE_TOKEN,
                                    number: 0,
@ -98,7 +106,7 @@ describe('types', () => {
                                }
                            },
                            {
-                                color: colorParse('blue'),
+                                color: colorParse(context, 'blue'),
                                stop: {
                                    type: TokenType.PERCENTAGE_TOKEN,
                                    number: 100,
@ -109,7 +117,7 @@ describe('types', () => {
                    }));
                it('linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px)', () =>
                    deepStrictEqual(
-                        parse('linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px)'),
+                        parse(context, 'linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px)'),
                        {
                            angle: [
                                {type: TokenType.PERCENTAGE_TOKEN, number: 100, flags: 4},
@ -117,9 +125,9 @@ describe('types', () => {
                            ],
                            type: CSSImageType.LINEAR_GRADIENT,
                            stops: [
-                                {color: colorParse('lightpink'), stop: null},
+                                {color: colorParse(context, 'lightpink'), stop: null},
                                {
-                                    color: colorParse('lightpink'),
+                                    color: colorParse(context, 'lightpink'),
                                    stop: {
                                        type: TokenType.DIMENSION_TOKEN,
                                        number: 5,
@ -128,7 +136,7 @@ describe('types', () => {
                                    }
                                },
                                {
-                                    color: colorParse('white'),
+                                    color: colorParse(context, 'white'),
                                    stop: {
                                        type: TokenType.DIMENSION_TOKEN,
                                        number: 5,
@ -137,7 +145,7 @@ describe('types', () => {
                                    }
                                },
                                {
-                                    color: colorParse('white'),
+                                    color: colorParse(context, 'white'),
                                    stop: {
                                        type: TokenType.DIMENSION_TOKEN,
                                        number: 10,
@ -152,13 +160,16 @@ describe('types', () => {
            describe('-prefix-linear-gradient', () => {
                it('-webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #3a8bc2 84%, #26558b 100%)', () =>
                    deepStrictEqual(
-                        parse('-webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #3a8bc2 84%, #26558b 100%)'),
+                        parse(
+                            context,
+                            '-webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #3a8bc2 84%, #26558b 100%)'
+                        ),
                        {
                            angle: deg(90),
                            type: CSSImageType.LINEAR_GRADIENT,
                            stops: [
                                {
-                                    color: colorParse('#cedbe9'),
+                                    color: colorParse(context, '#cedbe9'),
                                    stop: {
                                        type: TokenType.PERCENTAGE_TOKEN,
                                        number: 0,
@ -166,7 +177,7 @@ describe('types', () => {
                                    }
                                },
                                {
-                                    color: colorParse('#aac5de'),
+                                    color: colorParse(context, '#aac5de'),
                                    stop: {
                                        type: TokenType.PERCENTAGE_TOKEN,
                                        number: 17,
@ -174,7 +185,7 @@ describe('types', () => {
                                    }
                                },
                                {
-                                    color: colorParse('#3a8bc2'),
+                                    color: colorParse(context, '#3a8bc2'),
                                    stop: {
                                        type: TokenType.PERCENTAGE_TOKEN,
                                        number: 84,
@ -182,7 +193,7 @@ describe('types', () => {
                                    }
                                },
                                {
-                                    color: colorParse('#26558b'),
+                                    color: colorParse(context, '#26558b'),
                                    stop: {
                                        type: TokenType.PERCENTAGE_TOKEN,
                                        number: 100,
@ -193,12 +204,12 @@ describe('types', () => {
                        }
                    ));
                it('-moz-linear-gradient(top, #cce5f4 0%, #00263c 100%)', () =>
-                    deepStrictEqual(parse('-moz-linear-gradient(top, #cce5f4 0%, #00263c 100%)'), {
+                    deepStrictEqual(parse(context, '-moz-linear-gradient(top, #cce5f4 0%, #00263c 100%)'), {
                        angle: deg(180),
                        type: CSSImageType.LINEAR_GRADIENT,
                        stops: [
                            {
-                                color: colorParse('#cce5f4'),
+                                color: colorParse(context, '#cce5f4'),
                                stop: {
                                    type: TokenType.PERCENTAGE_TOKEN,
                                    number: 0,
@ -206,7 +217,7 @@ describe('types', () => {
                                }
                            },
                            {
-                                color: colorParse('#00263c'),
+                                color: colorParse(context, '#00263c'),
                                stop: {
                                    type: TokenType.PERCENTAGE_TOKEN,
                                    number: 100,
--- a/src/css/types/angle.ts
+++ b/src/css/types/angle.ts
@ -3,6 +3,7 @@ import {TokenType} from '../syntax/tokenizer';
 import {ITypeDescriptor} from '../ITypeDescriptor';
 import {HUNDRED_PERCENT, ZERO_LENGTH} from './length-percentage';
 import {GradientCorner} from './image';
+import {Context} from '../../core/context';

 const DEG = 'deg';
 const GRAD = 'grad';
@ -11,7 +12,7 @@ const TURN = 'turn';

 export const angle: ITypeDescriptor<number> = {
    name: 'angle',
-    parse: (value: CSSValue): number => {
+    parse: (_context: Context, value: CSSValue): number => {
        if (value.type === TokenType.DIMENSION_TOKEN) {
            switch (value.unit) {
                case DEG:
--- a/src/css/types/color.ts
+++ b/src/css/types/color.ts
@ -1,19 +1,20 @@
-import {CSSValue, nonFunctionArgSeparator} from '../syntax/parser';
+import {CSSValue, nonFunctionArgSeparator, Parser} from '../syntax/parser';
 import {TokenType} from '../syntax/tokenizer';
 import {ITypeDescriptor} from '../ITypeDescriptor';
 import {angle, deg} from './angle';
 import {getAbsoluteValue, isLengthPercentage} from './length-percentage';
+import {Context} from '../../core/context';
 export type Color = number;

 export const color: ITypeDescriptor<Color> = {
    name: 'color',
-    parse: (value: CSSValue): Color => {
+    parse: (context: Context, value: CSSValue): Color => {
        if (value.type === TokenType.FUNCTION) {
            const colorFunction = SUPPORTED_COLOR_FUNCTIONS[value.name];
            if (typeof colorFunction === 'undefined') {
                throw new Error(`Attempting to parse an unsupported color function "${value.name}"`);
            }
-            return colorFunction(value.values);
+            return colorFunction(context, value.values);
        }

        if (value.type === TokenType.HASH_TOKEN) {
@ -85,7 +86,7 @@ const getTokenColorValue = (token: CSSValue, i: number): number => {
    return 0;
 };

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

    if (tokens.length === 3) {
@ -120,11 +121,11 @@ function hue2rgb(t1: number, t2: number, hue: number): number {
    }
 }

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

-    const h = (hue.type === TokenType.NUMBER_TOKEN ? deg(hue.number) : angle.parse(hue)) / (Math.PI * 2);
+    const h = (hue.type === TokenType.NUMBER_TOKEN ? deg(hue.number) : angle.parse(context, hue)) / (Math.PI * 2);
    const s = isLengthPercentage(saturation) ? saturation.number / 100 : 0;
    const l = isLengthPercentage(lightness) ? lightness.number / 100 : 0;
    const a = typeof alpha !== 'undefined' && isLengthPercentage(alpha) ? getAbsoluteValue(alpha, 1) : 1;
@ -143,7 +144,7 @@ const hsl = (args: CSSValue[]): number => {
 };

 const SUPPORTED_COLOR_FUNCTIONS: {
-    [key: string]: (args: CSSValue[]) => number;
+    [key: string]: (context: Context, args: CSSValue[]) => number;
 } = {
    hsl: hsl,
    hsla: hsl,
@ -151,6 +152,9 @@ const SUPPORTED_COLOR_FUNCTIONS: {
    rgba: rgb
 };

+export const parseColor = (context: Context, value: string): Color =>
+    color.parse(context, Parser.create(value).parseComponentValue());
+
 export const COLORS: {[key: string]: Color} = {
    ALICEBLUE: 0xf0f8ffff,
    ANTIQUEWHITE: 0xfaebd7ff,
--- a/src/css/types/functions/-prefix-linear-gradient.ts
+++ b/src/css/types/functions/-prefix-linear-gradient.ts
@ -3,8 +3,9 @@ import {CSSImageType, CSSLinearGradientImage, GradientCorner, UnprocessedGradien
 import {TokenType} from '../../syntax/tokenizer';
 import {isAngle, angle as angleType, parseNamedSide, deg} from '../angle';
 import {parseColorStop} from './gradient';
+import {Context} from '../../../core/context';

-export const prefixLinearGradient = (tokens: CSSValue[]): CSSLinearGradientImage => {
+export const prefixLinearGradient = (context: Context, tokens: CSSValue[]): CSSLinearGradientImage => {
    let angle: number | GradientCorner = deg(180);
    const stops: UnprocessedGradientColorStop[] = [];

@ -18,11 +19,11 @@ export const prefixLinearGradient = (tokens: CSSValue[]): CSSLinearGradientImage
                angle = parseNamedSide(arg);
                return;
            } else if (isAngle(firstToken)) {
-                angle = (angleType.parse(firstToken) + deg(270)) % deg(360);
+                angle = (angleType.parse(context, firstToken) + deg(270)) % deg(360);
                return;
            }
        }
-        const colorStop = parseColorStop(arg);
+        const colorStop = parseColorStop(context, arg);
        stops.push(colorStop);
    });

--- a/src/css/types/functions/-prefix-radial-gradient.ts
+++ b/src/css/types/functions/-prefix-radial-gradient.ts
@ -20,8 +20,9 @@ import {
    FARTHEST_CORNER,
    FARTHEST_SIDE
 } from './radial-gradient';
+import {Context} from '../../../core/context';

-export const prefixRadialGradient = (tokens: CSSValue[]): CSSRadialGradientImage => {
+export const prefixRadialGradient = (context: Context, tokens: CSSValue[]): CSSRadialGradientImage => {
    let shape: CSSRadialShape = CSSRadialShape.CIRCLE;
    let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
    const stops: UnprocessedGradientColorStop[] = [];
@ -90,7 +91,7 @@ export const prefixRadialGradient = (tokens: CSSValue[]): CSSRadialGradientImage
        }

        if (isColorStop) {
-            const colorStop = parseColorStop(arg);
+            const colorStop = parseColorStop(context, arg);
            stops.push(colorStop);
        }
    });
--- a/src/css/types/functions/-webkit-gradient.ts
+++ b/src/css/types/functions/-webkit-gradient.ts
@ -12,8 +12,12 @@ import {deg} from '../angle';
 import {TokenType} from '../../syntax/tokenizer';
 import {color as colorType} from '../color';
 import {HUNDRED_PERCENT, LengthPercentage, ZERO_LENGTH} from '../length-percentage';
+import {Context} from '../../../core/context';

-export const webkitGradient = (tokens: CSSValue[]): CSSLinearGradientImage | CSSRadialGradientImage => {
+export const webkitGradient = (
+    context: Context,
+    tokens: CSSValue[]
+): CSSLinearGradientImage | CSSRadialGradientImage => {
    const angle = deg(180);
    const stops: UnprocessedGradientColorStop[] = [];
    let type = CSSImageType.LINEAR_GRADIENT;
@ -34,15 +38,15 @@ export const webkitGradient = (tokens: CSSValue[]): CSSLinearGradientImage | CSS

        if (firstToken.type === TokenType.FUNCTION) {
            if (firstToken.name === 'from') {
-                const color = colorType.parse(firstToken.values[0]);
+                const color = colorType.parse(context, firstToken.values[0]);
                stops.push({stop: ZERO_LENGTH, color});
            } else if (firstToken.name === 'to') {
-                const color = colorType.parse(firstToken.values[0]);
+                const color = colorType.parse(context, firstToken.values[0]);
                stops.push({stop: HUNDRED_PERCENT, color});
            } else if (firstToken.name === 'color-stop') {
                const values = firstToken.values.filter(nonFunctionArgSeparator);
                if (values.length === 2) {
-                    const color = colorType.parse(values[1]);
+                    const color = colorType.parse(context, values[1]);
                    const stop = values[0];
                    if (isNumberToken(stop)) {
                        stops.push({
--- a/src/css/types/functions/tests/radial-gradient.ts
+++ b/src/css/types/functions/tests/radial-gradient.ts
@ -5,9 +5,10 @@ import {CSSImageType, CSSRadialExtent, CSSRadialShape} from '../../image';
 import {color} from '../../color';
 import {TokenType} from '../../../syntax/tokenizer';
 import {FIFTY_PERCENT, HUNDRED_PERCENT} from '../../length-percentage';
+import {Context} from '../../../../core/context';

-const parse = (value: string) => radialGradient((Parser.parseValues(value)[0] as CSSFunction).values);
-const colorParse = (value: string) => color.parse(Parser.parseValue(value));
+const parse = (value: string) => radialGradient({} as Context, (Parser.parseValues(value)[0] as CSSFunction).values);
+const colorParse = (value: string) => color.parse({} as Context, Parser.parseValue(value));

 describe('functions', () => {
    describe('radial-gradient', () => {
--- a/src/css/types/functions/counter.ts
+++ b/src/css/types/functions/counter.ts
@ -4,10 +4,7 @@ import {contains} from '../../../core/bitwise';
 import {CSSParsedCounterDeclaration} from '../../index';

 export class CounterState {
-    readonly counters: {[key: string]: number[]};
-    constructor() {
-        this.counters = {};
-    }
+    private readonly counters: {[key: string]: number[]} = {};

    getCounterValue(name: string): number {
        const counter = this.counters[name];
@ -18,7 +15,7 @@ export class CounterState {
        return 1;
    }

-    getCounterValues(name: string): number[] {
+    getCounterValues(name: string): readonly number[] {
        const counter = this.counters[name];
        return counter ? counter : [];
    }
@ -37,6 +34,9 @@ export class CounterState {
                const counter = this.counters[entry.counter];
                if (counter && entry.increment !== 0) {
                    canReset = false;
+                    if (!counter.length) {
+                        counter.push(1);
+                    }
                    counter[Math.max(0, counter.length - 1)] += entry.increment;
                }
            });
--- a/src/css/types/functions/gradient.ts
+++ b/src/css/types/functions/gradient.ts
@ -9,9 +9,10 @@ import {
 } from '../image';
 import {color as colorType} from '../color';
 import {getAbsoluteValue, HUNDRED_PERCENT, isLengthPercentage, ZERO_LENGTH} from '../length-percentage';
+import {Context} from '../../../core/context';

-export const parseColorStop = (args: CSSValue[]): UnprocessedGradientColorStop => {
-    const color = colorType.parse(args[0]);
+export const parseColorStop = (context: Context, args: CSSValue[]): UnprocessedGradientColorStop => {
+    const color = colorType.parse(context, args[0]);
    const stop = args[1];
    return stop && isLengthPercentage(stop) ? {color, stop} : {color, stop: null};
 };
--- a/src/css/types/functions/linear-gradient.ts
+++ b/src/css/types/functions/linear-gradient.ts
@ -3,8 +3,9 @@ import {TokenType} from '../../syntax/tokenizer';
 import {isAngle, angle as angleType, parseNamedSide, deg} from '../angle';
 import {CSSImageType, CSSLinearGradientImage, GradientCorner, UnprocessedGradientColorStop} from '../image';
 import {parseColorStop} from './gradient';
+import {Context} from '../../../core/context';

-export const linearGradient = (tokens: CSSValue[]): CSSLinearGradientImage => {
+export const linearGradient = (context: Context, tokens: CSSValue[]): CSSLinearGradientImage => {
    let angle: number | GradientCorner = deg(180);
    const stops: UnprocessedGradientColorStop[] = [];

@ -15,11 +16,11 @@ export const linearGradient = (tokens: CSSValue[]): CSSLinearGradientImage => {
                angle = parseNamedSide(arg);
                return;
            } else if (isAngle(firstToken)) {
-                angle = angleType.parse(firstToken);
+                angle = angleType.parse(context, firstToken);
                return;
            }
        }
-        const colorStop = parseColorStop(arg);
+        const colorStop = parseColorStop(context, arg);
        stops.push(colorStop);
    });

--- a/src/css/types/functions/radial-gradient.ts
+++ b/src/css/types/functions/radial-gradient.ts
@ -10,6 +10,7 @@ import {
 import {parseColorStop} from './gradient';
 import {FIFTY_PERCENT, HUNDRED_PERCENT, isLengthPercentage, LengthPercentage, ZERO_LENGTH} from '../length-percentage';
 import {isLength} from '../length';
+import {Context} from '../../../core/context';
 export const CLOSEST_SIDE = 'closest-side';
 export const FARTHEST_SIDE = 'farthest-side';
 export const CLOSEST_CORNER = 'closest-corner';
@ -19,7 +20,7 @@ export const ELLIPSE = 'ellipse';
 export const COVER = 'cover';
 export const CONTAIN = 'contain';

-export const radialGradient = (tokens: CSSValue[]): CSSRadialGradientImage => {
+export const radialGradient = (context: Context, tokens: CSSValue[]): CSSRadialGradientImage => {
    let shape: CSSRadialShape = CSSRadialShape.CIRCLE;
    let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
    const stops: UnprocessedGradientColorStop[] = [];
@ -85,7 +86,7 @@ export const radialGradient = (tokens: CSSValue[]): CSSRadialGradientImage => {
        }

        if (isColorStop) {
-            const colorStop = parseColorStop(arg);
+            const colorStop = parseColorStop(context, arg);
            stops.push(colorStop);
        }
    });
--- a/src/css/types/image.ts
+++ b/src/css/types/image.ts
@ -4,11 +4,11 @@ import {Color} from './color';
 import {linearGradient} from './functions/linear-gradient';
 import {prefixLinearGradient} from './functions/-prefix-linear-gradient';
 import {ITypeDescriptor} from '../ITypeDescriptor';
-import {CacheStorage} from '../../core/cache-storage';
 import {LengthPercentage} from './length-percentage';
 import {webkitGradient} from './functions/-webkit-gradient';
 import {radialGradient} from './functions/radial-gradient';
 import {prefixRadialGradient} from './functions/-prefix-radial-gradient';
+import {Context} from '../../core/context';

 export enum CSSImageType {
    URL,
@ -79,10 +79,10 @@ export interface CSSRadialGradientImage extends ICSSGradientImage {

 export const image: ITypeDescriptor<ICSSImage> = {
    name: 'image',
-    parse: (value: CSSValue): ICSSImage => {
+    parse: (context: Context, value: CSSValue): ICSSImage => {
        if (value.type === TokenType.URL_TOKEN) {
            const image: CSSURLImage = {url: value.value, type: CSSImageType.URL};
-            CacheStorage.getInstance().addImage(value.value);
+            context.cache.addImage(value.value);
            return image;
        }

@ -91,18 +91,21 @@ export const image: ITypeDescriptor<ICSSImage> = {
            if (typeof imageFunction === 'undefined') {
                throw new Error(`Attempting to parse an unsupported image function "${value.name}"`);
            }
-            return imageFunction(value.values);
+            return imageFunction(context, value.values);
        }

-        throw new Error(`Unsupported image type`);
+        throw new Error(`Unsupported image type ${value.type}`);
    }
 };

 export function isSupportedImage(value: CSSValue): boolean {
-    return value.type !== TokenType.FUNCTION || !!SUPPORTED_IMAGE_FUNCTIONS[value.name];
+    return (
+        !(value.type === TokenType.IDENT_TOKEN && value.value === 'none') &&
+        (value.type !== TokenType.FUNCTION || !!SUPPORTED_IMAGE_FUNCTIONS[value.name])
+    );
 }

-const SUPPORTED_IMAGE_FUNCTIONS: Record<string, (args: CSSValue[]) => ICSSImage> = {
+const SUPPORTED_IMAGE_FUNCTIONS: Record<string, (context: Context, args: CSSValue[]) => ICSSImage> = {
    'linear-gradient': linearGradient,
    '-moz-linear-gradient': prefixLinearGradient,
    '-ms-linear-gradient': prefixLinearGradient,
--- a/src/css/types/index.ts
+++ b/src/css/types/index.ts
@ -1 +1 @@
-export type CSSTypes = 'angle' | 'color' | 'image' | 'length' | 'length-percentage';
+export type CSSTypes = 'angle' | 'color' | 'image' | 'length' | 'length-percentage' | 'time';
--- a/src/css/types/time.ts
+++ b/src/css/types/time.ts
@ -0,0 +1,20 @@
+import {CSSValue} from '../syntax/parser';
+import {TokenType} from '../syntax/tokenizer';
+import {ITypeDescriptor} from '../ITypeDescriptor';
+import {Context} from '../../core/context';
+
+export const time: ITypeDescriptor<number> = {
+    name: 'time',
+    parse: (_context: Context, value: CSSValue): number => {
+        if (value.type === TokenType.DIMENSION_TOKEN) {
+            switch (value.unit.toLowerCase()) {
+                case 's':
+                    return 1000 * value.number;
+                case 'ms':
+                    return value.number;
+            }
+        }
+
+        throw new Error(`Unsupported time type`);
+    }
+};
--- a/src/dom/mocks/document-cloner.ts
+++ b/src/dom/mocks/document-cloner.ts
@ -2,7 +2,14 @@ export class DocumentCloner {
    clonedReferenceElement?: HTMLElement;

    constructor() {
-        this.clonedReferenceElement = {} as HTMLElement;
+        this.clonedReferenceElement = {
+            ownerDocument: {
+                defaultView: {
+                    pageXOffset: 12,
+                    pageYOffset: 34
+                }
+            }
+        } as HTMLElement;
    }

    toIFrame(): Promise<HTMLIFrameElement> {
--- a/src/dom/document-cloner.ts
+++ b/src/dom/document-cloner.ts
@ -13,18 +13,26 @@ import {
    isTextareaElement,
    isTextNode
 } from './node-parser';
-import {Logger} from '../core/logger';
 import {isIdentToken, nonFunctionArgSeparator} from '../css/syntax/parser';
 import {TokenType} from '../css/syntax/tokenizer';
 import {CounterState, createCounterText} from '../css/types/functions/counter';
 import {LIST_STYLE_TYPE, listStyleType} from '../css/property-descriptors/list-style-type';
 import {CSSParsedCounterDeclaration, CSSParsedPseudoDeclaration} from '../css/index';
 import {getQuote} from '../css/property-descriptors/quotes';
+import {Context} from '../core/context';
+import {DebuggerType, isDebugging} from '../core/debugger';

 export interface CloneOptions {
-    id: string;
    ignoreElements?: (element: Element) => boolean;
-    onclone?: (document: Document) => void;
+    onclone?: (document: Document, element: HTMLElement) => void;
+    allowTaint?: boolean;
+}
+
+export interface WindowOptions {
+    scrollX: number;
+    scrollY: number;
+    windowWidth: number;
+    windowHeight: number;
 }

 export type CloneConfigurations = CloneOptions & {
@ -36,15 +44,17 @@ const IGNORE_ATTRIBUTE = 'data-html2canvas-ignore';

 export class DocumentCloner {
    private readonly scrolledElements: [Element, number, number][];
-    private readonly options: CloneConfigurations;
    private readonly referenceElement: HTMLElement;
    clonedReferenceElement?: HTMLElement;
    private readonly documentElement: HTMLElement;
    private readonly counters: CounterState;
    private quoteDepth: number;

-    constructor(element: HTMLElement, options: CloneConfigurations) {
-        this.options = options;
+    constructor(
+        private readonly context: Context,
+        element: HTMLElement,
+        private readonly options: CloneConfigurations
+    ) {
        this.scrolledElements = [];
        this.referenceElement = element;
        this.counters = new CounterState();
@ -81,15 +91,21 @@ export class DocumentCloner {
                    /(iPad|iPhone|iPod)/g.test(navigator.userAgent) &&
                    (cloneWindow.scrollY !== windowSize.top || cloneWindow.scrollX !== windowSize.left)
                ) {
-                    documentClone.documentElement.style.top = -windowSize.top + 'px';
-                    documentClone.documentElement.style.left = -windowSize.left + 'px';
-                    documentClone.documentElement.style.position = 'absolute';
+                    this.context.logger.warn('Unable to restore scroll position for cloned document');
+                    this.context.windowBounds = this.context.windowBounds.add(
+                        cloneWindow.scrollX - windowSize.left,
+                        cloneWindow.scrollY - windowSize.top,
+                        0,
+                        0
+                    );
                }
            }

            const onclone = this.options.onclone;

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

@ -97,9 +113,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);
            }

@ -117,21 +137,27 @@ export class DocumentCloner {
    }

    createElementClone<T extends HTMLElement | SVGElement>(node: T): HTMLElement | SVGElement {
+        if (isDebugging(node, DebuggerType.CLONE)) {
+            debugger;
+        }
        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;
@ -153,7 +179,7 @@ export class DocumentCloner {
            }
        } catch (e) {
            // accessing node.sheet.cssRules throws a DOMException
-            Logger.getInstance(this.options.id).error('Unable to access cssRules property', e);
+            this.context.logger.error('Unable to access cssRules property', e);
            if (e.name !== 'SecurityError') {
                throw e;
            }
@ -168,7 +194,7 @@ export class DocumentCloner {
                img.src = canvas.toDataURL();
                return img;
            } catch (e) {
-                Logger.getInstance(this.options.id).info(`Unable to clone canvas contents, canvas is tainted`);
+                this.context.logger.info(`Unable to inline canvas contents, canvas is tainted`, canvas);
            }
        }

@ -180,78 +206,31 @@ export class DocumentCloner {
            const ctx = canvas.getContext('2d');
            const clonedCtx = clonedCanvas.getContext('2d');
            if (clonedCtx) {
-                if (ctx) {
+                if (!this.options.allowTaint && ctx) {
                    clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);
                } else {
+                    const gl = canvas.getContext('webgl2') ?? canvas.getContext('webgl');
+                    if (gl) {
+                        const attribs = gl.getContextAttributes();
+                        if (attribs?.preserveDrawingBuffer === false) {
+                            this.context.logger.warn(
+                                'Unable to clone WebGL context as it has preserveDrawingBuffer=false',
+                                canvas
+                            );
+                        }
+                    }
+
                    clonedCtx.drawImage(canvas, 0, 0);
                }
            }
            return clonedCanvas;
-        } catch (e) {}
+        } catch (e) {
+            this.context.logger.info(`Unable to clone canvas as it is tainted`, canvas);
+        }

        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);
@ -265,6 +244,7 @@ export class DocumentCloner {

        if (window && isElementNode(node) && (isHTMLElementNode(node) || isSVGElementNode(node))) {
            const clone = this.createElementClone(node);
+            clone.style.transitionProperty = 'none';

            const style = window.getComputedStyle(node);
            const styleBefore = window.getComputedStyle(node, ':before');
@ -277,7 +257,7 @@ export class DocumentCloner {
                createPseudoHideStyles(clone);
            }

-            const counters = this.counters.parse(new CSSParsedCounterDeclaration(style));
+            const counters = this.counters.parse(new CSSParsedCounterDeclaration(this.context, style));
            const before = this.resolvePseudoContent(node, clone, styleBefore, PseudoElementType.BEFORE);

            for (let child = node.firstChild; child; child = child.nextSibling) {
@ -308,8 +288,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]);
            }
@ -343,8 +321,8 @@ export class DocumentCloner {
            return;
        }

-        this.counters.parse(new CSSParsedCounterDeclaration(style));
-        const declaration = new CSSParsedPseudoDeclaration(style);
+        this.counters.parse(new CSSParsedCounterDeclaration(this.context, style));
+        const declaration = new CSSParsedPseudoDeclaration(this.context, style);

        const anonymousReplacedElement = document.createElement('html2canvaspseudoelement');
        copyCSSStyles(style, anonymousReplacedElement);
@ -371,7 +349,7 @@ export class DocumentCloner {
                        const counterState = this.counters.getCounterValue(counter.value);
                        const counterType =
                            counterStyle && isIdentToken(counterStyle)
-                                ? listStyleType.parse(counterStyle.value)
+                                ? listStyleType.parse(this.context, counterStyle.value)
                                : LIST_STYLE_TYPE.DECIMAL;

                        anonymousReplacedElement.appendChild(
@ -384,7 +362,7 @@ export class DocumentCloner {
                        const counterStates = this.counters.getCounterValues(counter.value);
                        const counterType =
                            counterStyle && isIdentToken(counterStyle)
-                                ? listStyleType.parse(counterStyle.value)
+                                ? listStyleType.parse(this.context, counterStyle.value)
                                : LIST_STYLE_TYPE.DECIMAL;
                        const separator = delim && delim.type === TokenType.STRING_TOKEN ? delim.value : '';
                        const text = counterStates
@ -462,6 +440,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 +469,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/element-container.ts
+++ b/src/dom/element-container.ts
@ -2,29 +2,45 @@ import {CSSParsedDeclaration} from '../css/index';
 import {TextContainer} from './text-container';
 import {Bounds, parseBounds} from '../css/layout/bounds';
 import {isHTMLElementNode} from './node-parser';
+import {Context} from '../core/context';
+import {DebuggerType, isDebugging} from '../core/debugger';

 export const enum FLAGS {
    CREATES_STACKING_CONTEXT = 1 << 1,
    CREATES_REAL_STACKING_CONTEXT = 1 << 2,
-    IS_LIST_OWNER = 1 << 3
+    IS_LIST_OWNER = 1 << 3,
+    DEBUG_RENDER = 1 << 4
 }

 export class ElementContainer {
    readonly styles: CSSParsedDeclaration;
-    readonly textNodes: TextContainer[];
-    readonly elements: ElementContainer[];
+    readonly textNodes: TextContainer[] = [];
+    readonly elements: ElementContainer[] = [];
    bounds: Bounds;
-    flags: number;
+    flags = 0;

-    constructor(element: Element) {
-        this.styles = new CSSParsedDeclaration(window.getComputedStyle(element, null));
-        this.textNodes = [];
-        this.elements = [];
-        if (this.styles.transform !== null && isHTMLElementNode(element)) {
-            // getBoundingClientRect takes transforms into account
-            element.style.transform = 'none';
+    constructor(protected readonly context: Context, element: Element) {
+        if (isDebugging(element, DebuggerType.PARSE)) {
+            debugger;
+        }
+
+        this.styles = new CSSParsedDeclaration(context, window.getComputedStyle(element, null));
+
+        if (isHTMLElementNode(element)) {
+            if (this.styles.animationDuration.some((duration) => duration > 0)) {
+                element.style.animationDuration = '0s';
+            }
+
+            if (this.styles.transform !== null) {
+                // getBoundingClientRect takes transforms into account
+                element.style.transform = 'none';
+            }
+        }
+
+        this.bounds = parseBounds(this.context, element);
+
+        if (isDebugging(element, DebuggerType.RENDER)) {
+            this.flags |= FLAGS.DEBUG_RENDER;
        }
-        this.bounds = parseBounds(element);
-        this.flags = 0;
    }
 }
--- a/src/dom/elements/li-element-container.ts
+++ b/src/dom/elements/li-element-container.ts
@ -1,9 +1,10 @@
 import {ElementContainer} from '../element-container';
+import {Context} from '../../core/context';
 export class LIElementContainer extends ElementContainer {
    readonly value: number;

-    constructor(element: HTMLLIElement) {
-        super(element);
+    constructor(context: Context, element: HTMLLIElement) {
+        super(context, element);
        this.value = element.value;
    }
 }
--- a/src/dom/elements/ol-element-container.ts
+++ b/src/dom/elements/ol-element-container.ts
@ -1,10 +1,11 @@
 import {ElementContainer} from '../element-container';
+import {Context} from '../../core/context';
 export class OLElementContainer extends ElementContainer {
    readonly start: number;
    readonly reversed: boolean;

-    constructor(element: HTMLOListElement) {
-        super(element);
+    constructor(context: Context, element: HTMLOListElement) {
+        super(context, element);
        this.start = element.start;
        this.reversed = typeof element.reversed === 'boolean' && element.reversed === true;
    }
--- a/src/dom/elements/select-element-container.ts
+++ b/src/dom/elements/select-element-container.ts
@ -1,8 +1,9 @@
 import {ElementContainer} from '../element-container';
+import {Context} from '../../core/context';
 export class SelectElementContainer extends ElementContainer {
    readonly value: string;
-    constructor(element: HTMLSelectElement) {
-        super(element);
+    constructor(context: Context, element: HTMLSelectElement) {
+        super(context, element);
        const option = element.options[element.selectedIndex || 0];
        this.value = option ? option.text || '' : '';
    }
--- a/src/dom/elements/textarea-element-container.ts
+++ b/src/dom/elements/textarea-element-container.ts
@ -1,8 +1,9 @@
 import {ElementContainer} from '../element-container';
+import {Context} from '../../core/context';
 export class TextareaElementContainer extends ElementContainer {
    readonly value: string;
-    constructor(element: HTMLTextAreaElement) {
-        super(element);
+    constructor(context: Context, element: HTMLTextAreaElement) {
+        super(context, element);
        this.value = element.value;
    }
 }
--- a/src/dom/node-parser.ts
+++ b/src/dom/node-parser.ts
@ -1,4 +1,4 @@
-import {CSSParsedDeclaration} from '../css/index';
+import {CSSParsedDeclaration} from '../css';
 import {ElementContainer, FLAGS} from './element-container';
 import {TextContainer} from './text-container';
 import {ImageElementContainer} from './replaced-elements/image-element-container';
@ -10,81 +10,93 @@ import {InputElementContainer} from './replaced-elements/input-element-container
 import {SelectElementContainer} from './elements/select-element-container';
 import {TextareaElementContainer} from './elements/textarea-element-container';
 import {IFrameElementContainer} from './replaced-elements/iframe-element-container';
+import {Context} from '../core/context';

 const LIST_OWNERS = ['OL', 'UL', 'MENU'];

-const parseNodeTree = (node: Node, parent: ElementContainer, root: ElementContainer) => {
+const parseNodeTree = (context: Context, node: Node, parent: ElementContainer, root: ElementContainer) => {
    for (let childNode = node.firstChild, nextNode; childNode; childNode = nextNode) {
        nextNode = childNode.nextSibling;

        if (isTextNode(childNode) && childNode.data.trim().length > 0) {
-            parent.textNodes.push(new TextContainer(childNode, parent.styles));
+            parent.textNodes.push(new TextContainer(context, 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(context, childNode, parent, root));
+            } else {
+                const container = createContainer(context, 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(context, childNode.shadowRoot, container, root);
+                    } else if (
+                        !isTextareaElement(childNode) &&
+                        !isSVGElement(childNode) &&
+                        !isSelectElement(childNode)
+                    ) {
+                        parseNodeTree(context, childNode, container, root);
+                    }
                }
            }
        }
    }
 };

-const createContainer = (element: Element): ElementContainer => {
+const createContainer = (context: Context, element: Element): ElementContainer => {
    if (isImageElement(element)) {
-        return new ImageElementContainer(element);
+        return new ImageElementContainer(context, element);
    }

    if (isCanvasElement(element)) {
-        return new CanvasElementContainer(element);
+        return new CanvasElementContainer(context, element);
    }

    if (isSVGElement(element)) {
-        return new SVGElementContainer(element);
+        return new SVGElementContainer(context, element);
    }

    if (isLIElement(element)) {
-        return new LIElementContainer(element);
+        return new LIElementContainer(context, element);
    }

    if (isOLElement(element)) {
-        return new OLElementContainer(element);
+        return new OLElementContainer(context, element);
    }

    if (isInputElement(element)) {
-        return new InputElementContainer(element);
+        return new InputElementContainer(context, element);
    }

    if (isSelectElement(element)) {
-        return new SelectElementContainer(element);
+        return new SelectElementContainer(context, element);
    }

    if (isTextareaElement(element)) {
-        return new TextareaElementContainer(element);
+        return new TextareaElementContainer(context, element);
    }

    if (isIFrameElement(element)) {
-        return new IFrameElementContainer(element);
+        return new IFrameElementContainer(context, element);
    }

-    return new ElementContainer(element);
+    return new ElementContainer(context, element);
 };

-export const parseTree = (element: HTMLElement): ElementContainer => {
-    const container = createContainer(element);
+export const parseTree = (context: Context, element: HTMLElement): ElementContainer => {
+    const container = createContainer(context, element);
    container.flags |= FLAGS.CREATES_REAL_STACKING_CONTEXT;
-    parseNodeTree(element, container, container);
+    parseNodeTree(context, element, container, container);
    return container;
 };

@ -118,3 +130,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/canvas-element-container.ts
+++ b/src/dom/replaced-elements/canvas-element-container.ts
@ -1,12 +1,13 @@
 import {ElementContainer} from '../element-container';
+import {Context} from '../../core/context';

 export class CanvasElementContainer extends ElementContainer {
    canvas: HTMLCanvasElement;
    intrinsicWidth: number;
    intrinsicHeight: number;

-    constructor(canvas: HTMLCanvasElement) {
-        super(canvas);
+    constructor(context: Context, canvas: HTMLCanvasElement) {
+        super(context, canvas);
        this.canvas = canvas;
        this.intrinsicWidth = canvas.width;
        this.intrinsicHeight = canvas.height;
--- a/src/dom/replaced-elements/iframe-element-container.ts
+++ b/src/dom/replaced-elements/iframe-element-container.ts
@ -1,9 +1,7 @@
 import {ElementContainer} from '../element-container';
 import {parseTree} from '../node-parser';
-import {Color, color, COLORS, isTransparent} from '../../css/types/color';
-import {Parser} from '../../css/syntax/parser';
-
-const parseColor = (value: string): Color => color.parse(Parser.create(value).parseComponentValue());
+import {Color, parseColor, COLORS, isTransparent} from '../../css/types/color';
+import {Context} from '../../core/context';

 export class IFrameElementContainer extends ElementContainer {
    src: string;
@ -12,8 +10,8 @@ export class IFrameElementContainer extends ElementContainer {
    tree?: ElementContainer;
    backgroundColor: Color;

-    constructor(iframe: HTMLIFrameElement) {
-        super(iframe);
+    constructor(context: Context, iframe: HTMLIFrameElement) {
+        super(context, iframe);
        this.src = iframe.src;
        this.width = parseInt(iframe.width, 10) || 0;
        this.height = parseInt(iframe.height, 10) || 0;
@ -24,16 +22,20 @@ export class IFrameElementContainer extends ElementContainer {
                iframe.contentWindow.document &&
                iframe.contentWindow.document.documentElement
            ) {
-                this.tree = parseTree(iframe.contentWindow.document.documentElement);
+                this.tree = parseTree(context, iframe.contentWindow.document.documentElement);

                // http://www.w3.org/TR/css3-background/#special-backgrounds
                const documentBackgroundColor = iframe.contentWindow.document.documentElement
                    ? parseColor(
+                          context,
                          getComputedStyle(iframe.contentWindow.document.documentElement).backgroundColor as string
                      )
                    : COLORS.TRANSPARENT;
                const bodyBackgroundColor = iframe.contentWindow.document.body
-                    ? parseColor(getComputedStyle(iframe.contentWindow.document.body).backgroundColor as string)
+                    ? parseColor(
+                          context,
+                          getComputedStyle(iframe.contentWindow.document.body).backgroundColor as string
+                      )
                    : COLORS.TRANSPARENT;

                this.backgroundColor = isTransparent(documentBackgroundColor)
--- a/src/dom/replaced-elements/image-element-container.ts
+++ b/src/dom/replaced-elements/image-element-container.ts
@ -1,16 +1,16 @@
 import {ElementContainer} from '../element-container';
-import {CacheStorage} from '../../core/cache-storage';
+import {Context} from '../../core/context';

 export class ImageElementContainer extends ElementContainer {
    src: string;
    intrinsicWidth: number;
    intrinsicHeight: number;

-    constructor(img: HTMLImageElement) {
-        super(img);
+    constructor(context: Context, img: HTMLImageElement) {
+        super(context, img);
        this.src = img.currentSrc || img.src;
        this.intrinsicWidth = img.naturalWidth;
        this.intrinsicHeight = img.naturalHeight;
-        CacheStorage.getInstance().addImage(this.src);
+        this.context.cache.addImage(this.src);
    }
 }
--- a/src/dom/replaced-elements/input-element-container.ts
+++ b/src/dom/replaced-elements/input-element-container.ts
@ -5,6 +5,7 @@ import {BACKGROUND_ORIGIN} from '../../css/property-descriptors/background-origi
 import {TokenType} from '../../css/syntax/tokenizer';
 import {LengthPercentageTuple} from '../../css/types/length-percentage';
 import {Bounds} from '../../css/layout/bounds';
+import {Context} from '../../core/context';

 const CHECKBOX_BORDER_RADIUS: LengthPercentageTuple = [
    {
@ -48,8 +49,8 @@ export class InputElementContainer extends ElementContainer {
    readonly checked: boolean;
    readonly value: string;

-    constructor(input: HTMLInputElement) {
-        super(input);
+    constructor(context: Context, input: HTMLInputElement) {
+        super(context, input);
        this.type = input.type.toLowerCase();
        this.checked = input.checked;
        this.value = getInputValue(input);
--- a/src/dom/replaced-elements/svg-element-container.ts
+++ b/src/dom/replaced-elements/svg-element-container.ts
@ -1,18 +1,23 @@
 import {ElementContainer} from '../element-container';
-import {CacheStorage} from '../../core/cache-storage';
+import {parseBounds} from '../../css/layout/bounds';
+import {Context} from '../../core/context';

 export class SVGElementContainer extends ElementContainer {
    svg: string;
    intrinsicWidth: number;
    intrinsicHeight: number;

-    constructor(img: SVGSVGElement) {
-        super(img);
+    constructor(context: Context, img: SVGSVGElement) {
+        super(context, img);
        const s = new XMLSerializer();
+        const bounds = parseBounds(context, 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;

-        CacheStorage.getInstance().addImage(this.svg);
+        this.context.cache.addImage(this.svg);
    }
 }
--- a/src/dom/text-container.ts
+++ b/src/dom/text-container.ts
@ -1,14 +1,15 @@
 import {CSSParsedDeclaration} from '../css/index';
 import {TEXT_TRANSFORM} from '../css/property-descriptors/text-transform';
 import {parseTextBounds, TextBounds} from '../css/layout/text';
+import {Context} from '../core/context';

 export class TextContainer {
    text: string;
    textBounds: TextBounds[];

-    constructor(node: Text, styles: CSSParsedDeclaration) {
+    constructor(context: Context, node: Text, styles: CSSParsedDeclaration) {
        this.text = transform(node.data, styles.textTransform);
-        this.textBounds = parseTextBounds(this.text, styles, node);
+        this.textBounds = parseTextBounds(context, this.text, styles, node);
    }
 }

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Niklas von Hertzen	11d65ebf1b	fix: ios grapheme layout	2021-08-16 20:21:04 +08:00
CI	0b1f0a7e90	chore(release): 1.3.2	2021-08-15 12:54:26 +00:00
Niklas von Hertzen	38c682955a	fix: overflows with absolutely positioned content (#2663 )	2021-08-15 19:41:57 +08:00
Niklas von Hertzen	01ed87907a	docs: add warning for webgl cloning with preserveDrawingBuffer=false (#2661 )	2021-08-14 17:18:30 +08:00
Niklas von Hertzen	58ff0003f7	docs: include src files on www (#2660 )	2021-08-14 16:48:22 +08:00
Niklas von Hertzen	f143166551	fix: disable transition properties (#2659 )	2021-08-14 16:22:36 +08:00
Niklas von Hertzen	cd0d7258c3	feat: add support for data-html2canvas-debug property for debugging (#2658 )	2021-08-14 15:01:41 +08:00
CI	b482725994	chore(release): 1.3.1	2021-08-14 06:06:09 +00:00
Niklas von Hertzen	1b55ed5668	fix: multi arg transition/animation duration (#2657 )	2021-08-14 14:05:15 +08:00
CI	68377b3244	chore(release): 1.3.0	2021-08-13 11:52:05 +00:00
Niklas von Hertzen	6947982848	feat: add rtl render support (#2653 )	2021-08-13 19:50:59 +08:00
Niklas von Hertzen	437b367d3b	feat: correctly break graphemes (#2652 )	2021-08-13 18:57:49 +08:00
Niklas von Hertzen	969638fb94	fix: finish animation/transitions for elements (#2632 )	2021-08-13 18:15:55 +08:00
Niklas von Hertzen	f919204efa	test: add letter-spacing test for zwj emoji (#2650 )	2021-08-13 17:45:42 +08:00
Niklas von Hertzen	c378e22069	fix: correctly handle allowTaint canvas cloning (#2649 )	2021-08-13 17:32:55 +08:00
CI	2b4de68e92	chore(release): 1.2.2	2021-08-10 10:39:01 +00:00
Niklas von Hertzen	1941b9e0ac	fix: parsing counter content in pseudo element (#2640 )	2021-08-09 18:43:42 +08:00
Niklas von Hertzen	e429e0443a	ci: add ios15 target (#2564 )	2021-08-09 17:15:00 +08:00
Niklas von Hertzen	f43f942fcd	fix: test for ios range line break error (#2635 )	2021-08-09 17:14:40 +08:00
Niklas von Hertzen	7a06d0c2c2	docs: update test previewer (#2637 )	2021-08-07 18:05:08 +08:00
Niklas von Hertzen	e36408ad03	test: large base64 encoded background (#2636 )	2021-08-07 15:47:15 +08:00
Niklas von Hertzen	a0dd38a8be	fix: radial gradient ry check (#2631 )	2021-08-05 14:07:10 +08:00
CI	b988d9d657	chore(release): 1.2.1	2021-08-05 02:39:44 +00:00
Niklas von Hertzen	c5c6fa00d7	fix: type import that is only available ts 3.8 or higher (#2629 )	2021-08-05 10:17:30 +08:00
Niklas von Hertzen	6651fc6789	fix: none image (#2627 )	2021-08-05 09:30:22 +08:00
CI	df223c3ff2	chore(release): 1.2.0	2021-08-04 15:00:38 +00:00
Niklas von Hertzen	95a46b00c5	fix: overflow-wrap break-word (#2626 )	2021-08-04 22:53:48 +08:00
Niklas von Hertzen	878e37a242	fix: element cropping & scrolling (#2625 )	2021-08-04 20:58:17 +08:00
Niklas von Hertzen	1338c7b203	test: element with scrolled window (#2624 )	2021-08-04 11:28:05 +08:00
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