chore(release): 1.0.0-rc.0

build: update webpack and babel (#1793 )
ci: automate changelog generation (#1792 )
2023-08-10 21:13:10 +03:00 · 2019-04-07 22:01:14 +00:00 · 2019-04-07 14:24:17 -07:00 · 2019-04-07 12:49:10 -07:00 · 2019-04-07 12:17:43 -07:00 · 2019-04-06 23:44:01 -07:00
165 changed files with 28733 additions and 14838 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,4 +1,13 @@
 {
-    "plugins": ["transform-object-rest-spread"],
-    "presets": ["es2015", "flow"]
+    "presets": [[
+        "@babel/preset-env",
+        {
+            "targets": {
+                "ie": "9"
+            }
+        }
+    ], "@babel/preset-flow"],
+    "plugins": [
+        "add-module-exports"
+    ]
 }
--- a/.editorconfig
+++ b/.editorconfig
@ -11,7 +11,7 @@ insert_final_newline = true
 indent_style = space
 indent_size = 4

-[{.travis.yml,package.json}]
+[{azure-pipelines.yml,package.json}]
 # The indent size used in the `package.json` file cannot be changed
 # https://github.com/npm/npm/pull/3180#issuecomment-16336516
 indent_size = 2
--- a/.flowconfig
+++ b/.flowconfig
@ -1,5 +1,6 @@
 [ignore]
 .*/www/.*
+.*/node_modules/@webassemblyjs/.*
 [include]
 [libs]
 ./flow-typed
--- a/.github/no-response.yml
+++ b/.github/no-response.yml
@ -0,0 +1,13 @@
+# Configuration for probot-no-response - https://github.com/probot/no-response
+
+# Number of days of inactivity before an Issue is closed for lack of response
+daysUntilClose: 14
+# Label requiring a response
+responseRequiredLabel: Needs More Information
+# Comment to post when closing an Issue for lack of response. Set to `false` to disable
+closeComment: >
+  This issue has been automatically closed because there has been no response
+  to our request for more information from the original author. With only the
+  information that is currently in the issue, we don't have enough information
+  to take action. Please reach out if you have or find the answers we need so
+  that we can investigate further.
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,5 @@
 /dist
+/tmp
 /build
 /nbproject/
 image.jpg
--- a/.npmignore
+++ b/.npmignore
@ -1,15 +1,21 @@
 build/
+docs/
 examples/
 scripts/
 src/
 tests/
+www/
+tmp/
 .github/
 *.iml
 .babelrc
 .idea/
+.editorconfig
 .npmignore
 .eslintrc
 .travis.yml
+azure-pipelines.yml
 karma.js
 karma.conf.js
+rollup.config.js
 webpack.config.js
--- a/.travis.yml
+++ b/.travis.yml
@ -1,46 +0,0 @@
-language: node_js
-node_js:
- '7'
-env:
-  global:
-  - secure: eW41gIqOizwO4pTgWnAAbW75AP7F+CK9qfSed/fSh4sJ9HWMIY1YRIaY8gjr+6jV/f7XVHcXuym6ZxgINYSkVKbF1JKxBJNLOXtSgNbVHSic58pYFvUjwxIBI9aPig9uux1+DbnpWqXFDTcACJSevQZE0xwmjdrSkDLgB0G34v8=
-  - secure: Y2Av+Gd3z9uQEB36GwdOOuGka0hx0/HeitASEo59z934O8RxnmN9eNTXS7dDT3XtKtwxIyLTOEpS7qlRdWahH28hr/dS4xJj6ao58C+1xMcDs6NAPGmDxUlcJWpcGEsnjmXjQCc3fBioSTdpIBrK/gdvgpNh77UKG74Sk7Z+YGk=
-addons:
-  chrome: stable
-  firefox: latest
-dist: trusty
-sudo: false
-before_script:
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
-notifications:
-  webhooks:
-    urls:
-    - https://webhooks.gitter.im/e/2b007d4f86de89588804
-    on_success: always
-    on_failure: always
-    on_start: false
-script:
-  - npm run build
-  - npm test
-deploy:
-  - provider: npm
-    email: niklasvh@gmail.com
-    api_key:
-      secure: G/Szpr8q4/D6hp+H/Z9yyluUXtHAwf7LLa1Y07X59/Enlj1h7V5fQ7AW4/iAVM3XbIsrCPWR3dJU9g/ZxpxFg4OovIHVpS2Jr/mahtPYWdHR3pWuSmMW8QD+Twnq2VAFwSgg5Oumq3QxhX3YbCOnZox6+6Uviqk8FO7Z5B0RwW4=
-    skip_cleanup: true
-    on:
-      tags: true
-      branch: master
-      repo: niklasvh/html2canvas
-  - provider: releases
-    api_key:
-     secure: "PowO/Jat660k3gHcjgI6DlJz15RM7pLUu11UPsLCtYJ8ZwodppE6Keg0DfVkSFSIZttZor+UssDwP/WOEqfZNLqmXbcj3Gec4xolohet/GOe0KJKKuF/HgggbcxumopxMX6sMVePlMBpkLpHh7tgEAEHBWTlzC1c1a7Xa48fZ7k="
-    file:
-     - "dist/html2canvas.js"
-     - "dist/html2canvas.min.js"
-    skip_cleanup: true
-    on:
-      tags: true
-      branch: master
-      repo: niklasvh/html2canvas
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,22 +1,90 @@
-### Changelog ###
+# Change Log

-#### v1.0.0-alpha3 - TBD ####
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+# [1.0.0-rc.0](https://github.com/niklasvh/html2canvas/compare/v1.0.0-alpha.12...v1.0.0-rc.0) (2019-04-07)
+
+
+### build
+
+* update webpack and babel (#1793) ([44f3d79f68836624c2673a86f9ad47c17ef843c3](https://github.com/niklasvh/html2canvas/commit/44f3d79f68836624c2673a86f9ad47c17ef843c3)), closes [#1793](https://github.com/niklasvh/html2canvas/issues/1793)
+
+### ci
+
+* automate changelog generation (#1792) ([7ebef72e927eaafd34a1792ece431d2a73109230](https://github.com/niklasvh/html2canvas/commit/7ebef72e927eaafd34a1792ece431d2a73109230)), closes [#1792](https://github.com/niklasvh/html2canvas/issues/1792)
+* Improve CI pipeline (#1790) ([c45ef099fe8f7142e174f4fce39448a370a987d5](https://github.com/niklasvh/html2canvas/commit/c45ef099fe8f7142e174f4fce39448a370a987d5)), closes [#1790](https://github.com/niklasvh/html2canvas/issues/1790)
+
+### docs
+
+* improve canvas size limit documentation (#1576) ([3212184146b33c3564c2f416e1bfda911737c38b](https://github.com/niklasvh/html2canvas/commit/3212184146b33c3564c2f416e1bfda911737c38b)), closes [#1576](https://github.com/niklasvh/html2canvas/issues/1576)
+
+### fix
+
+* enforce colorstop min 0 (#1743) ([349bbf137abd83464e074db3948fc79a541c2ef3](https://github.com/niklasvh/html2canvas/commit/349bbf137abd83464e074db3948fc79a541c2ef3)), closes [#1743](https://github.com/niklasvh/html2canvas/issues/1743)
+* prevent unhandled promise rejections for hidden frames (#1762) ([5cbe5db35155e3a9790a30de09feb17843053b7a](https://github.com/niklasvh/html2canvas/commit/5cbe5db35155e3a9790a30de09feb17843053b7a)), closes [#1762](https://github.com/niklasvh/html2canvas/issues/1762)
+* wrap .sheet.cssRules access in try...catch. (#1693) ([2c018d19875ced30caafdc40f84ca531de6e6f91](https://github.com/niklasvh/html2canvas/commit/2c018d19875ced30caafdc40f84ca531de6e6f91)), closes [#1693](https://github.com/niklasvh/html2canvas/issues/1693)
+
+
+
+# [1.0.0-alpha.12](https://github.com/niklasvh/html2canvas/compare/v1.0.0-alpha.12...v1.0.0-alpha.13) (2019-04-07)
+ * Fix white space appearing on element rendering (Fix #1438)
+ * Reset canvas transform on finish (Fix #1494)
+
+# v1.0.0-alpha.11 - 1.4.2018 
+ * Fix IE11 member not found error 
+ * Support blob image resources in non-foreignObjectRendering mode
+
+# v1.0.0-alpha.10 - 15.2.2018 
+ * Re-introduce `onclone` option (Fix #1434)
+ * Add `ignoreElements` predicate function option
+ * Fix version console logging
+
+# v1.0.0-alpha.9 - 7.1.2018 
+ * Fix dynamic style sheets
+ * Fix > 50% border-radius values
+
+# v1.0.0-alpha.8 - 2.1.2018
+ * Use correct doctype in cloned Document (Fix #1298)
+ * Fix individual border rendering (Fix #1349)
+
+# v1.0.0-alpha.7 - 31.12.2017
+ * Fix form input rendering (#1338)
+ * Improve word line breaking algorithm
+
+# v1.0.0-alpha.6 - 28.12.2017 
+ * Fix list-style: none (#1340)
+ * Extend supported values for pseudo element content
+
+# v1.0.0-alpha.5 - 21.12.2017
+ * Fix underline positioning
+ * Fix canvas rendering on Chrome
+ * Fix overflow: auto
+ * Added support for rendering list-style
+
+ v1.0.0-alpha.4 - 12.12.2017 
+ * Fix rendering with multiple fonts defined (Fix #796)
+ * Add support for radial-gradients
+ * Fix logging option (#1302)
+ * Add support for rendering webgl canvas content (#646)
+ * Fix external SVG loading with proxies (#802)
+
+# v1.0.0-alpha.3 - 9.12.2017
 * Disable `foreignObjectRendering` by default (#1295)
 * Fix background-size when using background-origin and background-size: cover/contain (#1299)
 * Added support for background-origin: content-box (#1299)

-#### v1.0.0-alpha2 - 7.12.2017 ####
+# v1.0.0-alpha.2 - 7.12.2017
 * Fix scroll positions for CanvasRenderer (#1259)
 * Fix `data-html2canvas-ignore` attribute (#1253)
 * Fix decimal `letter-spacing` values (#1293)

-#### v1.0.0-alpha1 - 5.12.2017 ####
+# v1.0.0-alpha.1 - 5.12.2017
 * Complete rewrite of library
 ##### Breaking Changes #####
 * Remove deprecated onrendered callback, calling `html2canvas` returns a `Promise<HTMLCanvasElement>`
 * Removed option `type`, same results can be achieved by assigning `x`, `y`, `scrollX`, `scrollY`, `width` and `height` properties.
 
- ##### New featues / fixes #####
+ ## New featues / fixes 
 * Add support for scaling canvas (defaults to device pixel ratio)
 * Add support for multiple text-shadows
 * Add support for multiple text-decorations
@ -26,18 +94,18 @@
 * Correctly support all angle types for linear-gradients
 * Add support for multiple values for background-repeat, background-position and background-size
 
-#### v0.5.0-beta4 - 23.1.2016 ####
+# v0.5.0-beta4 - 23.1.2016
 * Fix logger requiring access to window object
 * Derequire browserify build
 * Fix rendering of specific elements when window is scrolled and `type` isn't set to `view`

-#### v0.5.0-beta3 - 6.12.2015 ####
+# v0.5.0-beta3 - 6.12.2015
 * Handle color names in linear gradients

-#### v0.5.0-beta2 - 20.10.2015 ####
+# v0.5.0-beta2 - 20.10.2015
 * Remove Promise polyfill (use native or provide it yourself)

-#### v0.5.0-beta1 - 19.10.2015 ####
+# v0.5.0-beta1 - 19.10.2015
 * Fix bug with unmatched color stops in gradients
 * Fix scrolling issues with iOS
 * Correctly handle named colors in gradients
@ -45,11 +113,11 @@
 * Fix transparent colors breaking gradients
 * Preserve scrolling positions on render

-#### v0.5.0-alpha2 - 3.2.2015 ####
+# v0.5.0-alpha2 - 3.2.2015 
 * Switch to using browserify for building
 * Fix (#517) Chrome stretches background images with 'auto' or single attributes

-#### v0.5.0-alpha - 19.1.2015#### 
+# v0.5.0-alpha - 19.1.2015 
 * Complete rewrite of library
 * Switched interface to return Promise
 * Uses hidden iframe window to perform rendering, allowing async rendering and doesn't force the viewport to be scrolled to the top anymore.
@ -60,14 +128,14 @@
 * Changed format for proxy requests, permitting binary responses with CORS headers as well
 * Fixed many layering issues (see z-index tests)

-#### v0.4.1 - 7.9.2013 ####
+# v0.4.1 - 7.9.2013 
 * Added support for bower
 * Improved z-index ordering
 * Basic implementation for CSS transformations
 * Fixed inline text in top element
 * Basic implementation for text-shadow

-#### v0.4.0 - 30.1.2013 ####
+# v0.4.0 - 30.1.2013 
 * Added rendering tests with <a href="https://github.com/niklasvh/webdriver.js">webdriver</a>
 * Switched to using grunt for building
 * Removed support for IE<9, including any FlashCanvas bits
@ -77,7 +145,7 @@
 * Support for placeholder rendering
 * Reformatted all tests to small units to test specific features

-#### v0.3.4 - 26.6.2012 ####
+# v0.3.4 - 26.6.2012 

 * Removed (last?) jQuery dependencies (<a href="https://github.com/niklasvh/html2canvas/commit/343b86705fe163766fcf735eb0217130e4bd5b17">niklasvh</a>)
 * SVG-powered rendering (<a href="https://github.com/niklasvh/html2canvas/commit/67d3e0d0f59a5a654caf71a2e3be6494ff146c75">niklasvh</a>)
@ -85,7 +153,7 @@
 * Split renderers to their own objects (<a href="https://github.com/niklasvh/html2canvas/commit/94f2f799a457cd29a21cc56ef8c06f1697866739">niklasvh</a>)
 * Simplified API, cleaned up code (<a href="https://github.com/niklasvh/html2canvas/commit/c7d526c9eaa6a4abf4754d205fe1dee360c7660e">niklasvh</a>)

-#### v0.3.3 - 2.3.2012 ####
+# v0.3.3 - 2.3.2012

 * SVG taint fix, and additional taint testing options for rendering (<a href="https://github.com/niklasvh/html2canvas/commit/2dc8b9385e656696cb019d615bdfa1d98b17d5d4">niklasvh</a>)
 * Added support for CORS images and option to create canvas as tainted (<a href="https://github.com/niklasvh/html2canvas/commit/3ad49efa0032cde25c6ed32a39e35d1505d3b2ef">niklasvh</a>)
@ -93,7 +161,7 @@
 * Added integrated support for Flashcanvas (<a href="https://github.com/niklasvh/html2canvas/commit/e9257191519f67d74fd5e364d8dee3c0963ba5fc">niklasvh</a>)
 * Fixed a variety of legacy IE bugs (<a href="https://github.com/niklasvh/html2canvas/commit/b65357c55d0701017bafcd357bc654b54d458f8f">niklasvh</a>)

-#### v0.3.2 - 20.2.2012 ####
+# v0.3.2 - 20.2.2012

 * Added changelog!
 * Added bookmarklet (<a href="https://github.com/niklasvh/html2canvas/commit/b320dd306e1a2d32a3bc5a71b6ebf6d8c060cde5">cobexer</a>)
--- a/README.md
+++ b/README.md
@ -3,7 +3,10 @@ html2canvas

 [Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](http://stackoverflow.com/questions/tagged/html2canvas?sort=newest) | [Donate](https://www.gittip.com/niklasvh/)

-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Build Status](https://travis-ci.org/niklasvh/html2canvas.png)](https://travis-ci.org/niklasvh/html2canvas)
+[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 
+[![Build Status](https://dev.azure.com/niklasvh/html2canvas/_apis/build/status/niklasvh.html2canvas?branchName=master)](https://dev.azure.com/niklasvh/html2canvas/_build/latest?definitionId=1&branchName=master)
+[![NPM Downloads](https://img.shields.io/npm/dm/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
+[![NPM Version](https://img.shields.io/npm/v/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)

 #### JavaScript HTML renderer ####

--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@ -0,0 +1,313 @@
+trigger:
+- master
+
+jobs:
+  - job: Build
+    displayName: Build
+    pool:
+      vmImage: 'Ubuntu-16.04'
+    steps:
+    - task: NodeTool@0
+      inputs:
+        versionSpec: '10.x'
+      displayName: 'Install Node.js'
+    - task: Npm@0
+      inputs:
+        command: install
+    - script: npm run build
+      displayName: Build
+    - script: |
+       npm pack
+       mv html2canvas-*.tgz html2canvas.tgz
+       tar --list --verbose --file=html2canvas.tgz
+      displayName: Pack
+      name: pack
+    - task: PublishBuildArtifacts@1
+      inputs:
+        PathtoPublish: html2canvas.tgz
+        artifactName: npm
+    - task: PublishBuildArtifacts@1
+      inputs:
+        PathtoPublish: 'dist'
+        artifactName: dist
+    - task: PublishBuildArtifacts@1
+      inputs:
+        PathtoPublish: 'build'
+        artifactName: build
+  - job: Test
+    displayName: Tests
+    pool:
+      vmImage: 'Ubuntu-16.04'
+    steps:
+    - task: NodeTool@0
+      inputs:
+        versionSpec: '10.x'
+      displayName: 'Install Node.js'
+    - task: Npm@0
+      inputs:
+        command: install
+    - script: npm run build
+      displayName: Build
+    - script: npm run lint
+      displayName: Lint
+    - script: npm run flow
+      displayName: Flow
+    - script: npm run test:node
+      displayName: Unit tests
+  - job: Build_docs
+    displayName: Build docs
+    pool:
+      vmImage: 'Ubuntu-16.04'
+    steps:
+    - task: NodeTool@0
+      inputs:
+        versionSpec: '10.x'
+      displayName: 'Install Node.js'
+    - task: Npm@0
+      inputs:
+        command: install
+    - script: npm run build && cd www && npm install && npm run build && cd ..
+      displayName: Build docs
+    - task: PublishBuildArtifacts@1
+      displayName: Upload docs website artifact
+      inputs:
+        PathtoPublish: 'www/public'
+        artifactName: docs
+  - job: Browser_Tests_Linux_Firefox_Stable
+    displayName: Linux Firefox Stable
+    pool:
+      vmImage: 'Ubuntu-16.04'
+    variables:
+      TARGET_BROWSER: Firefox_Stable
+    dependsOn: Build
+    condition: succeeded()
+    steps:
+    - task: NodeTool@0
+      inputs:
+        versionSpec: '10.x'
+      displayName: 'Install Node.js'
+    - task: Npm@0
+      inputs:
+        command: install
+    - task: DownloadBuildArtifacts@0
+      displayName: 'Download library'
+      inputs:
+        artifactName: dist
+        downloadPath: $(System.DefaultWorkingDirectory)
+    - task: DownloadBuildArtifacts@0
+      displayName: 'Download testrunner'
+      inputs:
+        artifactName: build
+        downloadPath: $(System.DefaultWorkingDirectory)
+    - script: Xvfb :99 &
+      displayName: 'Start Xvfb'
+    - script: DISPLAY=:99 npm run karma
+      displayName: 'Run Firefox tests - Firefox Stable'
+    - task: PublishTestResults@2
+      condition: succeededOrFailed()
+      inputs:
+        testRunner: JUnit
+        testResultsFiles: 'tmp/junit/*.xml'
+    - task: PublishBuildArtifacts@1
+      displayName: Upload Screenshots
+      condition: succeededOrFailed()
+      inputs:
+        PathtoPublish: 'tmp/reftests'
+        artifactName: ReftestResults
+  - job: Browser_Tests_Linux_Chrome_Stable
+    displayName: Linux Chrome Stable
+    pool:
+      vmImage: 'Ubuntu-16.04'
+    variables:
+      TARGET_BROWSER: Chrome_Stable
+    dependsOn: Build
+    condition: succeeded()
+    steps:
+    - task: NodeTool@0
+      inputs:
+        versionSpec: '10.x'
+      displayName: 'Install Node.js'
+    - task: Npm@0
+      inputs:
+        command: install
+    - task: DownloadBuildArtifacts@0
+      displayName: 'Download library'
+      inputs:
+        artifactName: dist
+        downloadPath: $(System.DefaultWorkingDirectory)
+    - task: DownloadBuildArtifacts@0
+      displayName: 'Download testrunner'
+      inputs:
+        artifactName: build
+        downloadPath: $(System.DefaultWorkingDirectory)
+    - script: Xvfb :99 &
+      displayName: 'Start Xvfb'
+    - script: DISPLAY=:99 npm run karma
+      displayName: 'Run Chrome tests - Chrome Stable'
+    - task: PublishTestResults@2
+      condition: succeededOrFailed()
+      inputs:
+        testRunner: JUnit
+        testResultsFiles: 'tmp/junit/*.xml'
+    - task: PublishBuildArtifacts@1
+      displayName: Upload Screenshots
+      condition: succeededOrFailed()
+      inputs:
+        PathtoPublish: 'tmp/reftests'
+        artifactName: ReftestResults
+  - job: Browser_Tests_OSX_Safari_Stable
+    displayName: OSX Safari Stable
+    pool:
+      vmImage: 'macOS-10.13'
+    variables:
+      TARGET_BROWSER: Safari_Stable
+    dependsOn: Build
+    condition: succeeded()
+    steps:
+    - task: NodeTool@0
+      inputs:
+        versionSpec: '10.x'
+      displayName: 'Install Node.js'
+    - task: Npm@0
+      inputs:
+        command: install
+    - task: DownloadBuildArtifacts@0
+      displayName: 'Download library'
+      inputs:
+        artifactName: dist
+        downloadPath: $(System.DefaultWorkingDirectory)
+    - task: DownloadBuildArtifacts@0
+      displayName: 'Download testrunner'
+      inputs:
+        artifactName: build
+        downloadPath: $(System.DefaultWorkingDirectory)
+    - script: npm run karma
+      displayName: 'Run Safari tests - Safari Stable'
+    - task: PublishTestResults@2
+      condition: succeededOrFailed()
+      inputs:
+        testRunner: JUnit
+        testResultsFiles: 'tmp/junit/*.xml'
+    - task: PublishBuildArtifacts@1
+      displayName: Upload Screenshots
+      condition: succeededOrFailed()
+      inputs:
+        PathtoPublish: 'tmp/reftests'
+        artifactName: ReftestResults
+  - job: Browser_Tests_Windows_IE9
+    displayName: Windows Internet Explorer 9 (Emulated)
+    pool:
+      vmImage: 'vs2017-win2016'
+    variables:
+      TARGET_BROWSER: IE_9
+    dependsOn: Build
+    condition: succeeded()
+    steps:
+    - task: NodeTool@0
+      inputs:
+        versionSpec: '10.x'
+      displayName: 'Install Node.js'
+    - task: Npm@0
+      inputs:
+        command: install
+    - task: DownloadBuildArtifacts@0
+      displayName: 'Download library'
+      inputs:
+        artifactName: dist
+        downloadPath: $(System.DefaultWorkingDirectory)
+    - task: DownloadBuildArtifacts@0
+      displayName: 'Download testrunner'
+      inputs:
+        artifactName: build
+        downloadPath: $(System.DefaultWorkingDirectory)
+    - script: npm run karma
+      displayName: 'Run Internet Explorer tests - IE 9'
+    - task: PublishTestResults@2
+      condition: succeededOrFailed()
+      inputs:
+        testRunner: JUnit
+        testResultsFiles: 'tmp/junit/*.xml'
+    - task: PublishBuildArtifacts@1
+      displayName: Upload Screenshots
+      condition: succeededOrFailed()
+      inputs:
+        PathtoPublish: 'tmp/reftests'
+        artifactName: ReftestResults
+  - job: Browser_Tests_Windows_IE10
+    displayName: Windows Internet Explorer 10 (Emulated)
+    pool:
+      vmImage: 'vs2017-win2016'
+    variables:
+      TARGET_BROWSER: IE_10
+    dependsOn: Build
+    condition: succeeded()
+    steps:
+    - task: NodeTool@0
+      inputs:
+        versionSpec: '10.x'
+      displayName: 'Install Node.js'
+    - task: Npm@0
+      inputs:
+        command: install
+    - task: DownloadBuildArtifacts@0
+      displayName: 'Download library'
+      inputs:
+        artifactName: dist
+        downloadPath: $(System.DefaultWorkingDirectory)
+    - task: DownloadBuildArtifacts@0
+      displayName: 'Download testrunner'
+      inputs:
+        artifactName: build
+        downloadPath: $(System.DefaultWorkingDirectory)
+    - script: npm run karma
+      displayName: 'Run Internet Explorer tests - IE 10'
+    - task: PublishTestResults@2
+      condition: succeededOrFailed()
+      inputs:
+        testRunner: JUnit
+        testResultsFiles: 'tmp/junit/*.xml'
+    - task: PublishBuildArtifacts@1
+      displayName: Upload Screenshots
+      condition: succeededOrFailed()
+      inputs:
+        PathtoPublish: 'tmp/reftests'
+        artifactName: ReftestResults
+  - job: Browser_Tests_Windows_IE11
+    displayName: Windows Internet Explorer 11
+    pool:
+      vmImage: 'vs2017-win2016'
+    variables:
+      TARGET_BROWSER: IE_11
+    dependsOn: Build
+    condition: succeeded()
+    steps:
+    - task: NodeTool@0
+      inputs:
+        versionSpec: '10.x'
+      displayName: 'Install Node.js'
+    - task: Npm@0
+      inputs:
+        command: install
+    - task: DownloadBuildArtifacts@0
+      displayName: 'Download library'
+      inputs:
+        artifactName: dist
+        downloadPath: $(System.DefaultWorkingDirectory)
+    - task: DownloadBuildArtifacts@0
+      displayName: 'Download testrunner'
+      inputs:
+        artifactName: build
+        downloadPath: $(System.DefaultWorkingDirectory)
+    - script: npm run karma
+      displayName: 'Run Internet Explorer tests - IE 11'
+    - task: PublishTestResults@2
+      condition: succeededOrFailed()
+      inputs:
+        testRunner: JUnit
+        testResultsFiles: 'tmp/junit/*.xml'
+    - task: PublishBuildArtifacts@1
+      displayName: Upload Screenshots
+      condition: succeededOrFailed()
+      inputs:
+        PathtoPublish: 'tmp/reftests'
+        artifactName: ReftestResults
--- a/bower.json
+++ b/bower.json
@ -1,9 +0,0 @@
-{
-    "name": "html2canvas",
-    "description": "Screenshots with JavaScript",
-    "main": "dist/html2canvas.js",
-    "ignore": [
-        "tests",
-        ".travis.yml"
-    ]
-}
--- a/docs/configuration.md
+++ b/docs/configuration.md
@ -1,25 +1,36 @@
 ---
-title: "Configuration"
+title: "Options"
+description: "Explore the different configuration options available for html2canvas"
+previousUrl: "/getting-started"
+previousTitle: "Getting Started"
+nextUrl: "/features"
+nextTitle: "Features"
 ---

 These are all of the available configuration options.

-| Name          | Type          | Default  | Description |
-| ------------- |:-------------:| :------: | ----------- |
-| async | Boolean | `true` | Whether to parse and render the element asynchronously
-| allowTaint | Boolean | `false` | Whether to allow cross-origin images to taint the canvas
-| backgroundColor | String | `#ffffff` | Canvas background color, if none is specified in DOM. Set undefined for transparent
-| canvas | `HTMLCanvasElement` | `null` | Existing `canvas` element to use as a base for drawing on
-| foreignObjectRendering | Boolean | `false` | Whether to use ForeignObject rendering if the browser supports it
-| imageTimeout | Number | `15000` | Timeout for loading an image (in milliseconds). Set to `0` to disable timeout.
-| proxy | String | `null` | Url to the [proxy](/proxy/) which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
-| removeContainer | Boolean | `true` | Whether to cleanup the cloned DOM elements html2canvas creates temporarily
-| scale | Number | `window.devicePixelRatio` | The scale to use for rendering. Defaults to the browsers device pixel ratio.
-| width | Number | `Element` width | The width of the `canvas`
-| height | Number | `Element` height | The height of the `canvas`
-| x | Number | `Element` x-offset | Crop canvas x-coordinate
-| y | Number | `Element` y-offset| Crop canvas y-coordinate
-| scrollX | Number | `Element` scrollX | The x-scroll position to used when rendering element, (for example if the Element uses `position: fixed`)
-| scrollY | Number | `Element` scrollY | The y-scroll position to used when rendering element, (for example if the Element uses `position: fixed`)
-| windowWidth | Number | `Window.innerWidth` | Window width to use when rendering `Element`, which may affect things like Media queries
-| windowHeight | Number | `Window.innerHeight` | Window height to use when rendering `Element`, which may affect things like Media queries
+| Name          | Default  | Description |
+| ------------- | :------: | ----------- |
+| async | `true` | Whether to parse and render the element asynchronously
+| allowTaint | `false` | Whether to allow cross-origin images to taint the canvas
+| backgroundColor | `#ffffff` | Canvas background color, if none is specified in DOM. Set `null` for transparent
+| canvas | `null` | Existing `canvas` element to use as a base for drawing on
+| foreignObjectRendering | `false` | Whether to use ForeignObject rendering if the browser supports it
+| imageTimeout | `15000` | Timeout for loading an image (in milliseconds). Set to `0` to disable timeout.
+| ignoreElements | `(element) => false` | Predicate function which removes the matching elements from the render.
+| logging | `true` | Enable logging for debug purposes
+| onclone | `null` | Callback function which is called when the Document has been cloned for rendering, can be used to modify the contents that will be rendered without affecting the original source document.
+| proxy | `null` | Url to the [proxy](/proxy/) which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
+| removeContainer | `true` | Whether to cleanup the cloned DOM elements html2canvas creates temporarily
+| scale | `window.devicePixelRatio` | The scale to use for rendering. Defaults to the browsers device pixel ratio.
+| useCORS | `false` | Whether to attempt to load images from a server using CORS
+| width | `Element` width | The width of the `canvas`
+| height | `Element` height | The height of the `canvas`
+| x | `Element` x-offset | Crop canvas x-coordinate
+| y | `Element` y-offset| Crop canvas y-coordinate
+| scrollX | `Element` scrollX | The x-scroll position to used when rendering element, (for example if the Element uses `position: fixed`)
+| scrollY | `Element` scrollY | The y-scroll position to used when rendering element, (for example if the Element uses `position: fixed`)
+| windowWidth | `Window.innerWidth` | Window width to use when rendering `Element`, which may affect things like Media queries
+| windowHeight | `Window.innerHeight` | Window height to use when rendering `Element`, which may affect things like Media queries
+
+If you wish to exclude certain `Element`s from getting rendered, you can add a `data-html2canvas-ignore` attribute to those elements and html2canvas will exclude them from the rendering.
--- a/docs/documentation.md
+++ b/docs/documentation.md
@ -1,33 +1,37 @@
 ---
 title: "About"
+description: "Learn about html2canvas, how it works and some of its limitations"
+nextUrl: "/getting-started"
+nextTitle: "Getting Started"
 ---

 Before you get started with the script, there are a few things that are good to know regarding the 
 script and some of its limitations.

-# Introduction
+## Introduction
 The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser.
 The screenshot is based on the DOM and as such may not be 100% accurate to the real representation 
 as it does not make an actual screenshot, but builds the screenshot based on the information 
 available on the page.

-# How it works
+## How it works
 The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements
 there, which it then uses to build a representation of the page. In other words, it does not actually take a
 screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.
            
+            
 As a result, it is only able to render correctly properties that it understands, meaning there are many 
 CSS properties which do not work. For a full list of supported CSS properties, check out the 
-[support features](/features/) page.
+[supported features](/features/) page.

-# Limitations
+## Limitations
 All the images that the script uses need to reside under the [same origin](http://en.wikipedia.org/wiki/Same_origin_policy) 
 for it to be able to read them without the assistance of a [proxy](/proxy/). Similarly, if you have other `canvas` 
 elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.

 The script doesn't render plugin content such as Flash or Java applets.

-# Browser compatibility
+## Browser compatibility

 The library should work fine on the following browsers (with `Promise` polyfill):
 - Firefox 3.5+
--- a/docs/faq.md
+++ b/docs/faq.md
@ -0,0 +1,48 @@
+---
+title: "FAQ"
+description: "Explore Frequently Asked Questions regarding html2canvas"
+---
+
+## Why aren't my images rendered?
+html2canvas does not get around content policy restrictions set by your browser. Drawing images that reside outside of 
+the [origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) of the current page [taint the 
+canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#What_is_a_tainted_canvas) that they are drawn upon. If the canvas gets tainted, it cannot be read anymore. As such, html2canvas implements 
+methods to check whether an image would taint the canvas before applying it. If you have set the `allowTaint` 
+[option](/configuration) to `false`, it will not draw the image.
+
+If you wish to load images that reside outside of your pages origin, you can use a [proxy](/proxy) to load the images.
+
+## Why is the produced canvas empty or cuts off half way through?
+Make sure that `canvas` element doesn't hit [browser limitations](https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element) for the `canvas` size or use the window configuration options to set a custom window size based on the `canvas` element:
+```
+await html2canvas(element, {
+    windowWidth: element.scrollWidth,
+    windowHeight: element.scrollHeight
+});
+```
+The window limitations vary by browser, operating system and system hardware.
+
+### Chrome
+> Maximum height/width: 32,767 pixels
+> Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)
+
+### Firefox
+> Maximum height/width: 32,767 pixels
+> Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)
+
+### Internet Explorer
+> Maximum height/width: 8,192 pixels
+> Maximum area: N/A
+
+### iOS
+> The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM
+
+## Why doesn't CSS property X render correctly or only partially?
+As each CSS property needs to be manually coded to render correctly, html2canvas will *never* have full CSS support. 
+The library tries to support the most [commonly used CSS properties](/features) to the extent that it can. If some CSS property 
+is missing or incomplete and you feel that it should be part of the library, create test cases for it and a new issue for it.
+
+## How do I get html2canvas to work in a browser extension?
+You shouldn't use html2canvas in a browser extension. Most browsers have native support for capturing screenshots from 
+tabs within extensions. Relevant information for [Chrome](https://developer.chrome.com/extensions/tabs#method-captureVisibleTab) and 
+[Firefox](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#drawWindow()).
--- a/docs/features.md
+++ b/docs/features.md
@ -1,5 +1,6 @@
 ---
 title: "Features"
+description: "Discover the different features supported by html2canvas"
 ---

 Below is a list of all the supported CSS properties and values.
@ -10,6 +11,7 @@ Below is a list of all the supported CSS properties and values.
   - background-image
       - url()
       - linear-gradient()
+       - radial-gradient()
   - background-origin 
   - background-position
   - background-size   
@ -20,7 +22,7 @@ Below is a list of all the supported CSS properties and values.
   - border-width
 - bottom
 - box-sizing
- - content (**Does not support `attr()`**)
+ - content
 - color
 - display
 - flex
@ -34,6 +36,11 @@ Below is a list of all the supported CSS properties and values.
 - height
 - left
 - letter-spacing
+ - line-break
+ - list-style
+    - list-style-image
+    - list-style-position
+    - list-style-type
 - margin
 - max-height
 - max-width
@ -41,6 +48,7 @@ Below is a list of all the supported CSS properties and values.
 - min-width
 - opacity
 - overflow
+ - overflow-wrap
 - padding
 - position
 - right
@ -56,17 +64,22 @@ Below is a list of all the supported CSS properties and values.
 - visibility
 - white-space
 - width
+ - 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)
 - [border-image](https://github.com/niklasvh/html2canvas/issues/1287)
+ - [box-decoration-break](https://github.com/niklasvh/html2canvas/issues/552)
 - [box-shadow](https://github.com/niklasvh/html2canvas/pull/1086)
 - [filter](https://github.com/niklasvh/html2canvas/issues/493)
 - [font-variant-ligatures](https://github.com/niklasvh/html2canvas/pull/1085)
- - [list-style](https://github.com/niklasvh/html2canvas/issues/177)
- - word-break
+ - [mix-blend-mode](https://github.com/niklasvh/html2canvas/issues/580)
+ - [object-fit](https://github.com/niklasvh/html2canvas/issues/1064)
+ - [repeating-linear-gradient()](https://github.com/niklasvh/html2canvas/issues/1162)
 - [writing-mode](https://github.com/niklasvh/html2canvas/issues/1258)
+ - [zoom](https://github.com/niklasvh/html2canvas/issues/732)

--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@ -1,8 +1,13 @@
 ---
 title: "Getting Started"
+description: "Learn how to start using html2canvas"
+previousUrl: "/documentation"
+previousTitle: "About"
+nextUrl: "/configuration"
+nextTitle: "Configuration"
 ---

-# Installing
+## Installing

 You can install `html2canvas` through npm or [download a built release](https://github.com/niklasvh/html2canvas/releases).

@ -14,7 +19,7 @@ You can install `html2canvas` through npm or [download a built release](https://
 import html2canvas from 'html2canvas';
 ```
    
-# Usage
+## Usage

 To render an `element` with html2canvas with some (optional) [options](/configuration/), simply call `html2canvas(element, options);`

--- a/docs/proxy.md
+++ b/docs/proxy.md
@ -1,11 +1,12 @@
 ---
 title: "Proxy"
+description: "Browse different proxies available for supporting CORS content"
 ---

 html2canvas does not get around content policy restrictions set by your browser. Drawing images that reside outside of 
 the origin of the current page taint the canvas that they are drawn upon. If the canvas gets tainted, 
 it cannot be read anymore. If you wish to load images that reside outside of your pages origin, you can use a proxy to load the images.

-# Available proxies
+## Available proxies

 - [node.js](https://github.com/niklasvh/html2canvas-proxy-nodejs)
--- a/karma.conf.js
+++ b/karma.conf.js
@ -1,89 +1,101 @@
 // Karma configuration
 // Generated on Sat Aug 05 2017 23:42:26 GMT+0800 (Malay Peninsula Standard Time)

+const path = require('path');
 const port = 9876;
 module.exports = function(config) {
-    const slLaunchers = (!process.env.SAUCE_USERNAME || !process.env.SAUCE_ACCESS_KEY) ? {} : {
-        sl_beta_chrome: {
-            base: 'SauceLabs',
-            browserName: 'chrome',
-            platform: 'Windows 10',
-            version: 'beta'
-        },
-        sl_ie9: {
+    const launchers = {
+        SauceLabs_IE9: {
            base: 'SauceLabs',
            browserName: 'internet explorer',
            version: '9.0',
            platform: 'Windows 7'
        },
-        sl_ie10: {
+        SauceLabs_IE10: {
            base: 'SauceLabs',
            browserName: 'internet explorer',
            version: '10.0',
            platform: 'Windows 7'
        },
-        sl_ie11: {
+        SauceLabs_IE11: {
            base: 'SauceLabs',
            browserName: 'internet explorer',
            version: '11.0',
            platform: 'Windows 7'
        },
-        sl_edge_15: {
+        SauceLabs_Edge18: {
            base: 'SauceLabs',
            browserName: 'MicrosoftEdge',
-            version: '15.15063',
+            version: '18.17763',
            platform: 'Windows 10'
        },
-        sl_edge_14: {
-            base: 'SauceLabs',
-            browserName: 'MicrosoftEdge',
-            version: '14.14393',
-            platform: 'Windows 10'
-        },
-        sl_safari: {
-            base: 'SauceLabs',
-            browserName: 'safari',
-            version: '10.1',
-            platform: 'macOS 10.12'
-        },
-        'sl_android_4.4': {
+        SauceLabs_Android4: {
            base: 'SauceLabs',
            browserName: 'Browser',
            platform: 'Android',
            version: '4.4',
            device: 'Android Emulator',
        },
-        'sl_ios_10.3_safari': {
+        SauceLabs_iOS10_3: {
            base: 'SauceLabs',
            browserName: 'Safari',
            platform: 'iOS',
            version: '10.3',
            device: 'iPhone 7 Plus Simulator'
        },
-        'sl_ios_9.3_safari': {
+        SauceLabs_iOS9_3: {
            base: 'SauceLabs',
            browserName: 'Safari',
            platform: 'iOS',
            version: '9.3',
            device: 'iPhone 6 Plus Simulator'
        },
-        'sl_ios_8.4_safari': {
-            base: 'SauceLabs',
-            browserName: 'Safari',
-            platform: 'iOS',
-            version: '8.4',
-            device: 'iPhone 5s Simulator'
+        IE_9: {
+            base: 'IE',
+            'x-ua-compatible': 'IE=EmulateIE9',
+            flags: ['-extoff']
+        },
+        IE_10: {
+            base: 'IE',
+            'x-ua-compatible': 'IE=EmulateIE10',
+            flags: ['-extoff']
+        },
+        IE_11: {
+            base: 'IE',
+            flags: ['-extoff']
+        },
+        Safari_Stable: {
+            base: 'Safari'
+        },
+        Chrome_Stable: {
+            base: 'Chrome'
+        },
+        Firefox_Stable: {
+            base: 'Firefox'
        }
    };

-    const customLaunchers = Object.assign({}, slLaunchers, {
+    const ciLauncher = launchers[process.env.TARGET_BROWSER];
+
+    const customLaunchers = ciLauncher ? {target_browser: ciLauncher} : {
        stable_chrome: {
            base: 'Chrome'
        },
        stable_firefox: {
            base: 'Firefox'
        }
-    });
+    };
+
+    const injectTypedArrayPolyfills = function(files) {
+        files.unshift({
+            pattern: path.resolve(__dirname, './node_modules/js-polyfills/typedarray.js'),
+            included: true,
+            served: true,
+            watched: false
+        });
+    };
+
+    injectTypedArrayPolyfills.$inject = ['config.files'];

    config.set({

@ -93,17 +105,22 @@ module.exports = function(config) {

        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['mocha'],
-
+        frameworks: ['mocha', 'inline-mocha-fix'],

        // list of files / patterns to load in the browser
        files: [
            'build/testrunner.js',
            { pattern: './tests/**/*', 'watched': true, 'included': false, 'served': true},
            { pattern: './dist/**/*', 'watched': true, 'included': false, 'served': true},
-            { pattern: './node_modules/**/*', 'watched': true, 'included': false, 'served': true}
+            { pattern: './node_modules/**/*', 'watched': true, 'included': false, 'served': true},
        ],

+        plugins: [
+            'karma-*',
+            {
+                'framework:inline-mocha-fix': ['factory', injectTypedArrayPolyfills]
+            }
+        ],

        // list of files to exclude
        exclude: [
@ -119,7 +136,11 @@ module.exports = function(config) {
        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-        reporters: ['progress', 'saucelabs'],
+        reporters: ['dots', 'junit'],
+
+        junitReporter: {
+            outputDir: 'tmp/junit/'
+        },

        // web server port
        port,
--- a/karma.js
+++ b/karma.js
@ -14,6 +14,12 @@ const bodyParser = require('body-parser');
 const cors = require('cors');
 const filenamifyUrl = require('filenamify-url');

+const mkdirp = require('mkdirp');
+const screenshotFolder = './tmp/reftests';
+
+mkdirp.sync(path.resolve(__dirname, screenshotFolder));
+
+
 const CORS_PORT = 8081;
 const corsApp = express();
 corsApp.use('/proxy', proxy());
@ -59,9 +65,9 @@ const writeScreenshot = (buffer, body) => {
    const filename = `${filenamifyUrl(
        body.test.replace(/^\/tests\/reftests\//, '').replace(/\.html$/, ''),
        {replacement: '-'}
-    )}!${body.platform.name}-${body.platform.version}.png`;
+    )}!${[process.env.TARGET_BROWSER, body.platform.name, body.platform.version].join('-')}.png`;

-    fs.writeFileSync(path.resolve(__dirname, './tests/results/', filename), buffer);
+    fs.writeFileSync(path.resolve(__dirname, screenshotFolder, filename), buffer);
 };

 app.post('/screenshot', (req, res) => {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -3,7 +3,9 @@
  "name": "html2canvas",
  "description": "Screenshots with JavaScript",
  "main": "dist/npm/index.js",
-  "version": "1.0.0-alpha.3",
+  "module": "dist/html2canvas.js",
+  "browser": "dist/html2canvas.js",
+  "version": "1.0.0-rc.0",
  "author": {
    "name": "Niklas von Hertzen",
    "email": "niklasvh@gmail.com",
@ -20,52 +22,58 @@
    "url": "https://github.com/niklasvh/html2canvas/issues"
  },
  "devDependencies": {
-    "babel-cli": "6.24.1",
-    "babel-core": "6.25.0",
-    "babel-eslint": "7.2.3",
-    "babel-loader": "7.1.1",
-    "babel-plugin-dev-expression": "0.2.1",
-    "babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
-    "babel-plugin-transform-object-rest-spread": "6.23.0",
-    "babel-preset-es2015": "6.24.1",
-    "babel-preset-flow": "6.23.0",
+    "@babel/cli": "^7.4.3",
+    "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-flow": "^7.0.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
+    "babel-plugin-add-module-exports": "^1.0.0",
+    "babel-plugin-dev-expression": "^0.2.1",
    "base64-arraybuffer": "0.1.5",
-    "body-parser": "1.17.2",
+    "body-parser": "^1.18.3",
    "chai": "4.1.1",
-    "chromeless": "1.2.0",
+    "chromeless": "^1.5.2",
    "cors": "2.8.4",
-    "eslint": "4.2.0",
+    "eslint": "^5.16.0",
    "eslint-plugin-flowtype": "2.35.0",
    "eslint-plugin-prettier": "2.1.2",
-    "express": "4.15.4",
+    "express": "^4.16.4",
    "filenamify-url": "1.0.0",
    "flow-bin": "0.56.0",
    "glob": "7.1.2",
-    "html2canvas-proxy": "1.0.0",
+    "html2canvas-proxy": "1.0.1",
    "jquery": "3.2.1",
-    "karma": "1.7.0",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-edge-launcher": "0.4.1",
-    "karma-firefox-launcher": "1.0.1",
-    "karma-ie-launcher": "1.0.0",
-    "karma-mocha": "1.3.0",
-    "karma-sauce-launcher": "1.1.0",
-    "mocha": "3.5.0",
+    "js-polyfills": "^0.1.42",
+    "karma": "^4.0.1",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-edge-launcher": "^0.4.2",
+    "karma-firefox-launcher": "^1.1.0",
+    "karma-ie-launcher": "^1.0.0",
+    "karma-junit-reporter": "^1.2.0",
+    "karma-mocha": "^1.3.0",
+    "karma-safari-launcher": "^1.0.0",
+    "karma-sauce-launcher": "^2.0.2",
+    "mocha": "^6.1.0",
    "platform": "1.3.4",
    "prettier": "1.5.3",
    "promise-polyfill": "6.0.2",
    "replace-in-file": "^3.0.0",
    "rimraf": "2.6.1",
-    "serve-index": "1.9.0",
+    "serve-index": "^1.9.1",
    "slash": "1.0.0",
+    "standard-version": "^5.0.2",
    "uglifyjs-webpack-plugin": "^1.1.2",
-    "webpack": "3.4.1"
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0"
  },
  "scripts": {
    "build": "rimraf dist/ && node scripts/create-reftest-list && npm run build:npm && npm run build:browser",
-    "build:npm": "babel src/ -d dist/npm/ --plugins=dev-expression,transform-es2015-modules-commonjs && replace-in-file __VERSION__ '\"$npm_package_version\"' dist/npm/index.js",
+    "build:npm": "babel src/ -d dist/npm/ --plugins=dev-expression && replace-in-file __VERSION__ '\"$npm_package_version\"' dist/npm/index.js",
    "build:browser": "webpack",
-    "format": "prettier --single-quote --no-bracket-spacing --tab-width 4 --print-width 100 --write \"{src,www,tests,scripts}/**/*.js\"",
+    "release": "standard-version",
+    "rollup": "rollup -c",
+    "format": "prettier --single-quote --no-bracket-spacing --tab-width 4 --print-width 100 --write \"{src,www/src,tests,scripts}/**/*.js\"",
    "flow": "flow",
    "lint": "eslint src/**",
    "test": "npm run flow && npm run lint && npm run test:node && npm run karma",
@ -77,6 +85,6 @@
  "homepage": "https://html2canvas.hertzen.com",
  "license": "MIT",
  "dependencies": {
-    "punycode": "2.1.0"
+    "css-line-break": "1.0.1"
  }
 }
--- a/rollup.config.js
+++ b/rollup.config.js
@ -0,0 +1,37 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const pkg = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'package.json')));
+
+const banner =
+    `/*
+${pkg.title} ${pkg.version} <${pkg.homepage}>
+Copyright (c) ${(new Date()).getFullYear()} ${pkg.author.name} <${pkg.author.url}>
+Released under ${pkg.license} License
+*/`;
+
+import babel from 'rollup-plugin-babel';
+import commonjs from 'rollup-plugin-commonjs';
+import resolve from 'rollup-plugin-node-resolve';
+
+export default {
+    input: './src/index.js',
+    plugins: [
+        resolve(),
+        babel({
+            exclude: 'node_modules/**'
+        }),
+        commonjs({
+            namedExports: {
+                'node_modules/css-line-break/dist/index.js': ['toCodePoints', 'fromCodePoint', 'LineBreaker']
+            }
+        })
+    ],
+    output: {
+        file: './dist/html2canvas.js',
+        name: 'html2canvas',
+        format: 'umd',
+        banner
+    }
+};
--- a/scripts/create-reftest-list.js
+++ b/scripts/create-reftest-list.js
@ -10,7 +10,7 @@ const outputPath = 'tests/reftests.js';
 const ignoredTests = fs
    .readFileSync(path.resolve(__dirname, `../tests/reftests/ignore.txt`))
    .toString()
-    .split('\n')
+    .split(/\r\n|\r|\n/)
    .filter(l => l.length)
    .reduce((acc, l) => {
        const m = l.match(/^(\[(.+)\])?(.+)$/i);
--- a/src/Bounds.js
+++ b/src/Bounds.js
@ -202,40 +202,32 @@ export const parseBoundCurves = (
    borders: Array<Border>,
    borderRadius: Array<BorderRadius>
 ): BoundCurves => {
-    const HALF_WIDTH = bounds.width / 2;
-    const HALF_HEIGHT = bounds.height / 2;
-    const tlh =
-        borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
-            ? borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width)
-            : HALF_WIDTH;
-    const tlv =
-        borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
-            ? borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height)
-            : HALF_HEIGHT;
-    const trh =
-        borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
-            ? borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width)
-            : HALF_WIDTH;
-    const trv =
-        borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
-            ? borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height)
-            : HALF_HEIGHT;
-    const brh =
-        borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
-            ? borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width)
-            : HALF_WIDTH;
-    const brv =
-        borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
-            ? borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height)
-            : HALF_HEIGHT;
-    const blh =
-        borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
-            ? borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width)
-            : HALF_WIDTH;
-    const blv =
-        borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
-            ? borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height)
-            : HALF_HEIGHT;
+    let tlh = borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width);
+    let tlv = borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height);
+    let trh = borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width);
+    let trv = borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height);
+    let brh = borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width);
+    let brv = borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height);
+    let blh = borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width);
+    let blv = borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height);
+
+    const factors = [];
+    factors.push((tlh + trh) / bounds.width);
+    factors.push((blh + brh) / bounds.width);
+    factors.push((tlv + blv) / bounds.height);
+    factors.push((trv + brv) / bounds.height);
+    const maxFactor = Math.max(...factors);
+
+    if (maxFactor > 1) {
+        tlh /= maxFactor;
+        tlv /= maxFactor;
+        trh /= maxFactor;
+        trv /= maxFactor;
+        brh /= maxFactor;
+        brv /= maxFactor;
+        blh /= maxFactor;
+        blv /= maxFactor;
+    }

    const topWidth = bounds.width - trh;
    const rightHeight = bounds.height - brv;
--- a/src/Clone.js
+++ b/src/Clone.js
@ -2,6 +2,7 @@
 'use strict';
 import type {Bounds} from './Bounds';
 import type {Options} from './index';
+import type {PseudoContentData, PseudoContentItem} from './PseudoNodeContent';
 import type Logger from './Logger';

 import {parseBounds} from './Bounds';
@ -10,6 +11,12 @@ import ResourceLoader from './ResourceLoader';
 import {copyCSSStyles} from './Util';
 import {parseBackgroundImage} from './parsing/background';
 import CanvasRenderer from './renderer/CanvasRenderer';
+import {
+    parseCounterReset,
+    popCounters,
+    resolvePseudoContent,
+    PSEUDO_CONTENT_ITEM_TYPE
+} from './PseudoNodeContent';

 const IGNORE_ATTRIBUTE = 'data-html2canvas-ignore';

@ -24,6 +31,7 @@ export class DocumentCloner {
    inlineImages: boolean;
    copyStyles: boolean;
    renderer: (element: HTMLElement, options: Options, logger: Logger) => Promise<*>;
+    pseudoContentData: PseudoContentData;

    constructor(
        element: HTMLElement,
@ -40,6 +48,10 @@ export class DocumentCloner {
        this.options = options;
        this.renderer = renderer;
        this.resourceLoader = new ResourceLoader(options, logger, window);
+        this.pseudoContentData = {
+            counters: {},
+            quoteDepth: 0
+        };
        // $FlowFixMe
        this.documentElement = this.cloneNode(element.ownerDocument.documentElement);
    }
@ -177,10 +189,12 @@ export class DocumentCloner {
                            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,
@ -199,7 +213,12 @@ export class DocumentCloner {
                        new Promise((resolve, reject) => {
                            const iframeCanvas = document.createElement('img');
                            iframeCanvas.onload = () => resolve(canvas);
-                            iframeCanvas.onerror = reject;
+                            iframeCanvas.onerror = function(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) {
                                tempIframe.parentNode.replaceChild(
@ -215,6 +234,27 @@ export class DocumentCloner {
            return tempIframe;
        }

+        try {
+            if (node instanceof HTMLStyleElement && node.sheet && node.sheet.cssRules) {
+                const css = [].slice.call(node.sheet.cssRules, 0).reduce((css, rule) => {
+                    if (rule && rule.cssText) {
+                        return css + rule.cssText;
+                    }
+                    return css;
+                }, '');
+                const style = node.cloneNode(false);
+                style.textContent = css;
+                return style;
+            }
+        } catch (e) {
+            // accessing node.sheet.cssRules throws a DOMException
+            this.logger.log('Unable to access cssRules property');
+            if (e.name !== 'SecurityError') {
+                this.logger.log(e);
+                throw e;
+            }
+        }
+
        return node.cloneNode(false);
    }

@ -225,6 +265,11 @@ export class DocumentCloner {
                : this.createElementClone(node);

        const window = node.ownerDocument.defaultView;
+        const style = node instanceof window.HTMLElement ? window.getComputedStyle(node) : null;
+        const styleBefore =
+            node instanceof window.HTMLElement ? window.getComputedStyle(node, ':before') : null;
+        const styleAfter =
+            node instanceof window.HTMLElement ? window.getComputedStyle(node, ':after') : null;

        if (this.referenceElement === node && clone instanceof window.HTMLElement) {
            this.clonedReferenceElement = clone;
@ -234,22 +279,41 @@ export class DocumentCloner {
            createPseudoHideStyles(clone);
        }

+        const counters = parseCounterReset(style, this.pseudoContentData);
+        const contentBefore = resolvePseudoContent(node, styleBefore, this.pseudoContentData);
+
        for (let child = node.firstChild; child; child = child.nextSibling) {
            if (
                child.nodeType !== Node.ELEMENT_NODE ||
-                // $FlowFixMe
-                (child.nodeName !== 'SCRIPT' && !child.hasAttribute(IGNORE_ATTRIBUTE))
+                (child.nodeName !== 'SCRIPT' &&
+                    // $FlowFixMe
+                    !child.hasAttribute(IGNORE_ATTRIBUTE) &&
+                    (typeof this.options.ignoreElements !== 'function' ||
+                        // $FlowFixMe
+                        !this.options.ignoreElements(child)))
            ) {
                if (!this.copyStyles || child.nodeName !== 'STYLE') {
                    clone.appendChild(this.cloneNode(child));
                }
            }
        }
+
+        const contentAfter = resolvePseudoContent(node, styleAfter, this.pseudoContentData);
+        popCounters(counters, this.pseudoContentData);
+
        if (node instanceof window.HTMLElement && clone instanceof window.HTMLElement) {
-            this.inlineAllImages(inlinePseudoElement(node, clone, PSEUDO_BEFORE));
-            this.inlineAllImages(inlinePseudoElement(node, clone, PSEUDO_AFTER));
-            if (this.copyStyles && !(node instanceof HTMLIFrameElement)) {
-                copyCSSStyles(node.ownerDocument.defaultView.getComputedStyle(node), clone);
+            if (styleBefore) {
+                this.inlineAllImages(
+                    inlinePseudoElement(node, clone, styleBefore, contentBefore, PSEUDO_BEFORE)
+                );
+            }
+            if (styleAfter) {
+                this.inlineAllImages(
+                    inlinePseudoElement(node, clone, styleAfter, contentAfter, PSEUDO_AFTER)
+                );
+            }
+            if (style && this.copyStyles && !(node instanceof HTMLIFrameElement)) {
+                copyCSSStyles(style, clone);
            }
            this.inlineAllImages(clone);
            if (node.scrollTop !== 0 || node.scrollLeft !== 0) {
@ -346,13 +410,13 @@ const cloneCanvasContents = (canvas: HTMLCanvasElement, clonedCanvas: HTMLCanvas
        if (clonedCanvas) {
            clonedCanvas.width = canvas.width;
            clonedCanvas.height = canvas.height;
-            clonedCanvas
-                .getContext('2d')
-                .putImageData(
-                    canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height),
-                    0,
-                    0
-                );
+            const ctx = canvas.getContext('2d');
+            const clonedCtx = clonedCanvas.getContext('2d');
+            if (ctx) {
+                clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);
+            } else {
+                clonedCtx.drawImage(canvas, 0, 0);
+            }
        }
    } catch (e) {}
 };
@ -360,9 +424,10 @@ const cloneCanvasContents = (canvas: HTMLCanvasElement, clonedCanvas: HTMLCanvas
 const inlinePseudoElement = (
    node: HTMLElement,
    clone: HTMLElement,
+    style: CSSStyleDeclaration,
+    contentItems: ?Array<PseudoContentItem>,
    pseudoElt: ':before' | ':after'
 ): ?HTMLElement => {
-    const style = node.ownerDocument.defaultView.getComputedStyle(node, pseudoElt);
    if (
        !style ||
        !style.content ||
@ -373,20 +438,29 @@ const inlinePseudoElement = (
        return;
    }

-    const content = stripQuotes(style.content);
-    const image = content.match(URL_REGEXP);
-    const anonymousReplacedElement = clone.ownerDocument.createElement(
-        image ? 'img' : 'html2canvaspseudoelement'
-    );
-    if (image) {
-        // $FlowFixMe
-        anonymousReplacedElement.src = stripQuotes(image[1]);
-    } else {
-        anonymousReplacedElement.textContent = content;
-    }
-
+    const anonymousReplacedElement = clone.ownerDocument.createElement('html2canvaspseudoelement');
    copyCSSStyles(style, anonymousReplacedElement);

+    if (contentItems) {
+        const len = contentItems.length;
+        for (var i = 0; i < len; i++) {
+            const item = contentItems[i];
+            switch (item.type) {
+                case PSEUDO_CONTENT_ITEM_TYPE.IMAGE:
+                    const img = clone.ownerDocument.createElement('img');
+                    img.src = parseBackgroundImage(`url(${item.value})`)[0].args[0];
+                    img.style.opacity = '1';
+                    anonymousReplacedElement.appendChild(img);
+                    break;
+                case PSEUDO_CONTENT_ITEM_TYPE.TEXT:
+                    anonymousReplacedElement.appendChild(
+                        clone.ownerDocument.createTextNode(item.value)
+                    );
+                    break;
+            }
+        }
+    }
+
    anonymousReplacedElement.className = `${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE} ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
    clone.className +=
        pseudoElt === PSEUDO_BEFORE
@ -401,13 +475,6 @@ const inlinePseudoElement = (
    return anonymousReplacedElement;
 };

-const stripQuotes = (content: string): string => {
-    const first = content.substr(0, 1);
-    return first === content.substr(content.length - 1) && first.match(/['"]/)
-        ? content.substr(1, content.length - 2)
-        : content;
-};
-
 const URL_REGEXP = /^url\((.+)\)$/i;
 const PSEUDO_BEFORE = ':before';
 const PSEUDO_AFTER = ':after';
@ -561,14 +628,21 @@ export const cloneWindow = (
                documentClone.documentElement.style.left = -bounds.left + 'px';
                documentClone.documentElement.style.position = 'absolute';
            }
+
+            const result = Promise.resolve([
+                cloneIframeContainer,
+                cloner.clonedReferenceElement,
+                cloner.resourceLoader
+            ]);
+
+            const onclone = options.onclone;
+
            return cloner.clonedReferenceElement instanceof cloneWindow.HTMLElement ||
            cloner.clonedReferenceElement instanceof ownerDocument.defaultView.HTMLElement ||
            cloner.clonedReferenceElement instanceof HTMLElement
-                ? Promise.resolve([
-                      cloneIframeContainer,
-                      cloner.clonedReferenceElement,
-                      cloner.resourceLoader
-                  ])
+                ? typeof onclone === 'function'
+                  ? Promise.resolve().then(() => onclone(documentClone)).then(() => result)
+                  : result
                : Promise.reject(
                      __DEV__
                          ? `Error finding the ${referenceElement.nodeName} in the cloned document`
@ -577,7 +651,7 @@ export const cloneWindow = (
        });

        documentClone.open();
-        documentClone.write('<!DOCTYPE html><html></html>');
+        documentClone.write(`${serializeDoctype(document.doctype)}<html></html>`);
        // Chrome scrolls the parent document for some reason after the write to the cloned window???
        restoreOwnerScroll(referenceElement.ownerDocument, scrollX, scrollY);
        documentClone.replaceChild(
@ -589,3 +663,29 @@ export const cloneWindow = (
        return iframeLoad;
    });
 };
+
+const serializeDoctype = (doctype: ?DocumentType): string => {
+    let str = '';
+    if (doctype) {
+        str += '<!DOCTYPE ';
+        if (doctype.name) {
+            str += doctype.name;
+        }
+
+        if (doctype.internalSubset) {
+            str += doctype.internalSubset;
+        }
+
+        if (doctype.publicId) {
+            str += `"${doctype.publicId}"`;
+        }
+
+        if (doctype.systemId) {
+            str += `"${doctype.systemId}"`;
+        }
+
+        str += '>';
+    }
+
+    return str;
+};
--- a/src/Gradient.js
+++ b/src/Gradient.js
@ -3,14 +3,22 @@

 import type {BackgroundSource} from './parsing/background';
 import type {Bounds} from './Bounds';
+import NodeContainer from './NodeContainer';
 import {parseAngle} from './Angle';
 import Color from './Color';
-import Length, {LENGTH_TYPE} from './Length';
+import Length, {LENGTH_TYPE, calculateLengthFromValueWithUnit} from './Length';
+import {distance} from './Util';

 const SIDE_OR_CORNER = /^(to )?(left|top|right|bottom)( (left|top|right|bottom))?$/i;
 const PERCENTAGE_ANGLES = /^([+-]?\d*\.?\d+)% ([+-]?\d*\.?\d+)%$/i;
 const ENDS_WITH_LENGTH = /(px)|%|( 0)$/i;
-const FROM_TO = /^(from|to)\((.+)\)$/i;
+const FROM_TO_COLORSTOP = /^(from|to|color-stop)\((?:([\d.]+)(%)?,\s*)?(.+?)\)$/i;
+const RADIAL_SHAPE_DEFINITION = /^\s*(circle|ellipse)?\s*((?:([\d.]+)(px|r?em|%)\s*(?:([\d.]+)(px|r?em|%))?)|closest-side|closest-corner|farthest-side|farthest-corner)?\s*(?:at\s*(?:(left|center|right)|([\d.]+)(px|r?em|%))\s+(?:(top|center|bottom)|([\d.]+)(px|r?em|%)))?(?:\s|$)/i;
+
+export type Point = {
+    x: number,
+    y: number
+};

 export type Direction = {
    x0: number,
@ -24,46 +32,97 @@ export type ColorStop = {
    stop: number
 };

-export type Gradient = {
-    direction: Direction,
+export interface Gradient {
+    type: GradientType,
    colorStops: Array<ColorStop>
+}
+
+export const GRADIENT_TYPE = {
+    LINEAR_GRADIENT: 0,
+    RADIAL_GRADIENT: 1
 };

+export type GradientType = $Values<typeof GRADIENT_TYPE>;
+
+export const RADIAL_GRADIENT_SHAPE = {
+    CIRCLE: 0,
+    ELLIPSE: 1
+};
+
+export type RadialGradientShapeType = $Values<typeof RADIAL_GRADIENT_SHAPE>;
+
+const LENGTH_FOR_POSITION = {
+    left: new Length('0%'),
+    top: new Length('0%'),
+    center: new Length('50%'),
+    right: new Length('100%'),
+    bottom: new Length('100%')
+};
+
+export class LinearGradient implements Gradient {
+    type: GradientType;
+    colorStops: Array<ColorStop>;
+    direction: Direction;
+
+    constructor(colorStops: Array<ColorStop>, direction: Direction) {
+        this.type = GRADIENT_TYPE.LINEAR_GRADIENT;
+        this.colorStops = colorStops;
+        this.direction = direction;
+    }
+}
+
+export class RadialGradient implements Gradient {
+    type: GradientType;
+    colorStops: Array<ColorStop>;
+    shape: RadialGradientShapeType;
+    center: Point;
+    radius: Point;
+
+    constructor(
+        colorStops: Array<ColorStop>,
+        shape: RadialGradientShapeType,
+        center: Point,
+        radius: Point
+    ) {
+        this.type = GRADIENT_TYPE.RADIAL_GRADIENT;
+        this.colorStops = colorStops;
+        this.shape = shape;
+        this.center = center;
+        this.radius = radius;
+    }
+}
+
 export const parseGradient = (
+    container: NodeContainer,
    {args, method, prefix}: BackgroundSource,
    bounds: Bounds
 ): ?Gradient => {
    if (method === 'linear-gradient') {
-        return parseLinearGradient(args, bounds);
+        return parseLinearGradient(args, bounds, !!prefix);
    } else if (method === 'gradient' && args[0] === 'linear') {
        // TODO handle correct angle
        return parseLinearGradient(
-            ['to bottom'].concat(
-                args
-                    .slice(3)
-                    .map(color => color.match(FROM_TO))
-                    .filter(v => v !== null)
-                    // $FlowFixMe
-                    .map(v => v[2])
-            ),
+            ['to bottom'].concat(transformObsoleteColorStops(args.slice(3))),
+            bounds,
+            !!prefix
+        );
+    } else if (method === 'radial-gradient') {
+        return parseRadialGradient(
+            container,
+            prefix === '-webkit-' ? transformWebkitRadialGradientArgs(args) : args,
+            bounds
+        );
+    } else if (method === 'gradient' && args[0] === 'radial') {
+        return parseRadialGradient(
+            container,
+            transformObsoleteColorStops(transformWebkitRadialGradientArgs(args.slice(1))),
            bounds
        );
    }
 };

-const parseLinearGradient = (args: Array<string>, bounds: Bounds): Gradient => {
-    const angle = parseAngle(args[0]);
-    const HAS_SIDE_OR_CORNER = SIDE_OR_CORNER.test(args[0]);
-    const HAS_DIRECTION = HAS_SIDE_OR_CORNER || angle !== null || PERCENTAGE_ANGLES.test(args[0]);
-    const direction = HAS_DIRECTION
-        ? angle !== null
-          ? calculateGradientDirection(angle, bounds)
-          : HAS_SIDE_OR_CORNER
-            ? parseSideOrCorner(args[0], bounds)
-            : parsePercentageAngle(args[0], bounds)
-        : calculateGradientDirection(Math.PI, bounds);
+const parseColorStops = (args: Array<string>, firstColorStopIndex: number, lineLength: number) => {
    const colorStops = [];
-    const firstColorStopIndex = HAS_DIRECTION ? 1 : 0;

    for (let i = firstColorStopIndex; i < args.length; i++) {
        const value = args[i];
@ -78,21 +137,14 @@ const parseLinearGradient = (args: Array<string>, bounds: Bounds): Gradient => {
        colorStops.push({color, stop});
    }

-    // TODO: Fix some inaccuracy with color stops with px values
-    const lineLength = Math.min(
-        Math.sqrt(
-            Math.pow(Math.abs(direction.x0) + Math.abs(direction.x1), 2) +
-                Math.pow(Math.abs(direction.y0) + Math.abs(direction.y1), 2)
-        ),
-        bounds.width * 2,
-        bounds.height * 2
-    );
-
    const absoluteValuedColorStops = colorStops.map(({color, stop}) => {
+        const absoluteStop =
+            lineLength === 0 ? 0 : stop ? stop.getAbsoluteValue(lineLength) / lineLength : null;
+
        return {
            color,
            // $FlowFixMe
-            stop: stop ? stop.getAbsoluteValue(lineLength) / lineLength : null
+            stop: absoluteStop
        };
    });

@ -118,10 +170,104 @@ const parseLinearGradient = (args: Array<string>, bounds: Bounds): Gradient => {
        }
    }

-    return {
-        direction,
-        colorStops: absoluteValuedColorStops
+    return absoluteValuedColorStops;
+};
+
+const parseLinearGradient = (
+    args: Array<string>,
+    bounds: Bounds,
+    hasPrefix: boolean
+): LinearGradient => {
+    const angle = parseAngle(args[0]);
+    const HAS_SIDE_OR_CORNER = SIDE_OR_CORNER.test(args[0]);
+    const HAS_DIRECTION = HAS_SIDE_OR_CORNER || angle !== null || PERCENTAGE_ANGLES.test(args[0]);
+    const direction = HAS_DIRECTION
+        ? angle !== null
+          ? calculateGradientDirection(
+                // if there is a prefix, the 0° angle points due East (instead of North per W3C)
+                hasPrefix ? angle - Math.PI * 0.5 : angle,
+                bounds
+            )
+          : HAS_SIDE_OR_CORNER
+            ? parseSideOrCorner(args[0], bounds)
+            : parsePercentageAngle(args[0], bounds)
+        : calculateGradientDirection(Math.PI, bounds);
+    const firstColorStopIndex = HAS_DIRECTION ? 1 : 0;
+
+    // TODO: Fix some inaccuracy with color stops with px values
+    const lineLength = Math.min(
+        distance(
+            Math.abs(direction.x0) + Math.abs(direction.x1),
+            Math.abs(direction.y0) + Math.abs(direction.y1)
+        ),
+        bounds.width * 2,
+        bounds.height * 2
+    );
+
+    return new LinearGradient(parseColorStops(args, firstColorStopIndex, lineLength), direction);
+};
+
+const parseRadialGradient = (
+    container: NodeContainer,
+    args: Array<string>,
+    bounds: Bounds
+): RadialGradient => {
+    const m = args[0].match(RADIAL_SHAPE_DEFINITION);
+    const shape =
+        m &&
+        (m[1] === 'circle' || // explicit shape specification
+            (m[3] !== undefined && m[5] === undefined)) // only one radius coordinate
+            ? RADIAL_GRADIENT_SHAPE.CIRCLE
+            : RADIAL_GRADIENT_SHAPE.ELLIPSE;
+    const radius = {};
+    const center = {};
+
+    if (m) {
+        // Radius
+        if (m[3] !== undefined) {
+            radius.x = calculateLengthFromValueWithUnit(container, m[3], m[4]).getAbsoluteValue(
+                bounds.width
+            );
+        }
+
+        if (m[5] !== undefined) {
+            radius.y = calculateLengthFromValueWithUnit(container, m[5], m[6]).getAbsoluteValue(
+                bounds.height
+            );
+        }
+
+        // Position
+        if (m[7]) {
+            center.x = LENGTH_FOR_POSITION[m[7].toLowerCase()];
+        } else if (m[8] !== undefined) {
+            center.x = calculateLengthFromValueWithUnit(container, m[8], m[9]);
+        }
+
+        if (m[10]) {
+            center.y = LENGTH_FOR_POSITION[m[10].toLowerCase()];
+        } else if (m[11] !== undefined) {
+            center.y = calculateLengthFromValueWithUnit(container, m[11], m[12]);
+        }
+    }
+
+    const gradientCenter = {
+        x: center.x === undefined ? bounds.width / 2 : center.x.getAbsoluteValue(bounds.width),
+        y: center.y === undefined ? bounds.height / 2 : center.y.getAbsoluteValue(bounds.height)
    };
+    const gradientRadius = calculateRadius(
+        (m && m[2]) || 'farthest-corner',
+        shape,
+        gradientCenter,
+        radius,
+        bounds
+    );
+
+    return new RadialGradient(
+        parseColorStops(args, m ? 1 : 0, Math.min(gradientRadius.x, gradientRadius.y)),
+        shape,
+        gradientCenter,
+        gradientRadius
+    );
 };

 const calculateGradientDirection = (radian: number, bounds: Bounds): Direction => {
@ -141,9 +287,7 @@ const calculateGradientDirection = (radian: number, bounds: Bounds): Direction =
 };

 const parseTopRight = (bounds: Bounds) =>
-    Math.acos(
-        bounds.width / 2 / (Math.sqrt(Math.pow(bounds.width, 2) + Math.pow(bounds.height, 2)) / 2)
-    );
+    Math.acos(bounds.width / 2 / (distance(bounds.width, bounds.height) / 2));

 const parseSideOrCorner = (side: string, bounds: Bounds): Direction => {
    switch (side) {
@ -189,3 +333,226 @@ const parsePercentageAngle = (angle: string, bounds: Bounds): Direction => {

    return calculateGradientDirection(Math.atan(isNaN(ratio) ? 1 : ratio) + Math.PI / 2, bounds);
 };
+
+const findCorner = (bounds: Bounds, x: number, y: number, closest: boolean): Point => {
+    var corners = [
+        {x: 0, y: 0},
+        {x: 0, y: bounds.height},
+        {x: bounds.width, y: 0},
+        {x: bounds.width, y: bounds.height}
+    ];
+
+    // $FlowFixMe
+    return corners.reduce(
+        (stat, corner) => {
+            const d = distance(x - corner.x, y - corner.y);
+            if (closest ? d < stat.optimumDistance : d > stat.optimumDistance) {
+                return {
+                    optimumCorner: corner,
+                    optimumDistance: d
+                };
+            }
+
+            return stat;
+        },
+        {
+            optimumDistance: closest ? Infinity : -Infinity,
+            optimumCorner: null
+        }
+    ).optimumCorner;
+};
+
+const calculateRadius = (
+    extent: string,
+    shape: RadialGradientShapeType,
+    center: Point,
+    radius: Point,
+    bounds: Bounds
+): Point => {
+    const x = center.x;
+    const y = center.y;
+    let rx = 0;
+    let ry = 0;
+
+    switch (extent) {
+        case 'closest-side':
+            // The ending shape is sized so that that it exactly meets the side of the gradient box closest to the gradient’s center.
+            // If the shape is an ellipse, it exactly meets the closest side in each dimension.
+            if (shape === RADIAL_GRADIENT_SHAPE.CIRCLE) {
+                rx = ry = Math.min(
+                    Math.abs(x),
+                    Math.abs(x - bounds.width),
+                    Math.abs(y),
+                    Math.abs(y - bounds.height)
+                );
+            } else if (shape === RADIAL_GRADIENT_SHAPE.ELLIPSE) {
+                rx = Math.min(Math.abs(x), Math.abs(x - bounds.width));
+                ry = Math.min(Math.abs(y), Math.abs(y - bounds.height));
+            }
+            break;
+
+        case 'closest-corner':
+            // The ending shape is sized so that that it passes through the corner of the gradient box closest to the gradient’s center.
+            // If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified.
+            if (shape === RADIAL_GRADIENT_SHAPE.CIRCLE) {
+                rx = ry = Math.min(
+                    distance(x, y),
+                    distance(x, y - bounds.height),
+                    distance(x - bounds.width, y),
+                    distance(x - bounds.width, y - bounds.height)
+                );
+            } else if (shape === RADIAL_GRADIENT_SHAPE.ELLIPSE) {
+                // Compute the ratio ry/rx (which is to be the same as for "closest-side")
+                const c =
+                    Math.min(Math.abs(y), Math.abs(y - bounds.height)) /
+                    Math.min(Math.abs(x), Math.abs(x - bounds.width));
+                const corner = findCorner(bounds, x, y, true);
+                rx = distance(corner.x - x, (corner.y - y) / c);
+                ry = c * rx;
+            }
+            break;
+
+        case 'farthest-side':
+            // Same as closest-side, except the ending shape is sized based on the farthest side(s)
+            if (shape === RADIAL_GRADIENT_SHAPE.CIRCLE) {
+                rx = ry = Math.max(
+                    Math.abs(x),
+                    Math.abs(x - bounds.width),
+                    Math.abs(y),
+                    Math.abs(y - bounds.height)
+                );
+            } else if (shape === RADIAL_GRADIENT_SHAPE.ELLIPSE) {
+                rx = Math.max(Math.abs(x), Math.abs(x - bounds.width));
+                ry = Math.max(Math.abs(y), Math.abs(y - bounds.height));
+            }
+            break;
+
+        case 'farthest-corner':
+            // Same as closest-corner, except the ending shape is sized based on the farthest corner.
+            // If the shape is an ellipse, the ending shape is given the same aspect ratio it would have if farthest-side were specified.
+            if (shape === RADIAL_GRADIENT_SHAPE.CIRCLE) {
+                rx = ry = Math.max(
+                    distance(x, y),
+                    distance(x, y - bounds.height),
+                    distance(x - bounds.width, y),
+                    distance(x - bounds.width, y - bounds.height)
+                );
+            } else if (shape === RADIAL_GRADIENT_SHAPE.ELLIPSE) {
+                // Compute the ratio ry/rx (which is to be the same as for "farthest-side")
+                const c =
+                    Math.max(Math.abs(y), Math.abs(y - bounds.height)) /
+                    Math.max(Math.abs(x), Math.abs(x - bounds.width));
+                const corner = findCorner(bounds, x, y, false);
+                rx = distance(corner.x - x, (corner.y - y) / c);
+                ry = c * rx;
+            }
+            break;
+
+        default:
+            // pixel or percentage values
+            rx = radius.x || 0;
+            ry = radius.y !== undefined ? radius.y : rx;
+            break;
+    }
+
+    return {
+        x: rx,
+        y: ry
+    };
+};
+
+export const transformWebkitRadialGradientArgs = (args: Array<string>): Array<string> => {
+    let shape = '';
+    let radius = '';
+    let extent = '';
+    let position = '';
+    let idx = 0;
+
+    const POSITION = /^(left|center|right|\d+(?:px|r?em|%)?)(?:\s+(top|center|bottom|\d+(?:px|r?em|%)?))?$/i;
+    const SHAPE_AND_EXTENT = /^(circle|ellipse)?\s*(closest-side|closest-corner|farthest-side|farthest-corner|contain|cover)?$/i;
+    const RADIUS = /^\d+(px|r?em|%)?(?:\s+\d+(px|r?em|%)?)?$/i;
+
+    const matchStartPosition = args[idx].match(POSITION);
+    if (matchStartPosition) {
+        idx++;
+    }
+
+    const matchShapeExtent = args[idx].match(SHAPE_AND_EXTENT);
+    if (matchShapeExtent) {
+        shape = matchShapeExtent[1] || '';
+        extent = matchShapeExtent[2] || '';
+        if (extent === 'contain') {
+            extent = 'closest-side';
+        } else if (extent === 'cover') {
+            extent = 'farthest-corner';
+        }
+        idx++;
+    }
+
+    const matchStartRadius = args[idx].match(RADIUS);
+    if (matchStartRadius) {
+        idx++;
+    }
+
+    const matchEndPosition = args[idx].match(POSITION);
+    if (matchEndPosition) {
+        idx++;
+    }
+
+    const matchEndRadius = args[idx].match(RADIUS);
+    if (matchEndRadius) {
+        idx++;
+    }
+
+    const matchPosition = matchEndPosition || matchStartPosition;
+    if (matchPosition && matchPosition[1]) {
+        position = matchPosition[1] + (/^\d+$/.test(matchPosition[1]) ? 'px' : '');
+        if (matchPosition[2]) {
+            position += ' ' + matchPosition[2] + (/^\d+$/.test(matchPosition[2]) ? 'px' : '');
+        }
+    }
+
+    const matchRadius = matchEndRadius || matchStartRadius;
+    if (matchRadius) {
+        radius = matchRadius[0];
+        if (!matchRadius[1]) {
+            radius += 'px';
+        }
+    }
+
+    if (position && !shape && !radius && !extent) {
+        radius = position;
+        position = '';
+    }
+
+    if (position) {
+        position = `at ${position}`;
+    }
+
+    return [[shape, extent, radius, position].filter(s => !!s).join(' ')].concat(args.slice(idx));
+};
+
+const transformObsoleteColorStops = (args: Array<string>): Array<string> => {
+    return (
+        args
+            .map(color => color.match(FROM_TO_COLORSTOP))
+            // $FlowFixMe
+            .map((v: Array<string>, index: number) => {
+                if (!v) {
+                    return args[index];
+                }
+
+                switch (v[1]) {
+                    case 'from':
+                        return `${v[4]} 0%`;
+                    case 'to':
+                        return `${v[4]} 100%`;
+                    case 'color-stop':
+                        if (v[3] === '%') {
+                            return `${v[4]} ${v[2]}`;
+                        }
+                        return `${v[4]} ${parseFloat(v[2]) * 100}%`;
+                }
+            })
+    );
+};
--- a/src/Input.js
+++ b/src/Input.js
@ -133,7 +133,7 @@ const inlineFormElement = (
    if (value.length > 0 && body) {
        const wrapper = node.ownerDocument.createElement('html2canvaswrapper');
        copyCSSStyles(node.ownerDocument.defaultView.getComputedStyle(node, null), wrapper);
-        wrapper.style.position = 'fixed';
+        wrapper.style.position = 'absolute';
        wrapper.style.left = `${container.bounds.left}px`;
        wrapper.style.top = `${container.bounds.top}px`;
        if (!allowLinebreak) {
--- a/src/Length.js
+++ b/src/Length.js
@ -1,6 +1,10 @@
 /* @flow */
 'use strict';

+import type NodeContainer from './NodeContainer';
+
+const LENGTH_WITH_UNIT = /([\d.]+)(px|r?em|%)/i;
+
 export const LENGTH_TYPE = {
    PX: 0,
    PERCENTAGE: 1
@ -34,3 +38,31 @@ export default class Length {
        return new Length(v);
    }
 }
+
+const getRootFontSize = (container: NodeContainer): number => {
+    const parent = container.parent;
+    return parent ? getRootFontSize(parent) : parseFloat(container.style.font.fontSize);
+};
+
+export const calculateLengthFromValueWithUnit = (
+    container: NodeContainer,
+    value: string,
+    unit: string
+): Length => {
+    switch (unit) {
+        case 'px':
+        case '%':
+            return new Length(value + unit);
+        case 'em':
+        case 'rem':
+            const length = new Length(value);
+            length.value *=
+                unit === 'em'
+                    ? parseFloat(container.style.font.fontSize)
+                    : getRootFontSize(container);
+            return length;
+        default:
+            // TODO: handle correctly if unknown unit is used
+            return new Length('0');
+    }
+};
--- a/src/ListItem.js
+++ b/src/ListItem.js
@ -0,0 +1,711 @@
+/* @flow */
+'use strict';
+
+import type ResourceLoader from './ResourceLoader';
+import type {ListStyleType} from './parsing/listStyle';
+
+import {copyCSSStyles, contains} from './Util';
+import NodeContainer from './NodeContainer';
+import TextContainer from './TextContainer';
+import {LIST_STYLE_POSITION, LIST_STYLE_TYPE} from './parsing/listStyle';
+import {fromCodePoint} from './Unicode';
+
+// Margin between the enumeration and the list item content
+const MARGIN_RIGHT = 7;
+
+const ancestorTypes = ['OL', 'UL', 'MENU'];
+
+export const getListOwner = (container: NodeContainer): ?NodeContainer => {
+    let parent = container.parent;
+    if (!parent) {
+        return null;
+    }
+
+    do {
+        let isAncestor = ancestorTypes.indexOf(parent.tagName) !== -1;
+        if (isAncestor) {
+            return parent;
+        }
+        parent = parent.parent;
+    } while (parent);
+
+    return container.parent;
+};
+
+export const inlineListItemElement = (
+    node: HTMLElement,
+    container: NodeContainer,
+    resourceLoader: ResourceLoader
+): void => {
+    const listStyle = container.style.listStyle;
+
+    if (!listStyle) {
+        return;
+    }
+
+    const style = node.ownerDocument.defaultView.getComputedStyle(node, null);
+    const wrapper = node.ownerDocument.createElement('html2canvaswrapper');
+    copyCSSStyles(style, wrapper);
+
+    wrapper.style.position = 'absolute';
+    wrapper.style.bottom = 'auto';
+    wrapper.style.display = 'block';
+    wrapper.style.letterSpacing = 'normal';
+
+    switch (listStyle.listStylePosition) {
+        case LIST_STYLE_POSITION.OUTSIDE:
+            wrapper.style.left = 'auto';
+            wrapper.style.right = `${node.ownerDocument.defaultView.innerWidth -
+                container.bounds.left -
+                container.style.margin[1].getAbsoluteValue(container.bounds.width) +
+                MARGIN_RIGHT}px`;
+            wrapper.style.textAlign = 'right';
+            break;
+        case LIST_STYLE_POSITION.INSIDE:
+            wrapper.style.left = `${container.bounds.left -
+                container.style.margin[3].getAbsoluteValue(container.bounds.width)}px`;
+            wrapper.style.right = 'auto';
+            wrapper.style.textAlign = 'left';
+            break;
+    }
+
+    let text;
+    const MARGIN_TOP = container.style.margin[0].getAbsoluteValue(container.bounds.width);
+    const styleImage = listStyle.listStyleImage;
+    if (styleImage) {
+        if (styleImage.method === 'url') {
+            const image = node.ownerDocument.createElement('img');
+            image.src = styleImage.args[0];
+            wrapper.style.top = `${container.bounds.top - MARGIN_TOP}px`;
+            wrapper.style.width = 'auto';
+            wrapper.style.height = 'auto';
+            wrapper.appendChild(image);
+        } else {
+            const size = parseFloat(container.style.font.fontSize) * 0.5;
+            wrapper.style.top = `${container.bounds.top -
+                MARGIN_TOP +
+                container.bounds.height -
+                1.5 * size}px`;
+            wrapper.style.width = `${size}px`;
+            wrapper.style.height = `${size}px`;
+            wrapper.style.backgroundImage = style.listStyleImage;
+        }
+    } else if (typeof container.listIndex === 'number') {
+        text = node.ownerDocument.createTextNode(
+            createCounterText(container.listIndex, listStyle.listStyleType, true)
+        );
+        wrapper.appendChild(text);
+        wrapper.style.top = `${container.bounds.top - MARGIN_TOP}px`;
+    }
+
+    // $FlowFixMe
+    const body: HTMLBodyElement = node.ownerDocument.body;
+    body.appendChild(wrapper);
+
+    if (text) {
+        container.childNodes.push(TextContainer.fromTextNode(text, container));
+        body.removeChild(wrapper);
+    } else {
+        // $FlowFixMe
+        container.childNodes.push(new NodeContainer(wrapper, container, resourceLoader, 0));
+    }
+};
+
+const ROMAN_UPPER = {
+    integers: [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1],
+    values: ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']
+};
+
+const ARMENIAN = {
+    integers: [
+        9000,
+        8000,
+        7000,
+        6000,
+        5000,
+        4000,
+        3000,
+        2000,
+        1000,
+        900,
+        800,
+        700,
+        600,
+        500,
+        400,
+        300,
+        200,
+        100,
+        90,
+        80,
+        70,
+        60,
+        50,
+        40,
+        30,
+        20,
+        10,
+        9,
+        8,
+        7,
+        6,
+        5,
+        4,
+        3,
+        2,
+        1
+    ],
+    values: [
+        'Ք',
+        'Փ',
+        'Ւ',
+        'Ց',
+        'Ր',
+        'Տ',
+        'Վ',
+        'Ս',
+        'Ռ',
+        'Ջ',
+        'Պ',
+        'Չ',
+        'Ո',
+        'Շ',
+        'Ն',
+        'Յ',
+        'Մ',
+        'Ճ',
+        'Ղ',
+        'Ձ',
+        'Հ',
+        'Կ',
+        'Ծ',
+        'Խ',
+        'Լ',
+        'Ի',
+        'Ժ',
+        'Թ',
+        'Ը',
+        'Է',
+        'Զ',
+        'Ե',
+        'Դ',
+        'Գ',
+        'Բ',
+        'Ա'
+    ]
+};
+
+const HEBREW = {
+    integers: [
+        10000,
+        9000,
+        8000,
+        7000,
+        6000,
+        5000,
+        4000,
+        3000,
+        2000,
+        1000,
+        400,
+        300,
+        200,
+        100,
+        90,
+        80,
+        70,
+        60,
+        50,
+        40,
+        30,
+        20,
+        19,
+        18,
+        17,
+        16,
+        15,
+        10,
+        9,
+        8,
+        7,
+        6,
+        5,
+        4,
+        3,
+        2,
+        1
+    ],
+    values: [
+        'י׳',
+        'ט׳',
+        'ח׳',
+        'ז׳',
+        'ו׳',
+        'ה׳',
+        'ד׳',
+        'ג׳',
+        'ב׳',
+        'א׳',
+        'ת',
+        'ש',
+        'ר',
+        'ק',
+        'צ',
+        'פ',
+        'ע',
+        'ס',
+        'נ',
+        'מ',
+        'ל',
+        'כ',
+        'יט',
+        'יח',
+        'יז',
+        'טז',
+        'טו',
+        'י',
+        'ט',
+        'ח',
+        'ז',
+        'ו',
+        'ה',
+        'ד',
+        'ג',
+        'ב',
+        'א'
+    ]
+};
+
+const GEORGIAN = {
+    integers: [
+        10000,
+        9000,
+        8000,
+        7000,
+        6000,
+        5000,
+        4000,
+        3000,
+        2000,
+        1000,
+        900,
+        800,
+        700,
+        600,
+        500,
+        400,
+        300,
+        200,
+        100,
+        90,
+        80,
+        70,
+        60,
+        50,
+        40,
+        30,
+        20,
+        10,
+        9,
+        8,
+        7,
+        6,
+        5,
+        4,
+        3,
+        2,
+        1
+    ],
+    values: [
+        'ჵ',
+        'ჰ',
+        'ჯ',
+        'ჴ',
+        'ხ',
+        'ჭ',
+        'წ',
+        'ძ',
+        'ც',
+        'ჩ',
+        'შ',
+        'ყ',
+        'ღ',
+        'ქ',
+        'ფ',
+        'ჳ',
+        'ტ',
+        'ს',
+        'რ',
+        'ჟ',
+        'პ',
+        'ო',
+        'ჲ',
+        'ნ',
+        'მ',
+        'ლ',
+        'კ',
+        'ი',
+        'თ',
+        'ჱ',
+        'ზ',
+        'ვ',
+        'ე',
+        'დ',
+        'გ',
+        'ბ',
+        'ა'
+    ]
+};
+
+const createAdditiveCounter = (
+    value: number,
+    min: number,
+    max: number,
+    symbols,
+    fallback: ListStyleType,
+    suffix: string
+) => {
+    if (value < min || value > max) {
+        return createCounterText(value, fallback, suffix.length > 0);
+    }
+
+    return (
+        symbols.integers.reduce((string, integer, index) => {
+            while (value >= integer) {
+                value -= integer;
+                string += symbols.values[index];
+            }
+            return string;
+        }, '') + suffix
+    );
+};
+
+const createCounterStyleWithSymbolResolver = (
+    value: number,
+    codePointRangeLength: number,
+    isNumeric: boolean,
+    resolver
+): string => {
+    let string = '';
+
+    do {
+        if (!isNumeric) {
+            value--;
+        }
+        string = resolver(value) + string;
+        value /= codePointRangeLength;
+    } while (value * codePointRangeLength >= codePointRangeLength);
+
+    return string;
+};
+
+const createCounterStyleFromRange = (
+    value: number,
+    codePointRangeStart: number,
+    codePointRangeEnd: number,
+    isNumeric: boolean,
+    suffix: string
+): string => {
+    const codePointRangeLength = codePointRangeEnd - codePointRangeStart + 1;
+
+    return (
+        (value < 0 ? '-' : '') +
+        (createCounterStyleWithSymbolResolver(
+            Math.abs(value),
+            codePointRangeLength,
+            isNumeric,
+            codePoint =>
+                fromCodePoint(Math.floor(codePoint % codePointRangeLength) + codePointRangeStart)
+        ) +
+            suffix)
+    );
+};
+
+const createCounterStyleFromSymbols = (
+    value: number,
+    symbols: string,
+    suffix: string = '. '
+): string => {
+    const codePointRangeLength = symbols.length;
+    return (
+        createCounterStyleWithSymbolResolver(
+            Math.abs(value),
+            codePointRangeLength,
+            false,
+            codePoint => symbols[Math.floor(codePoint % codePointRangeLength)]
+        ) + suffix
+    );
+};
+
+const CJK_ZEROS = 1 << 0;
+const CJK_TEN_COEFFICIENTS = 1 << 1;
+const CJK_TEN_HIGH_COEFFICIENTS = 1 << 2;
+const CJK_HUNDRED_COEFFICIENTS = 1 << 3;
+
+const createCJKCounter = (
+    value: number,
+    numbers: string,
+    multipliers: string,
+    negativeSign: string,
+    suffix: string,
+    flags: number
+): string => {
+    if (value < -9999 || value > 9999) {
+        return createCounterText(value, LIST_STYLE_TYPE.CJK_DECIMAL, suffix.length > 0);
+    }
+    let tmp = Math.abs(value);
+    let string = suffix;
+
+    if (tmp === 0) {
+        return numbers[0] + string;
+    }
+
+    for (let digit = 0; tmp > 0 && digit <= 4; digit++) {
+        let coefficient = tmp % 10;
+
+        if (coefficient === 0 && contains(flags, CJK_ZEROS) && string !== '') {
+            string = numbers[coefficient] + string;
+        } else if (
+            coefficient > 1 ||
+            (coefficient === 1 && digit === 0) ||
+            (coefficient === 1 && digit === 1 && contains(flags, CJK_TEN_COEFFICIENTS)) ||
+            (coefficient === 1 &&
+                digit === 1 &&
+                contains(flags, CJK_TEN_HIGH_COEFFICIENTS) &&
+                value > 100) ||
+            (coefficient === 1 && digit > 1 && contains(flags, CJK_HUNDRED_COEFFICIENTS))
+        ) {
+            string = numbers[coefficient] + (digit > 0 ? multipliers[digit - 1] : '') + string;
+        } else if (coefficient === 1 && digit > 0) {
+            string = multipliers[digit - 1] + string;
+        }
+        tmp = Math.floor(tmp / 10);
+    }
+
+    return (value < 0 ? negativeSign : '') + string;
+};
+
+const CHINESE_INFORMAL_MULTIPLIERS = '十百千萬';
+const CHINESE_FORMAL_MULTIPLIERS = '拾佰仟萬';
+const JAPANESE_NEGATIVE = 'マイナス';
+const KOREAN_NEGATIVE = '마이너스';
+
+export const createCounterText = (
+    value: number,
+    type: ListStyleType,
+    appendSuffix: boolean
+): string => {
+    const defaultSuffix = appendSuffix ? '. ' : '';
+    const cjkSuffix = appendSuffix ? '、' : '';
+    const koreanSuffix = appendSuffix ? ', ' : '';
+    switch (type) {
+        case LIST_STYLE_TYPE.DISC:
+            return '•';
+        case LIST_STYLE_TYPE.CIRCLE:
+            return '◦';
+        case LIST_STYLE_TYPE.SQUARE:
+            return '◾';
+        case LIST_STYLE_TYPE.DECIMAL_LEADING_ZERO:
+            const string = createCounterStyleFromRange(value, 48, 57, true, defaultSuffix);
+            return string.length < 4 ? `0${string}` : string;
+        case LIST_STYLE_TYPE.CJK_DECIMAL:
+            return createCounterStyleFromSymbols(value, '〇一二三四五六七八九', cjkSuffix);
+        case LIST_STYLE_TYPE.LOWER_ROMAN:
+            return createAdditiveCounter(
+                value,
+                1,
+                3999,
+                ROMAN_UPPER,
+                LIST_STYLE_TYPE.DECIMAL,
+                defaultSuffix
+            ).toLowerCase();
+        case LIST_STYLE_TYPE.UPPER_ROMAN:
+            return createAdditiveCounter(
+                value,
+                1,
+                3999,
+                ROMAN_UPPER,
+                LIST_STYLE_TYPE.DECIMAL,
+                defaultSuffix
+            );
+        case LIST_STYLE_TYPE.LOWER_GREEK:
+            return createCounterStyleFromRange(value, 945, 969, false, defaultSuffix);
+        case LIST_STYLE_TYPE.LOWER_ALPHA:
+            return createCounterStyleFromRange(value, 97, 122, false, defaultSuffix);
+        case LIST_STYLE_TYPE.UPPER_ALPHA:
+            return createCounterStyleFromRange(value, 65, 90, false, defaultSuffix);
+        case LIST_STYLE_TYPE.ARABIC_INDIC:
+            return createCounterStyleFromRange(value, 1632, 1641, true, defaultSuffix);
+        case LIST_STYLE_TYPE.ARMENIAN:
+        case LIST_STYLE_TYPE.UPPER_ARMENIAN:
+            return createAdditiveCounter(
+                value,
+                1,
+                9999,
+                ARMENIAN,
+                LIST_STYLE_TYPE.DECIMAL,
+                defaultSuffix
+            );
+        case LIST_STYLE_TYPE.LOWER_ARMENIAN:
+            return createAdditiveCounter(
+                value,
+                1,
+                9999,
+                ARMENIAN,
+                LIST_STYLE_TYPE.DECIMAL,
+                defaultSuffix
+            ).toLowerCase();
+        case LIST_STYLE_TYPE.BENGALI:
+            return createCounterStyleFromRange(value, 2534, 2543, true, defaultSuffix);
+        case LIST_STYLE_TYPE.CAMBODIAN:
+        case LIST_STYLE_TYPE.KHMER:
+            return createCounterStyleFromRange(value, 6112, 6121, true, defaultSuffix);
+        case LIST_STYLE_TYPE.CJK_EARTHLY_BRANCH:
+            return createCounterStyleFromSymbols(value, '子丑寅卯辰巳午未申酉戌亥', cjkSuffix);
+        case LIST_STYLE_TYPE.CJK_HEAVENLY_STEM:
+            return createCounterStyleFromSymbols(value, '甲乙丙丁戊己庚辛壬癸', cjkSuffix);
+        case LIST_STYLE_TYPE.CJK_IDEOGRAPHIC:
+        case LIST_STYLE_TYPE.TRAD_CHINESE_INFORMAL:
+            return createCJKCounter(
+                value,
+                '零一二三四五六七八九',
+                CHINESE_INFORMAL_MULTIPLIERS,
+                '負',
+                cjkSuffix,
+                CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS
+            );
+        case LIST_STYLE_TYPE.TRAD_CHINESE_FORMAL:
+            return createCJKCounter(
+                value,
+                '零壹貳參肆伍陸柒捌玖',
+                CHINESE_FORMAL_MULTIPLIERS,
+                '負',
+                cjkSuffix,
+                CJK_ZEROS |
+                    CJK_TEN_COEFFICIENTS |
+                    CJK_TEN_HIGH_COEFFICIENTS |
+                    CJK_HUNDRED_COEFFICIENTS
+            );
+        case LIST_STYLE_TYPE.SIMP_CHINESE_INFORMAL:
+            return createCJKCounter(
+                value,
+                '零一二三四五六七八九',
+                CHINESE_INFORMAL_MULTIPLIERS,
+                '负',
+                cjkSuffix,
+                CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS
+            );
+        case LIST_STYLE_TYPE.SIMP_CHINESE_FORMAL:
+            return createCJKCounter(
+                value,
+                '零壹贰叁肆伍陆柒捌玖',
+                CHINESE_FORMAL_MULTIPLIERS,
+                '负',
+                cjkSuffix,
+                CJK_ZEROS |
+                    CJK_TEN_COEFFICIENTS |
+                    CJK_TEN_HIGH_COEFFICIENTS |
+                    CJK_HUNDRED_COEFFICIENTS
+            );
+        case LIST_STYLE_TYPE.JAPANESE_INFORMAL:
+            return createCJKCounter(value, '〇一二三四五六七八九', '十百千万', JAPANESE_NEGATIVE, cjkSuffix, 0);
+        case LIST_STYLE_TYPE.JAPANESE_FORMAL:
+            return createCJKCounter(
+                value,
+                '零壱弐参四伍六七八九',
+                '拾百千万',
+                JAPANESE_NEGATIVE,
+                cjkSuffix,
+                CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS
+            );
+        case LIST_STYLE_TYPE.KOREAN_HANGUL_FORMAL:
+            return createCJKCounter(
+                value,
+                '영일이삼사오육칠팔구',
+                '십백천만',
+                KOREAN_NEGATIVE,
+                koreanSuffix,
+                CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS
+            );
+        case LIST_STYLE_TYPE.KOREAN_HANJA_INFORMAL:
+            return createCJKCounter(value, '零一二三四五六七八九', '十百千萬', KOREAN_NEGATIVE, koreanSuffix, 0);
+        case LIST_STYLE_TYPE.KOREAN_HANJA_FORMAL:
+            return createCJKCounter(
+                value,
+                '零壹貳參四五六七八九',
+                '拾百千',
+                KOREAN_NEGATIVE,
+                koreanSuffix,
+                CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS
+            );
+        case LIST_STYLE_TYPE.DEVANAGARI:
+            return createCounterStyleFromRange(value, 0x966, 0x96f, true, defaultSuffix);
+        case LIST_STYLE_TYPE.GEORGIAN:
+            return createAdditiveCounter(
+                value,
+                1,
+                19999,
+                GEORGIAN,
+                LIST_STYLE_TYPE.DECIMAL,
+                defaultSuffix
+            );
+        case LIST_STYLE_TYPE.GUJARATI:
+            return createCounterStyleFromRange(value, 0xae6, 0xaef, true, defaultSuffix);
+        case LIST_STYLE_TYPE.GURMUKHI:
+            return createCounterStyleFromRange(value, 0xa66, 0xa6f, true, defaultSuffix);
+        case LIST_STYLE_TYPE.HEBREW:
+            return createAdditiveCounter(
+                value,
+                1,
+                10999,
+                HEBREW,
+                LIST_STYLE_TYPE.DECIMAL,
+                defaultSuffix
+            );
+        case LIST_STYLE_TYPE.HIRAGANA:
+            return createCounterStyleFromSymbols(
+                value,
+                'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをん'
+            );
+        case LIST_STYLE_TYPE.HIRAGANA_IROHA:
+            return createCounterStyleFromSymbols(
+                value,
+                'いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす'
+            );
+        case LIST_STYLE_TYPE.KANNADA:
+            return createCounterStyleFromRange(value, 0xce6, 0xcef, true, defaultSuffix);
+        case LIST_STYLE_TYPE.KATAKANA:
+            return createCounterStyleFromSymbols(
+                value,
+                'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲン',
+                cjkSuffix
+            );
+        case LIST_STYLE_TYPE.KATAKANA_IROHA:
+            return createCounterStyleFromSymbols(
+                value,
+                'イロハニホヘトチリヌルヲワカヨタレソツネナラムウヰノオクヤマケフコエテアサキユメミシヱヒモセス',
+                cjkSuffix
+            );
+        case LIST_STYLE_TYPE.LAO:
+            return createCounterStyleFromRange(value, 0xed0, 0xed9, true, defaultSuffix);
+        case LIST_STYLE_TYPE.MONGOLIAN:
+            return createCounterStyleFromRange(value, 0x1810, 0x1819, true, defaultSuffix);
+        case LIST_STYLE_TYPE.MYANMAR:
+            return createCounterStyleFromRange(value, 0x1040, 0x1049, true, defaultSuffix);
+        case LIST_STYLE_TYPE.ORIYA:
+            return createCounterStyleFromRange(value, 0xb66, 0xb6f, true, defaultSuffix);
+        case LIST_STYLE_TYPE.PERSIAN:
+            return createCounterStyleFromRange(value, 0x6f0, 0x6f9, true, defaultSuffix);
+        case LIST_STYLE_TYPE.TAMIL:
+            return createCounterStyleFromRange(value, 0xbe6, 0xbef, true, defaultSuffix);
+        case LIST_STYLE_TYPE.TELUGU:
+            return createCounterStyleFromRange(value, 0xc66, 0xc6f, true, defaultSuffix);
+        case LIST_STYLE_TYPE.THAI:
+            return createCounterStyleFromRange(value, 0xe50, 0xe59, true, defaultSuffix);
+        case LIST_STYLE_TYPE.TIBETAN:
+            return createCounterStyleFromRange(value, 0xf20, 0xf29, true, defaultSuffix);
+        case LIST_STYLE_TYPE.DECIMAL:
+        default:
+            return createCounterStyleFromRange(value, 48, 57, true, defaultSuffix);
+    }
+};
--- a/src/Logger.js
+++ b/src/Logger.js
@ -2,21 +2,23 @@
 'use strict';

 export default class Logger {
+    enabled: boolean;
    start: number;
    id: ?string;

-    constructor(id: ?string, start: ?number) {
+    constructor(enabled: boolean, id: ?string, start: ?number) {
+        this.enabled = typeof window !== 'undefined' && enabled;
        this.start = start ? start : Date.now();
        this.id = id;
    }

    child(id: string) {
-        return new Logger(id, this.start);
+        return new Logger(this.enabled, id, this.start);
    }

    // eslint-disable-next-line flowtype/no-weak-types
    log(...args: any) {
-        if (window.console && window.console.log) {
+        if (this.enabled && window.console && window.console.log) {
            Function.prototype.bind
                .call(window.console.log, window.console)
                .apply(
@ -31,7 +33,7 @@ export default class Logger {

    // eslint-disable-next-line flowtype/no-weak-types
    error(...args: any) {
-        if (window.console && window.console.error) {
+        if (this.enabled && window.console && window.console.error) {
            Function.prototype.bind
                .call(window.console.error, window.console)
                .apply(
--- a/src/NodeContainer.js
+++ b/src/NodeContainer.js
@ -7,7 +7,11 @@ import type {BorderRadius} from './parsing/borderRadius';
 import type {DisplayBit} from './parsing/display';
 import type {Float} from './parsing/float';
 import type {Font} from './parsing/font';
+import type {LineBreak} from './parsing/lineBreak';
+import type {ListStyle} from './parsing/listStyle';
+import type {Margin} from './parsing/margin';
 import type {Overflow} from './parsing/overflow';
+import type {OverflowWrap} from './parsing/overflowWrap';
 import type {Padding} from './parsing/padding';
 import type {Position} from './parsing/position';
 import type {TextShadow} from './parsing/textShadow';
@ -15,6 +19,7 @@ import type {TextTransform} from './parsing/textTransform';
 import type {TextDecoration} from './parsing/textDecoration';
 import type {Transform} from './parsing/transform';
 import type {Visibility} from './parsing/visibility';
+import type {WordBreak} from './parsing/word-break';
 import type {zIndex} from './parsing/zIndex';

 import type {Bounds, BoundCurves} from './Bounds';
@ -32,7 +37,11 @@ import {parseDisplay, DISPLAY} from './parsing/display';
 import {parseCSSFloat, FLOAT} from './parsing/float';
 import {parseFont} from './parsing/font';
 import {parseLetterSpacing} from './parsing/letterSpacing';
+import {parseLineBreak} from './parsing/lineBreak';
+import {parseListStyle} from './parsing/listStyle';
+import {parseMargin} from './parsing/margin';
 import {parseOverflow, OVERFLOW} from './parsing/overflow';
+import {parseOverflowWrap} from './parsing/overflowWrap';
 import {parsePadding} from './parsing/padding';
 import {parsePosition, POSITION} from './parsing/position';
 import {parseTextDecoration} from './parsing/textDecoration';
@ -40,6 +49,7 @@ import {parseTextShadow} from './parsing/textShadow';
 import {parseTextTransform} from './parsing/textTransform';
 import {parseTransform} from './parsing/transform';
 import {parseVisibility, VISIBILITY} from './parsing/visibility';
+import {parseWordBreak} from './parsing/word-break';
 import {parseZIndex} from './parsing/zIndex';

 import {parseBounds, parseBoundCurves, calculatePaddingBoxPath} from './Bounds';
@ -50,6 +60,7 @@ import {
    getInputBorderRadius,
    reformatInputBounds
 } from './Input';
+import {getListOwner} from './ListItem';

 type StyleDeclaration = {
    background: Background,
@ -60,8 +71,12 @@ type StyleDeclaration = {
    float: Float,
    font: Font,
    letterSpacing: number,
+    lineBreak: LineBreak,
+    listStyle: ListStyle | null,
+    margin: Margin,
    opacity: number,
    overflow: Overflow,
+    overflowWrap: OverflowWrap,
    padding: Padding,
    position: Position,
    textDecoration: TextDecoration | null,
@ -69,6 +84,7 @@ type StyleDeclaration = {
    textTransform: TextTransform,
    transform: Transform,
    visibility: Visibility,
+    wordBreak: WordBreak,
    zIndex: zIndex
 };

@ -79,10 +95,14 @@ export default class NodeContainer {
    parent: ?NodeContainer;
    style: StyleDeclaration;
    childNodes: Array<TextContainer | Path>;
+    listItems: Array<NodeContainer>;
+    listIndex: ?number;
+    listStart: ?number;
    bounds: Bounds;
    curvedBounds: BoundCurves;
    image: ?string;
    index: number;
+    tagName: string;

    constructor(
        node: HTMLElement | SVGSVGElement,
@ -91,8 +111,13 @@ export default class NodeContainer {
        index: number
    ) {
        this.parent = parent;
+        this.tagName = node.tagName;
        this.index = index;
        this.childNodes = [];
+        this.listItems = [];
+        if (typeof node.start === 'number') {
+            this.listStart = node.start;
+        }
        const defaultView = node.ownerDocument.defaultView;
        const scrollX = defaultView.pageXOffset;
        const scrollY = defaultView.pageYOffset;
@ -117,11 +142,17 @@ export default class NodeContainer {
            float: parseCSSFloat(style.float),
            font: parseFont(style),
            letterSpacing: parseLetterSpacing(style.letterSpacing),
+            listStyle: display === DISPLAY.LIST_ITEM ? parseListStyle(style) : null,
+            lineBreak: parseLineBreak(style.lineBreak),
+            margin: parseMargin(style),
            opacity: parseFloat(style.opacity),
            overflow:
                INPUT_TAGS.indexOf(node.tagName) === -1
                    ? parseOverflow(style.overflow)
                    : OVERFLOW.HIDDEN,
+            overflowWrap: parseOverflowWrap(
+                style.overflowWrap ? style.overflowWrap : style.wordWrap
+            ),
            padding: parsePadding(style),
            position: position,
            textDecoration: parseTextDecoration(style),
@ -129,6 +160,7 @@ export default class NodeContainer {
            textTransform: parseTextTransform(style.textTransform),
            transform: parseTransform(style),
            visibility: parseVisibility(style.visibility),
+            wordBreak: parseWordBreak(style.wordBreak),
            zIndex: parseZIndex(position !== POSITION.STATIC ? style.zIndex : 'auto')
        };

@ -137,6 +169,20 @@ export default class NodeContainer {
            node.style.transform = 'matrix(1,0,0,1,0,0)';
        }

+        if (display === DISPLAY.LIST_ITEM) {
+            const listOwner = getListOwner(this);
+            if (listOwner) {
+                const listIndex = listOwner.listItems.length;
+                listOwner.listItems.push(this);
+                this.listIndex =
+                    node.hasAttribute('value') && typeof node.value === 'number'
+                        ? node.value
+                        : listIndex === 0
+                          ? typeof listOwner.listStart === 'number' ? listOwner.listStart : 1
+                          : listOwner.listItems[listIndex - 1].listIndex + 1;
+            }
+        }
+
        // TODO move bound retrieval for all nodes to a later stage?
        if (node.tagName === 'IMG') {
            node.addEventListener('load', () => {
@ -170,8 +216,7 @@ export default class NodeContainer {
    }
    getClipPaths(): Array<Path> {
        const parentClips = this.parent ? this.parent.getClipPaths() : [];
-        const isClipped =
-            this.style.overflow === OVERFLOW.HIDDEN || this.style.overflow === OVERFLOW.SCROLL;
+        const isClipped = this.style.overflow !== OVERFLOW.VISIBLE;

        return isClipped
            ? parentClips.concat([calculatePaddingBoxPath(this.curvedBounds)])
--- a/src/NodeParser.js
+++ b/src/NodeParser.js
@ -6,6 +6,8 @@ import StackingContext from './StackingContext';
 import NodeContainer from './NodeContainer';
 import TextContainer from './TextContainer';
 import {inlineInputElement, inlineTextAreaElement, inlineSelectElement} from './Input';
+import {inlineListItemElement} from './ListItem';
+import {LIST_STYLE_TYPE} from './parsing/listStyle';

 export const NodeParser = (
    node: HTMLElement,
@ -71,6 +73,11 @@ const parseNodeTree = (
                    } else if (childNode.tagName === 'SELECT') {
                        // $FlowFixMe
                        inlineSelectElement(childNode, container);
+                    } else if (
+                        container.style.listStyle &&
+                        container.style.listStyle.listStyleType !== LIST_STYLE_TYPE.NONE
+                    ) {
+                        inlineListItemElement(childNode, container, resourceLoader);
                    }

                    const SHOULD_TRAVERSE_CHILDREN = childNode.tagName !== 'TEXTAREA';
--- a/src/PseudoNodeContent.js
+++ b/src/PseudoNodeContent.js
@ -0,0 +1,341 @@
+/* @flow */
+'use strict';
+
+import {createCounterText} from './ListItem';
+import {parseListStyleType} from './parsing/listStyle';
+
+export const PSEUDO_CONTENT_ITEM_TYPE = {
+    TEXT: 0,
+    IMAGE: 1
+};
+
+export const TOKEN_TYPE = {
+    STRING: 0,
+    ATTRIBUTE: 1,
+    URL: 2,
+    COUNTER: 3,
+    COUNTERS: 4,
+    OPENQUOTE: 5,
+    CLOSEQUOTE: 6
+};
+
+export type PseudoContentData = {
+    counters: {[string]: Array<number>},
+    quoteDepth: number
+};
+
+export type PseudoContentItem = {
+    type: $Values<typeof PSEUDO_CONTENT_ITEM_TYPE>,
+    value: string
+};
+
+export type Token = {
+    type: $Values<typeof TOKEN_TYPE>,
+    value?: string,
+    name?: string,
+    format?: string,
+    glue?: string
+};
+
+export const parseCounterReset = (
+    style: ?CSSStyleDeclaration,
+    data: PseudoContentData
+): Array<string> => {
+    if (!style || !style.counterReset || style.counterReset === 'none') {
+        return [];
+    }
+
+    const counterNames: Array<string> = [];
+    const counterResets = style.counterReset.split(/\s*,\s*/);
+    const lenCounterResets = counterResets.length;
+
+    for (let i = 0; i < lenCounterResets; i++) {
+        const [counterName, initialValue] = counterResets[i].split(/\s+/);
+        counterNames.push(counterName);
+        let counter = data.counters[counterName];
+        if (!counter) {
+            counter = data.counters[counterName] = [];
+        }
+        counter.push(parseInt(initialValue || 0, 10));
+    }
+
+    return counterNames;
+};
+
+export const popCounters = (counterNames: Array<string>, data: PseudoContentData): void => {
+    const lenCounters = counterNames.length;
+    for (let i = 0; i < lenCounters; i++) {
+        data.counters[counterNames[i]].pop();
+    }
+};
+
+export const resolvePseudoContent = (
+    node: Node,
+    style: ?CSSStyleDeclaration,
+    data: PseudoContentData
+): ?Array<PseudoContentItem> => {
+    if (
+        !style ||
+        !style.content ||
+        style.content === 'none' ||
+        style.content === '-moz-alt-content' ||
+        style.display === 'none'
+    ) {
+        return null;
+    }
+
+    const tokens = parseContent(style.content);
+
+    const len = tokens.length;
+    const contentItems: Array<PseudoContentItem> = [];
+    let s = '';
+
+    // increment the counter (if there is a "counter-increment" declaration)
+    const counterIncrement = style.counterIncrement;
+    if (counterIncrement && counterIncrement !== 'none') {
+        const [counterName, incrementValue] = counterIncrement.split(/\s+/);
+        const counter = data.counters[counterName];
+        if (counter) {
+            counter[counter.length - 1] +=
+                incrementValue === undefined ? 1 : parseInt(incrementValue, 10);
+        }
+    }
+
+    // build the content string
+    for (let i = 0; i < len; i++) {
+        const token = tokens[i];
+        switch (token.type) {
+            case TOKEN_TYPE.STRING:
+                s += token.value || '';
+                break;
+
+            case TOKEN_TYPE.ATTRIBUTE:
+                if (node instanceof HTMLElement && token.value) {
+                    s += node.getAttribute(token.value) || '';
+                }
+                break;
+
+            case TOKEN_TYPE.COUNTER:
+                const counter = data.counters[token.name || ''];
+                if (counter) {
+                    s += formatCounterValue([counter[counter.length - 1]], '', token.format);
+                }
+                break;
+
+            case TOKEN_TYPE.COUNTERS:
+                const counters = data.counters[token.name || ''];
+                if (counters) {
+                    s += formatCounterValue(counters, token.glue, token.format);
+                }
+                break;
+
+            case TOKEN_TYPE.OPENQUOTE:
+                s += getQuote(style, true, data.quoteDepth);
+                data.quoteDepth++;
+                break;
+
+            case TOKEN_TYPE.CLOSEQUOTE:
+                data.quoteDepth--;
+                s += getQuote(style, false, data.quoteDepth);
+                break;
+
+            case TOKEN_TYPE.URL:
+                if (s) {
+                    contentItems.push({type: PSEUDO_CONTENT_ITEM_TYPE.TEXT, value: s});
+                    s = '';
+                }
+                contentItems.push({type: PSEUDO_CONTENT_ITEM_TYPE.IMAGE, value: token.value || ''});
+                break;
+        }
+    }
+
+    if (s) {
+        contentItems.push({type: PSEUDO_CONTENT_ITEM_TYPE.TEXT, value: s});
+    }
+
+    return contentItems;
+};
+
+export const parseContent = (content: string, cache?: {[string]: Array<Token>}): Array<Token> => {
+    if (cache && cache[content]) {
+        return cache[content];
+    }
+
+    const tokens: Array<Token> = [];
+    const len = content.length;
+
+    let isString = false;
+    let isEscaped = false;
+    let isFunction = false;
+    let str = '';
+    let functionName = '';
+    let args = [];
+
+    for (let i = 0; i < len; i++) {
+        const c = content.charAt(i);
+
+        switch (c) {
+            case "'":
+            case '"':
+                if (isEscaped) {
+                    str += c;
+                } else {
+                    isString = !isString;
+                    if (!isFunction && !isString) {
+                        tokens.push({type: TOKEN_TYPE.STRING, value: str});
+                        str = '';
+                    }
+                }
+                break;
+
+            case '\\':
+                if (isEscaped) {
+                    str += c;
+                    isEscaped = false;
+                } else {
+                    isEscaped = true;
+                }
+                break;
+
+            case '(':
+                if (isString) {
+                    str += c;
+                } else {
+                    isFunction = true;
+                    functionName = str;
+                    str = '';
+                    args = [];
+                }
+                break;
+
+            case ')':
+                if (isString) {
+                    str += c;
+                } else if (isFunction) {
+                    if (str) {
+                        args.push(str);
+                    }
+
+                    switch (functionName) {
+                        case 'attr':
+                            if (args.length > 0) {
+                                tokens.push({type: TOKEN_TYPE.ATTRIBUTE, value: args[0]});
+                            }
+                            break;
+
+                        case 'counter':
+                            if (args.length > 0) {
+                                const counter: Token = {
+                                    type: TOKEN_TYPE.COUNTER,
+                                    name: args[0]
+                                };
+                                if (args.length > 1) {
+                                    counter.format = args[1];
+                                }
+                                tokens.push(counter);
+                            }
+                            break;
+
+                        case 'counters':
+                            if (args.length > 0) {
+                                const counters: Token = {
+                                    type: TOKEN_TYPE.COUNTERS,
+                                    name: args[0]
+                                };
+                                if (args.length > 1) {
+                                    counters.glue = args[1];
+                                }
+                                if (args.length > 2) {
+                                    counters.format = args[2];
+                                }
+                                tokens.push(counters);
+                            }
+                            break;
+
+                        case 'url':
+                            if (args.length > 0) {
+                                tokens.push({type: TOKEN_TYPE.URL, value: args[0]});
+                            }
+                            break;
+                    }
+
+                    isFunction = false;
+                    str = '';
+                }
+                break;
+
+            case ',':
+                if (isString) {
+                    str += c;
+                } else if (isFunction) {
+                    args.push(str);
+                    str = '';
+                }
+                break;
+
+            case ' ':
+            case '\t':
+                if (isString) {
+                    str += c;
+                } else if (str) {
+                    addOtherToken(tokens, str);
+                    str = '';
+                }
+                break;
+
+            default:
+                str += c;
+        }
+
+        if (c !== '\\') {
+            isEscaped = false;
+        }
+    }
+
+    if (str) {
+        addOtherToken(tokens, str);
+    }
+
+    if (cache) {
+        cache[content] = tokens;
+    }
+
+    return tokens;
+};
+
+const addOtherToken = (tokens: Array<Token>, identifier: string): void => {
+    switch (identifier) {
+        case 'open-quote':
+            tokens.push({type: TOKEN_TYPE.OPENQUOTE});
+            break;
+        case 'close-quote':
+            tokens.push({type: TOKEN_TYPE.CLOSEQUOTE});
+            break;
+    }
+};
+
+const getQuote = (style: CSSStyleDeclaration, isOpening: boolean, quoteDepth: number): string => {
+    const quotes = style.quotes ? style.quotes.split(/\s+/) : ["'\"'", "'\"'"];
+    let idx = quoteDepth * 2;
+    if (idx >= quotes.length) {
+        idx = quotes.length - 2;
+    }
+    if (!isOpening) {
+        ++idx;
+    }
+    return quotes[idx].replace(/^["']|["']$/g, '');
+};
+
+const formatCounterValue = (counter, glue: ?string, format: ?string): string => {
+    const len = counter.length;
+    let result = '';
+
+    for (let i = 0; i < len; i++) {
+        if (i > 0) {
+            result += glue || '';
+        }
+        result += createCounterText(counter[i], parseListStyleType(format || 'decimal'), false);
+    }
+
+    return result;
+};
--- a/src/Renderer.js
+++ b/src/Renderer.js
@ -14,7 +14,7 @@ import type {TextShadow} from './parsing/textShadow';
 import type {Matrix} from './parsing/transform';

 import type {BoundCurves} from './Bounds';
-import type {Gradient} from './Gradient';
+import type {LinearGradient, RadialGradient} from './Gradient';
 import type {ResourceStore, ImageElement} from './ResourceLoader';
 import type NodeContainer from './NodeContainer';
 import type StackingContext from './StackingContext';
@ -22,7 +22,7 @@ import type {TextBounds} from './TextBounds';

 import {Bounds, parsePathForBorder, calculateContentBox, calculatePaddingBoxPath} from './Bounds';
 import {FontMetrics} from './Font';
-import {parseGradient} from './Gradient';
+import {parseGradient, GRADIENT_TYPE} from './Gradient';
 import TextContainer from './TextContainer';

 import {
@ -30,7 +30,8 @@ import {
    calculateBackgroungPaintingArea,
    calculateBackgroundPosition,
    calculateBackgroundRepeatPath,
-    calculateBackgroundSize
+    calculateBackgroundSize,
+    calculateGradientBackgroundSize
 } from './parsing/background';
 import {BORDER_STYLE} from './parsing/border';

@ -61,7 +62,9 @@ export interface RenderTarget<Output> {

    render(options: RenderOptions): void,

-    renderLinearGradient(bounds: Bounds, gradient: Gradient): void,
+    renderLinearGradient(bounds: Bounds, gradient: LinearGradient): void,
+
+    renderRadialGradient(bounds: Bounds, gradient: RadialGradient): void,

    renderRepeat(
        path: Path,
@ -162,7 +165,7 @@ export default class Renderer {
            !container.style.background.backgroundColor.isTransparent() ||
            container.style.background.backgroundImage.length;

-        const renderableBorders = container.style.border.filter(
+        const hasRenderableBorders = container.style.border.some(
            border =>
                border.borderStyle !== BORDER_STYLE.NONE && !border.borderColor.isTransparent()
        );
@ -183,12 +186,17 @@ export default class Renderer {
                });
            }

-            renderableBorders.forEach((border, side) => {
-                this.renderBorder(border, side, container.curvedBounds);
+            container.style.border.forEach((border, side) => {
+                if (
+                    border.borderStyle !== BORDER_STYLE.NONE &&
+                    !border.borderColor.isTransparent()
+                ) {
+                    this.renderBorder(border, side, container.curvedBounds);
+                }
            });
        };

-        if (HAS_BACKGROUND || renderableBorders.length) {
+        if (HAS_BACKGROUND || hasRenderableBorders) {
            const paths = container.parent ? container.parent.getClipPaths() : [];
            if (paths.length) {
                this.target.clip(paths, callback);
@ -202,12 +210,8 @@ export default class Renderer {
        container.style.background.backgroundImage.slice(0).reverse().forEach(backgroundImage => {
            if (backgroundImage.source.method === 'url' && backgroundImage.source.args.length) {
                this.renderBackgroundRepeat(container, backgroundImage);
-            } else {
-                const gradient = parseGradient(backgroundImage.source, container.bounds);
-                if (gradient) {
-                    const bounds = container.bounds;
-                    this.target.renderLinearGradient(bounds, gradient);
-                }
+            } else if (/gradient/i.test(backgroundImage.source.method)) {
+                this.renderBackgroundGradient(container, backgroundImage);
            }
        });
    }
@ -245,6 +249,44 @@ export default class Renderer {
        }
    }

+    renderBackgroundGradient(container: NodeContainer, background: BackgroundImage) {
+        const backgroundPositioningArea = calculateBackgroungPositioningArea(
+            container.style.background.backgroundOrigin,
+            container.bounds,
+            container.style.padding,
+            container.style.border
+        );
+        const backgroundImageSize = calculateGradientBackgroundSize(
+            background,
+            backgroundPositioningArea
+        );
+        const position = calculateBackgroundPosition(
+            background.position,
+            backgroundImageSize,
+            backgroundPositioningArea
+        );
+        const gradientBounds = new Bounds(
+            Math.round(backgroundPositioningArea.left + position.x),
+            Math.round(backgroundPositioningArea.top + position.y),
+            backgroundImageSize.width,
+            backgroundImageSize.height
+        );
+
+        const gradient = parseGradient(container, background.source, gradientBounds);
+        if (gradient) {
+            switch (gradient.type) {
+                case GRADIENT_TYPE.LINEAR_GRADIENT:
+                    // $FlowFixMe
+                    this.target.renderLinearGradient(gradientBounds, gradient);
+                    break;
+                case GRADIENT_TYPE.RADIAL_GRADIENT:
+                    // $FlowFixMe
+                    this.target.renderRadialGradient(gradientBounds, gradient);
+                    break;
+            }
+        }
+    }
+
    renderBorder(border: Border, side: BorderSide, curvePoints: BoundCurves) {
        this.target.drawShape(parsePathForBorder(curvePoints, side), border.borderColor);
    }
@ -316,8 +358,8 @@ export default class Renderer {
    render(stack: StackingContext): Promise<*> {
        if (this.options.backgroundColor) {
            this.target.rectangle(
-                0,
-                0,
+                this.options.x,
+                this.options.y,
                this.options.width,
                this.options.height,
                this.options.backgroundColor
--- a/src/ResourceLoader.js
+++ b/src/ResourceLoader.js
@ -33,17 +33,13 @@ export default class ResourceLoader {
        if (this.hasResourceInCache(src)) {
            return src;
        }
+        if (isBlobImage(src)) {
+            this.cache[src] = loadImage(src, this.options.imageTimeout || 0);
+            return src;
+        }

-        if (isSVG(src)) {
-            if (this.options.allowTaint === true || FEATURES.SUPPORT_SVG_DRAWING) {
-                return this.addImage(src, src, false);
-            }
-        } else {
-            if (
-                this.options.allowTaint === true ||
-                isInlineBase64Image(src) ||
-                this.isSameOrigin(src)
-            ) {
+        if (!isSVG(src) || FEATURES.SUPPORT_SVG_DRAWING) {
+            if (this.options.allowTaint === true || isInlineImage(src) || this.isSameOrigin(src)) {
                return this.addImage(src, src, false);
            } else if (!this.isSameOrigin(src)) {
                if (typeof this.options.proxy === 'string') {
@ -223,6 +219,7 @@ const INLINE_IMG = /^data:image\/.*/i;

 const isInlineImage = (src: string): boolean => INLINE_IMG.test(src);
 const isInlineBase64Image = (src: string): boolean => INLINE_BASE64.test(src);
+const isBlobImage = (src: string): boolean => src.substr(0, 4) === 'blob';

 const isSVG = (src: string): boolean =>
    src.substr(-3).toLowerCase() === 'svg' || INLINE_SVG.test(src);
--- a/src/TextBounds.js
+++ b/src/TextBounds.js
@ -1,18 +1,12 @@
 /* @flow */
 'use strict';

-import {ucs2} from 'punycode';
 import type NodeContainer from './NodeContainer';
 import {Bounds, parseBounds} from './Bounds';
 import {TEXT_DECORATION} from './parsing/textDecoration';

 import FEATURES from './Feature';
-
-const UNICODE = /[^\u0000-\u00ff]/;
-
-const hasUnicodeCharacters = (text: string): boolean => UNICODE.test(text);
-
-const encodeCodePoint = (codePoint: number): string => ucs2.encode([codePoint]);
+import {breakWords, toCodePoints, fromCodePoint} from './Unicode';

 export class TextBounds {
    text: string;
@ -29,9 +23,10 @@ export const parseTextBounds = (
    parent: NodeContainer,
    node: Text
 ): Array<TextBounds> => {
-    const codePoints = ucs2.decode(value);
-    const letterRendering = parent.style.letterSpacing !== 0 || hasUnicodeCharacters(value);
-    const textList = letterRendering ? codePoints.map(encodeCodePoint) : splitWords(codePoints);
+    const letterRendering = parent.style.letterSpacing !== 0;
+    const textList = letterRendering
+        ? toCodePoints(value).map(i => fromCodePoint(i))
+        : breakWords(value, parent);
    const length = textList.length;
    const defaultView = node.parentNode ? node.parentNode.ownerDocument.defaultView : null;
    const scrollX = defaultView ? defaultView.pageXOffset : 0;
@ -88,42 +83,3 @@ const getRangeBounds = (
    range.setEnd(node, offset + length);
    return Bounds.fromClientRect(range.getBoundingClientRect(), scrollX, scrollY);
 };
-
-const splitWords = (codePoints: Array<number>): Array<string> => {
-    const words = [];
-    let i = 0;
-    let onWordBoundary = false;
-    let word;
-    while (codePoints.length) {
-        if (isWordBoundary(codePoints[i]) === onWordBoundary) {
-            word = codePoints.splice(0, i);
-            if (word.length) {
-                words.push(ucs2.encode(word));
-            }
-            onWordBoundary = !onWordBoundary;
-            i = 0;
-        } else {
-            i++;
-        }
-
-        if (i >= codePoints.length) {
-            word = codePoints.splice(0, i);
-            if (word.length) {
-                words.push(ucs2.encode(word));
-            }
-        }
-    }
-    return words;
-};
-
-const isWordBoundary = (characterCode: number): boolean => {
-    return (
-        [
-            32, // <space>
-            13, // \r
-            10, // \n
-            9, // \t
-            45 // -
-        ].indexOf(characterCode) !== -1
-    );
-};
--- a/src/Unicode.js
+++ b/src/Unicode.js
@ -0,0 +1,27 @@
+/* @flow */
+'use strict';
+
+import type NodeContainer from './NodeContainer';
+import {LineBreaker, fromCodePoint, toCodePoints} from 'css-line-break';
+import {OVERFLOW_WRAP} from './parsing/overflowWrap';
+
+export {toCodePoints, fromCodePoint} from 'css-line-break';
+
+export const breakWords = (str: string, parent: NodeContainer): Array<string> => {
+    const breaker = LineBreaker(str, {
+        lineBreak: parent.style.lineBreak,
+        wordBreak:
+            parent.style.overflowWrap === OVERFLOW_WRAP.BREAK_WORD
+                ? 'break-word'
+                : parent.style.wordBreak
+    });
+
+    const words = [];
+    let bk;
+
+    while (!(bk = breaker.next()).done) {
+        words.push(bk.value.slice());
+    }
+
+    return words;
+};
--- a/src/Util.js
+++ b/src/Util.js
@ -3,6 +3,8 @@

 export const contains = (bit: number, value: number): boolean => (bit & value) !== 0;

+export const distance = (a: number, b: number): number => Math.sqrt(a * a + b * b);
+
 export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement): HTMLElement => {
    // Edge does not provide value for cssText
    for (let i = style.length - 1; i >= 0; i--) {
--- a/src/Window.js
+++ b/src/Window.js
@ -14,6 +14,7 @@ import {Bounds} from './Bounds';
 import {cloneWindow, DocumentCloner} from './Clone';
 import {FontMetrics} from './Font';
 import Color, {TRANSPARENT} from './Color';
+import {parseBounds, parseDocumentSize} from './Bounds';

 export const renderElement = (
    element: HTMLElement,
@ -62,14 +63,32 @@ export const renderElement = (
                          .then(() => cloner.resourceLoader.ready())
                          .then(() => {
                              const renderer = new ForeignObjectRenderer(cloner.documentElement);
+
+                              const defaultView = ownerDocument.defaultView;
+                              const scrollX = defaultView.pageXOffset;
+                              const scrollY = defaultView.pageYOffset;
+
+                              const isDocument =
+                                  element.tagName === 'HTML' || element.tagName === 'BODY';
+
+                              const {width, height, left, top} = isDocument
+                                  ? parseDocumentSize(ownerDocument)
+                                  : parseBounds(element, scrollX, scrollY);
+
                              return renderer.render({
                                  backgroundColor,
                                  logger,
                                  scale: options.scale,
-                                  x: options.x,
-                                  y: options.y,
-                                  width: options.width,
-                                  height: options.height,
+                                  x: typeof options.x === 'number' ? options.x : left,
+                                  y: typeof options.y === 'number' ? options.y : top,
+                                  width:
+                                      typeof options.width === 'number'
+                                          ? options.width
+                                          : Math.ceil(width),
+                                  height:
+                                      typeof options.height === 'number'
+                                          ? options.height
+                                          : Math.ceil(height),
                                  windowWidth: options.windowWidth,
                                  windowHeight: options.windowHeight,
                                  scrollX: options.scrollX,
@ -97,31 +116,38 @@ export const renderElement = (
                      }

                      return resourceLoader.ready().then(imageStore => {
-                          if (options.removeContainer === true) {
-                              if (container.parentNode) {
-                                  container.parentNode.removeChild(container);
-                              } else if (__DEV__) {
-                                  logger.log(
-                                      `Cannot detach cloned iframe as it is not in the DOM anymore`
-                                  );
-                              }
-                          }
-
                          const fontMetrics = new FontMetrics(clonedDocument);
                          if (__DEV__) {
                              logger.log(`Starting renderer`);
                          }

+                          const defaultView = clonedDocument.defaultView;
+                          const scrollX = defaultView.pageXOffset;
+                          const scrollY = defaultView.pageYOffset;
+
+                          const isDocument =
+                              clonedElement.tagName === 'HTML' || clonedElement.tagName === 'BODY';
+
+                          const {width, height, left, top} = isDocument
+                              ? parseDocumentSize(ownerDocument)
+                              : parseBounds(clonedElement, scrollX, scrollY);
+
                          const renderOptions = {
                              backgroundColor,
                              fontMetrics,
                              imageStore,
                              logger,
                              scale: options.scale,
-                              x: options.x,
-                              y: options.y,
-                              width: options.width,
-                              height: options.height
+                              x: typeof options.x === 'number' ? options.x : left,
+                              y: typeof options.y === 'number' ? options.y : top,
+                              width:
+                                  typeof options.width === 'number'
+                                      ? options.width
+                                      : Math.ceil(width),
+                              height:
+                                  typeof options.height === 'number'
+                                      ? options.height
+                                      : Math.ceil(height)
                          };

                          if (Array.isArray(options.target)) {
@ -133,7 +159,18 @@ export const renderElement = (
                              );
                          } else {
                              const renderer = new Renderer(options.target, renderOptions);
-                              return renderer.render(stack);
+                              const canvas = renderer.render(stack);
+                              if (options.removeContainer === true) {
+                                  if (container.parentNode) {
+                                      container.parentNode.removeChild(container);
+                                  } else if (__DEV__) {
+                                      logger.log(
+                                          `Cannot detach cloned iframe as it is not in the DOM anymore`
+                                      );
+                                  }
+                              }
+
+                              return canvas;
                          }
                      });
                  })
--- a/src/index.js
+++ b/src/index.js
@ -6,7 +6,6 @@ import type {RenderTarget} from './Renderer';
 import CanvasRenderer from './renderer/CanvasRenderer';
 import Logger from './Logger';
 import {renderElement} from './Window';
-import {parseBounds, parseDocumentSize} from './Bounds';

 export type Options = {
    async: ?boolean,
@ -14,11 +13,15 @@ export type Options = {
    backgroundColor: string,
    canvas: ?HTMLCanvasElement,
    foreignObjectRendering: boolean,
+    ignoreElements?: HTMLElement => boolean,
    imageTimeout: number,
+    logging: boolean,
+    onclone?: Document => void,
    proxy: ?string,
    removeContainer: ?boolean,
    scale: number,
    target: RenderTarget<*>,
+    useCORS: boolean,
    width: number,
    height: number,
    x: number,
@ -30,14 +33,9 @@ export type Options = {
 };

 const html2canvas = (element: HTMLElement, conf: ?Options): Promise<*> => {
-    // eslint-disable-next-line no-console
-    if (typeof console === 'object' && typeof console.log === 'function') {
-        // eslint-disable-next-line no-console
-        console.log(`html2canvas ${__VERSION__}`);
-    }
-
    const config = conf || {};
-    const logger = new Logger();
+    const logger = new Logger(typeof config.logging === 'boolean' ? config.logging : true);
+    logger.log(`html2canvas ${__VERSION__}`);

    if (__DEV__ && typeof config.onrendered === 'function') {
        logger.error(
@ -51,28 +49,18 @@ const html2canvas = (element: HTMLElement, conf: ?Options): Promise<*> => {
    }
    const defaultView = ownerDocument.defaultView;

-    const scrollX = defaultView.pageXOffset;
-    const scrollY = defaultView.pageYOffset;
-
-    const isDocument = element.tagName === 'HTML' || element.tagName === 'BODY';
-
-    const {width, height, left, top} = isDocument
-        ? parseDocumentSize(ownerDocument)
-        : parseBounds(element, scrollX, scrollY);
-
    const defaultOptions = {
        async: true,
        allowTaint: false,
+        backgroundColor: '#ffffff',
        imageTimeout: 15000,
+        logging: true,
        proxy: null,
        removeContainer: true,
        foreignObjectRendering: false,
        scale: defaultView.devicePixelRatio || 1,
        target: new CanvasRenderer(config.canvas),
-        x: left,
-        y: top,
-        width: Math.ceil(width),
-        height: Math.ceil(height),
+        useCORS: false,
        windowWidth: defaultView.innerWidth,
        windowHeight: defaultView.innerHeight,
        scrollX: defaultView.pageXOffset,
@ -91,5 +79,4 @@ const html2canvas = (element: HTMLElement, conf: ?Options): Promise<*> => {
 };

 html2canvas.CanvasRenderer = CanvasRenderer;
-
-module.exports = html2canvas;
+export default html2canvas;
--- a/src/parsing/background.js
+++ b/src/parsing/background.js
@ -123,6 +123,19 @@ export const calculateBackgroundSize = (
    return new Size(width, height);
 };

+export const calculateGradientBackgroundSize = (
+    backgroundImage: BackgroundImage,
+    bounds: Bounds
+): Size => {
+    const size = backgroundImage.size;
+    const width = size[0].value ? size[0].value.getAbsoluteValue(bounds.width) : bounds.width;
+    const height = size[1].value
+        ? size[1].value.getAbsoluteValue(bounds.height)
+        : size[0].value ? width : bounds.height;
+
+    return new Size(width, height);
+};
+
 const AUTO_SIZE = new BackgroundSize(AUTO);

 export const calculateBackgroungPaintingArea = (
--- a/src/parsing/lineBreak.js
+++ b/src/parsing/lineBreak.js
@ -0,0 +1,19 @@
+/* @flow */
+'use strict';
+
+export const LINE_BREAK = {
+    NORMAL: 'normal',
+    STRICT: 'strict'
+};
+
+export type LineBreak = $Values<typeof LINE_BREAK>;
+
+export const parseLineBreak = (wordBreak: string): LineBreak => {
+    switch (wordBreak) {
+        case 'strict':
+            return LINE_BREAK.STRICT;
+        case 'normal':
+        default:
+            return LINE_BREAK.NORMAL;
+    }
+};
--- a/src/parsing/listStyle.js
+++ b/src/parsing/listStyle.js
@ -0,0 +1,209 @@
+/* @flow */
+'use strict';
+
+import type {BackgroundSource} from './background';
+import {parseBackgroundImage} from './background';
+
+export type ListStyle = {
+    listStyleType: ListStyleType,
+    listStyleImage: ?BackgroundSource,
+    listStylePosition: ListStylePosition
+};
+
+export const LIST_STYLE_POSITION = {
+    INSIDE: 0,
+    OUTSIDE: 1
+};
+
+export const LIST_STYLE_TYPE = {
+    NONE: -1,
+    DISC: 0,
+    CIRCLE: 1,
+    SQUARE: 2,
+    DECIMAL: 3,
+    CJK_DECIMAL: 4,
+    DECIMAL_LEADING_ZERO: 5,
+    LOWER_ROMAN: 6,
+    UPPER_ROMAN: 7,
+    LOWER_GREEK: 8,
+    LOWER_ALPHA: 9,
+    UPPER_ALPHA: 10,
+    ARABIC_INDIC: 11,
+    ARMENIAN: 12,
+    BENGALI: 13,
+    CAMBODIAN: 14,
+    CJK_EARTHLY_BRANCH: 15,
+    CJK_HEAVENLY_STEM: 16,
+    CJK_IDEOGRAPHIC: 17,
+    DEVANAGARI: 18,
+    ETHIOPIC_NUMERIC: 19,
+    GEORGIAN: 20,
+    GUJARATI: 21,
+    GURMUKHI: 22,
+    HEBREW: 22,
+    HIRAGANA: 23,
+    HIRAGANA_IROHA: 24,
+    JAPANESE_FORMAL: 25,
+    JAPANESE_INFORMAL: 26,
+    KANNADA: 27,
+    KATAKANA: 28,
+    KATAKANA_IROHA: 29,
+    KHMER: 30,
+    KOREAN_HANGUL_FORMAL: 31,
+    KOREAN_HANJA_FORMAL: 32,
+    KOREAN_HANJA_INFORMAL: 33,
+    LAO: 34,
+    LOWER_ARMENIAN: 35,
+    MALAYALAM: 36,
+    MONGOLIAN: 37,
+    MYANMAR: 38,
+    ORIYA: 39,
+    PERSIAN: 40,
+    SIMP_CHINESE_FORMAL: 41,
+    SIMP_CHINESE_INFORMAL: 42,
+    TAMIL: 43,
+    TELUGU: 44,
+    THAI: 45,
+    TIBETAN: 46,
+    TRAD_CHINESE_FORMAL: 47,
+    TRAD_CHINESE_INFORMAL: 48,
+    UPPER_ARMENIAN: 49,
+    DISCLOSURE_OPEN: 50,
+    DISCLOSURE_CLOSED: 51
+};
+
+export type ListStylePosition = $Values<typeof LIST_STYLE_POSITION>;
+export type ListStyleType = $Values<typeof LIST_STYLE_TYPE>;
+
+export const parseListStyleType = (type: string): ListStyleType => {
+    switch (type) {
+        case 'disc':
+            return LIST_STYLE_TYPE.DISC;
+        case 'circle':
+            return LIST_STYLE_TYPE.CIRCLE;
+        case 'square':
+            return LIST_STYLE_TYPE.SQUARE;
+        case 'decimal':
+            return LIST_STYLE_TYPE.DECIMAL;
+        case 'cjk-decimal':
+            return LIST_STYLE_TYPE.CJK_DECIMAL;
+        case 'decimal-leading-zero':
+            return LIST_STYLE_TYPE.DECIMAL_LEADING_ZERO;
+        case 'lower-roman':
+            return LIST_STYLE_TYPE.LOWER_ROMAN;
+        case 'upper-roman':
+            return LIST_STYLE_TYPE.UPPER_ROMAN;
+        case 'lower-greek':
+            return LIST_STYLE_TYPE.LOWER_GREEK;
+        case 'lower-alpha':
+            return LIST_STYLE_TYPE.LOWER_ALPHA;
+        case 'upper-alpha':
+            return LIST_STYLE_TYPE.UPPER_ALPHA;
+        case 'arabic-indic':
+            return LIST_STYLE_TYPE.ARABIC_INDIC;
+        case 'armenian':
+            return LIST_STYLE_TYPE.ARMENIAN;
+        case 'bengali':
+            return LIST_STYLE_TYPE.BENGALI;
+        case 'cambodian':
+            return LIST_STYLE_TYPE.CAMBODIAN;
+        case 'cjk-earthly-branch':
+            return LIST_STYLE_TYPE.CJK_EARTHLY_BRANCH;
+        case 'cjk-heavenly-stem':
+            return LIST_STYLE_TYPE.CJK_HEAVENLY_STEM;
+        case 'cjk-ideographic':
+            return LIST_STYLE_TYPE.CJK_IDEOGRAPHIC;
+        case 'devanagari':
+            return LIST_STYLE_TYPE.DEVANAGARI;
+        case 'ethiopic-numeric':
+            return LIST_STYLE_TYPE.ETHIOPIC_NUMERIC;
+        case 'georgian':
+            return LIST_STYLE_TYPE.GEORGIAN;
+        case 'gujarati':
+            return LIST_STYLE_TYPE.GUJARATI;
+        case 'gurmukhi':
+            return LIST_STYLE_TYPE.GURMUKHI;
+        case 'hebrew':
+            return LIST_STYLE_TYPE.HEBREW;
+        case 'hiragana':
+            return LIST_STYLE_TYPE.HIRAGANA;
+        case 'hiragana-iroha':
+            return LIST_STYLE_TYPE.HIRAGANA_IROHA;
+        case 'japanese-formal':
+            return LIST_STYLE_TYPE.JAPANESE_FORMAL;
+        case 'japanese-informal':
+            return LIST_STYLE_TYPE.JAPANESE_INFORMAL;
+        case 'kannada':
+            return LIST_STYLE_TYPE.KANNADA;
+        case 'katakana':
+            return LIST_STYLE_TYPE.KATAKANA;
+        case 'katakana-iroha':
+            return LIST_STYLE_TYPE.KATAKANA_IROHA;
+        case 'khmer':
+            return LIST_STYLE_TYPE.KHMER;
+        case 'korean-hangul-formal':
+            return LIST_STYLE_TYPE.KOREAN_HANGUL_FORMAL;
+        case 'korean-hanja-formal':
+            return LIST_STYLE_TYPE.KOREAN_HANJA_FORMAL;
+        case 'korean-hanja-informal':
+            return LIST_STYLE_TYPE.KOREAN_HANJA_INFORMAL;
+        case 'lao':
+            return LIST_STYLE_TYPE.LAO;
+        case 'lower-armenian':
+            return LIST_STYLE_TYPE.LOWER_ARMENIAN;
+        case 'malayalam':
+            return LIST_STYLE_TYPE.MALAYALAM;
+        case 'mongolian':
+            return LIST_STYLE_TYPE.MONGOLIAN;
+        case 'myanmar':
+            return LIST_STYLE_TYPE.MYANMAR;
+        case 'oriya':
+            return LIST_STYLE_TYPE.ORIYA;
+        case 'persian':
+            return LIST_STYLE_TYPE.PERSIAN;
+        case 'simp-chinese-formal':
+            return LIST_STYLE_TYPE.SIMP_CHINESE_FORMAL;
+        case 'simp-chinese-informal':
+            return LIST_STYLE_TYPE.SIMP_CHINESE_INFORMAL;
+        case 'tamil':
+            return LIST_STYLE_TYPE.TAMIL;
+        case 'telugu':
+            return LIST_STYLE_TYPE.TELUGU;
+        case 'thai':
+            return LIST_STYLE_TYPE.THAI;
+        case 'tibetan':
+            return LIST_STYLE_TYPE.TIBETAN;
+        case 'trad-chinese-formal':
+            return LIST_STYLE_TYPE.TRAD_CHINESE_FORMAL;
+        case 'trad-chinese-informal':
+            return LIST_STYLE_TYPE.TRAD_CHINESE_INFORMAL;
+        case 'upper-armenian':
+            return LIST_STYLE_TYPE.UPPER_ARMENIAN;
+        case 'disclosure-open':
+            return LIST_STYLE_TYPE.DISCLOSURE_OPEN;
+        case 'disclosure-closed':
+            return LIST_STYLE_TYPE.DISCLOSURE_CLOSED;
+        case 'none':
+        default:
+            return LIST_STYLE_TYPE.NONE;
+    }
+};
+
+export const parseListStyle = (style: CSSStyleDeclaration): ListStyle => {
+    const listStyleImage = parseBackgroundImage(style.getPropertyValue('list-style-image'));
+    return {
+        listStyleType: parseListStyleType(style.getPropertyValue('list-style-type')),
+        listStyleImage: listStyleImage.length ? listStyleImage[0] : null,
+        listStylePosition: parseListStylePosition(style.getPropertyValue('list-style-position'))
+    };
+};
+
+const parseListStylePosition = (position: string): ListStylePosition => {
+    switch (position) {
+        case 'inside':
+            return LIST_STYLE_POSITION.INSIDE;
+        case 'outside':
+        default:
+            return LIST_STYLE_POSITION.OUTSIDE;
+    }
+};
--- a/src/parsing/margin.js
+++ b/src/parsing/margin.js
@ -0,0 +1,11 @@
+/* @flow */
+'use strict';
+import Length from '../Length';
+
+const SIDES = ['top', 'right', 'bottom', 'left'];
+
+export type Margin = Array<Length>;
+
+export const parseMargin = (style: CSSStyleDeclaration): Margin => {
+    return SIDES.map(side => new Length(style.getPropertyValue(`margin-${side}`)));
+};
--- a/src/parsing/overflowWrap.js
+++ b/src/parsing/overflowWrap.js
@ -0,0 +1,19 @@
+/* @flow */
+'use strict';
+
+export const OVERFLOW_WRAP = {
+    NORMAL: 0,
+    BREAK_WORD: 1
+};
+
+export type OverflowWrap = $Values<typeof OVERFLOW_WRAP>;
+
+export const parseOverflowWrap = (overflow: string): OverflowWrap => {
+    switch (overflow) {
+        case 'break-word':
+            return OVERFLOW_WRAP.BREAK_WORD;
+        case 'normal':
+        default:
+            return OVERFLOW_WRAP.NORMAL;
+    }
+};
--- a/src/parsing/word-break.js
+++ b/src/parsing/word-break.js
@ -0,0 +1,22 @@
+/* @flow */
+'use strict';
+
+export const WORD_BREAK = {
+    NORMAL: 'normal',
+    BREAK_ALL: 'break-all',
+    KEEP_ALL: 'keep-all'
+};
+
+export type WordBreak = $Values<typeof WORD_BREAK>;
+
+export const parseWordBreak = (wordBreak: string): WordBreak => {
+    switch (wordBreak) {
+        case 'break-all':
+            return WORD_BREAK.BREAK_ALL;
+        case 'keep-all':
+            return WORD_BREAK.KEEP_ALL;
+        case 'normal':
+        default:
+            return WORD_BREAK.NORMAL;
+    }
+};
--- a/src/renderer/CanvasRenderer.js
+++ b/src/renderer/CanvasRenderer.js
@ -13,12 +13,26 @@ import type {Matrix} from '../parsing/transform';

 import type {Bounds} from '../Bounds';
 import type {ImageElement} from '../ResourceLoader';
-import type {Gradient} from '../Gradient';
+import type {LinearGradient, RadialGradient} from '../Gradient';
 import type {TextBounds} from '../TextBounds';

 import {PATH} from '../drawing/Path';
 import {TEXT_DECORATION_LINE} from '../parsing/textDecoration';

+const addColorStops = (
+    gradient: LinearGradient | RadialGradient,
+    canvasGradient: CanvasGradient
+): void => {
+    const maxStop = Math.max.apply(null, gradient.colorStops.map(colorStop => colorStop.stop));
+    const f = 1 / Math.max(1, maxStop);
+    gradient.colorStops.forEach(colorStop => {
+        canvasGradient.addColorStop(
+            Math.floor(Math.max(0, f * colorStop.stop)),
+            colorStop.color.toString()
+        );
+    });
+};
+
 export default class CanvasRenderer implements RenderTarget<HTMLCanvasElement> {
    canvas: HTMLCanvasElement;
    ctx: CanvasRenderingContext2D;
@ -87,6 +101,7 @@ export default class CanvasRenderer implements RenderTarget<HTMLCanvasElement> {
    }

    getTarget(): Promise<HTMLCanvasElement> {
+        this.canvas.getContext('2d').setTransform(1, 0, 0, 1, 0, 0);
        return Promise.resolve(this.canvas);
    }

@ -131,7 +146,7 @@ export default class CanvasRenderer implements RenderTarget<HTMLCanvasElement> {
        this.ctx.fillRect(x, y, width, height);
    }

-    renderLinearGradient(bounds: Bounds, gradient: Gradient) {
+    renderLinearGradient(bounds: Bounds, gradient: LinearGradient) {
        const linearGradient = this.ctx.createLinearGradient(
            bounds.left + gradient.direction.x1,
            bounds.top + gradient.direction.y1,
@ -139,14 +154,43 @@ export default class CanvasRenderer implements RenderTarget<HTMLCanvasElement> {
            bounds.top + gradient.direction.y0
        );

-        gradient.colorStops.forEach(colorStop => {
-            linearGradient.addColorStop(colorStop.stop, colorStop.color.toString());
-        });
-
+        addColorStops(gradient, linearGradient);
        this.ctx.fillStyle = linearGradient;
        this.ctx.fillRect(bounds.left, bounds.top, bounds.width, bounds.height);
    }

+    renderRadialGradient(bounds: Bounds, gradient: RadialGradient) {
+        const x = bounds.left + gradient.center.x;
+        const y = bounds.top + gradient.center.y;
+
+        const radialGradient = this.ctx.createRadialGradient(x, y, 0, x, y, gradient.radius.x);
+        if (!radialGradient) {
+            return;
+        }
+
+        addColorStops(gradient, radialGradient);
+        this.ctx.fillStyle = radialGradient;
+
+        if (gradient.radius.x !== gradient.radius.y) {
+            // transforms for elliptical radial gradient
+            const midX = bounds.left + 0.5 * bounds.width;
+            const midY = bounds.top + 0.5 * bounds.height;
+            const f = gradient.radius.y / gradient.radius.x;
+            const invF = 1 / f;
+
+            this.transform(midX, midY, [1, 0, 0, f, 0, 0], () =>
+                this.ctx.fillRect(
+                    bounds.left,
+                    invF * (bounds.top - midY) + midY,
+                    bounds.width,
+                    bounds.height * invF
+                )
+            );
+        } else {
+            this.ctx.fillRect(bounds.left, bounds.top, bounds.width, bounds.height);
+        }
+    }
+
    renderRepeat(
        path: Path,
        image: ImageElement,
@ -174,9 +218,7 @@ export default class CanvasRenderer implements RenderTarget<HTMLCanvasElement> {
            font.fontWeight,
            font.fontSize,
            font.fontFamily
-        ]
-            .join(' ')
-            .split(',')[0];
+        ].join(' ');

        textBounds.forEach(text => {
            this.ctx.fillStyle = color.toString();
--- a/src/renderer/RefTestRenderer.js
+++ b/src/renderer/RefTestRenderer.js
@ -18,13 +18,13 @@ import type {Matrix} from '../parsing/transform';

 import type {Bounds} from '../Bounds';
 import type {ImageElement} from '../ResourceLoader';
-import type {Gradient} from '../Gradient';
+import type {LinearGradient, RadialGradient} from '../Gradient';
 import type {TextBounds} from '../TextBounds';

 import {TEXT_DECORATION_STYLE, TEXT_DECORATION_LINE} from '../parsing/textDecoration';
 import {PATH} from '../drawing/Path';

-class RefTestRenderer implements RenderTarget<string> {
+export default class RefTestRenderer implements RenderTarget<string> {
    options: RenderOptions;
    indent: number;
    lines: Array<string>;
@ -110,7 +110,7 @@ class RefTestRenderer implements RenderTarget<string> {
        return `Path (${string})`;
    }

-    renderLinearGradient(bounds: Bounds, gradient: Gradient) {
+    renderLinearGradient(bounds: Bounds, gradient: LinearGradient) {
        const direction = [
            `x0: ${Math.round(gradient.direction.x0)}`,
            `x1: ${Math.round(gradient.direction.x1)}`,
@ -129,6 +129,19 @@ class RefTestRenderer implements RenderTarget<string> {
        );
    }

+    renderRadialGradient(bounds: Bounds, gradient: RadialGradient) {
+        const stops = gradient.colorStops.map(
+            stop => `${stop.color.toString()} ${Math.ceil(stop.stop * 100) / 100}`
+        );
+
+        this.writeLine(
+            `RadialGradient: ${this.formatBounds(bounds)} radial-gradient(${gradient.radius
+                .x} ${gradient.radius.y} at ${gradient.center.x} ${gradient.center.y}, ${stops.join(
+                ', '
+            )})`
+        );
+    }
+
    renderRepeat(
        path: Path,
        image: ImageElement,
@ -255,5 +268,3 @@ class RefTestRenderer implements RenderTarget<string> {
        this.lines.push(`${new Array(this.indent + 1).join(' ')}${text}`);
    }
 }
-
-module.exports = RefTestRenderer;
--- a/tests/node/gradient.js
+++ b/tests/node/gradient.js
@ -0,0 +1,151 @@
+const Gradient = require('../../dist/npm/Gradient');
+const assert = require('assert');
+
+describe('Gradient', () => {
+    describe('transformWebkitRadialGradientArgs', () => {
+        it('white, black', () => {
+            assert.equal(Gradient.transformWebkitRadialGradientArgs(['white', 'black'])[0], '');
+        });
+
+        it('circle, white, black', () => {
+            assert.equal(
+                Gradient.transformWebkitRadialGradientArgs(['circle', 'white', 'black'])[0],
+                'circle'
+            );
+        });
+
+        it('10% 30%, white, black', () => {
+            assert.equal(
+                Gradient.transformWebkitRadialGradientArgs(['10% 30%', 'white', 'black'])[0],
+                '10% 30%'
+            );
+        });
+
+        it('30% 30%, closest-corner, white, black', () => {
+            assert.equal(
+                Gradient.transformWebkitRadialGradientArgs([
+                    '30% 30%',
+                    'closest-corner',
+                    'white',
+                    'black'
+                ])[0],
+                'closest-corner at 30% 30%'
+            );
+        });
+
+        it('30% 30%, circle closest-corner, white, black', () => {
+            assert.equal(
+                Gradient.transformWebkitRadialGradientArgs([
+                    '30% 30%',
+                    'circle closest-corner',
+                    'white',
+                    'black'
+                ])[0],
+                'circle closest-corner at 30% 30%'
+            );
+        });
+
+        it('center, 5em 40px, white, black', () => {
+            assert.equal(
+                Gradient.transformWebkitRadialGradientArgs([
+                    'center',
+                    '5em 40px',
+                    'white',
+                    'black'
+                ])[0],
+                '5em 40px at center'
+            );
+        });
+
+        it('45 45, 10, 52 50, 30, from(#A7D30C), to(red)', () => {
+            assert.equal(
+                Gradient.transformWebkitRadialGradientArgs([
+                    '45 45',
+                    '10',
+                    '52 50',
+                    '30',
+                    'from(#A7D30C)'
+                ])[0],
+                '30px at 52px 50px'
+            );
+        });
+
+        it('75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%', () => {
+            assert.equal(
+                Gradient.transformWebkitRadialGradientArgs([
+                    '75% 19%',
+                    'ellipse closest-side',
+                    '#ababab',
+                    '#0000ff 33%',
+                    '#991f1f 100%'
+                ])[0],
+                'ellipse closest-side at 75% 19%'
+            );
+        });
+
+        it('75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%', () => {
+            assert.equal(
+                Gradient.transformWebkitRadialGradientArgs([
+                    '75% 19%',
+                    'circle contain',
+                    '#ababab',
+                    '#0000ff 33%',
+                    '#991f1f 100%'
+                ])[0],
+                'circle closest-side at 75% 19%'
+            );
+        });
+
+        it('75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%', () => {
+            assert.equal(
+                Gradient.transformWebkitRadialGradientArgs([
+                    '75% 19%',
+                    'circle cover',
+                    '#ababab',
+                    '#0000ff 33%',
+                    '#991f1f 100%'
+                ])[0],
+                'circle farthest-corner at 75% 19%'
+            );
+        });
+
+        it('right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%', () => {
+            assert.equal(
+                Gradient.transformWebkitRadialGradientArgs([
+                    'right 19%',
+                    'ellipse cover',
+                    '#ababab',
+                    '#0000ff 33%',
+                    '#991f1f 100%'
+                ])[0],
+                'ellipse farthest-corner at right 19%'
+            );
+        });
+
+        it('left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%', () => {
+            assert.equal(
+                Gradient.transformWebkitRadialGradientArgs([
+                    'left 19%',
+                    'ellipse cover',
+                    '#ababab',
+                    '#0000ff 33%',
+                    '#991f1f 100%'
+                ])[0],
+                'ellipse farthest-corner at left 19%'
+            );
+        });
+
+        it('left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%', () => {
+            assert.equal(
+                Gradient.transformWebkitRadialGradientArgs([
+                    'left top',
+                    'circle cover',
+                    '#ababab',
+                    '#0000ff 33%',
+                    '#991f1f 100%'
+                ])[0],
+                'circle farthest-corner at left top'
+            );
+        });
+    });
+});
--- a/tests/node/pseudonodecontent.js
+++ b/tests/node/pseudonodecontent.js
@ -0,0 +1,111 @@
+const PseudoNodeContent = require('../../dist/npm/PseudoNodeContent');
+const assert = require('assert');
+
+describe('PseudoNodeContent', function() {
+    it('should parse string', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('"hello"'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'hello'}
+        ]);
+    });
+
+    it('should parse string with (,)', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('"a,b (c) d"'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'a,b (c) d'}
+        ]);
+    });
+
+    it('should parse string with escaped quotes', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('"3.14\\""'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: '3.14"'}
+        ]);
+    });
+
+    it('should parse string with escape', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('"a\\) \\\\ b"'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'a) \\ b'}
+        ]);
+    });
+
+    it('should parse two strings', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('"hello" \'world\''), [
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'hello'},
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'world'}
+        ]);
+    });
+
+    it('should parse counter', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('counter(x)'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.COUNTER, name: 'x'}
+        ]);
+    });
+
+    it('should parse counters', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('counters(x, "-")'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.COUNTERS, name: 'x', glue: '-'}
+        ]);
+    });
+
+    it('should parse strings and counters', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('"["counters(c2, " < ") \']\''), [
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: '['},
+            {type: PseudoNodeContent.TOKEN_TYPE.COUNTERS, name: 'c2', glue: ' < '},
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: ']'}
+        ]);
+    });
+
+    it('should parse counter with format', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('counter(x, lower-greek)'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.COUNTER, name: 'x', format: 'lower-greek'}
+        ]);
+    });
+
+    it('should parse counters with format', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('counters(x, "-", upper-roman)'), [
+            {
+                type: PseudoNodeContent.TOKEN_TYPE.COUNTERS,
+                name: 'x',
+                glue: '-',
+                format: 'upper-roman'
+            }
+        ]);
+    });
+
+    it('should parse strings and counters with format', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent("\"[\"counters(c2, ' < ', disc) ']'"), [
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: '['},
+            {type: PseudoNodeContent.TOKEN_TYPE.COUNTERS, name: 'c2', glue: ' < ', format: 'disc'},
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: ']'}
+        ]);
+    });
+
+    it('should parse attr', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('attr(id)'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.ATTRIBUTE, value: 'id'}
+        ]);
+    });
+
+    it('should parse url', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('url(http://www.abc.de/f/g.png)'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.URL, value: 'http://www.abc.de/f/g.png'}
+        ]);
+    });
+
+    it('should parse open-quote', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('open-quote'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.OPENQUOTE}
+        ]);
+    });
+
+    it('should parse close-quote', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('close-quote'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.CLOSEQUOTE}
+        ]);
+    });
+
+    it('should parse open-quote and string', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('open-quote "!"'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.OPENQUOTE},
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: '!'}
+        ]);
+    });
+});
--- a/tests/reftests/acid2.txt
+++ b/tests/reftests/acid2.txt
@ -1,145 +0,0 @@
-Window: [800, 1496]
-Rectangle: [0, 0, 800, 1496] rgb(255,255,255)
-Opacity: 1
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 96, y: 130) > Vector(x: 216, y: 130) > Vector(x: 216, y: 142) > Vector(x: 96, y: 142))
-    Fill: rgb(255,0,0)
-    Repeat: Image ("/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElF") [108, 130] Size (1, 1) Path (Vector(x: 96, y: 130) > Vector(x: 216, y: 130) > Vector(x: 216, y: 142) > Vector(x: 96, y: 142))
-  Shape: rgb(0,0,0) Path (Vector(x: 96, y: 130) > Vector(x: 216, y: 130) > Vector(x: 204, y: 130) > Vector(x: 108, y: 130))
-  Shape: rgb(0,0,0) Path (Vector(x: 216, y: 130) > Vector(x: 216, y: 142) > Vector(x: 204, y: 142) > Vector(x: 204, y: 130))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 96, y: 238) > Vector(x: 216, y: 238) > Vector(x: 216, y: 250) > Vector(x: 96, y: 250))
-    Fill: rgb(255,255,0)
-    Repeat: Image ("/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9") [108, 238] Size (64, 64) Path (Vector(x: 108, y: 238) > Vector(x: 172, y: 238) > Vector(x: 172, y: 302) > Vector(x: 108, y: 302))
-  Shape: rgb(0,0,0) Path (Vector(x: 96, y: 238) > Vector(x: 216, y: 238) > Vector(x: 204, y: 238) > Vector(x: 108, y: 238))
-  Shape: rgb(0,0,0) Path (Vector(x: 216, y: 238) > Vector(x: 216, y: 250) > Vector(x: 204, y: 250) > Vector(x: 204, y: 238))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 108, y: 250) > Vector(x: 204, y: 250) > Vector(x: 204, y: 262) > Vector(x: 108, y: 262))
-    Fill: rgb(255,255,0)
-  Shape: rgb(0,0,0) Path (Vector(x: 108, y: 250) > Vector(x: 204, y: 250) > Vector(x: 180, y: 250) > Vector(x: 132, y: 250))
-  Shape: rgb(0,0,0) Path (Vector(x: 204, y: 250) > Vector(x: 204, y: 262) > Vector(x: 180, y: 262) > Vector(x: 180, y: 250))
-  Shape: rgb(0,0,0) Path (Vector(x: 204, y: 262) > Vector(x: 108, y: 262) > Vector(x: 132, y: 262) > Vector(x: 180, y: 262))
-  Shape: rgb(0,0,0) Path (Vector(x: 108, y: 262) > Vector(x: 108, y: 250) > Vector(x: 132, y: 250) > Vector(x: 132, y: 262))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 132, y: 262) > Vector(x: 180, y: 262) > Vector(x: 180, y: 274) > Vector(x: 132, y: 274))
-    Fill: rgb(255,0,0)
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 132, y: 262) > Vector(x: 144, y: 262) > Vector(x: 144, y: 274) > Vector(x: 132, y: 274))
-    Fill: rgb(0,0,0)
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 144, y: 262) > Vector(x: 156, y: 262) > Vector(x: 156, y: 274) > Vector(x: 144, y: 274))
-    Fill: rgb(0,0,0)
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 156, y: 262) > Vector(x: 168, y: 262) > Vector(x: 168, y: 274) > Vector(x: 156, y: 274))
-    Fill: rgb(0,0,0)
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 168, y: 262) > Vector(x: 180, y: 262) > Vector(x: 180, y: 274) > Vector(x: 168, y: 274))
-    Fill: rgb(0,0,0)
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496)) | Path (Vector(x: 48, y: 274) > Vector(x: 788, y: 274) > Vector(x: 788, y: 284) > Vector(x: 48, y: 284))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496)) | Path (Vector(x: 48, y: 274) > Vector(x: 788, y: 274) > Vector(x: 788, y: 284) > Vector(x: 48, y: 284))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496)) | Path (Vector(x: 48, y: 274) > Vector(x: 788, y: 274) > Vector(x: 788, y: 284) > Vector(x: 48, y: 284))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496)) | Path (Vector(x: 48, y: 274) > Vector(x: 788, y: 274) > Vector(x: 788, y: 284) > Vector(x: 48, y: 284))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496)) | Path (Vector(x: 48, y: 274) > Vector(x: 788, y: 274) > Vector(x: 788, y: 284) > Vector(x: 48, y: 284))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Shape: rgb(0,0,0) Path (Vector(x: 72, y: 166) > Vector(x: 240, y: 166) > Vector(x: 228, y: 166) > Vector(x: 84, y: 166))
-  Shape: rgb(0,0,0) Path (Vector(x: 240, y: 166) > Vector(x: 240, y: 214) > Vector(x: 228, y: 202) > Vector(x: 228, y: 166))
-  Shape: rgb(0,0,0) Path (Vector(x: 240, y: 214) > Vector(x: 72, y: 214) > Vector(x: 84, y: 202) > Vector(x: 228, y: 202))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 84, y: 166) > Vector(x: 228, y: 166) > Vector(x: 228, y: 214) > Vector(x: 84, y: 214))
-    Fill: rgb(255,255,0)
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 144, y: 178) > Vector(x: 168, y: 178) > Vector(x: 168, y: 202) > Vector(x: 144, y: 202))
-    Fill: rgb(255,0,0)
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Shape: rgb(255,255,0) Path (Vector(x: 144, y: 178) > Vector(x: 168, y: 178) > Vector(x: 156, y: 178) > Vector(x: 156, y: 178))
-  Shape: rgb(0,0,0) Path (Vector(x: 168, y: 178) > Vector(x: 168, y: 190) > Vector(x: 156, y: 178) > Vector(x: 156, y: 178))
-  Shape: rgb(255,255,0) Path (Vector(x: 168, y: 190) > Vector(x: 144, y: 190) > Vector(x: 156, y: 178) > Vector(x: 156, y: 178))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Shape: rgb(0,0,0) Path (Vector(x: 144, y: 190) > Vector(x: 168, y: 190) > Vector(x: 156, y: 202) > Vector(x: 156, y: 202))
-  Shape: rgb(255,255,0) Path (Vector(x: 168, y: 190) > Vector(x: 168, y: 202) > Vector(x: 156, y: 202) > Vector(x: 156, y: 202))
-  Shape: rgb(255,255,0) Path (Vector(x: 168, y: 202) > Vector(x: 144, y: 202) > Vector(x: 156, y: 202) > Vector(x: 156, y: 202))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496)) | Path (Vector(x: 48, y: 274) > Vector(x: 788, y: 274) > Vector(x: 788, y: 284) > Vector(x: 48, y: 284))
-  Clip: Path (Vector(x: 48, y: 429) > Vector(x: 112, y: 429) > Vector(x: 112, y: 493) > Vector(x: 48, y: 493))
-    Draw image: Image ("/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9") (source: [0, 0, 64, 64]) (destination: [0, 0, 64, 64])
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 132, y: 108) > Vector(x: 180, y: 108) > Vector(x: 180, y: 126) > Vector(x: 132, y: 126))
-    Fill: rgb(0,0,0)
-  Shape: rgb(255,255,0) Path (Vector(x: 132, y: 108) > Vector(x: 180, y: 108) > Vector(x: 180, y: 108) > Vector(x: 132, y: 108))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 132, y: 144) > Vector(x: 180, y: 144) > Vector(x: 180, y: 157) > Vector(x: 132, y: 157))
-    Fill: rgb(0,0,0)
-  Shape: rgb(255,0,0) Path (Vector(x: 132, y: 144) > Vector(x: 180, y: 144) > Vector(x: 180, y: 144) > Vector(x: 132, y: 144))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Shape: rgb(0,0,0) Path (Vector(x: 108, y: 118) > Vector(x: 204, y: 118) > Vector(x: 180, y: 118) > Vector(x: 132, y: 118))
-  Shape: rgb(0,0,0) Path (Vector(x: 204, y: 118) > Vector(x: 204, y: 130) > Vector(x: 180, y: 130) > Vector(x: 180, y: 118))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 132, y: 118) > Vector(x: 180, y: 118) > Vector(x: 180, y: 130) > Vector(x: 132, y: 130))
-    Fill: rgb(255,255,0)
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 84, y: 142) > Vector(x: 228, y: 142) > Vector(x: 228, y: 166) > Vector(x: 84, y: 166))
-    Fill: rgb(255,0,0)
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 84, y: 142) > Vector(x: 228, y: 142) > Vector(x: 228, y: 166) > Vector(x: 84, y: 166))
-    Fill: rgb(255,0,0)
-  Shape: rgb(255,255,0) Path (Vector(x: 84, y: 142) > Vector(x: 228, y: 142) > Vector(x: 228, y: 142) > Vector(x: 108, y: 142))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 84, y: 142) > Vector(x: 228, y: 142) > Vector(x: 228, y: 166) > Vector(x: 84, y: 166))
-    Repeat: Image ("/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAABnRSTlMAAAAAAABupgeRAAAABmJLR0QA%2FwD%2F") [96, 142] Size (2, 2) Path (Vector(x: 84, y: 142) > Vector(x: 228, y: 142) > Vector(x: 228, y: 166) > Vector(x: 84, y: 166))
-  Shape: rgb(255,0,0) Path (Vector(x: 84, y: 142) > Vector(x: 228, y: 142) > Vector(x: 216, y: 142) > Vector(x: 96, y: 142))
-  Shape: rgb(0,0,0) Path (Vector(x: 228, y: 142) > Vector(x: 228, y: 166) > Vector(x: 216, y: 166) > Vector(x: 216, y: 142))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 84, y: 214) > Vector(x: 228, y: 214) > Vector(x: 228, y: 238) > Vector(x: 84, y: 238))
-    Fill: rgb(0,0,0)
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 96, y: 214) > Vector(x: 216, y: 214) > Vector(x: 216, y: 238) > Vector(x: 96, y: 238))
-    Fill: rgb(0,0,0)
-  Shape: rgb(255,255,0) Path (Vector(x: 96, y: 214) > Vector(x: 216, y: 214) > Vector(x: 204, y: 226) > Vector(x: 108, y: 226))
-  Shape: rgb(255,255,0) Path (Vector(x: 216, y: 214) > Vector(x: 216, y: 238) > Vector(x: 204, y: 226) > Vector(x: 204, y: 226))
-  Shape: rgb(255,255,0) Path (Vector(x: 216, y: 238) > Vector(x: 96, y: 238) > Vector(x: 108, y: 226) > Vector(x: 204, y: 226))
-  Shape: rgb(255,255,0) Path (Vector(x: 96, y: 238) > Vector(x: 96, y: 214) > Vector(x: 108, y: 226) > Vector(x: 108, y: 226))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Clip: Path (Vector(x: 108, y: 214) > Vector(x: 204, y: 214) > Vector(x: 204, y: 226) > Vector(x: 108, y: 226))
-    Fill: rgb(0,0,0)
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-  Shape: rgb(255,255,0) Path (Vector(x: 120, y: 214) > Vector(x: 192, y: 214) > Vector(x: 192, y: 226) > Vector(x: 120, y: 226))
-  Shape: rgb(0,0,0) Path (Vector(x: 192, y: 214) > Vector(x: 192, y: 238) > Vector(x: 192, y: 226) > Vector(x: 192, y: 226))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
-Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 1496) > Vector(x: 0, y: 1496))
--- a/tests/reftests/background/clip.txt
+++ b/tests/reftests/background/clip.txt
@ -1,29 +0,0 @@
-Window: [800, 1568]
-Rectangle: [0, 0, 800, 1568] rgb(255,0,0)
-Opacity: 1
-Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 1048) > Vector(x: 8, y: 1048))
-  Fill: rgb(0,255,0)
-Clip: Path (Vector(x: 18, y: 18) > Vector(x: 278, y: 18) > Vector(x: 278, y: 258) > Vector(x: 18, y: 258))
-  Repeat: Image ("/tests/assets/image.jpg") [58, 28] Size (75, 75) Path (Vector(x: 18, y: 18) > Vector(x: 278, y: 18) > Vector(x: 278, y: 258) > Vector(x: 18, y: 258))
-Clip: Path (Vector(x: 338, y: 28) > Vector(x: 538, y: 28) > Vector(x: 538, y: 228) > Vector(x: 338, y: 228))
-  Repeat: Image ("/tests/assets/image.jpg") [338, 28] Size (75, 75) Path (Vector(x: 298, y: 18) > Vector(x: 558, y: 18) > Vector(x: 558, y: 258) > Vector(x: 298, y: 258))
-Clip: Path (Vector(x: 58, y: 288) > Vector(x: 258, y: 288) > Vector(x: 258, y: 488) > Vector(x: 58, y: 488))
-  Repeat: Image ("/tests/assets/image.jpg") [58, 288] Size (75, 75) Path (Vector(x: 18, y: 278) > Vector(x: 278, y: 278) > Vector(x: 278, y: 518) > Vector(x: 18, y: 518))
-Clip: Path (Vector(x: 298, y: 278) > Vector(x: 558, y: 278) > Vector(x: 558, y: 518) > Vector(x: 298, y: 518))
-  Repeat: Image ("/tests/assets/image.jpg") [338, 288] Size (75, 75) Path (Vector(x: 298, y: 278) > Vector(x: 558, y: 278) > Vector(x: 558, y: 518) > Vector(x: 298, y: 518))
-Clip: Path (Vector(x: 18, y: 538) > Vector(x: 278, y: 538) > Vector(x: 278, y: 778) > Vector(x: 18, y: 778))
-  Repeat: Image ("/tests/assets/image.jpg") [58, 548] Size (75, 75) Path (Vector(x: 58, y: 548) > Vector(x: 133, y: 548) > Vector(x: 133, y: 623) > Vector(x: 58, y: 623))
-Clip: Path (Vector(x: 338, y: 548) > Vector(x: 538, y: 548) > Vector(x: 538, y: 748) > Vector(x: 338, y: 748))
-  Repeat: Image ("/tests/assets/image.jpg") [338, 548] Size (75, 75) Path (Vector(x: 338, y: 538) > Vector(x: 413, y: 538) > Vector(x: 413, y: 778) > Vector(x: 338, y: 778))
-Clip: Path (Vector(x: 58, y: 808) > Vector(x: 258, y: 808) > Vector(x: 258, y: 1008) > Vector(x: 58, y: 1008))
-  Repeat: Image ("/tests/assets/image.jpg") [58, 808] Size (75, 75) Path (Vector(x: 18, y: 808) > Vector(x: 278, y: 808) > Vector(x: 278, y: 883) > Vector(x: 18, y: 883))
-Clip: Path (Vector(x: 298, y: 798) > Vector(x: 558, y: 798) > Vector(x: 558, y: 1038) > Vector(x: 298, y: 1038))
-  Repeat: Image ("/tests/assets/image.jpg") [338, 808] Size (75, 75) Path (Vector(x: 338, y: 808) > Vector(x: 413, y: 808) > Vector(x: 413, y: 883) > Vector(x: 338, y: 883))
-Clip: Path (Vector(x: 18, y: 1058) > Vector(x: 278, y: 1058) > Vector(x: 278, y: 1298) > Vector(x: 18, y: 1298))
-  Fill: rgb(0,128,0)
-Clip: Path (Vector(x: 338, y: 1068) > Vector(x: 538, y: 1068) > Vector(x: 538, y: 1268) > Vector(x: 338, y: 1268))
-  Fill: rgb(0,128,0)
-Clip: Path (Vector(x: 58, y: 1328) > Vector(x: 258, y: 1328) > Vector(x: 258, y: 1528) > Vector(x: 58, y: 1528))
-  Fill: rgb(0,128,0)
-Clip: Path (Vector(x: 298, y: 1318) > Vector(x: 558, y: 1318) > Vector(x: 558, y: 1558) > Vector(x: 298, y: 1558))
-  Fill: rgb(0,128,0)
--- a/tests/reftests/background/encoded.txt
+++ b/tests/reftests/background/encoded.txt
@ -1,11 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgb(255,0,0)
-Opacity: 1
-Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 8) > Vector(x: 8, y: 8))
-  Fill: rgb(0,255,0)
-Clip: Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
-  Repeat: Image ("/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4") [19, 19] Size (75, 75) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 219, y: 19) > Vector(x: 19, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 219, y: 219) > Vector(x: 219, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 220) > Vector(x: 18, y: 220) > Vector(x: 19, y: 219) > Vector(x: 219, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 220) > Vector(x: 18, y: 18) > Vector(x: 19, y: 19) > Vector(x: 19, y: 219))
--- a/tests/reftests/background/linear-gradient.txt
+++ b/tests/reftests/background/linear-gradient.txt
@ -1,133 +0,0 @@
-Window: [820, 1828]
-Rectangle: [0, 0, 820, 1828] rgb(255,0,0)
-Opacity: 1
-Clip: Path (Vector(x: 18, y: 18) > Vector(x: 230, y: 18) > Vector(x: 230, y: 220) > Vector(x: 18, y: 220))
-  Gradient: [18, 18, 212, 202] linear-gradient(x0: 207, x1: 5, y0: 207, y1: -5 rgb(255,0,0) 0, rgb(0,0,255) 0.34, rgb(186,218,85) 0.67, rgba(0,0,255,0.5) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 18) > Vector(x: 230, y: 18) > Vector(x: 229, y: 19) > Vector(x: 19, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 230, y: 18) > Vector(x: 230, y: 220) > Vector(x: 229, y: 219) > Vector(x: 229, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 230, y: 220) > Vector(x: 18, y: 220) > Vector(x: 19, y: 219) > Vector(x: 229, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 220) > Vector(x: 18, y: 18) > Vector(x: 19, y: 19) > Vector(x: 19, y: 219))
-Clip: Path (Vector(x: 250, y: 18) > Vector(x: 462, y: 18) > Vector(x: 462, y: 220) > Vector(x: 250, y: 220))
-  Gradient: [250, 18, 212, 202] linear-gradient(x0: 106, x1: 106, y0: 202, y1: 0 rgb(252,252,252) 0, rgb(232,232,232) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 250, y: 18) > Vector(x: 462, y: 18) > Vector(x: 461, y: 19) > Vector(x: 251, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 18) > Vector(x: 462, y: 220) > Vector(x: 461, y: 219) > Vector(x: 461, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 220) > Vector(x: 250, y: 220) > Vector(x: 251, y: 219) > Vector(x: 461, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 250, y: 220) > Vector(x: 250, y: 18) > Vector(x: 251, y: 19) > Vector(x: 251, y: 219))
-Clip: Path (Vector(x: 482, y: 18) > Vector(x: 694, y: 18) > Vector(x: 694, y: 220) > Vector(x: 482, y: 220))
-  Gradient: [482, 18, 212, 202] linear-gradient(x0: 212, x1: 0, y0: 101, y1: 101 rgb(255,0,0) 0, rgb(255,255,0) 0.5, rgb(0,255,0) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 482, y: 18) > Vector(x: 694, y: 18) > Vector(x: 693, y: 19) > Vector(x: 483, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 18) > Vector(x: 694, y: 220) > Vector(x: 693, y: 219) > Vector(x: 693, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 220) > Vector(x: 482, y: 220) > Vector(x: 483, y: 219) > Vector(x: 693, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 482, y: 220) > Vector(x: 482, y: 18) > Vector(x: 483, y: 19) > Vector(x: 483, y: 219))
-Clip: Path (Vector(x: 18, y: 240) > Vector(x: 230, y: 240) > Vector(x: 230, y: 442) > Vector(x: 18, y: 442))
-  Gradient: [18, 240, 212, 202] linear-gradient(x0: 212, x1: 0, y0: 101, y1: 101 rgb(206,219,233) 0, rgb(170,197,222) 0.17, rgb(97,153,199) 0.5, rgb(58,132,195) 0.51, rgb(65,154,214) 0.59, rgb(75,184,240) 0.71, rgb(58,139,194) 0.84, rgb(38,85,139) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 240) > Vector(x: 230, y: 240) > Vector(x: 229, y: 241) > Vector(x: 19, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 230, y: 240) > Vector(x: 230, y: 442) > Vector(x: 229, y: 441) > Vector(x: 229, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 230, y: 442) > Vector(x: 18, y: 442) > Vector(x: 19, y: 441) > Vector(x: 229, y: 441))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 442) > Vector(x: 18, y: 240) > Vector(x: 19, y: 241) > Vector(x: 19, y: 441))
-Clip: Path (Vector(x: 250, y: 240) > Vector(x: 462, y: 240) > Vector(x: 462, y: 442) > Vector(x: 250, y: 442))
-  Gradient: [250, 240, 212, 202] linear-gradient(x0: 106, x1: 106, y0: 202, y1: 0 rgb(240,183,161) 0, rgb(140,51,16) 0.5, rgb(117,34,1) 0.51, rgb(191,110,78) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 250, y: 240) > Vector(x: 462, y: 240) > Vector(x: 461, y: 241) > Vector(x: 251, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 240) > Vector(x: 462, y: 442) > Vector(x: 461, y: 441) > Vector(x: 461, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 442) > Vector(x: 250, y: 442) > Vector(x: 251, y: 441) > Vector(x: 461, y: 441))
-Shape: rgb(0,0,0) Path (Vector(x: 250, y: 442) > Vector(x: 250, y: 240) > Vector(x: 251, y: 241) > Vector(x: 251, y: 441))
-Clip: Path (Vector(x: 482, y: 240) > Vector(x: 694, y: 240) > Vector(x: 694, y: 442) > Vector(x: 482, y: 442))
-  Gradient: [482, 240, 212, 202] linear-gradient(x0: 212, x1: 0, y0: 101, y1: 101 rgb(206,219,233) 0, rgb(170,197,222) 0.17, rgb(97,153,199) 0.5, rgb(58,132,195) 0.51, rgb(65,154,214) 0.76, rgb(38,85,139) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 482, y: 240) > Vector(x: 694, y: 240) > Vector(x: 693, y: 241) > Vector(x: 483, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 240) > Vector(x: 694, y: 442) > Vector(x: 693, y: 441) > Vector(x: 693, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 442) > Vector(x: 482, y: 442) > Vector(x: 483, y: 441) > Vector(x: 693, y: 441))
-Shape: rgb(0,0,0) Path (Vector(x: 482, y: 442) > Vector(x: 482, y: 240) > Vector(x: 483, y: 241) > Vector(x: 483, y: 441))
-Clip: Path (Vector(x: 18, y: 462) > Vector(x: 230, y: 462) > Vector(x: 230, y: 664) > Vector(x: 18, y: 664))
-  Gradient: [18, 462, 212, 202] linear-gradient(x0: 106, x1: 106, y0: 202, y1: 0 rgb(204,229,244) 0, rgb(0,38,60) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 462) > Vector(x: 230, y: 462) > Vector(x: 229, y: 463) > Vector(x: 19, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 230, y: 462) > Vector(x: 230, y: 664) > Vector(x: 229, y: 663) > Vector(x: 229, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 230, y: 664) > Vector(x: 18, y: 664) > Vector(x: 19, y: 663) > Vector(x: 229, y: 663))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 664) > Vector(x: 18, y: 462) > Vector(x: 19, y: 463) > Vector(x: 19, y: 663))
-Clip: Path (Vector(x: 250, y: 462) > Vector(x: 462, y: 462) > Vector(x: 462, y: 664) > Vector(x: 250, y: 664))
-  Gradient: [250, 462, 212, 202] linear-gradient(x0: 5, x1: 207, y0: 207, y1: -5 rgb(255,255,255) 0, rgb(0,38,60) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 250, y: 462) > Vector(x: 462, y: 462) > Vector(x: 461, y: 463) > Vector(x: 251, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 462) > Vector(x: 462, y: 664) > Vector(x: 461, y: 663) > Vector(x: 461, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 664) > Vector(x: 250, y: 664) > Vector(x: 251, y: 663) > Vector(x: 461, y: 663))
-Shape: rgb(0,0,0) Path (Vector(x: 250, y: 664) > Vector(x: 250, y: 462) > Vector(x: 251, y: 463) > Vector(x: 251, y: 663))
-Clip: Path (Vector(x: 482, y: 462) > Vector(x: 694, y: 462) > Vector(x: 694, y: 664) > Vector(x: 482, y: 664))
-  Gradient: [482, 462, 212, 202] linear-gradient(x0: 5, x1: 207, y0: 207, y1: -5 rgb(0,0,255) 0, rgb(255,0,0) 0.17, rgb(0,128,0) 0.67, rgba(0,0,0,0.5) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 482, y: 462) > Vector(x: 694, y: 462) > Vector(x: 693, y: 463) > Vector(x: 483, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 462) > Vector(x: 694, y: 664) > Vector(x: 693, y: 663) > Vector(x: 693, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 664) > Vector(x: 482, y: 664) > Vector(x: 483, y: 663) > Vector(x: 693, y: 663))
-Shape: rgb(0,0,0) Path (Vector(x: 482, y: 664) > Vector(x: 482, y: 462) > Vector(x: 483, y: 463) > Vector(x: 483, y: 663))
-Clip: Path (Vector(x: 18, y: 684) > Vector(x: 230, y: 684) > Vector(x: 230, y: 886) > Vector(x: 18, y: 886))
-  Gradient: [18, 684, 212, 202] linear-gradient(x0: 5, x1: 207, y0: -5, y1: 207 rgb(0,0,255) 0, rgb(255,0,0) 0.17, rgb(0,128,0) 0.67, rgba(0,0,0,0.5) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 684) > Vector(x: 230, y: 684) > Vector(x: 229, y: 685) > Vector(x: 19, y: 685))
-Shape: rgb(0,0,0) Path (Vector(x: 230, y: 684) > Vector(x: 230, y: 886) > Vector(x: 229, y: 885) > Vector(x: 229, y: 685))
-Shape: rgb(0,0,0) Path (Vector(x: 230, y: 886) > Vector(x: 18, y: 886) > Vector(x: 19, y: 885) > Vector(x: 229, y: 885))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 886) > Vector(x: 18, y: 684) > Vector(x: 19, y: 685) > Vector(x: 19, y: 885))
-Clip: Path (Vector(x: 250, y: 684) > Vector(x: 462, y: 684) > Vector(x: 462, y: 886) > Vector(x: 250, y: 886))
-  Gradient: [250, 684, 212, 202] linear-gradient(x0: 207, x1: 5, y0: 207, y1: -5 rgb(0,0,255) 0, rgb(255,0,0) 0.17, rgb(0,128,0) 0.67, rgba(0,0,0,0.5) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 250, y: 684) > Vector(x: 462, y: 684) > Vector(x: 461, y: 685) > Vector(x: 251, y: 685))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 684) > Vector(x: 462, y: 886) > Vector(x: 461, y: 885) > Vector(x: 461, y: 685))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 886) > Vector(x: 250, y: 886) > Vector(x: 251, y: 885) > Vector(x: 461, y: 885))
-Shape: rgb(0,0,0) Path (Vector(x: 250, y: 886) > Vector(x: 250, y: 684) > Vector(x: 251, y: 685) > Vector(x: 251, y: 885))
-Clip: Path (Vector(x: 482, y: 684) > Vector(x: 694, y: 684) > Vector(x: 694, y: 886) > Vector(x: 482, y: 886))
-  Gradient: [482, 684, 212, 202] linear-gradient(x0: 207, x1: 5, y0: -5, y1: 207 rgb(0,0,255) 0, rgb(255,0,0) 0.17, rgb(0,128,0) 0.67, rgba(0,0,0,0.5) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 482, y: 684) > Vector(x: 694, y: 684) > Vector(x: 693, y: 685) > Vector(x: 483, y: 685))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 684) > Vector(x: 694, y: 886) > Vector(x: 693, y: 885) > Vector(x: 693, y: 685))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 886) > Vector(x: 482, y: 886) > Vector(x: 483, y: 885) > Vector(x: 693, y: 885))
-Shape: rgb(0,0,0) Path (Vector(x: 482, y: 886) > Vector(x: 482, y: 684) > Vector(x: 483, y: 685) > Vector(x: 483, y: 885))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 906) > Vector(x: 782, y: 906) > Vector(x: 781, y: 907) > Vector(x: 19, y: 907))
-Shape: rgb(0,0,0) Path (Vector(x: 782, y: 906) > Vector(x: 782, y: 1152) > Vector(x: 781, y: 1151) > Vector(x: 781, y: 907))
-Shape: rgb(0,0,0) Path (Vector(x: 782, y: 1152) > Vector(x: 18, y: 1152) > Vector(x: 19, y: 1151) > Vector(x: 781, y: 1151))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1152) > Vector(x: 18, y: 906) > Vector(x: 19, y: 907) > Vector(x: 19, y: 1151))
-Clip: Path (Vector(x: 29, y: 917) > Vector(x: 231, y: 917) > Vector(x: 231, y: 1019) > Vector(x: 29, y: 1019))
-  Gradient: [29, 917, 202, 102] linear-gradient(x0: 60, x1: 142, y0: 132, y1: -30 rgb(0,0,255) 0, rgb(255,0,0) 0.25, rgb(0,128,0) 0.98, rgba(0,0,0,0.5) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 29, y: 917) > Vector(x: 231, y: 917) > Vector(x: 230, y: 918) > Vector(x: 30, y: 918))
-Shape: rgb(0,0,0) Path (Vector(x: 231, y: 917) > Vector(x: 231, y: 1019) > Vector(x: 230, y: 1018) > Vector(x: 230, y: 918))
-Shape: rgb(0,0,0) Path (Vector(x: 231, y: 1019) > Vector(x: 29, y: 1019) > Vector(x: 30, y: 1018) > Vector(x: 230, y: 1018))
-Shape: rgb(0,0,0) Path (Vector(x: 29, y: 1019) > Vector(x: 29, y: 917) > Vector(x: 30, y: 918) > Vector(x: 30, y: 1018))
-Clip: Path (Vector(x: 251, y: 917) > Vector(x: 453, y: 917) > Vector(x: 453, y: 1019) > Vector(x: 251, y: 1019))
-  Gradient: [251, 917, 202, 102] linear-gradient(x0: 60, x1: 142, y0: -30, y1: 132 rgb(0,0,255) 0, rgb(255,0,0) 0.25, rgb(0,128,0) 0.98, rgba(0,0,0,0.5) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 251, y: 917) > Vector(x: 453, y: 917) > Vector(x: 452, y: 918) > Vector(x: 252, y: 918))
-Shape: rgb(0,0,0) Path (Vector(x: 453, y: 917) > Vector(x: 453, y: 1019) > Vector(x: 452, y: 1018) > Vector(x: 452, y: 918))
-Shape: rgb(0,0,0) Path (Vector(x: 453, y: 1019) > Vector(x: 251, y: 1019) > Vector(x: 252, y: 1018) > Vector(x: 452, y: 1018))
-Shape: rgb(0,0,0) Path (Vector(x: 251, y: 1019) > Vector(x: 251, y: 917) > Vector(x: 252, y: 918) > Vector(x: 252, y: 1018))
-Clip: Path (Vector(x: 473, y: 917) > Vector(x: 675, y: 917) > Vector(x: 675, y: 1019) > Vector(x: 473, y: 1019))
-  Gradient: [473, 917, 202, 102] linear-gradient(x0: 142, x1: 60, y0: 132, y1: -30 rgb(0,0,255) 0, rgb(255,0,0) 0.25, rgb(0,128,0) 0.98, rgba(0,0,0,0.5) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 473, y: 917) > Vector(x: 675, y: 917) > Vector(x: 674, y: 918) > Vector(x: 474, y: 918))
-Shape: rgb(0,0,0) Path (Vector(x: 675, y: 917) > Vector(x: 675, y: 1019) > Vector(x: 674, y: 1018) > Vector(x: 674, y: 918))
-Shape: rgb(0,0,0) Path (Vector(x: 675, y: 1019) > Vector(x: 473, y: 1019) > Vector(x: 474, y: 1018) > Vector(x: 674, y: 1018))
-Shape: rgb(0,0,0) Path (Vector(x: 473, y: 1019) > Vector(x: 473, y: 917) > Vector(x: 474, y: 918) > Vector(x: 474, y: 1018))
-Clip: Path (Vector(x: 29, y: 1039) > Vector(x: 231, y: 1039) > Vector(x: 231, y: 1141) > Vector(x: 29, y: 1141))
-  Gradient: [29, 1039, 202, 102] linear-gradient(x0: 142, x1: 60, y0: -30, y1: 132 rgb(0,0,255) 0, rgb(255,0,0) 0.25, rgb(0,128,0) 0.98, rgba(0,0,0,0.5) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 29, y: 1039) > Vector(x: 231, y: 1039) > Vector(x: 230, y: 1040) > Vector(x: 30, y: 1040))
-Shape: rgb(0,0,0) Path (Vector(x: 231, y: 1039) > Vector(x: 231, y: 1141) > Vector(x: 230, y: 1140) > Vector(x: 230, y: 1040))
-Shape: rgb(0,0,0) Path (Vector(x: 231, y: 1141) > Vector(x: 29, y: 1141) > Vector(x: 30, y: 1140) > Vector(x: 230, y: 1140))
-Shape: rgb(0,0,0) Path (Vector(x: 29, y: 1141) > Vector(x: 29, y: 1039) > Vector(x: 30, y: 1040) > Vector(x: 30, y: 1140))
-Clip: Path (Vector(x: 18, y: 1172) > Vector(x: 230, y: 1172) > Vector(x: 230, y: 1374) > Vector(x: 18, y: 1374))
-  Gradient: [18, 1172, 212, 202] linear-gradient(x0: 5, x1: 207, y0: -5, y1: 207 rgb(255,255,255) 0, rgb(0,0,0) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1172) > Vector(x: 230, y: 1172) > Vector(x: 229, y: 1173) > Vector(x: 19, y: 1173))
-Shape: rgb(0,0,0) Path (Vector(x: 230, y: 1172) > Vector(x: 230, y: 1374) > Vector(x: 229, y: 1373) > Vector(x: 229, y: 1173))
-Shape: rgb(0,0,0) Path (Vector(x: 230, y: 1374) > Vector(x: 18, y: 1374) > Vector(x: 19, y: 1373) > Vector(x: 229, y: 1373))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1374) > Vector(x: 18, y: 1172) > Vector(x: 19, y: 1173) > Vector(x: 19, y: 1373))
-Clip: Path (Vector(x: 250, y: 1172) > Vector(x: 462, y: 1172) > Vector(x: 462, y: 1374) > Vector(x: 250, y: 1374))
-  Gradient: [250, 1172, 212, 202] linear-gradient(x0: 156, x1: 56, y0: -23, y1: 225 rgb(255,255,0) 0, rgb(0,0,255) 0.3, rgb(255,0,0) 0.6, rgb(0,0,255) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 250, y: 1172) > Vector(x: 462, y: 1172) > Vector(x: 461, y: 1173) > Vector(x: 251, y: 1173))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 1172) > Vector(x: 462, y: 1374) > Vector(x: 461, y: 1373) > Vector(x: 461, y: 1173))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 1374) > Vector(x: 250, y: 1374) > Vector(x: 251, y: 1373) > Vector(x: 461, y: 1373))
-Shape: rgb(0,0,0) Path (Vector(x: 250, y: 1374) > Vector(x: 250, y: 1172) > Vector(x: 251, y: 1173) > Vector(x: 251, y: 1373))
-Clip: Path (Vector(x: 482, y: 1172) > Vector(x: 694, y: 1172) > Vector(x: 694, y: 1374) > Vector(x: 482, y: 1374))
-  Gradient: [482, 1172, 212, 202] linear-gradient(x0: 106, x1: 106, y0: 202, y1: 0 rgb(255,255,0) 0, rgb(255,0,0) 0.6, rgb(0,0,255) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 482, y: 1172) > Vector(x: 694, y: 1172) > Vector(x: 693, y: 1173) > Vector(x: 483, y: 1173))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 1172) > Vector(x: 694, y: 1374) > Vector(x: 693, y: 1373) > Vector(x: 693, y: 1173))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 1374) > Vector(x: 482, y: 1374) > Vector(x: 483, y: 1373) > Vector(x: 693, y: 1373))
-Shape: rgb(0,0,0) Path (Vector(x: 482, y: 1374) > Vector(x: 482, y: 1172) > Vector(x: 483, y: 1173) > Vector(x: 483, y: 1373))
-Clip: Path (Vector(x: 18, y: 1394) > Vector(x: 230, y: 1394) > Vector(x: 230, y: 1596) > Vector(x: 18, y: 1596))
-  Gradient: [18, 1394, 212, 202] linear-gradient(x0: 219, x1: -7, y0: 92, y1: 110 rgb(255,255,0) 0, rgb(255,165,0) 0.3, rgb(255,0,0) 0.6, rgb(0,0,255) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1394) > Vector(x: 230, y: 1394) > Vector(x: 229, y: 1395) > Vector(x: 19, y: 1395))
-Shape: rgb(0,0,0) Path (Vector(x: 230, y: 1394) > Vector(x: 230, y: 1596) > Vector(x: 229, y: 1595) > Vector(x: 229, y: 1395))
-Shape: rgb(0,0,0) Path (Vector(x: 230, y: 1596) > Vector(x: 18, y: 1596) > Vector(x: 19, y: 1595) > Vector(x: 229, y: 1595))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1596) > Vector(x: 18, y: 1394) > Vector(x: 19, y: 1395) > Vector(x: 19, y: 1595))
-Clip: Path (Vector(x: 18, y: 1616) > Vector(x: 820, y: 1616) > Vector(x: 820, y: 1818) > Vector(x: 18, y: 1818))
-  Gradient: [18, 1616, 802, 202] linear-gradient(x0: 346, x1: 456, y0: -96, y1: 298 rgb(255,255,0) 0, rgb(255,0,0) 0.6, rgb(0,0,255) 1)
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1616) > Vector(x: 820, y: 1616) > Vector(x: 819, y: 1617) > Vector(x: 19, y: 1617))
-Shape: rgb(0,0,0) Path (Vector(x: 820, y: 1616) > Vector(x: 820, y: 1818) > Vector(x: 819, y: 1817) > Vector(x: 819, y: 1617))
-Shape: rgb(0,0,0) Path (Vector(x: 820, y: 1818) > Vector(x: 18, y: 1818) > Vector(x: 19, y: 1817) > Vector(x: 819, y: 1817))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1818) > Vector(x: 18, y: 1616) > Vector(x: 19, y: 1617) > Vector(x: 19, y: 1817))
--- a/tests/reftests/background/linear-gradient2.html
+++ b/tests/reftests/background/linear-gradient2.html
@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Background attribute tests</title>
+		<script type="text/javascript" src="../../test.js"></script>
+
+		<style>
+			body {
+				background-color: blanchedalmond;
+			}
+
+			div {
+				display: inline-block;
+				width: 100px;
+				height: 100px;
+				padding: 10px;
+				border: 15px solid black;
+			}
+		</style>
+	</head>
+	<body>
+		<div style="background: -webkit-linear-gradient(90deg, blue, red);"></div>
+		<div style="background: linear-gradient(90deg, blue, red);"></div>
+		<div style="background: linear-gradient(45deg, blue, red);"></div>
+		<div style="background: linear-gradient(45deg, blue, red); width:200px;"></div>
+		<div style="background-image: linear-gradient(45deg, blue, red); background-position: 20px 30px; background-size: 60px; background-repeat: no-repeat"></div>
+		<div style="background-image: linear-gradient(45deg, blue, red); background-position: 20px 30px; background-size: 60px;"></div>
+		<div style="background-image: linear-gradient(45deg, blue, red);padding:0"></div>
+		<div style="background: linear-gradient(red, red 60%, blue);"></div>
+		<div style="background: linear-gradient(90deg, red 60%, blue);"></div>
+		<div style="background: linear-gradient(135deg, red, red 60%, blue);"></div>
+		<div style="background: linear-gradient(to right, red, red 60%, blue);"></div>
+		<div style="background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);"></div>
+		<div style="background: linear-gradient(60deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%);"></div>
+		<div style="background: linear-gradient(45deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%); background-origin: content-box"></div>
+		<div style="background: linear-gradient(90deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%); background-origin: padding-box"></div>
+		<div style="background: linear-gradient(90deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%); background-origin: border-box"></div>
+		<div style="background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); "></div>
+		<div style="background: linear-gradient(90deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%) content-box;"></div>
+		<div style="background: linear-gradient(60deg, hsla(120,80%,50%,0.8) 0%, transparent 50%, rgba(255,100,100,0.5) 100%);"></div>
+	</body>
+</html>
--- a/tests/reftests/background/multi.txt
+++ b/tests/reftests/background/multi.txt
@ -1,26 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgb(255,0,0)
-Opacity: 1
-Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 8) > Vector(x: 8, y: 8))
-  Fill: rgb(0,255,0)
-Clip: Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
-  Repeat: Image ("/tests/assets/image2.jpg") [119, 149] Size (75, 75) Path (Vector(x: 18, y: 148) > Vector(x: 220, y: 148) > Vector(x: 220, y: 223) > Vector(x: 18, y: 223))
-  Repeat: Image ("/tests/assets/image.jpg") [69, 69] Size (75, 75) Path (Vector(x: 18, y: 68) > Vector(x: 220, y: 68) > Vector(x: 220, y: 143) > Vector(x: 18, y: 143))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 219, y: 19) > Vector(x: 19, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 219, y: 219) > Vector(x: 219, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 220) > Vector(x: 18, y: 220) > Vector(x: 19, y: 219) > Vector(x: 219, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 220) > Vector(x: 18, y: 18) > Vector(x: 19, y: 19) > Vector(x: 19, y: 219))
-Clip: Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 240, y: 220))
-  Repeat: Image ("/tests/assets/image2.jpg") [261, -1] Size (75, 75) Path (Vector(x: 240, y: -2) > Vector(x: 442, y: -2) > Vector(x: 442, y: 73) > Vector(x: 240, y: 73))
-  Repeat: Image ("/tests/assets/image.jpg") [291, 69] Size (75, 75) Path (Vector(x: 240, y: 68) > Vector(x: 442, y: 68) > Vector(x: 442, y: 143) > Vector(x: 240, y: 143))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 441, y: 19) > Vector(x: 241, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 441, y: 219) > Vector(x: 441, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 220) > Vector(x: 240, y: 220) > Vector(x: 241, y: 219) > Vector(x: 441, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 220) > Vector(x: 240, y: 18) > Vector(x: 241, y: 19) > Vector(x: 241, y: 219))
-Clip: Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 462, y: 220))
-  Repeat: Image ("/tests/assets/image2.jpg") [913, 119] Size (75, 75) Path (Vector(x: 462, y: 118) > Vector(x: 664, y: 118) > Vector(x: 664, y: 193) > Vector(x: 462, y: 193))
-  Repeat: Image ("/tests/assets/image.jpg") [513, 69] Size (75, 75) Path (Vector(x: 462, y: 68) > Vector(x: 664, y: 68) > Vector(x: 664, y: 143) > Vector(x: 462, y: 143))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 663, y: 19) > Vector(x: 463, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 663, y: 219) > Vector(x: 663, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 664, y: 220) > Vector(x: 462, y: 220) > Vector(x: 463, y: 219) > Vector(x: 663, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 220) > Vector(x: 462, y: 18) > Vector(x: 463, y: 19) > Vector(x: 463, y: 219))
--- a/tests/reftests/background/position.txt
+++ b/tests/reftests/background/position.txt
@ -1,77 +0,0 @@
-Window: [800, 1018]
-Rectangle: [0, 0, 800, 1018] rgb(255,0,0)
-Opacity: 1
-Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 574) > Vector(x: 8, y: 574))
-  Fill: rgb(0,255,0)
-Clip: Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
-  Repeat: Image ("/tests/assets/image.jpg") [82, 82] Size (75, 75) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 219, y: 19) > Vector(x: 19, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 219, y: 219) > Vector(x: 219, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 220) > Vector(x: 18, y: 220) > Vector(x: 19, y: 219) > Vector(x: 219, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 220) > Vector(x: 18, y: 18) > Vector(x: 19, y: 19) > Vector(x: 19, y: 219))
-Clip: Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 240, y: 220))
-  Repeat: Image ("/tests/assets/image.jpg") [304, 82] Size (75, 75) Path (Vector(x: 240, y: 82) > Vector(x: 442, y: 82) > Vector(x: 442, y: 157) > Vector(x: 240, y: 157))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 441, y: 19) > Vector(x: 241, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 441, y: 219) > Vector(x: 441, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 220) > Vector(x: 240, y: 220) > Vector(x: 241, y: 219) > Vector(x: 441, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 220) > Vector(x: 240, y: 18) > Vector(x: 241, y: 19) > Vector(x: 241, y: 219))
-Clip: Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 462, y: 220))
-  Repeat: Image ("/tests/assets/image.jpg") [526, 82] Size (75, 75) Path (Vector(x: 526, y: 18) > Vector(x: 601, y: 18) > Vector(x: 601, y: 220) > Vector(x: 526, y: 220))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 663, y: 19) > Vector(x: 463, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 663, y: 219) > Vector(x: 663, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 664, y: 220) > Vector(x: 462, y: 220) > Vector(x: 463, y: 219) > Vector(x: 663, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 220) > Vector(x: 462, y: 18) > Vector(x: 463, y: 19) > Vector(x: 463, y: 219))
-Clip: Path (Vector(x: 18, y: 240) > Vector(x: 220, y: 240) > Vector(x: 220, y: 442) > Vector(x: 18, y: 442))
-  Repeat: Image ("/tests/assets/image.jpg") [82, 304] Size (75, 75) Path (Vector(x: 82, y: 304) > Vector(x: 157, y: 304) > Vector(x: 157, y: 379) > Vector(x: 82, y: 379))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 240) > Vector(x: 220, y: 240) > Vector(x: 219, y: 241) > Vector(x: 19, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 240) > Vector(x: 220, y: 442) > Vector(x: 219, y: 441) > Vector(x: 219, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 442) > Vector(x: 18, y: 442) > Vector(x: 19, y: 441) > Vector(x: 219, y: 441))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 442) > Vector(x: 18, y: 240) > Vector(x: 19, y: 241) > Vector(x: 19, y: 441))
-Clip: Path (Vector(x: 18, y: 462) > Vector(x: 120, y: 462) > Vector(x: 120, y: 564) > Vector(x: 18, y: 564))
-  Repeat: Image ("/tests/assets/image.jpg") [32, 476] Size (75, 75) Path (Vector(x: 18, y: 462) > Vector(x: 120, y: 462) > Vector(x: 120, y: 564) > Vector(x: 18, y: 564))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 462) > Vector(x: 120, y: 462) > Vector(x: 119, y: 463) > Vector(x: 19, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 120, y: 462) > Vector(x: 120, y: 564) > Vector(x: 119, y: 563) > Vector(x: 119, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 120, y: 564) > Vector(x: 18, y: 564) > Vector(x: 19, y: 563) > Vector(x: 119, y: 563))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 564) > Vector(x: 18, y: 462) > Vector(x: 19, y: 463) > Vector(x: 19, y: 563))
-Clip: Path (Vector(x: 140, y: 462) > Vector(x: 242, y: 462) > Vector(x: 242, y: 564) > Vector(x: 140, y: 564))
-  Repeat: Image ("/tests/assets/image.jpg") [154, 476] Size (75, 75) Path (Vector(x: 140, y: 476) > Vector(x: 242, y: 476) > Vector(x: 242, y: 551) > Vector(x: 140, y: 551))
-Shape: rgb(0,0,0) Path (Vector(x: 140, y: 462) > Vector(x: 242, y: 462) > Vector(x: 241, y: 463) > Vector(x: 141, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 242, y: 462) > Vector(x: 242, y: 564) > Vector(x: 241, y: 563) > Vector(x: 241, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 242, y: 564) > Vector(x: 140, y: 564) > Vector(x: 141, y: 563) > Vector(x: 241, y: 563))
-Shape: rgb(0,0,0) Path (Vector(x: 140, y: 564) > Vector(x: 140, y: 462) > Vector(x: 141, y: 463) > Vector(x: 141, y: 563))
-Clip: Path (Vector(x: 262, y: 462) > Vector(x: 364, y: 462) > Vector(x: 364, y: 564) > Vector(x: 262, y: 564))
-  Repeat: Image ("/tests/assets/image.jpg") [276, 476] Size (75, 75) Path (Vector(x: 276, y: 462) > Vector(x: 351, y: 462) > Vector(x: 351, y: 564) > Vector(x: 276, y: 564))
-Shape: rgb(0,0,0) Path (Vector(x: 262, y: 462) > Vector(x: 364, y: 462) > Vector(x: 363, y: 463) > Vector(x: 263, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 364, y: 462) > Vector(x: 364, y: 564) > Vector(x: 363, y: 563) > Vector(x: 363, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 364, y: 564) > Vector(x: 262, y: 564) > Vector(x: 263, y: 563) > Vector(x: 363, y: 563))
-Shape: rgb(0,0,0) Path (Vector(x: 262, y: 564) > Vector(x: 262, y: 462) > Vector(x: 263, y: 463) > Vector(x: 263, y: 563))
-Clip: Path (Vector(x: 384, y: 462) > Vector(x: 486, y: 462) > Vector(x: 486, y: 564) > Vector(x: 384, y: 564))
-  Repeat: Image ("/tests/assets/image.jpg") [398, 476] Size (75, 75) Path (Vector(x: 398, y: 476) > Vector(x: 473, y: 476) > Vector(x: 473, y: 551) > Vector(x: 398, y: 551))
-Shape: rgb(0,0,0) Path (Vector(x: 384, y: 462) > Vector(x: 486, y: 462) > Vector(x: 485, y: 463) > Vector(x: 385, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 486, y: 462) > Vector(x: 486, y: 564) > Vector(x: 485, y: 563) > Vector(x: 485, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 486, y: 564) > Vector(x: 384, y: 564) > Vector(x: 385, y: 563) > Vector(x: 485, y: 563))
-Shape: rgb(0,0,0) Path (Vector(x: 384, y: 564) > Vector(x: 384, y: 462) > Vector(x: 385, y: 463) > Vector(x: 385, y: 563))
-Clip: Path (Vector(x: 18, y: 584) > Vector(x: 220, y: 584) > Vector(x: 220, y: 786) > Vector(x: 18, y: 786))
-  Repeat: Image ("/tests/assets/image.jpg") [0, 610] Size (75, 75) Path (Vector(x: 18, y: 584) > Vector(x: 220, y: 584) > Vector(x: 220, y: 786) > Vector(x: 18, y: 786))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 584) > Vector(x: 220, y: 584) > Vector(x: 219, y: 585) > Vector(x: 19, y: 585))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 584) > Vector(x: 220, y: 786) > Vector(x: 219, y: 785) > Vector(x: 219, y: 585))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 786) > Vector(x: 18, y: 786) > Vector(x: 19, y: 785) > Vector(x: 219, y: 785))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 786) > Vector(x: 18, y: 584) > Vector(x: 19, y: 585) > Vector(x: 19, y: 785))
-Clip: Path (Vector(x: 240, y: 584) > Vector(x: 442, y: 584) > Vector(x: 442, y: 786) > Vector(x: 240, y: 786))
-  Repeat: Image ("/tests/assets/image.jpg") [291, 635] Size (75, 75) Path (Vector(x: 240, y: 635) > Vector(x: 442, y: 635) > Vector(x: 442, y: 710) > Vector(x: 240, y: 710))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 584) > Vector(x: 442, y: 584) > Vector(x: 441, y: 585) > Vector(x: 241, y: 585))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 584) > Vector(x: 442, y: 786) > Vector(x: 441, y: 785) > Vector(x: 441, y: 585))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 786) > Vector(x: 240, y: 786) > Vector(x: 241, y: 785) > Vector(x: 441, y: 785))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 786) > Vector(x: 240, y: 584) > Vector(x: 241, y: 585) > Vector(x: 241, y: 785))
-Clip: Path (Vector(x: 462, y: 584) > Vector(x: 664, y: 584) > Vector(x: 664, y: 786) > Vector(x: 462, y: 786))
-  Repeat: Image ("/tests/assets/image.jpg") [513, 635] Size (75, 75) Path (Vector(x: 513, y: 584) > Vector(x: 588, y: 584) > Vector(x: 588, y: 786) > Vector(x: 513, y: 786))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 584) > Vector(x: 664, y: 584) > Vector(x: 663, y: 585) > Vector(x: 463, y: 585))
-Shape: rgb(0,0,0) Path (Vector(x: 664, y: 584) > Vector(x: 664, y: 786) > Vector(x: 663, y: 785) > Vector(x: 663, y: 585))
-Shape: rgb(0,0,0) Path (Vector(x: 664, y: 786) > Vector(x: 462, y: 786) > Vector(x: 463, y: 785) > Vector(x: 663, y: 785))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 786) > Vector(x: 462, y: 584) > Vector(x: 463, y: 585) > Vector(x: 463, y: 785))
-Clip: Path (Vector(x: 18, y: 806) > Vector(x: 220, y: 806) > Vector(x: 220, y: 1008) > Vector(x: 18, y: 1008))
-  Repeat: Image ("/tests/assets/image.jpg") [69, 857] Size (75, 75) Path (Vector(x: 69, y: 857) > Vector(x: 144, y: 857) > Vector(x: 144, y: 932) > Vector(x: 69, y: 932))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 806) > Vector(x: 220, y: 806) > Vector(x: 219, y: 807) > Vector(x: 19, y: 807))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 806) > Vector(x: 220, y: 1008) > Vector(x: 219, y: 1007) > Vector(x: 219, y: 807))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 1008) > Vector(x: 18, y: 1008) > Vector(x: 19, y: 1007) > Vector(x: 219, y: 1007))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1008) > Vector(x: 18, y: 806) > Vector(x: 19, y: 807) > Vector(x: 19, y: 1007))
--- a/tests/reftests/background/radial-gradient.txt
+++ b/tests/reftests/background/radial-gradient.txt
@ -1,61 +0,0 @@
-Window: [800, 896]
-Rectangle: [0, 0, 800, 896] rgb(255,0,0)
-Opacity: 1
-Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 8) > Vector(x: 8, y: 8))
-  Fill: rgb(0,255,0)
-Clip: Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 219, y: 19) > Vector(x: 19, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 219, y: 219) > Vector(x: 219, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 220) > Vector(x: 18, y: 220) > Vector(x: 19, y: 219) > Vector(x: 219, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 220) > Vector(x: 18, y: 18) > Vector(x: 19, y: 19) > Vector(x: 19, y: 219))
-Clip: Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 240, y: 220))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 441, y: 19) > Vector(x: 241, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 441, y: 219) > Vector(x: 441, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 220) > Vector(x: 240, y: 220) > Vector(x: 241, y: 219) > Vector(x: 441, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 220) > Vector(x: 240, y: 18) > Vector(x: 241, y: 19) > Vector(x: 241, y: 219))
-Clip: Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 462, y: 220))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 663, y: 19) > Vector(x: 463, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 663, y: 219) > Vector(x: 663, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 664, y: 220) > Vector(x: 462, y: 220) > Vector(x: 463, y: 219) > Vector(x: 663, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 220) > Vector(x: 462, y: 18) > Vector(x: 463, y: 19) > Vector(x: 463, y: 219))
-Clip: Path (Vector(x: 18, y: 240) > Vector(x: 220, y: 240) > Vector(x: 220, y: 442) > Vector(x: 18, y: 442))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 240) > Vector(x: 220, y: 240) > Vector(x: 219, y: 241) > Vector(x: 19, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 240) > Vector(x: 220, y: 442) > Vector(x: 219, y: 441) > Vector(x: 219, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 442) > Vector(x: 18, y: 442) > Vector(x: 19, y: 441) > Vector(x: 219, y: 441))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 442) > Vector(x: 18, y: 240) > Vector(x: 19, y: 241) > Vector(x: 19, y: 441))
-Clip: Path (Vector(x: 240, y: 240) > Vector(x: 442, y: 240) > Vector(x: 442, y: 442) > Vector(x: 240, y: 442))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 240) > Vector(x: 442, y: 240) > Vector(x: 441, y: 241) > Vector(x: 241, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 240) > Vector(x: 442, y: 442) > Vector(x: 441, y: 441) > Vector(x: 441, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 442) > Vector(x: 240, y: 442) > Vector(x: 241, y: 441) > Vector(x: 441, y: 441))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 442) > Vector(x: 240, y: 240) > Vector(x: 241, y: 241) > Vector(x: 241, y: 441))
-Clip: Path (Vector(x: 462, y: 240) > Vector(x: 664, y: 240) > Vector(x: 664, y: 442) > Vector(x: 462, y: 442))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 240) > Vector(x: 664, y: 240) > Vector(x: 663, y: 241) > Vector(x: 463, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 664, y: 240) > Vector(x: 664, y: 442) > Vector(x: 663, y: 441) > Vector(x: 663, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 664, y: 442) > Vector(x: 462, y: 442) > Vector(x: 463, y: 441) > Vector(x: 663, y: 441))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 442) > Vector(x: 462, y: 240) > Vector(x: 463, y: 241) > Vector(x: 463, y: 441))
-Clip: Path (Vector(x: 18, y: 462) > Vector(x: 220, y: 462) > Vector(x: 220, y: 664) > Vector(x: 18, y: 664))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 462) > Vector(x: 220, y: 462) > Vector(x: 219, y: 463) > Vector(x: 19, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 462) > Vector(x: 220, y: 664) > Vector(x: 219, y: 663) > Vector(x: 219, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 664) > Vector(x: 18, y: 664) > Vector(x: 19, y: 663) > Vector(x: 219, y: 663))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 664) > Vector(x: 18, y: 462) > Vector(x: 19, y: 463) > Vector(x: 19, y: 663))
-Clip: Path (Vector(x: 240, y: 462) > Vector(x: 442, y: 462) > Vector(x: 442, y: 664) > Vector(x: 240, y: 664))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 462) > Vector(x: 442, y: 462) > Vector(x: 441, y: 463) > Vector(x: 241, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 462) > Vector(x: 442, y: 664) > Vector(x: 441, y: 663) > Vector(x: 441, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 664) > Vector(x: 240, y: 664) > Vector(x: 241, y: 663) > Vector(x: 441, y: 663))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 664) > Vector(x: 240, y: 462) > Vector(x: 241, y: 463) > Vector(x: 241, y: 663))
-Clip: Path (Vector(x: 462, y: 462) > Vector(x: 664, y: 462) > Vector(x: 664, y: 664) > Vector(x: 462, y: 664))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 462) > Vector(x: 664, y: 462) > Vector(x: 663, y: 463) > Vector(x: 463, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 664, y: 462) > Vector(x: 664, y: 664) > Vector(x: 663, y: 663) > Vector(x: 663, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 664, y: 664) > Vector(x: 462, y: 664) > Vector(x: 463, y: 663) > Vector(x: 663, y: 663))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 664) > Vector(x: 462, y: 462) > Vector(x: 463, y: 463) > Vector(x: 463, y: 663))
-Clip: Path (Vector(x: 18, y: 684) > Vector(x: 220, y: 684) > Vector(x: 220, y: 886) > Vector(x: 18, y: 886))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 684) > Vector(x: 220, y: 684) > Vector(x: 219, y: 685) > Vector(x: 19, y: 685))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 684) > Vector(x: 220, y: 886) > Vector(x: 219, y: 885) > Vector(x: 219, y: 685))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 886) > Vector(x: 18, y: 886) > Vector(x: 19, y: 885) > Vector(x: 219, y: 885))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 886) > Vector(x: 18, y: 684) > Vector(x: 19, y: 685) > Vector(x: 19, y: 885))
-Clip: Path (Vector(x: 240, y: 684) > Vector(x: 442, y: 684) > Vector(x: 442, y: 886) > Vector(x: 240, y: 886))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 684) > Vector(x: 442, y: 684) > Vector(x: 441, y: 685) > Vector(x: 241, y: 685))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 684) > Vector(x: 442, y: 886) > Vector(x: 441, y: 885) > Vector(x: 441, y: 685))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 886) > Vector(x: 240, y: 886) > Vector(x: 241, y: 885) > Vector(x: 441, y: 885))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 886) > Vector(x: 240, y: 684) > Vector(x: 241, y: 685) > Vector(x: 241, y: 885))
--- a/tests/reftests/background/radial-gradient2.html
+++ b/tests/reftests/background/radial-gradient2.html
@ -0,0 +1,51 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Background attribute tests</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <script type="text/javascript" src="../../test.js"></script>
+
+		<style>
+			div {
+				display: inline-block;
+				width: 100px;
+				height: 100px;
+				padding: 10px;
+				margin: 5px;
+				border: 15px solid black;
+				vertical-align: top;
+			}
+		</style>
+	</head>
+	<body>
+		<div style="background: radial-gradient(red, blue)"></div>
+		<div style="background: radial-gradient(circle, red, blue)"></div>
+		<div style="background: radial-gradient(ellipse, red, blue)"></div>
+		<div style="background: radial-gradient(circle, red, blue); width:200px"></div>
+		<div style="background: radial-gradient(ellipse, red, blue); width:200px"></div>
+		<div style="background: radial-gradient(closest-side, red, blue)"></div>
+		<div style="background: radial-gradient(closest-corner, red, blue)"></div>
+		<div style="background: radial-gradient(farthest-side, red, blue)"></div>
+		<div style="background: radial-gradient(farthest-corner, red, blue)"></div>
+		<div style="background: radial-gradient(circle 20px, red, blue)"></div>
+		<div style="background: radial-gradient(ellipse 20px 30px, red, blue)"></div>
+		<div style="font-size: 24px; border: none; padding: 0; width: auto;">
+			<div style="background: radial-gradient(circle 20px at 2em 80px, red, blue)"></div>
+			<div style="background: radial-gradient(circle 20px at 6rem 80px, red, blue)"></div>
+		</div>
+		<div style="background: radial-gradient(circle farthest-side, red, blue)"></div>
+		<div style="background: radial-gradient(at 20px 20px, red, blue)"></div>
+		<div style="background: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);"></div>
+		<div style="background: radial-gradient(16px at 70px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);"></div>
+		<div style="background: radial-gradient(16px at 70px 50% , #000000 0%, #000000 87.5%, rgba(0, 0, 0, 0.3) 112.5%, rgba(0, 0, 0, 0) 118.75%);"></div>
+		<div style="background: radial-gradient(19px at 70px 50% , #000000 0%, #000000 73.68%, rgba(0, 0, 0, 0.3) 94.74%, rgba(0, 0, 0, 0) 100%);"></div>
+		<div style="background: radial-gradient(ellipse 60px 30px at 70px 50%, #000000 0%, blue 10%, yellow 15%, red 18%);"></div>
+		<div style="background: radial-gradient(circle farthest-corner at left top, aquamarine, deeppink);"></div>
+		<div style="width: 300px; height: 200px; transform: translate(20px, 30px) rotate(20deg)">
+			<div style="width: 200px; height: 150px; transform: translate(-10px, -20px) rotate(10deg)">
+				<div style="background: radial-gradient(circle, red, blue)"></div>
+				<div style="background: radial-gradient(ellipse, red, blue); width:150px;"></div>
+			</div>
+		</div>
+	</body>
+</html>
--- a/tests/reftests/background/repeat.txt
+++ b/tests/reftests/background/repeat.txt
@ -1,53 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgb(255,0,0)
-Opacity: 1
-Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 452) > Vector(x: 8, y: 452))
-  Fill: rgb(0,255,0)
-Clip: Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
-  Repeat: Image ("/tests/assets/image.jpg") [19, 19] Size (75, 75) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 219, y: 19) > Vector(x: 19, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 219, y: 219) > Vector(x: 219, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 220) > Vector(x: 18, y: 220) > Vector(x: 19, y: 219) > Vector(x: 219, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 220) > Vector(x: 18, y: 18) > Vector(x: 19, y: 19) > Vector(x: 19, y: 219))
-Clip: Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 240, y: 220))
-  Repeat: Image ("/tests/assets/image.jpg") [241, 19] Size (75, 75) Path (Vector(x: 240, y: 19) > Vector(x: 442, y: 19) > Vector(x: 442, y: 94) > Vector(x: 240, y: 94))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 441, y: 19) > Vector(x: 241, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 441, y: 219) > Vector(x: 441, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 442, y: 220) > Vector(x: 240, y: 220) > Vector(x: 241, y: 219) > Vector(x: 441, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 240, y: 220) > Vector(x: 240, y: 18) > Vector(x: 241, y: 19) > Vector(x: 241, y: 219))
-Clip: Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 462, y: 220))
-  Repeat: Image ("/tests/assets/image.jpg") [463, 19] Size (75, 75) Path (Vector(x: 463, y: 18) > Vector(x: 538, y: 18) > Vector(x: 538, y: 220) > Vector(x: 463, y: 220))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 663, y: 19) > Vector(x: 463, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 663, y: 219) > Vector(x: 663, y: 19))
-Shape: rgb(0,0,0) Path (Vector(x: 664, y: 220) > Vector(x: 462, y: 220) > Vector(x: 463, y: 219) > Vector(x: 663, y: 219))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 220) > Vector(x: 462, y: 18) > Vector(x: 463, y: 19) > Vector(x: 463, y: 219))
-Clip: Path (Vector(x: 18, y: 240) > Vector(x: 220, y: 240) > Vector(x: 220, y: 442) > Vector(x: 18, y: 442))
-  Repeat: Image ("/tests/assets/image.jpg") [19, 241] Size (75, 75) Path (Vector(x: 19, y: 241) > Vector(x: 94, y: 241) > Vector(x: 94, y: 316) > Vector(x: 19, y: 316))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 240) > Vector(x: 220, y: 240) > Vector(x: 219, y: 241) > Vector(x: 19, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 240) > Vector(x: 220, y: 442) > Vector(x: 219, y: 441) > Vector(x: 219, y: 241))
-Shape: rgb(0,0,0) Path (Vector(x: 220, y: 442) > Vector(x: 18, y: 442) > Vector(x: 19, y: 441) > Vector(x: 219, y: 441))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 442) > Vector(x: 18, y: 240) > Vector(x: 19, y: 241) > Vector(x: 19, y: 441))
-Clip: Path (Vector(x: 18, y: 462) > Vector(x: 120, y: 462) > Vector(x: 120, y: 564) > Vector(x: 18, y: 564))
-  Repeat: Image ("/tests/assets/image.jpg") [19, 463] Size (75, 75) Path (Vector(x: 18, y: 462) > Vector(x: 120, y: 462) > Vector(x: 120, y: 564) > Vector(x: 18, y: 564))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 462) > Vector(x: 120, y: 462) > Vector(x: 119, y: 463) > Vector(x: 19, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 120, y: 462) > Vector(x: 120, y: 564) > Vector(x: 119, y: 563) > Vector(x: 119, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 120, y: 564) > Vector(x: 18, y: 564) > Vector(x: 19, y: 563) > Vector(x: 119, y: 563))
-Shape: rgb(0,0,0) Path (Vector(x: 18, y: 564) > Vector(x: 18, y: 462) > Vector(x: 19, y: 463) > Vector(x: 19, y: 563))
-Clip: Path (Vector(x: 140, y: 462) > Vector(x: 242, y: 462) > Vector(x: 242, y: 564) > Vector(x: 140, y: 564))
-  Repeat: Image ("/tests/assets/image.jpg") [141, 463] Size (75, 75) Path (Vector(x: 140, y: 463) > Vector(x: 242, y: 463) > Vector(x: 242, y: 538) > Vector(x: 140, y: 538))
-Shape: rgb(0,0,0) Path (Vector(x: 140, y: 462) > Vector(x: 242, y: 462) > Vector(x: 241, y: 463) > Vector(x: 141, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 242, y: 462) > Vector(x: 242, y: 564) > Vector(x: 241, y: 563) > Vector(x: 241, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 242, y: 564) > Vector(x: 140, y: 564) > Vector(x: 141, y: 563) > Vector(x: 241, y: 563))
-Shape: rgb(0,0,0) Path (Vector(x: 140, y: 564) > Vector(x: 140, y: 462) > Vector(x: 141, y: 463) > Vector(x: 141, y: 563))
-Clip: Path (Vector(x: 262, y: 462) > Vector(x: 364, y: 462) > Vector(x: 364, y: 564) > Vector(x: 262, y: 564))
-  Repeat: Image ("/tests/assets/image.jpg") [263, 463] Size (75, 75) Path (Vector(x: 263, y: 462) > Vector(x: 338, y: 462) > Vector(x: 338, y: 564) > Vector(x: 263, y: 564))
-Shape: rgb(0,0,0) Path (Vector(x: 262, y: 462) > Vector(x: 364, y: 462) > Vector(x: 363, y: 463) > Vector(x: 263, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 364, y: 462) > Vector(x: 364, y: 564) > Vector(x: 363, y: 563) > Vector(x: 363, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 364, y: 564) > Vector(x: 262, y: 564) > Vector(x: 263, y: 563) > Vector(x: 363, y: 563))
-Shape: rgb(0,0,0) Path (Vector(x: 262, y: 564) > Vector(x: 262, y: 462) > Vector(x: 263, y: 463) > Vector(x: 263, y: 563))
-Clip: Path (Vector(x: 384, y: 462) > Vector(x: 486, y: 462) > Vector(x: 486, y: 564) > Vector(x: 384, y: 564))
-  Repeat: Image ("/tests/assets/image.jpg") [385, 463] Size (75, 75) Path (Vector(x: 385, y: 463) > Vector(x: 460, y: 463) > Vector(x: 460, y: 538) > Vector(x: 385, y: 538))
-Shape: rgb(0,0,0) Path (Vector(x: 384, y: 462) > Vector(x: 486, y: 462) > Vector(x: 485, y: 463) > Vector(x: 385, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 486, y: 462) > Vector(x: 486, y: 564) > Vector(x: 485, y: 563) > Vector(x: 485, y: 463))
-Shape: rgb(0,0,0) Path (Vector(x: 486, y: 564) > Vector(x: 384, y: 564) > Vector(x: 385, y: 563) > Vector(x: 485, y: 563))
-Shape: rgb(0,0,0) Path (Vector(x: 384, y: 564) > Vector(x: 384, y: 462) > Vector(x: 385, y: 463) > Vector(x: 385, y: 563))
--- a/tests/reftests/background/size.txt
+++ b/tests/reftests/background/size.txt
@ -1,43 +0,0 @@
-Window: [800, 1010]
-Rectangle: [0, 0, 800, 1010] rgba(0,0,0,0)
-Opacity: 1
-Clip: Path (Vector(x: 8, y: 8) > Vector(x: 160, y: 8) > Vector(x: 160, y: 210) > Vector(x: 8, y: 210))
-  Repeat: Image ("/tests/assets/image.jpg") [67, 92] Size (34, 34) Path (Vector(x: 67, y: 92) > Vector(x: 101, y: 92) > Vector(x: 101, y: 126) > Vector(x: 67, y: 126))
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 8) > Vector(x: 160, y: 8) > Vector(x: 159, y: 9) > Vector(x: 9, y: 9))
-Shape: rgb(0,0,0) Path (Vector(x: 160, y: 8) > Vector(x: 160, y: 210) > Vector(x: 159, y: 209) > Vector(x: 159, y: 9))
-Shape: rgb(0,0,0) Path (Vector(x: 160, y: 210) > Vector(x: 8, y: 210) > Vector(x: 9, y: 209) > Vector(x: 159, y: 209))
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 210) > Vector(x: 8, y: 8) > Vector(x: 9, y: 9) > Vector(x: 9, y: 209))
-Clip: Path (Vector(x: 160, y: 8) > Vector(x: 312, y: 8) > Vector(x: 312, y: 210) > Vector(x: 160, y: 210))
-  Repeat: Image ("/tests/assets/image.jpg") [219, 92] Size (34, 34) Path (Vector(x: 219, y: 8) > Vector(x: 253, y: 8) > Vector(x: 253, y: 210) > Vector(x: 219, y: 210))
-Shape: rgb(0,0,0) Path (Vector(x: 160, y: 8) > Vector(x: 312, y: 8) > Vector(x: 311, y: 9) > Vector(x: 161, y: 9))
-Shape: rgb(0,0,0) Path (Vector(x: 312, y: 8) > Vector(x: 312, y: 210) > Vector(x: 311, y: 209) > Vector(x: 311, y: 9))
-Shape: rgb(0,0,0) Path (Vector(x: 312, y: 210) > Vector(x: 160, y: 210) > Vector(x: 161, y: 209) > Vector(x: 311, y: 209))
-Shape: rgb(0,0,0) Path (Vector(x: 160, y: 210) > Vector(x: 160, y: 8) > Vector(x: 161, y: 9) > Vector(x: 161, y: 209))
-Clip: Path (Vector(x: 312, y: 8) > Vector(x: 464, y: 8) > Vector(x: 464, y: 210) > Vector(x: 312, y: 210))
-  Repeat: Image ("/tests/assets/image.jpg") [371, 92] Size (34, 34) Path (Vector(x: 312, y: 92) > Vector(x: 464, y: 92) > Vector(x: 464, y: 126) > Vector(x: 312, y: 126))
-Shape: rgb(0,0,0) Path (Vector(x: 312, y: 8) > Vector(x: 464, y: 8) > Vector(x: 463, y: 9) > Vector(x: 313, y: 9))
-Shape: rgb(0,0,0) Path (Vector(x: 464, y: 8) > Vector(x: 464, y: 210) > Vector(x: 463, y: 209) > Vector(x: 463, y: 9))
-Shape: rgb(0,0,0) Path (Vector(x: 464, y: 210) > Vector(x: 312, y: 210) > Vector(x: 313, y: 209) > Vector(x: 463, y: 209))
-Shape: rgb(0,0,0) Path (Vector(x: 312, y: 210) > Vector(x: 312, y: 8) > Vector(x: 313, y: 9) > Vector(x: 313, y: 209))
-Clip: Path (Vector(x: 464, y: 8) > Vector(x: 616, y: 8) > Vector(x: 616, y: 210) > Vector(x: 464, y: 210))
-  Repeat: Image ("/tests/assets/image.jpg") [426, -5] Size (228, 228) Path (Vector(x: 426, y: -5) > Vector(x: 654, y: -5) > Vector(x: 654, y: 223) > Vector(x: 426, y: 223))
-Shape: rgb(0,0,0) Path (Vector(x: 464, y: 8) > Vector(x: 616, y: 8) > Vector(x: 615, y: 9) > Vector(x: 465, y: 9))
-Shape: rgb(0,0,0) Path (Vector(x: 616, y: 8) > Vector(x: 616, y: 210) > Vector(x: 615, y: 209) > Vector(x: 615, y: 9))
-Shape: rgb(0,0,0) Path (Vector(x: 616, y: 210) > Vector(x: 464, y: 210) > Vector(x: 465, y: 209) > Vector(x: 615, y: 209))
-Shape: rgb(0,0,0) Path (Vector(x: 464, y: 210) > Vector(x: 464, y: 8) > Vector(x: 465, y: 9) > Vector(x: 465, y: 209))
-Clip: Path (Vector(x: 8, y: 210) > Vector(x: 408, y: 210) > Vector(x: 408, y: 310) > Vector(x: 8, y: 310))
-  Repeat: Image ("/tests/assets/image.jpg") [8, 60] Size (400, 400) Path (Vector(x: 8, y: 210) > Vector(x: 408, y: 210) > Vector(x: 408, y: 310) > Vector(x: 8, y: 310))
-Clip: Path (Vector(x: 8, y: 310) > Vector(x: 408, y: 310) > Vector(x: 408, y: 410) > Vector(x: 8, y: 410))
-  Repeat: Image ("/tests/assets/image.jpg") [158, 310] Size (100, 100) Path (Vector(x: 8, y: 310) > Vector(x: 408, y: 310) > Vector(x: 408, y: 410) > Vector(x: 8, y: 410))
-Clip: Path (Vector(x: 8, y: 410) > Vector(x: 408, y: 410) > Vector(x: 408, y: 510) > Vector(x: 8, y: 510))
-  Repeat: Image ("/tests/assets/image.jpg") [158, 410] Size (100, 100) Path (Vector(x: 8, y: 410) > Vector(x: 408, y: 410) > Vector(x: 408, y: 510) > Vector(x: 8, y: 510))
-Clip: Path (Vector(x: 8, y: 510) > Vector(x: 408, y: 510) > Vector(x: 408, y: 610) > Vector(x: 8, y: 610))
-  Repeat: Image ("/tests/assets/image.jpg") [171, 523] Size (75, 75) Path (Vector(x: 8, y: 510) > Vector(x: 408, y: 510) > Vector(x: 408, y: 610) > Vector(x: 8, y: 610))
-Clip: Path (Vector(x: 592, y: 210) > Vector(x: 792, y: 210) > Vector(x: 792, y: 410) > Vector(x: 592, y: 410))
-  Repeat: Image ("/tests/assets/image.jpg") [592, 210] Size (200, 200) Path (Vector(x: 592, y: 210) > Vector(x: 792, y: 210) > Vector(x: 792, y: 410) > Vector(x: 592, y: 410))
-Clip: Path (Vector(x: 592, y: 410) > Vector(x: 792, y: 410) > Vector(x: 792, y: 610) > Vector(x: 592, y: 610))
-  Repeat: Image ("/tests/assets/image.jpg") [592, 410] Size (200, 200) Path (Vector(x: 592, y: 410) > Vector(x: 792, y: 410) > Vector(x: 792, y: 610) > Vector(x: 592, y: 610))
-Clip: Path (Vector(x: 592, y: 610) > Vector(x: 792, y: 610) > Vector(x: 792, y: 810) > Vector(x: 592, y: 810))
-  Repeat: Image ("/tests/assets/image.jpg") [592, 610] Size (200, 200) Path (Vector(x: 592, y: 610) > Vector(x: 792, y: 610) > Vector(x: 792, y: 810) > Vector(x: 592, y: 810))
-Clip: Path (Vector(x: 592, y: 810) > Vector(x: 792, y: 810) > Vector(x: 792, y: 1010) > Vector(x: 592, y: 1010))
-  Repeat: Image ("/tests/assets/image.jpg") [655, 873] Size (75, 75) Path (Vector(x: 592, y: 810) > Vector(x: 792, y: 810) > Vector(x: 792, y: 1010) > Vector(x: 592, y: 1010))
--- a/tests/reftests/border/dashed.txt
+++ b/tests/reftests/border/dashed.txt
@ -1,27 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgb(58,132,195)
-Opacity: 1
-Clip: Path (Vector(x: 18, y: 27) > Vector(x: 220, y: 27) > Vector(x: 220, y: 229) > Vector(x: 18, y: 229))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,181,226) Path (Vector(x: 18, y: 27) > Vector(x: 220, y: 27) > Vector(x: 219, y: 28) > Vector(x: 19, y: 28))
-Shape: rgb(0,181,226) Path (Vector(x: 220, y: 27) > Vector(x: 220, y: 229) > Vector(x: 219, y: 228) > Vector(x: 219, y: 28))
-Shape: rgb(0,181,226) Path (Vector(x: 220, y: 229) > Vector(x: 18, y: 229) > Vector(x: 19, y: 228) > Vector(x: 219, y: 228))
-Shape: rgb(0,181,226) Path (Vector(x: 18, y: 229) > Vector(x: 18, y: 27) > Vector(x: 19, y: 28) > Vector(x: 19, y: 228))
-Clip: Path (Vector(x: 244, y: 25) > Vector(x: 450, y: 25) > Vector(x: 450, y: 231) > Vector(x: 244, y: 231))
-  Fill: rgb(111,66,140)
-Shape: rgb(255,0,0) Path (Vector(x: 244, y: 25) > Vector(x: 450, y: 25) > Vector(x: 447, y: 28) > Vector(x: 247, y: 28))
-Shape: rgb(255,0,0) Path (Vector(x: 450, y: 25) > Vector(x: 450, y: 231) > Vector(x: 447, y: 228) > Vector(x: 447, y: 28))
-Shape: rgb(255,0,0) Path (Vector(x: 450, y: 231) > Vector(x: 244, y: 231) > Vector(x: 247, y: 228) > Vector(x: 447, y: 228))
-Shape: rgb(255,0,0) Path (Vector(x: 244, y: 231) > Vector(x: 244, y: 25) > Vector(x: 247, y: 28) > Vector(x: 247, y: 228))
-Clip: Path (Vector(x: 474, y: 18) > Vector(x: 694, y: 18) > Vector(x: 694, y: 238) > Vector(x: 474, y: 238))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,0,0) Path (Vector(x: 474, y: 18) > Vector(x: 694, y: 18) > Vector(x: 684, y: 28) > Vector(x: 484, y: 28))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 18) > Vector(x: 694, y: 238) > Vector(x: 684, y: 228) > Vector(x: 684, y: 28))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 238) > Vector(x: 474, y: 238) > Vector(x: 484, y: 228) > Vector(x: 684, y: 228))
-Shape: rgb(0,0,0) Path (Vector(x: 474, y: 238) > Vector(x: 474, y: 18) > Vector(x: 484, y: 28) > Vector(x: 484, y: 228))
-Clip: Path (Vector(x: 18, y: 258) > Vector(x: 318, y: 258) > Vector(x: 318, y: 558) > Vector(x: 18, y: 558))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,128,0) Path (Vector(x: 18, y: 258) > Vector(x: 318, y: 258) > Vector(x: 268, y: 308) > Vector(x: 68, y: 308))
-Shape: rgb(0,128,0) Path (Vector(x: 318, y: 258) > Vector(x: 318, y: 558) > Vector(x: 268, y: 508) > Vector(x: 268, y: 308))
-Shape: rgb(0,128,0) Path (Vector(x: 318, y: 558) > Vector(x: 18, y: 558) > Vector(x: 68, y: 508) > Vector(x: 268, y: 508))
-Shape: rgb(0,128,0) Path (Vector(x: 18, y: 558) > Vector(x: 18, y: 258) > Vector(x: 68, y: 308) > Vector(x: 68, y: 508))
--- a/tests/reftests/border/dotted.txt
+++ b/tests/reftests/border/dotted.txt
@ -1,27 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgb(58,132,195)
-Opacity: 1
-Clip: Path (Vector(x: 18, y: 27) > Vector(x: 220, y: 27) > Vector(x: 220, y: 229) > Vector(x: 18, y: 229))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,181,226) Path (Vector(x: 18, y: 27) > Vector(x: 220, y: 27) > Vector(x: 219, y: 28) > Vector(x: 19, y: 28))
-Shape: rgb(0,181,226) Path (Vector(x: 220, y: 27) > Vector(x: 220, y: 229) > Vector(x: 219, y: 228) > Vector(x: 219, y: 28))
-Shape: rgb(0,181,226) Path (Vector(x: 220, y: 229) > Vector(x: 18, y: 229) > Vector(x: 19, y: 228) > Vector(x: 219, y: 228))
-Shape: rgb(0,181,226) Path (Vector(x: 18, y: 229) > Vector(x: 18, y: 27) > Vector(x: 19, y: 28) > Vector(x: 19, y: 228))
-Clip: Path (Vector(x: 244, y: 25) > Vector(x: 450, y: 25) > Vector(x: 450, y: 231) > Vector(x: 244, y: 231))
-  Fill: rgb(111,66,140)
-Shape: rgb(255,0,0) Path (Vector(x: 244, y: 25) > Vector(x: 450, y: 25) > Vector(x: 447, y: 28) > Vector(x: 247, y: 28))
-Shape: rgb(255,0,0) Path (Vector(x: 450, y: 25) > Vector(x: 450, y: 231) > Vector(x: 447, y: 228) > Vector(x: 447, y: 28))
-Shape: rgb(255,0,0) Path (Vector(x: 450, y: 231) > Vector(x: 244, y: 231) > Vector(x: 247, y: 228) > Vector(x: 447, y: 228))
-Shape: rgb(255,0,0) Path (Vector(x: 244, y: 231) > Vector(x: 244, y: 25) > Vector(x: 247, y: 28) > Vector(x: 247, y: 228))
-Clip: Path (Vector(x: 474, y: 18) > Vector(x: 694, y: 18) > Vector(x: 694, y: 238) > Vector(x: 474, y: 238))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,0,0) Path (Vector(x: 474, y: 18) > Vector(x: 694, y: 18) > Vector(x: 684, y: 28) > Vector(x: 484, y: 28))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 18) > Vector(x: 694, y: 238) > Vector(x: 684, y: 228) > Vector(x: 684, y: 28))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 238) > Vector(x: 474, y: 238) > Vector(x: 484, y: 228) > Vector(x: 684, y: 228))
-Shape: rgb(0,0,0) Path (Vector(x: 474, y: 238) > Vector(x: 474, y: 18) > Vector(x: 484, y: 28) > Vector(x: 484, y: 228))
-Clip: Path (Vector(x: 18, y: 258) > Vector(x: 318, y: 258) > Vector(x: 318, y: 558) > Vector(x: 18, y: 558))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,128,0) Path (Vector(x: 18, y: 258) > Vector(x: 318, y: 258) > Vector(x: 268, y: 308) > Vector(x: 68, y: 308))
-Shape: rgb(0,128,0) Path (Vector(x: 318, y: 258) > Vector(x: 318, y: 558) > Vector(x: 268, y: 508) > Vector(x: 268, y: 308))
-Shape: rgb(0,128,0) Path (Vector(x: 318, y: 558) > Vector(x: 18, y: 558) > Vector(x: 68, y: 508) > Vector(x: 268, y: 508))
-Shape: rgb(0,128,0) Path (Vector(x: 18, y: 558) > Vector(x: 18, y: 258) > Vector(x: 68, y: 308) > Vector(x: 68, y: 508))
--- a/tests/reftests/border/double.txt
+++ b/tests/reftests/border/double.txt
@ -1,27 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgb(58,132,195)
-Opacity: 1
-Clip: Path (Vector(x: 18, y: 27) > Vector(x: 220, y: 27) > Vector(x: 220, y: 229) > Vector(x: 18, y: 229))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,181,226) Path (Vector(x: 18, y: 27) > Vector(x: 220, y: 27) > Vector(x: 219, y: 28) > Vector(x: 19, y: 28))
-Shape: rgb(0,181,226) Path (Vector(x: 220, y: 27) > Vector(x: 220, y: 229) > Vector(x: 219, y: 228) > Vector(x: 219, y: 28))
-Shape: rgb(0,181,226) Path (Vector(x: 220, y: 229) > Vector(x: 18, y: 229) > Vector(x: 19, y: 228) > Vector(x: 219, y: 228))
-Shape: rgb(0,181,226) Path (Vector(x: 18, y: 229) > Vector(x: 18, y: 27) > Vector(x: 19, y: 28) > Vector(x: 19, y: 228))
-Clip: Path (Vector(x: 244, y: 25) > Vector(x: 450, y: 25) > Vector(x: 450, y: 231) > Vector(x: 244, y: 231))
-  Fill: rgb(111,66,140)
-Shape: rgb(255,0,0) Path (Vector(x: 244, y: 25) > Vector(x: 450, y: 25) > Vector(x: 447, y: 28) > Vector(x: 247, y: 28))
-Shape: rgb(255,0,0) Path (Vector(x: 450, y: 25) > Vector(x: 450, y: 231) > Vector(x: 447, y: 228) > Vector(x: 447, y: 28))
-Shape: rgb(255,0,0) Path (Vector(x: 450, y: 231) > Vector(x: 244, y: 231) > Vector(x: 247, y: 228) > Vector(x: 447, y: 228))
-Shape: rgb(255,0,0) Path (Vector(x: 244, y: 231) > Vector(x: 244, y: 25) > Vector(x: 247, y: 28) > Vector(x: 247, y: 228))
-Clip: Path (Vector(x: 474, y: 18) > Vector(x: 694, y: 18) > Vector(x: 694, y: 238) > Vector(x: 474, y: 238))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,0,0) Path (Vector(x: 474, y: 18) > Vector(x: 694, y: 18) > Vector(x: 684, y: 28) > Vector(x: 484, y: 28))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 18) > Vector(x: 694, y: 238) > Vector(x: 684, y: 228) > Vector(x: 684, y: 28))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 238) > Vector(x: 474, y: 238) > Vector(x: 484, y: 228) > Vector(x: 684, y: 228))
-Shape: rgb(0,0,0) Path (Vector(x: 474, y: 238) > Vector(x: 474, y: 18) > Vector(x: 484, y: 28) > Vector(x: 484, y: 228))
-Clip: Path (Vector(x: 18, y: 258) > Vector(x: 318, y: 258) > Vector(x: 318, y: 558) > Vector(x: 18, y: 558))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,128,0) Path (Vector(x: 18, y: 258) > Vector(x: 318, y: 258) > Vector(x: 268, y: 308) > Vector(x: 68, y: 308))
-Shape: rgb(0,128,0) Path (Vector(x: 318, y: 258) > Vector(x: 318, y: 558) > Vector(x: 268, y: 508) > Vector(x: 268, y: 308))
-Shape: rgb(0,128,0) Path (Vector(x: 318, y: 558) > Vector(x: 18, y: 558) > Vector(x: 68, y: 508) > Vector(x: 268, y: 508))
-Shape: rgb(0,128,0) Path (Vector(x: 18, y: 558) > Vector(x: 18, y: 258) > Vector(x: 68, y: 308) > Vector(x: 68, y: 508))
--- a/tests/reftests/border/inset.txt
+++ b/tests/reftests/border/inset.txt
@ -1,40 +0,0 @@
-Window: [800, 693]
-Rectangle: [0, 0, 800, 693] rgb(58,132,195)
-Opacity: 1
-Clip: Path (Vector(x: 18, y: 27) > Vector(x: 220, y: 27) > Vector(x: 220, y: 229) > Vector(x: 18, y: 229))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,181,226) Path (Vector(x: 18, y: 27) > Vector(x: 220, y: 27) > Vector(x: 219, y: 28) > Vector(x: 19, y: 28))
-Shape: rgb(0,181,226) Path (Vector(x: 220, y: 27) > Vector(x: 220, y: 229) > Vector(x: 219, y: 228) > Vector(x: 219, y: 28))
-Shape: rgb(0,181,226) Path (Vector(x: 220, y: 229) > Vector(x: 18, y: 229) > Vector(x: 19, y: 228) > Vector(x: 219, y: 228))
-Shape: rgb(0,181,226) Path (Vector(x: 18, y: 229) > Vector(x: 18, y: 27) > Vector(x: 19, y: 28) > Vector(x: 19, y: 228))
-Clip: Path (Vector(x: 244, y: 25) > Vector(x: 450, y: 25) > Vector(x: 450, y: 231) > Vector(x: 244, y: 231))
-  Fill: rgb(111,66,140)
-Shape: rgb(255,0,0) Path (Vector(x: 244, y: 25) > Vector(x: 450, y: 25) > Vector(x: 447, y: 28) > Vector(x: 247, y: 28))
-Shape: rgb(255,0,0) Path (Vector(x: 450, y: 25) > Vector(x: 450, y: 231) > Vector(x: 447, y: 228) > Vector(x: 447, y: 28))
-Shape: rgb(255,0,0) Path (Vector(x: 450, y: 231) > Vector(x: 244, y: 231) > Vector(x: 247, y: 228) > Vector(x: 447, y: 228))
-Shape: rgb(255,0,0) Path (Vector(x: 244, y: 231) > Vector(x: 244, y: 25) > Vector(x: 247, y: 28) > Vector(x: 247, y: 228))
-Clip: Path (Vector(x: 474, y: 18) > Vector(x: 694, y: 18) > Vector(x: 694, y: 238) > Vector(x: 474, y: 238))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,0,0) Path (Vector(x: 474, y: 18) > Vector(x: 694, y: 18) > Vector(x: 684, y: 28) > Vector(x: 484, y: 28))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 18) > Vector(x: 694, y: 238) > Vector(x: 684, y: 228) > Vector(x: 684, y: 28))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 238) > Vector(x: 474, y: 238) > Vector(x: 484, y: 228) > Vector(x: 684, y: 228))
-Shape: rgb(0,0,0) Path (Vector(x: 474, y: 238) > Vector(x: 474, y: 18) > Vector(x: 484, y: 28) > Vector(x: 484, y: 228))
-Clip: Path (Vector(x: 18, y: 258) > Vector(x: 318, y: 258) > Vector(x: 318, y: 558) > Vector(x: 18, y: 558))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,128,0) Path (Vector(x: 18, y: 258) > Vector(x: 318, y: 258) > Vector(x: 268, y: 308) > Vector(x: 68, y: 308))
-Shape: rgb(0,128,0) Path (Vector(x: 318, y: 258) > Vector(x: 318, y: 558) > Vector(x: 268, y: 508) > Vector(x: 268, y: 308))
-Shape: rgb(0,128,0) Path (Vector(x: 318, y: 558) > Vector(x: 18, y: 558) > Vector(x: 68, y: 508) > Vector(x: 268, y: 508))
-Shape: rgb(0,128,0) Path (Vector(x: 18, y: 558) > Vector(x: 18, y: 258) > Vector(x: 68, y: 308) > Vector(x: 68, y: 508))
-Clip: Path (Vector(x: 342, y: 258) > Vector(x: 642, y: 258) > Vector(x: 642, y: 558) > Vector(x: 342, y: 558))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,0,0) Path (Vector(x: 342, y: 258) > Vector(x: 642, y: 258) > Vector(x: 592, y: 308) > Vector(x: 392, y: 308))
-Shape: rgb(0,0,0) Path (Vector(x: 642, y: 258) > Vector(x: 642, y: 558) > Vector(x: 592, y: 508) > Vector(x: 592, y: 308))
-Shape: rgb(0,0,0) Path (Vector(x: 642, y: 558) > Vector(x: 342, y: 558) > Vector(x: 392, y: 508) > Vector(x: 592, y: 508))
-Shape: rgb(0,0,0) Path (Vector(x: 342, y: 558) > Vector(x: 342, y: 258) > Vector(x: 392, y: 308) > Vector(x: 392, y: 508))
-Clip: Path (Vector(x: 8, y: 568) > Vector(x: 308, y: 568) > Vector(x: 308, y: 685) > Vector(x: 8, y: 685))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 568) > Vector(x: 308, y: 568) > Vector(x: 258, y: 618) > Vector(x: 58, y: 618))
-Shape: rgb(0,0,0) Path (Vector(x: 308, y: 568) > Vector(x: 308, y: 685) > Vector(x: 258, y: 635) > Vector(x: 258, y: 618))
-Shape: rgb(0,0,0) Path (Vector(x: 308, y: 685) > Vector(x: 8, y: 685) > Vector(x: 58, y: 635) > Vector(x: 258, y: 635))
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 685) > Vector(x: 8, y: 568) > Vector(x: 58, y: 618) > Vector(x: 58, y: 635))
-Clip: Path (Vector(x: 58, y: 618) > Vector(x: 258, y: 618) > Vector(x: 258, y: 635) > Vector(x: 58, y: 635))
--- a/tests/reftests/border/radius.html
+++ b/tests/reftests/border/radius.html
@ -5,7 +5,7 @@
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../../test.js"></script>
    <style type="text/css">
-      div {
+      .box {
        width: 200px;
        height: 200px;
        display: inline-block;
@ -63,6 +63,21 @@
        border-radius: 200px;
      }

+      .gauge{
+          display: inline-block;
+          width: 100px;
+          height: 50px;
+          background: green;
+          margin-bottom: 20px;
+      }
+
+       .gauge1{ border-radius: 25px 25px 0 0   / 25px 25px 0 0; }
+       .gauge2{ border-radius: 100px 100px 0 0 / 50px 50px 0 0; }
+       .gauge3{ border-radius: 100px 100px 0 0 / 100px 100px 0 0; }
+       .gauge4{ border-radius: 300px 100px 0 0  / 100px 100px 0 0; }
+       .gauge5{ border-radius: 400px 400px 50px 50px / 50px 50px 50px 50px; }
+
+
      html {
        background: #3a84c3;
      }
@ -70,11 +85,16 @@
  </head>
  <body>

-    <div class="box1">&nbsp;</div>
-    <div class="box2">&nbsp;</div>
-    <div class="box3">&nbsp;</div>
-    <div class="box4">&nbsp;</div>
-    <div class="box5">&nbsp;</div>
-    <div class="box6">&nbsp;</div>
+    <div class="box box1">&nbsp;</div>
+    <div class="box box2">&nbsp;</div>
+    <div class="box box3">&nbsp;</div>
+    <div class="box box4">&nbsp;</div>
+    <div class="box box5">&nbsp;</div>
+    <div class="box box6">&nbsp;</div>
+    <div class="gauge gauge1"></div>
+    <div class="gauge gauge2"></div>
+    <div class="gauge gauge3"></div>
+    <div class="gauge gauge4"></div>
+    <div class="gauge gauge5"></div>
  </body>
 </html>
--- a/tests/reftests/border/radius.txt
+++ b/tests/reftests/border/radius.txt
@ -1,36 +0,0 @@
-Window: [800, 996]
-Rectangle: [0, 0, 800, 996] rgb(58,132,195)
-Opacity: 1
-Clip: Path (BezierCurve(x0: 18, y0: 77, x1: 68, y1: 27, cx0: 18, cy0: 49, cx1: 40, cy1: 27) > BezierCurve(x0: 170, y0: 27, x1: 220, y1: 77, cx0: 198, cy0: 27, cx1: 220, cy1: 49) > BezierCurve(x0: 220, y0: 179, x1: 170, y1: 229, cx0: 220, cy0: 206, cx1: 198, cy1: 229) > BezierCurve(x0: 68, y0: 229, x1: 18, y1: 179, cx0: 40, cy0: 229, cx1: 18, cy1: 206))
-  Fill: rgb(111,66,140)
-Shape: rgb(255,0,0) Path (BezierCurve(x0: 33, y0: 41, x1: 68, y1: 27, cx0: 42, cy0: 32, cx1: 54, cy1: 27) > BezierCurve(x0: 170, y0: 27, x1: 205, y1: 41, cx0: 184, cy0: 27, cx1: 196, cy1: 32) > BezierCurve(x0: 205, y0: 42, x1: 170, y1: 28, cx0: 196, cy0: 33, cx1: 184, cy1: 28) > BezierCurve(x0: 68, y0: 28, x1: 33, y1: 42, cx0: 54, cy0: 28, cx1: 42, cy1: 33))
-Shape: rgb(0,128,0) Path (BezierCurve(x0: 205, y0: 41, x1: 220, y1: 77, cx0: 214, cy0: 50, cx1: 220, cy1: 63) > BezierCurve(x0: 220, y0: 179, x1: 205, y1: 214, cx0: 220, cy0: 193, cx1: 214, cy1: 205) > BezierCurve(x0: 205, y0: 213, x1: 219, y1: 179, cx0: 214, cy0: 205, cx1: 219, cy1: 192) > BezierCurve(x0: 219, y0: 77, x1: 205, y1: 42, cx0: 219, cy0: 63, cx1: 214, cy1: 51))
-Shape: rgb(0,0,0) Path (BezierCurve(x0: 205, y0: 214, x1: 170, y1: 229, cx0: 196, cy0: 223, cx1: 184, cy1: 229) > BezierCurve(x0: 68, y0: 229, x1: 33, y1: 214, cx0: 54, cy0: 229, cx1: 42, cy1: 223) > BezierCurve(x0: 33, y0: 213, x1: 68, y1: 228, cx0: 42, cy0: 222, cx1: 54, cy1: 228) > BezierCurve(x0: 170, y0: 228, x1: 205, y1: 213, cx0: 184, cy0: 228, cx1: 196, cy1: 222))
-Shape: rgb(0,181,226) Path (BezierCurve(x0: 33, y0: 214, x1: 18, y1: 179, cx0: 24, cy0: 205, cx1: 18, cy1: 193) > BezierCurve(x0: 18, y0: 77, x1: 33, y1: 41, cx0: 18, cy0: 63, cx1: 24, cy1: 50) > BezierCurve(x0: 33, y0: 42, x1: 19, y1: 77, cx0: 24, cy0: 51, cx1: 19, cy1: 63) > BezierCurve(x0: 19, y0: 179, x1: 33, y1: 213, cx0: 19, cy0: 192, cx1: 24, cy1: 205))
-Clip: Path (BezierCurve(x0: 244, y0: 75, x1: 294, y1: 25, cx0: 244, cy0: 47, cx1: 266, cy1: 25) > BezierCurve(x0: 400, y0: 25, x1: 450, y1: 75, cx0: 428, cy0: 25, cx1: 450, cy1: 47) > BezierCurve(x0: 450, y0: 181, x1: 400, y1: 231, cx0: 450, cy0: 208, cx1: 428, cy1: 231) > BezierCurve(x0: 294, y0: 231, x1: 244, y1: 181, cx0: 266, cy0: 231, cx1: 244, cy1: 208))
-  Fill: rgb(111,66,140)
-Shape: rgb(255,0,0) Path (BezierCurve(x0: 259, y0: 39, x1: 294, y1: 25, cx0: 268, cy0: 30, cx1: 280, cy1: 25) > BezierCurve(x0: 400, y0: 25, x1: 435, y1: 39, cx0: 414, cy0: 25, cx1: 426, cy1: 30) > BezierCurve(x0: 433, y0: 42, x1: 400, y1: 28, cx0: 425, cy0: 33, cx1: 413, cy1: 28) > BezierCurve(x0: 294, y0: 28, x1: 261, y1: 42, cx0: 281, cy0: 28, cx1: 269, cy1: 33))
-Shape: rgb(0,128,0) Path (BezierCurve(x0: 435, y0: 39, x1: 450, y1: 75, cx0: 444, cy0: 48, cx1: 450, cy1: 61) > BezierCurve(x0: 450, y0: 181, x1: 435, y1: 216, cx0: 450, cy0: 195, cx1: 444, cy1: 207) > BezierCurve(x0: 433, y0: 214, x1: 447, y1: 181, cx0: 442, cy0: 206, cx1: 447, cy1: 194) > BezierCurve(x0: 447, y0: 75, x1: 433, y1: 42, cx0: 447, cy0: 62, cx1: 442, cy1: 50))
-Shape: rgb(0,0,0) Path (BezierCurve(x0: 435, y0: 216, x1: 400, y1: 231, cx0: 426, cy0: 225, cx1: 414, cy1: 231) > BezierCurve(x0: 294, y0: 231, x1: 259, y1: 216, cx0: 280, cy0: 231, cx1: 268, cy1: 225) > BezierCurve(x0: 261, y0: 214, x1: 294, y1: 228, cx0: 269, cy0: 223, cx1: 281, cy1: 228) > BezierCurve(x0: 400, y0: 228, x1: 433, y1: 214, cx0: 413, cy0: 228, cx1: 425, cy1: 223))
-Shape: rgb(0,181,226) Path (BezierCurve(x0: 259, y0: 216, x1: 244, y1: 181, cx0: 250, cy0: 207, cx1: 244, cy1: 195) > BezierCurve(x0: 244, y0: 75, x1: 259, y1: 39, cx0: 244, cy0: 61, cx1: 250, cy1: 48) > BezierCurve(x0: 261, y0: 42, x1: 247, y1: 75, cx0: 252, cy0: 50, cx1: 247, cy1: 62) > BezierCurve(x0: 247, y0: 181, x1: 261, y1: 214, cx0: 247, cy0: 194, cx1: 252, cy1: 206))
-Clip: Path (BezierCurve(x0: 474, y0: 68, x1: 524, y1: 18, cx0: 474, cy0: 40, cx1: 496, cy1: 18) > BezierCurve(x0: 644, y0: 18, x1: 694, y1: 68, cx0: 672, cy0: 18, cx1: 694, cy1: 40) > BezierCurve(x0: 694, y0: 188, x1: 644, y1: 238, cx0: 694, cy0: 216, cx1: 672, cy1: 238) > BezierCurve(x0: 524, y0: 238, x1: 474, y1: 188, cx0: 496, cy0: 238, cx1: 474, cy1: 216))
-  Fill: rgb(111,66,140)
-Shape: rgb(255,0,0) Path (BezierCurve(x0: 489, y0: 33, x1: 524, y1: 18, cx0: 498, cy0: 24, cx1: 510, cy1: 18) > BezierCurve(x0: 644, y0: 18, x1: 679, y1: 33, cx0: 658, cy0: 18, cx1: 670, cy1: 24) > BezierCurve(x0: 672, y0: 40, x1: 644, y1: 28, cx0: 665, cy0: 32, cx1: 655, cy1: 28) > BezierCurve(x0: 524, y0: 28, x1: 496, y1: 40, cx0: 513, cy0: 28, cx1: 503, cy1: 32))
-Shape: rgb(0,128,0) Path (BezierCurve(x0: 679, y0: 33, x1: 694, y1: 68, cx0: 688, cy0: 42, cx1: 694, cy1: 54) > BezierCurve(x0: 694, y0: 188, x1: 679, y1: 223, cx0: 694, cy0: 202, cx1: 688, cy1: 214) > BezierCurve(x0: 672, y0: 216, x1: 684, y1: 188, cx0: 680, cy0: 209, cx1: 684, cy1: 199) > BezierCurve(x0: 684, y0: 68, x1: 672, y1: 40, cx0: 684, cy0: 57, cx1: 680, cy1: 47))
-Shape: rgb(0,0,0) Path (BezierCurve(x0: 679, y0: 223, x1: 644, y1: 238, cx0: 670, cy0: 232, cx1: 658, cy1: 238) > BezierCurve(x0: 524, y0: 238, x1: 489, y1: 223, cx0: 510, cy0: 238, cx1: 498, cy1: 232) > BezierCurve(x0: 496, y0: 216, x1: 524, y1: 228, cx0: 503, cy0: 224, cx1: 513, cy1: 228) > BezierCurve(x0: 644, y0: 228, x1: 672, y1: 216, cx0: 655, cy0: 228, cx1: 665, cy1: 224))
-Clip: Path (BezierCurve(x0: 68, y0: 308, x1: 68, y1: 268, cx0: 68, cy0: 286, cx1: 68, cy1: 268) > BezierCurve(x0: 268, y0: 268, x1: 268, y1: 308, cx0: 268, cy0: 268, cx1: 268, cy1: 286) > BezierCurve(x0: 268, y0: 388, x1: 168, y1: 468, cx0: 268, cy0: 432, cx1: 223, cy1: 468) > BezierCurve(x0: 68, y0: 468, x1: 68, y1: 468, cx0: 68, cy0: 468, cx1: 68, cy1: 468))
-  Fill: rgb(111,66,140)
-Shape: rgb(255,0,0) Path (BezierCurve(x0: 33, y0: 273, x1: 68, y1: 258, cx0: 42, cy0: 264, cx1: 54, cy1: 258) > BezierCurve(x0: 268, y0: 258, x1: 303, y1: 273, cx0: 282, cy0: 258, cx1: 294, cy1: 264) > BezierCurve(x0: 268, y0: 280, x1: 268, y1: 268, cx0: 268, cy0: 272, cx1: 268, cy1: 268) > BezierCurve(x0: 68, y0: 268, x1: 68, y1: 280, cx0: 68, cy0: 268, cx1: 68, cy1: 272))
-Shape: rgb(0,128,0) Path (BezierCurve(x0: 303, y0: 273, x1: 318, y1: 308, cx0: 312, cy0: 282, cx1: 318, cy1: 294) > BezierCurve(x0: 318, y0: 388, x1: 274, y1: 480, cx0: 318, cy0: 424, cx1: 301, cy1: 456) > BezierCurve(x0: 239, y0: 445, x1: 268, y1: 388, cx0: 257, cy0: 430, cx1: 268, cy1: 410) > BezierCurve(x0: 268, y0: 308, x1: 268, y1: 280, cx0: 268, cy0: 297, cx1: 268, cy1: 287))
-Shape: rgb(0,0,0) Path (BezierCurve(x0: 274, y0: 480, x1: 168, y1: 518, cx0: 247, cy0: 503, cx1: 209, cy1: 518) > BezierCurve(x0: 68, y0: 518, x1: 33, y1: 503, cx0: 54, cy0: 518, cx1: 42, cy1: 512) > BezierCurve(x0: 68, y0: 468, x1: 68, y1: 468, cx0: 68, cy0: 468, cx1: 68, cy1: 468) > BezierCurve(x0: 168, y0: 468, x1: 239, y1: 445, cx0: 196, cy0: 468, cx1: 221, cy1: 459))
-Clip: Path (BezierCurve(x0: 158, y0: 653, x1: 158, y1: 638, cx0: 158, cy0: 645, cx1: 158, cy1: 638) > BezierCurve(x0: 383, y0: 638, x1: 358, y1: 653, cx0: 369, cy0: 638, cx1: 358, cy1: 645) > BezierCurve(x0: 358, y0: 863, x1: 358, y1: 838, cx0: 358, cy0: 849, cx1: 358, cy1: 838) > BezierCurve(x0: 158, y0: 838, x1: 158, y1: 863, cx0: 158, cy0: 838, cx1: 158, cy1: 849))
-  Fill: rgb(111,66,140)
-Shape: rgb(255,0,0) Path (BezierCurve(x0: 115, y0: 635, x1: 133, y1: 628, cx0: 120, cy0: 631, cx1: 126, cy1: 628) > BezierCurve(x0: 383, y0: 628, x1: 401, y1: 635, cx0: 390, cy0: 628, cx1: 396, cy1: 631) > BezierCurve(x0: 365, y0: 642, x1: 383, y1: 638, cx0: 370, cy0: 640, cx1: 376, cy1: 638) > BezierCurve(x0: 158, y0: 638, x1: 158, y1: 642, cx0: 158, cy0: 638, cx1: 158, cy1: 640))
-Shape: rgb(0,128,0) Path (BezierCurve(x0: 401, y0: 635, x1: 408, y1: 653, cx0: 405, cy0: 640, cx1: 408, cy1: 646) > BezierCurve(x0: 408, y0: 863, x1: 401, y1: 881, cx0: 408, cy0: 870, cx1: 405, cy1: 876) > BezierCurve(x0: 358, y0: 845, x1: 358, y1: 863, cx0: 358, cy0: 850, cx1: 358, cy1: 856) > BezierCurve(x0: 358, y0: 653, x1: 365, y1: 642, cx0: 358, cy0: 649, cx1: 361, cy1: 645))
-Shape: rgb(0,0,0) Path (BezierCurve(x0: 401, y0: 881, x1: 383, y1: 888, cx0: 396, cy0: 885, cx1: 390, cy1: 888) > BezierCurve(x0: 133, y0: 888, x1: 115, y1: 881, cx0: 126, cy0: 888, cx1: 120, cy1: 885) > BezierCurve(x0: 158, y0: 845, x1: 158, y1: 838, cx0: 158, cy0: 841, cx1: 158, cy1: 838) > BezierCurve(x0: 358, y0: 838, x1: 358, y1: 845, cx0: 358, cy0: 838, cx1: 358, cy1: 841))
-Clip: Path (BezierCurve(x0: 522, y0: 738, x1: 623, y1: 637, cx0: 522, cy0: 682, cx1: 567, cy1: 637) > BezierCurve(x0: 623, y0: 637, x1: 724, y1: 738, cx0: 679, cy0: 637, cx1: 724, cy1: 682) > BezierCurve(x0: 724, y0: 738, x1: 623, y1: 839, cx0: 724, cy0: 794, cx1: 679, cy1: 839) > BezierCurve(x0: 623, y0: 839, x1: 522, y1: 738, cx0: 567, cy0: 839, cx1: 522, cy1: 794))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,0,0) Path (BezierCurve(x0: 552, y0: 666, x1: 623, y1: 637, cx0: 570, cy0: 648, cx1: 595, cy1: 637) > BezierCurve(x0: 623, y0: 637, x1: 695, y1: 666, cx0: 651, cy0: 637, cx1: 676, cy1: 648) > BezierCurve(x0: 694, y0: 667, x1: 623, y1: 638, cx0: 676, cy0: 649, cx1: 651, cy1: 638) > BezierCurve(x0: 623, y0: 638, x1: 552, y1: 667, cx0: 596, cy0: 638, cx1: 571, cy1: 649))
-Shape: rgb(0,0,0) Path (BezierCurve(x0: 695, y0: 666, x1: 724, y1: 738, cx0: 713, cy0: 685, cx1: 724, cy1: 710) > BezierCurve(x0: 724, y0: 738, x1: 695, y1: 810, cx0: 724, cy0: 766, cx1: 713, cy1: 791) > BezierCurve(x0: 694, y0: 809, x1: 723, y1: 738, cx0: 712, cy0: 791, cx1: 723, cy1: 766) > BezierCurve(x0: 723, y0: 738, x1: 694, y1: 667, cx0: 723, cy0: 710, cx1: 712, cy1: 685))
-Shape: rgb(0,0,0) Path (BezierCurve(x0: 695, y0: 810, x1: 623, y1: 839, cx0: 676, cy0: 828, cx1: 651, cy1: 839) > BezierCurve(x0: 623, y0: 839, x1: 552, y1: 810, cx0: 595, cy0: 839, cx1: 570, cy1: 828) > BezierCurve(x0: 552, y0: 809, x1: 623, y1: 838, cx0: 571, cy0: 827, cx1: 596, cy1: 838) > BezierCurve(x0: 623, y0: 838, x1: 694, y1: 809, cx0: 651, cy0: 838, cx1: 676, cy1: 827))
-Shape: rgb(0,0,0) Path (BezierCurve(x0: 552, y0: 810, x1: 522, y1: 738, cx0: 533, cy0: 791, cx1: 522, cy1: 766) > BezierCurve(x0: 522, y0: 738, x1: 552, y1: 666, cx0: 522, cy0: 710, cx1: 533, cy1: 685) > BezierCurve(x0: 552, y0: 667, x1: 523, y1: 738, cx0: 534, cy0: 685, cx1: 523, cy1: 710) > BezierCurve(x0: 523, y0: 738, x1: 552, y1: 809, cx0: 523, cy0: 766, cx1: 534, cy1: 791))
--- a/tests/reftests/border/solid.html
+++ b/tests/reftests/border/solid.html
@ -12,6 +12,7 @@
        margin: 10px;
        background:#6F428C;
        border-style: solid;
+        border-width: 0;
      }

      .box1 {
@ -33,6 +34,12 @@
        border-color: green;
      }

+      .box5 {
+          border-style: none;
+          border-bottom: 50px solid #807d32;
+          border-bottom-width: 50px;
+      }
+
      html {
        background: #3a84c3;
      }
@ -43,5 +50,6 @@
    <div class="box2">&nbsp;</div>
    <div class="box3">&nbsp;</div>
    <div class="box4">&nbsp;</div>
+    <div class="box5">&nbsp;</div>
  </body>
 </html>
--- a/tests/reftests/border/solid.txt
+++ b/tests/reftests/border/solid.txt
@ -1,27 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgb(58,132,195)
-Opacity: 1
-Clip: Path (Vector(x: 18, y: 27) > Vector(x: 220, y: 27) > Vector(x: 220, y: 229) > Vector(x: 18, y: 229))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,181,226) Path (Vector(x: 18, y: 27) > Vector(x: 220, y: 27) > Vector(x: 219, y: 28) > Vector(x: 19, y: 28))
-Shape: rgb(0,181,226) Path (Vector(x: 220, y: 27) > Vector(x: 220, y: 229) > Vector(x: 219, y: 228) > Vector(x: 219, y: 28))
-Shape: rgb(0,181,226) Path (Vector(x: 220, y: 229) > Vector(x: 18, y: 229) > Vector(x: 19, y: 228) > Vector(x: 219, y: 228))
-Shape: rgb(0,181,226) Path (Vector(x: 18, y: 229) > Vector(x: 18, y: 27) > Vector(x: 19, y: 28) > Vector(x: 19, y: 228))
-Clip: Path (Vector(x: 244, y: 25) > Vector(x: 450, y: 25) > Vector(x: 450, y: 231) > Vector(x: 244, y: 231))
-  Fill: rgb(111,66,140)
-Shape: rgb(255,0,0) Path (Vector(x: 244, y: 25) > Vector(x: 450, y: 25) > Vector(x: 447, y: 28) > Vector(x: 247, y: 28))
-Shape: rgb(255,0,0) Path (Vector(x: 450, y: 25) > Vector(x: 450, y: 231) > Vector(x: 447, y: 228) > Vector(x: 447, y: 28))
-Shape: rgb(255,0,0) Path (Vector(x: 450, y: 231) > Vector(x: 244, y: 231) > Vector(x: 247, y: 228) > Vector(x: 447, y: 228))
-Shape: rgb(255,0,0) Path (Vector(x: 244, y: 231) > Vector(x: 244, y: 25) > Vector(x: 247, y: 28) > Vector(x: 247, y: 228))
-Clip: Path (Vector(x: 474, y: 18) > Vector(x: 694, y: 18) > Vector(x: 694, y: 238) > Vector(x: 474, y: 238))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,0,0) Path (Vector(x: 474, y: 18) > Vector(x: 694, y: 18) > Vector(x: 684, y: 28) > Vector(x: 484, y: 28))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 18) > Vector(x: 694, y: 238) > Vector(x: 684, y: 228) > Vector(x: 684, y: 28))
-Shape: rgb(0,0,0) Path (Vector(x: 694, y: 238) > Vector(x: 474, y: 238) > Vector(x: 484, y: 228) > Vector(x: 684, y: 228))
-Shape: rgb(0,0,0) Path (Vector(x: 474, y: 238) > Vector(x: 474, y: 18) > Vector(x: 484, y: 28) > Vector(x: 484, y: 228))
-Clip: Path (Vector(x: 18, y: 258) > Vector(x: 318, y: 258) > Vector(x: 318, y: 558) > Vector(x: 18, y: 558))
-  Fill: rgb(111,66,140)
-Shape: rgb(0,128,0) Path (Vector(x: 18, y: 258) > Vector(x: 318, y: 258) > Vector(x: 268, y: 308) > Vector(x: 68, y: 308))
-Shape: rgb(0,128,0) Path (Vector(x: 318, y: 258) > Vector(x: 318, y: 558) > Vector(x: 268, y: 508) > Vector(x: 268, y: 308))
-Shape: rgb(0,128,0) Path (Vector(x: 318, y: 558) > Vector(x: 18, y: 558) > Vector(x: 68, y: 508) > Vector(x: 268, y: 508))
-Shape: rgb(0,128,0) Path (Vector(x: 18, y: 558) > Vector(x: 18, y: 258) > Vector(x: 68, y: 308) > Vector(x: 68, y: 508))
--- a/tests/reftests/clip.txt
+++ b/tests/reftests/clip.txt
@ -1,178 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
-Opacity: 1
-Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 104) > Vector(x: 8, y: 104))
-  Fill: rgb(255,0,0)
-Shape: rgb(0,0,255) Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 787, y: 13) > Vector(x: 13, y: 13))
-Shape: rgb(0,0,255) Path (Vector(x: 792, y: 8) > Vector(x: 792, y: 104) > Vector(x: 787, y: 99) > Vector(x: 787, y: 13))
-Shape: rgb(0,0,255) Path (Vector(x: 792, y: 104) > Vector(x: 8, y: 104) > Vector(x: 13, y: 99) > Vector(x: 787, y: 99))
-Shape: rgb(0,0,255) Path (Vector(x: 8, y: 104) > Vector(x: 8, y: 8) > Vector(x: 13, y: 13) > Vector(x: 13, y: 99))
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [13, 13]: Some
-  [59, 13]: inline
-  [101, 13]: text
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [302, 13]: followed
-  [365, 13]: by
-  [387, 13]: more
-  [427, 13]: inline
-  [469, 13]: text.
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [13, 81]: Then
-  [54, 81]: more
-  [95, 81]: inline
-  [137, 81]: text.
-Clip: Path (Vector(x: 13, y: 47) > Vector(x: 787, y: 47) > Vector(x: 787, y: 65) > Vector(x: 13, y: 65))
-  Fill: rgb(0,128,0)
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [13, 47]: Then
-  [54, 47]: a
-  [67, 47]: block
-  [109, 47]: level
-  [147, 47]: element.
-Text: rgb(0,0,255) normal normal 400 16 Arial
-  [131, 13]: followed
-  [195, 13]: by
-  [216, 13]: text
-  [246, 13]: in
-  [263, 13]: span
-Clip: Path (Vector(x: 8, y: 104) > Vector(x: 792, y: 104) > Vector(x: 792, y: 200) > Vector(x: 8, y: 200))
-  Fill: rgb(255,0,0)
-Shape: rgb(0,0,255) Path (Vector(x: 8, y: 104) > Vector(x: 792, y: 104) > Vector(x: 787, y: 109) > Vector(x: 13, y: 109))
-Shape: rgb(0,0,255) Path (Vector(x: 792, y: 104) > Vector(x: 792, y: 200) > Vector(x: 787, y: 195) > Vector(x: 787, y: 109))
-Shape: rgb(0,0,255) Path (Vector(x: 792, y: 200) > Vector(x: 8, y: 200) > Vector(x: 13, y: 195) > Vector(x: 787, y: 195))
-Shape: rgb(0,0,255) Path (Vector(x: 8, y: 200) > Vector(x: 8, y: 104) > Vector(x: 13, y: 109) > Vector(x: 13, y: 195))
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [13, 109]: Some
-  [59, 109]: inline
-  [101, 109]: text
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [302, 109]: followed
-  [365, 109]: by
-  [387, 109]: more
-  [427, 109]: inline
-  [469, 109]: text.
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [13, 177]: Then
-  [54, 177]: more
-  [95, 177]: inline
-  [137, 177]: text.
-Clip: Path (Vector(x: 13, y: 143) > Vector(x: 787, y: 143) > Vector(x: 787, y: 161) > Vector(x: 13, y: 161))
-  Fill: rgb(0,128,0)
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [13, 143]: Then
-  [54, 143]: a
-  [67, 143]: block
-  [109, 143]: level
-  [147, 143]: element.
-Text: rgb(0,0,255) normal normal 400 16 Arial
-  [131, 109]: followed
-  [195, 109]: by
-  [216, 109]: text
-  [246, 109]: in
-  [263, 109]: span
-Clip: Path (Vector(x: 8, y: 200) > Vector(x: 504, y: 200) > Vector(x: 504, y: 296) > Vector(x: 8, y: 296))
-  Fill: rgb(255,0,0)
-Shape: rgb(0,0,255) Path (Vector(x: 8, y: 200) > Vector(x: 504, y: 200) > Vector(x: 499, y: 205) > Vector(x: 13, y: 205))
-Shape: rgb(0,0,255) Path (Vector(x: 504, y: 200) > Vector(x: 504, y: 296) > Vector(x: 499, y: 291) > Vector(x: 499, y: 205))
-Shape: rgb(0,0,255) Path (Vector(x: 504, y: 296) > Vector(x: 8, y: 296) > Vector(x: 13, y: 291) > Vector(x: 499, y: 291))
-Shape: rgb(0,0,255) Path (Vector(x: 8, y: 296) > Vector(x: 8, y: 200) > Vector(x: 13, y: 205) > Vector(x: 13, y: 291))
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [13, 205]: Some
-  [59, 205]: inline
-  [101, 205]: text
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [302, 205]: followed
-  [365, 205]: by
-  [387, 205]: more
-  [427, 205]: inline
-  [469, 205]: text.
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [13, 273]: Then
-  [54, 273]: more
-  [95, 273]: inline
-  [137, 273]: text.
-Clip: Path (Vector(x: 13, y: 239) > Vector(x: 499, y: 239) > Vector(x: 499, y: 257) > Vector(x: 13, y: 257))
-  Fill: rgb(0,128,0)
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [13, 239]: Then
-  [54, 239]: a
-  [67, 239]: block
-  [109, 239]: level
-  [147, 239]: element.
-Text: rgb(0,0,255) normal normal 400 16 Arial
-  [131, 205]: followed
-  [195, 205]: by
-  [216, 205]: text
-  [246, 205]: in
-  [263, 205]: span
-Clip: Path (Vector(x: 500, y: 250) > Vector(x: 800, y: 250) > Vector(x: 800, y: 364) > Vector(x: 500, y: 364))
-  Fill: rgb(255,0,0)
-Shape: rgb(0,0,255) Path (Vector(x: 500, y: 250) > Vector(x: 800, y: 250) > Vector(x: 795, y: 255) > Vector(x: 505, y: 255))
-Shape: rgb(0,0,255) Path (Vector(x: 800, y: 250) > Vector(x: 800, y: 364) > Vector(x: 795, y: 359) > Vector(x: 795, y: 255))
-Shape: rgb(0,0,255) Path (Vector(x: 800, y: 364) > Vector(x: 500, y: 364) > Vector(x: 505, y: 359) > Vector(x: 795, y: 359))
-Shape: rgb(0,0,255) Path (Vector(x: 500, y: 364) > Vector(x: 500, y: 250) > Vector(x: 505, y: 255) > Vector(x: 505, y: 359))
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [505, 255]: Some
-  [551, 255]: inline
-  [593, 255]: text
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [505, 273]: followed
-  [568, 273]: by
-  [589, 273]: more
-  [630, 273]: inline
-  [672, 273]: text.
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [505, 341]: Then
-  [546, 341]: more
-  [587, 341]: inline
-  [629, 341]: text.
-Clip: Path (Vector(x: 505, y: 307) > Vector(x: 795, y: 307) > Vector(x: 795, y: 325) > Vector(x: 505, y: 325))
-  Fill: rgb(0,128,0)
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [505, 307]: Then
-  [546, 307]: a
-  [559, 307]: block
-  [601, 307]: level
-  [639, 307]: element.
-Text: rgb(0,0,255) normal normal 400 16 Arial
-  [623, 255]: followed
-  [687, 255]: by
-  [708, 255]: text
-  [738, 255]: in
-  [755, 255]: span
-Clip: Path (Vector(x: 8, y: 500) > Vector(x: 504, y: 500) > Vector(x: 504, y: 596) > Vector(x: 8, y: 596))
-  Fill: rgb(255,0,0)
-Shape: rgb(0,0,255) Path (Vector(x: 8, y: 500) > Vector(x: 504, y: 500) > Vector(x: 499, y: 505) > Vector(x: 13, y: 505))
-Shape: rgb(0,0,255) Path (Vector(x: 504, y: 500) > Vector(x: 504, y: 596) > Vector(x: 499, y: 591) > Vector(x: 499, y: 505))
-Shape: rgb(0,0,255) Path (Vector(x: 504, y: 596) > Vector(x: 8, y: 596) > Vector(x: 13, y: 591) > Vector(x: 499, y: 591))
-Shape: rgb(0,0,255) Path (Vector(x: 8, y: 596) > Vector(x: 8, y: 500) > Vector(x: 13, y: 505) > Vector(x: 13, y: 591))
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [13, 505]: Some
-  [59, 505]: inline
-  [101, 505]: text
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [302, 505]: followed
-  [365, 505]: by
-  [387, 505]: more
-  [427, 505]: inline
-  [469, 505]: text.
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [13, 573]: Then
-  [54, 573]: more
-  [95, 573]: inline
-  [137, 573]: text.
-Clip: Path (Vector(x: 13, y: 539) > Vector(x: 499, y: 539) > Vector(x: 499, y: 557) > Vector(x: 13, y: 557))
-  Fill: rgb(0,128,0)
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [13, 539]: Then
-  [54, 539]: a
-  [67, 539]: block
-  [109, 539]: level
-  [147, 539]: element.
-Text: rgb(0,0,255) normal normal 400 16 Arial
-  [131, 505]: followed
-  [195, 505]: by
-  [216, 505]: text
-  [246, 505]: in
-  [263, 505]: span
--- a/tests/reftests/crossorigin-iframe.txt
+++ b/tests/reftests/crossorigin-iframe.txt
@ -1,7 +0,0 @@
-Window: [812, 824]
-Rectangle: [0, 0, 812, 824] rgba(0,0,0,0)
-Opacity: 1
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 8) > Vector(x: 812, y: 8) > Vector(x: 810, y: 10) > Vector(x: 10, y: 10))
-Shape: rgb(0,0,0) Path (Vector(x: 812, y: 8) > Vector(x: 812, y: 812) > Vector(x: 810, y: 810) > Vector(x: 810, y: 10))
-Shape: rgb(0,0,0) Path (Vector(x: 812, y: 812) > Vector(x: 8, y: 812) > Vector(x: 10, y: 810) > Vector(x: 810, y: 810))
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 812) > Vector(x: 8, y: 8) > Vector(x: 10, y: 10) > Vector(x: 10, y: 810))
--- a/tests/reftests/dynamicstyle.html
+++ b/tests/reftests/dynamicstyle.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Dynamic style</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../test.js"></script>
+    <style id="style">
+        @font-face {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 400;
+            src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
+            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
+        }
+        body { font-family: "Roboto", serif }
+
+        div {
+            padding: 20px;
+        }
+        .div1 {
+            background: darkred;
+            color: white;
+        }
+        @media (min-width: 10px) {
+            .div1 {
+                background: darkgreen;
+            }
+        }
+    </style>
+    <script>
+        document.querySelector('#style').sheet.insertRule(
+            '.div2 { background: darkgreen; color:white; }',
+            document.querySelector('#style').sheet.cssRules.length
+        );
+    </script>
+</head>
+<body>
+<div class="div1">Static styles</div>
+<div class="div2">Dynamic styles</div>
+</body>
+</html>
+
--- a/tests/reftests/forms.txt
+++ b/tests/reftests/forms.txt
@ -1,328 +0,0 @@
-Window: [800, 917]
-Rectangle: [0, 0, 800, 917] rgba(0,0,0,0)
-Opacity: 1
-Clip: Path (BezierCurve(x0: 0, y0: 908, x1: 3, y1: 905, cx0: 0, cy0: 907, cx1: 1, cy1: 905) > BezierCurve(x0: 9, y0: 905, x1: 12, y1: 908, cx0: 11, cy0: 905, cx1: 12, cy1: 907) > BezierCurve(x0: 12, y0: 914, x1: 9, y1: 917, cx0: 12, cy0: 916, cx1: 11, cy1: 917) > BezierCurve(x0: 3, y0: 917, x1: 0, y1: 914, cx0: 1, cy0: 917, cx1: 0, cy1: 916))
-  Fill: rgb(222,222,222)
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 1, y0: 906, x1: 3, y1: 905, cx0: 1, cy0: 906, cx1: 2, cy1: 905) > BezierCurve(x0: 9, y0: 905, x1: 11, y1: 906, cx0: 10, cy0: 905, cx1: 11, cy1: 906) > BezierCurve(x0: 10, y0: 907, x1: 9, y1: 906, cx0: 10, cy0: 906, cx1: 10, cy1: 906) > BezierCurve(x0: 3, y0: 906, x1: 2, y1: 907, cx0: 2, cy0: 906, cx1: 2, cy1: 906))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 11, y0: 906, x1: 12, y1: 908, cx0: 12, cy0: 907, cx1: 12, cy1: 907) > BezierCurve(x0: 12, y0: 914, x1: 11, y1: 916, cx0: 12, cy0: 915, cx1: 12, cy1: 916) > BezierCurve(x0: 10, y0: 916, x1: 11, y1: 914, cx0: 11, cy0: 915, cx1: 11, cy1: 915) > BezierCurve(x0: 11, y0: 908, x1: 10, y1: 907, cx0: 11, cy0: 908, cx1: 11, cy1: 907))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 11, y0: 916, x1: 9, y1: 917, cx0: 11, cy0: 917, cx1: 10, cy1: 917) > BezierCurve(x0: 3, y0: 917, x1: 1, y1: 916, cx0: 2, cy0: 917, cx1: 1, cy1: 917) > BezierCurve(x0: 2, y0: 916, x1: 3, y1: 916, cx0: 2, cy0: 916, cx1: 2, cy1: 916) > BezierCurve(x0: 9, y0: 916, x1: 10, y1: 916, cx0: 10, cy0: 916, cx1: 10, cy1: 916))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 1, y0: 916, x1: 0, y1: 914, cx0: 0, cy0: 916, cx1: 0, cy1: 915) > BezierCurve(x0: 0, y0: 908, x1: 1, y1: 906, cx0: 0, cy0: 907, cx1: 0, cy1: 907) > BezierCurve(x0: 2, y0: 907, x1: 1, y1: 908, cx0: 1, cy0: 907, cx1: 1, cy1: 908) > BezierCurve(x0: 1, y0: 914, x1: 2, y1: 916, cx0: 1, cy0: 915, cx1: 1, cy1: 915))
-Clip: Path (Vector(x: 0, y: 13) > Vector(x: 158, y: 13) > Vector(x: 158, y: 41) > Vector(x: 0, y: 41))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 0, y: 13) > Vector(x: 158, y: 13) > Vector(x: 156, y: 15) > Vector(x: 2, y: 15))
-Shape: rgb(0,0,0) Path (Vector(x: 158, y: 13) > Vector(x: 158, y: 41) > Vector(x: 156, y: 39) > Vector(x: 156, y: 15))
-Shape: rgb(0,0,0) Path (Vector(x: 158, y: 41) > Vector(x: 0, y: 41) > Vector(x: 2, y: 39) > Vector(x: 156, y: 39))
-Shape: rgb(0,0,0) Path (Vector(x: 0, y: 41) > Vector(x: 0, y: 13) > Vector(x: 2, y: 15) > Vector(x: 2, y: 39))
-Clip: Path (Vector(x: 2, y: 15) > Vector(x: 156, y: 15) > Vector(x: 156, y: 39) > Vector(x: 2, y: 39))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [4, 17]: textbox
-Clip: Path (Vector(x: 162, y: 13) > Vector(x: 320, y: 13) > Vector(x: 320, y: 41) > Vector(x: 162, y: 41))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 162, y: 13) > Vector(x: 320, y: 13) > Vector(x: 318, y: 15) > Vector(x: 164, y: 15))
-Shape: rgb(0,0,0) Path (Vector(x: 320, y: 13) > Vector(x: 320, y: 41) > Vector(x: 318, y: 39) > Vector(x: 318, y: 15))
-Shape: rgb(0,0,0) Path (Vector(x: 320, y: 41) > Vector(x: 162, y: 41) > Vector(x: 164, y: 39) > Vector(x: 318, y: 39))
-Shape: rgb(0,0,0) Path (Vector(x: 162, y: 41) > Vector(x: 162, y: 13) > Vector(x: 164, y: 15) > Vector(x: 164, y: 39))
-Clip: Path (Vector(x: 164, y: 15) > Vector(x: 318, y: 15) > Vector(x: 318, y: 39) > Vector(x: 164, y: 39))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [166, 17]: •
-    [172, 17]: •
-    [177, 17]: •
-    [183, 17]: •
-    [188, 17]: •
-    [194, 17]: •
-    [200, 17]: •
-Clip: Path (Vector(x: 324, y: 10) > Vector(x: 488, y: 10) > Vector(x: 488, y: 44) > Vector(x: 324, y: 44))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,128) Path (Vector(x: 324, y: 10) > Vector(x: 488, y: 10) > Vector(x: 483, y: 15) > Vector(x: 329, y: 15))
-Shape: rgb(0,0,128) Path (Vector(x: 488, y: 10) > Vector(x: 488, y: 44) > Vector(x: 483, y: 39) > Vector(x: 483, y: 15))
-Shape: rgb(0,0,128) Path (Vector(x: 488, y: 44) > Vector(x: 324, y: 44) > Vector(x: 329, y: 39) > Vector(x: 483, y: 39))
-Shape: rgb(0,0,128) Path (Vector(x: 324, y: 44) > Vector(x: 324, y: 10) > Vector(x: 329, y: 15) > Vector(x: 329, y: 39))
-Clip: Path (Vector(x: 329, y: 15) > Vector(x: 483, y: 15) > Vector(x: 483, y: 39) > Vector(x: 329, y: 39))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [331, 17]: textbox
-Clip: Path (Vector(x: 492, y: 0) > Vector(x: 656, y: 0) > Vector(x: 656, y: 54) > Vector(x: 492, y: 54))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,128) Path (Vector(x: 492, y: 0) > Vector(x: 656, y: 0) > Vector(x: 651, y: 5) > Vector(x: 497, y: 5))
-Shape: rgb(0,0,128) Path (Vector(x: 656, y: 0) > Vector(x: 656, y: 54) > Vector(x: 651, y: 49) > Vector(x: 651, y: 5))
-Shape: rgb(0,0,128) Path (Vector(x: 656, y: 54) > Vector(x: 492, y: 54) > Vector(x: 497, y: 49) > Vector(x: 651, y: 49))
-Shape: rgb(0,0,128) Path (Vector(x: 492, y: 54) > Vector(x: 492, y: 0) > Vector(x: 497, y: 5) > Vector(x: 497, y: 49))
-Clip: Path (Vector(x: 497, y: 5) > Vector(x: 651, y: 5) > Vector(x: 651, y: 49) > Vector(x: 497, y: 49))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [499, 7]: textbox
-Clip: Path (Vector(x: 0, y: 54) > Vector(x: 180, y: 54) > Vector(x: 180, y: 124) > Vector(x: 0, y: 124))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,128) Path (Vector(x: 0, y: 54) > Vector(x: 180, y: 54) > Vector(x: 175, y: 59) > Vector(x: 5, y: 59))
-Shape: rgb(0,0,128) Path (Vector(x: 180, y: 54) > Vector(x: 180, y: 124) > Vector(x: 175, y: 119) > Vector(x: 175, y: 59))
-Shape: rgb(0,0,128) Path (Vector(x: 180, y: 124) > Vector(x: 0, y: 124) > Vector(x: 5, y: 119) > Vector(x: 175, y: 119))
-Shape: rgb(0,0,128) Path (Vector(x: 0, y: 124) > Vector(x: 0, y: 54) > Vector(x: 5, y: 59) > Vector(x: 5, y: 119))
-Clip: Path (Vector(x: 5, y: 59) > Vector(x: 175, y: 59) > Vector(x: 175, y: 119) > Vector(x: 5, y: 119))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [15, 69]: textbox
-Clip: Path (Vector(x: 184, y: 67) > Vector(x: 358, y: 67) > Vector(x: 358, y: 111) > Vector(x: 184, y: 111))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 184, y: 67) > Vector(x: 358, y: 67) > Vector(x: 356, y: 69) > Vector(x: 186, y: 69))
-Shape: rgb(0,0,0) Path (Vector(x: 358, y: 67) > Vector(x: 358, y: 111) > Vector(x: 356, y: 109) > Vector(x: 356, y: 69))
-Shape: rgb(0,0,0) Path (Vector(x: 358, y: 111) > Vector(x: 184, y: 111) > Vector(x: 186, y: 109) > Vector(x: 356, y: 109))
-Shape: rgb(0,0,0) Path (Vector(x: 184, y: 111) > Vector(x: 184, y: 67) > Vector(x: 186, y: 69) > Vector(x: 186, y: 109))
-Clip: Path (Vector(x: 186, y: 69) > Vector(x: 356, y: 69) > Vector(x: 356, y: 109) > Vector(x: 186, y: 109))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [196, 79]: textbox
-Clip: Path (Vector(x: 362, y: 67) > Vector(x: 536, y: 67) > Vector(x: 536, y: 111) > Vector(x: 362, y: 111))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 362, y: 67) > Vector(x: 536, y: 67) > Vector(x: 534, y: 69) > Vector(x: 364, y: 69))
-Shape: rgb(0,0,0) Path (Vector(x: 536, y: 67) > Vector(x: 536, y: 111) > Vector(x: 534, y: 109) > Vector(x: 534, y: 69))
-Shape: rgb(0,0,0) Path (Vector(x: 536, y: 111) > Vector(x: 362, y: 111) > Vector(x: 364, y: 109) > Vector(x: 534, y: 109))
-Shape: rgb(0,0,0) Path (Vector(x: 362, y: 111) > Vector(x: 362, y: 67) > Vector(x: 364, y: 69) > Vector(x: 364, y: 109))
-Clip: Path (Vector(x: 364, y: 69) > Vector(x: 534, y: 69) > Vector(x: 534, y: 109) > Vector(x: 364, y: 109))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [472, 79]: textbox
-Clip: Path (Vector(x: 540, y: 75) > Vector(x: 690, y: 75) > Vector(x: 690, y: 95) > Vector(x: 540, y: 95))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 540, y: 75) > Vector(x: 690, y: 75) > Vector(x: 688, y: 77) > Vector(x: 542, y: 77))
-Shape: rgb(0,0,0) Path (Vector(x: 690, y: 75) > Vector(x: 690, y: 95) > Vector(x: 688, y: 93) > Vector(x: 688, y: 77))
-Shape: rgb(0,0,0) Path (Vector(x: 690, y: 95) > Vector(x: 540, y: 95) > Vector(x: 542, y: 93) > Vector(x: 688, y: 93))
-Shape: rgb(0,0,0) Path (Vector(x: 540, y: 95) > Vector(x: 540, y: 75) > Vector(x: 542, y: 77) > Vector(x: 542, y: 93))
-Clip: Path (Vector(x: 542, y: 77) > Vector(x: 688, y: 77) > Vector(x: 688, y: 93) > Vector(x: 542, y: 93))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [544, 79]: Value
-    [588, 79]: 1
-Clip: Path (Vector(x: 0, y: 124) > Vector(x: 150, y: 124) > Vector(x: 150, y: 144) > Vector(x: 0, y: 144))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 0, y: 124) > Vector(x: 150, y: 124) > Vector(x: 148, y: 126) > Vector(x: 2, y: 126))
-Shape: rgb(0,0,0) Path (Vector(x: 150, y: 124) > Vector(x: 150, y: 144) > Vector(x: 148, y: 142) > Vector(x: 148, y: 126))
-Shape: rgb(0,0,0) Path (Vector(x: 150, y: 144) > Vector(x: 0, y: 144) > Vector(x: 2, y: 142) > Vector(x: 148, y: 142))
-Shape: rgb(0,0,0) Path (Vector(x: 0, y: 144) > Vector(x: 0, y: 124) > Vector(x: 2, y: 126) > Vector(x: 2, y: 142))
-Clip: Path (Vector(x: 2, y: 126) > Vector(x: 148, y: 126) > Vector(x: 148, y: 142) > Vector(x: 2, y: 142))
-Clip: Path (Vector(x: 154, y: 124) > Vector(x: 304, y: 124) > Vector(x: 304, y: 144) > Vector(x: 154, y: 144))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 154, y: 124) > Vector(x: 304, y: 124) > Vector(x: 302, y: 126) > Vector(x: 156, y: 126))
-Shape: rgb(0,0,0) Path (Vector(x: 304, y: 124) > Vector(x: 304, y: 144) > Vector(x: 302, y: 142) > Vector(x: 302, y: 126))
-Shape: rgb(0,0,0) Path (Vector(x: 304, y: 144) > Vector(x: 154, y: 144) > Vector(x: 156, y: 142) > Vector(x: 302, y: 142))
-Shape: rgb(0,0,0) Path (Vector(x: 154, y: 144) > Vector(x: 154, y: 124) > Vector(x: 156, y: 126) > Vector(x: 156, y: 142))
-Clip: Path (Vector(x: 156, y: 126) > Vector(x: 302, y: 126) > Vector(x: 302, y: 142) > Vector(x: 156, y: 142))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [158, 128]: 2
-Clip: Path (Vector(x: 308, y: 124) > Vector(x: 458, y: 124) > Vector(x: 458, y: 144) > Vector(x: 308, y: 144))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 308, y: 124) > Vector(x: 458, y: 124) > Vector(x: 456, y: 126) > Vector(x: 310, y: 126))
-Shape: rgb(0,0,0) Path (Vector(x: 458, y: 124) > Vector(x: 458, y: 144) > Vector(x: 456, y: 142) > Vector(x: 456, y: 126))
-Shape: rgb(0,0,0) Path (Vector(x: 458, y: 144) > Vector(x: 308, y: 144) > Vector(x: 310, y: 142) > Vector(x: 456, y: 142))
-Shape: rgb(0,0,0) Path (Vector(x: 308, y: 144) > Vector(x: 308, y: 124) > Vector(x: 310, y: 126) > Vector(x: 310, y: 142))
-Clip: Path (Vector(x: 310, y: 126) > Vector(x: 456, y: 126) > Vector(x: 456, y: 142) > Vector(x: 310, y: 142))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [312, 128]: Value
-    [356, 128]: 2
-    [370, 128]: with
-    [402, 128]: something
-    [481, 128]: else
-Clip: Path (Vector(x: 462, y: 125) > Vector(x: 612, y: 125) > Vector(x: 612, y: 145) > Vector(x: 462, y: 145))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 125) > Vector(x: 612, y: 125) > Vector(x: 610, y: 127) > Vector(x: 464, y: 127))
-Shape: rgb(0,0,0) Path (Vector(x: 612, y: 125) > Vector(x: 612, y: 145) > Vector(x: 610, y: 143) > Vector(x: 610, y: 127))
-Shape: rgb(0,0,0) Path (Vector(x: 612, y: 145) > Vector(x: 462, y: 145) > Vector(x: 464, y: 143) > Vector(x: 610, y: 143))
-Shape: rgb(0,0,0) Path (Vector(x: 462, y: 145) > Vector(x: 462, y: 125) > Vector(x: 464, y: 127) > Vector(x: 464, y: 143))
-Clip: Path (Vector(x: 464, y: 127) > Vector(x: 610, y: 127) > Vector(x: 610, y: 143) > Vector(x: 464, y: 143))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [512, 129]: Submit
-Clip: Path (Vector(x: 616, y: 125) > Vector(x: 766, y: 125) > Vector(x: 766, y: 145) > Vector(x: 616, y: 145))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 616, y: 125) > Vector(x: 766, y: 125) > Vector(x: 764, y: 127) > Vector(x: 618, y: 127))
-Shape: rgb(0,0,0) Path (Vector(x: 766, y: 125) > Vector(x: 766, y: 145) > Vector(x: 764, y: 143) > Vector(x: 764, y: 127))
-Shape: rgb(0,0,0) Path (Vector(x: 766, y: 145) > Vector(x: 616, y: 145) > Vector(x: 618, y: 143) > Vector(x: 764, y: 143))
-Shape: rgb(0,0,0) Path (Vector(x: 616, y: 145) > Vector(x: 616, y: 125) > Vector(x: 618, y: 127) > Vector(x: 618, y: 143))
-Clip: Path (Vector(x: 618, y: 127) > Vector(x: 764, y: 127) > Vector(x: 764, y: 143) > Vector(x: 618, y: 143))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [668, 129]: Button
-Clip: Path (Vector(x: 0, y: 159) > Vector(x: 150, y: 159) > Vector(x: 150, y: 179) > Vector(x: 0, y: 179))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 0, y: 159) > Vector(x: 150, y: 159) > Vector(x: 148, y: 161) > Vector(x: 2, y: 161))
-Shape: rgb(0,0,0) Path (Vector(x: 150, y: 159) > Vector(x: 150, y: 179) > Vector(x: 148, y: 177) > Vector(x: 148, y: 161))
-Shape: rgb(0,0,0) Path (Vector(x: 150, y: 179) > Vector(x: 0, y: 179) > Vector(x: 2, y: 177) > Vector(x: 148, y: 177))
-Shape: rgb(0,0,0) Path (Vector(x: 0, y: 179) > Vector(x: 0, y: 159) > Vector(x: 2, y: 161) > Vector(x: 2, y: 177))
-Clip: Path (Vector(x: 2, y: 161) > Vector(x: 148, y: 161) > Vector(x: 148, y: 177) > Vector(x: 2, y: 177))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [54, 163]: Reset
-Clip: Path (Vector(x: 154, y: 159) > Vector(x: 354, y: 159) > Vector(x: 354, y: 179) > Vector(x: 154, y: 179))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 154, y: 159) > Vector(x: 354, y: 159) > Vector(x: 352, y: 161) > Vector(x: 156, y: 161))
-Shape: rgb(0,0,0) Path (Vector(x: 354, y: 159) > Vector(x: 354, y: 179) > Vector(x: 352, y: 177) > Vector(x: 352, y: 161))
-Shape: rgb(0,0,0) Path (Vector(x: 354, y: 179) > Vector(x: 154, y: 179) > Vector(x: 156, y: 177) > Vector(x: 352, y: 177))
-Shape: rgb(0,0,0) Path (Vector(x: 154, y: 179) > Vector(x: 154, y: 159) > Vector(x: 156, y: 161) > Vector(x: 156, y: 177))
-Clip: Path (Vector(x: 156, y: 161) > Vector(x: 352, y: 161) > Vector(x: 352, y: 177) > Vector(x: 156, y: 177))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [229, 163]: Submit
-Clip: Path (Vector(x: 358, y: 147) > Vector(x: 558, y: 147) > Vector(x: 558, y: 197) > Vector(x: 358, y: 197))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 358, y: 147) > Vector(x: 558, y: 147) > Vector(x: 556, y: 149) > Vector(x: 360, y: 149))
-Shape: rgb(0,0,0) Path (Vector(x: 558, y: 147) > Vector(x: 558, y: 197) > Vector(x: 556, y: 195) > Vector(x: 556, y: 149))
-Shape: rgb(0,0,0) Path (Vector(x: 558, y: 197) > Vector(x: 358, y: 197) > Vector(x: 360, y: 195) > Vector(x: 556, y: 195))
-Shape: rgb(0,0,0) Path (Vector(x: 358, y: 197) > Vector(x: 358, y: 147) > Vector(x: 360, y: 149) > Vector(x: 360, y: 195))
-Clip: Path (Vector(x: 360, y: 149) > Vector(x: 556, y: 149) > Vector(x: 556, y: 195) > Vector(x: 360, y: 195))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [435, 151]: Button
-Clip: Path (Vector(x: 562, y: 147) > Vector(x: 762, y: 147) > Vector(x: 762, y: 197) > Vector(x: 562, y: 197))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 562, y: 147) > Vector(x: 762, y: 147) > Vector(x: 760, y: 149) > Vector(x: 564, y: 149))
-Shape: rgb(0,0,0) Path (Vector(x: 762, y: 147) > Vector(x: 762, y: 197) > Vector(x: 760, y: 195) > Vector(x: 760, y: 149))
-Shape: rgb(0,0,0) Path (Vector(x: 762, y: 197) > Vector(x: 562, y: 197) > Vector(x: 564, y: 195) > Vector(x: 760, y: 195))
-Shape: rgb(0,0,0) Path (Vector(x: 562, y: 197) > Vector(x: 562, y: 147) > Vector(x: 564, y: 149) > Vector(x: 564, y: 195))
-Clip: Path (Vector(x: 564, y: 149) > Vector(x: 760, y: 149) > Vector(x: 760, y: 195) > Vector(x: 564, y: 195))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [566, 151]: Reset
-Clip: Path (Vector(x: 0, y: 213) > Vector(x: 158, y: 213) > Vector(x: 158, y: 241) > Vector(x: 0, y: 241))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 0, y: 213) > Vector(x: 158, y: 213) > Vector(x: 156, y: 215) > Vector(x: 2, y: 215))
-Shape: rgb(0,0,0) Path (Vector(x: 158, y: 213) > Vector(x: 158, y: 241) > Vector(x: 156, y: 239) > Vector(x: 156, y: 215))
-Shape: rgb(0,0,0) Path (Vector(x: 158, y: 241) > Vector(x: 0, y: 241) > Vector(x: 2, y: 239) > Vector(x: 156, y: 239))
-Shape: rgb(0,0,0) Path (Vector(x: 0, y: 241) > Vector(x: 0, y: 213) > Vector(x: 2, y: 215) > Vector(x: 2, y: 239))
-Clip: Path (Vector(x: 2, y: 215) > Vector(x: 156, y: 215) > Vector(x: 156, y: 239) > Vector(x: 2, y: 239))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-Clip: Path (Vector(x: 162, y: 197) > Vector(x: 336, y: 197) > Vector(x: 336, y: 241) > Vector(x: 162, y: 241))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 162, y: 197) > Vector(x: 336, y: 197) > Vector(x: 326, y: 207) > Vector(x: 172, y: 207))
-Shape: rgb(0,0,0) Path (Vector(x: 336, y: 197) > Vector(x: 336, y: 241) > Vector(x: 326, y: 231) > Vector(x: 326, y: 207))
-Shape: rgb(0,0,0) Path (Vector(x: 336, y: 241) > Vector(x: 162, y: 241) > Vector(x: 172, y: 231) > Vector(x: 326, y: 231))
-Shape: rgb(0,0,0) Path (Vector(x: 162, y: 241) > Vector(x: 162, y: 197) > Vector(x: 172, y: 207) > Vector(x: 172, y: 231))
-Clip: Path (Vector(x: 172, y: 207) > Vector(x: 326, y: 207) > Vector(x: 326, y: 231) > Vector(x: 172, y: 231))
-Clip: Path (Vector(x: 340, y: 213) > Vector(x: 498, y: 213) > Vector(x: 498, y: 241) > Vector(x: 340, y: 241))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 340, y: 213) > Vector(x: 498, y: 213) > Vector(x: 496, y: 215) > Vector(x: 342, y: 215))
-Shape: rgb(0,0,0) Path (Vector(x: 498, y: 213) > Vector(x: 498, y: 241) > Vector(x: 496, y: 239) > Vector(x: 496, y: 215))
-Shape: rgb(0,0,0) Path (Vector(x: 498, y: 241) > Vector(x: 340, y: 241) > Vector(x: 342, y: 239) > Vector(x: 496, y: 239))
-Shape: rgb(0,0,0) Path (Vector(x: 340, y: 241) > Vector(x: 340, y: 213) > Vector(x: 342, y: 215) > Vector(x: 342, y: 239))
-Clip: Path (Vector(x: 342, y: 215) > Vector(x: 496, y: 215) > Vector(x: 496, y: 239) > Vector(x: 342, y: 239))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [348, 217]: text
-Clip: Path (Vector(x: 502, y: 197) > Vector(x: 676, y: 197) > Vector(x: 676, y: 241) > Vector(x: 502, y: 241))
-  Fill: rgb(255,255,255)
-Shape: rgb(0,0,0) Path (Vector(x: 502, y: 197) > Vector(x: 676, y: 197) > Vector(x: 666, y: 207) > Vector(x: 512, y: 207))
-Shape: rgb(0,0,0) Path (Vector(x: 676, y: 197) > Vector(x: 676, y: 241) > Vector(x: 666, y: 231) > Vector(x: 666, y: 207))
-Shape: rgb(0,0,0) Path (Vector(x: 676, y: 241) > Vector(x: 502, y: 241) > Vector(x: 512, y: 231) > Vector(x: 666, y: 231))
-Shape: rgb(0,0,0) Path (Vector(x: 502, y: 241) > Vector(x: 502, y: 197) > Vector(x: 512, y: 207) > Vector(x: 512, y: 231))
-Clip: Path (Vector(x: 512, y: 207) > Vector(x: 666, y: 207) > Vector(x: 666, y: 231) > Vector(x: 512, y: 231))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [514, 209]: text
-Clip: Path (BezierCurve(x0: 691, y0: 217, x1: 696, y1: 212, cx0: 691, cy0: 214, cx1: 693, cy1: 212) > BezierCurve(x0: 696, y0: 212, x1: 702, y1: 217, cx0: 699, cy0: 212, cx1: 702, cy1: 214) > BezierCurve(x0: 702, y0: 217, x1: 696, y1: 223, cx0: 702, cy0: 220, cx1: 699, cy1: 223) > BezierCurve(x0: 696, y0: 223, x1: 691, y1: 217, cx0: 693, cy0: 223, cx1: 691, cy1: 220))
-  Fill: rgb(222,222,222)
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 692, y0: 213, x1: 696, y1: 211, cx0: 693, cy0: 212, cx1: 695, cy1: 211) > BezierCurve(x0: 696, y0: 211, x1: 701, y1: 213, cx0: 698, cy0: 211, cx1: 700, cy1: 212) > BezierCurve(x0: 700, y0: 213, x1: 696, y1: 212, cx0: 699, cy0: 212, cx1: 698, cy1: 212) > BezierCurve(x0: 696, y0: 212, x1: 693, y1: 213, cx0: 695, cy0: 212, cx1: 694, cy1: 212))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 701, y0: 213, x1: 703, y1: 217, cx0: 702, cy0: 214, cx1: 703, cy1: 215) > BezierCurve(x0: 703, y0: 217, x1: 701, y1: 222, cx0: 703, cy0: 219, cx1: 702, cy1: 221) > BezierCurve(x0: 700, y0: 221, x1: 702, y1: 217, cx0: 701, cy0: 220, cx1: 702, cy1: 219) > BezierCurve(x0: 702, y0: 217, x1: 700, y1: 213, cx0: 702, cy0: 216, cx1: 701, cy1: 214))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 701, y0: 222, x1: 696, y1: 224, cx0: 700, cy0: 223, cx1: 698, cy1: 224) > BezierCurve(x0: 696, y0: 224, x1: 692, y1: 222, cx0: 695, cy0: 224, cx1: 693, cy1: 223) > BezierCurve(x0: 693, y0: 221, x1: 696, y1: 223, cx0: 694, cy0: 222, cx1: 695, cy1: 223) > BezierCurve(x0: 696, y0: 223, x1: 700, y1: 221, cx0: 698, cy0: 223, cx1: 699, cy1: 222))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 692, y0: 222, x1: 690, y1: 217, cx0: 691, cy0: 221, cx1: 690, cy1: 219) > BezierCurve(x0: 690, y0: 217, x1: 692, y1: 213, cx0: 690, cy0: 215, cx1: 691, cy1: 214) > BezierCurve(x0: 693, y0: 213, x1: 691, y1: 217, cx0: 692, cy0: 214, cx1: 691, cy1: 216) > BezierCurve(x0: 691, y0: 217, x1: 693, y1: 221, cx0: 691, cy0: 219, cx1: 692, cy1: 220))
-Clip: Path (BezierCurve(x0: 691, y0: 217, x1: 696, y1: 212, cx0: 691, cy0: 214, cx1: 693, cy1: 212) > BezierCurve(x0: 696, y0: 212, x1: 702, y1: 217, cx0: 699, cy0: 212, cx1: 702, cy1: 214) > BezierCurve(x0: 702, y0: 217, x1: 696, y1: 223, cx0: 702, cy0: 220, cx1: 699, cy1: 223) > BezierCurve(x0: 696, y0: 223, x1: 691, y1: 217, cx0: 693, cy0: 223, cx1: 691, cy1: 220))
-Clip: Path (BezierCurve(x0: 765, y0: 217, x1: 770, y1: 212, cx0: 765, cy0: 214, cx1: 767, cy1: 212) > BezierCurve(x0: 770, y0: 212, x1: 775, y1: 217, cx0: 773, cy0: 212, cx1: 775, cy1: 214) > BezierCurve(x0: 775, y0: 217, x1: 770, y1: 223, cx0: 775, cy0: 220, cx1: 773, cy1: 223) > BezierCurve(x0: 770, y0: 223, x1: 765, y1: 217, cx0: 767, cy0: 223, cx1: 765, cy1: 220))
-  Fill: rgb(222,222,222)
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 765, y0: 213, x1: 770, y1: 211, cx0: 767, cy0: 212, cx1: 768, cy1: 211) > BezierCurve(x0: 770, y0: 211, x1: 775, y1: 213, cx0: 772, cy0: 211, cx1: 773, cy1: 212) > BezierCurve(x0: 774, y0: 213, x1: 770, y1: 212, cx0: 773, cy0: 212, cx1: 771, cy1: 212) > BezierCurve(x0: 770, y0: 212, x1: 766, y1: 213, cx0: 769, cy0: 212, cx1: 767, cy1: 212))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 775, y0: 213, x1: 776, y1: 217, cx0: 776, cy0: 214, cx1: 776, cy1: 215) > BezierCurve(x0: 776, y0: 217, x1: 775, y1: 222, cx0: 776, cy0: 219, cx1: 776, cy1: 221) > BezierCurve(x0: 774, y0: 221, x1: 775, y1: 217, cx0: 775, cy0: 220, cx1: 775, cy1: 219) > BezierCurve(x0: 775, y0: 217, x1: 774, y1: 213, cx0: 775, cy0: 216, cx1: 775, cy1: 214))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 775, y0: 222, x1: 770, y1: 224, cx0: 773, cy0: 223, cx1: 772, cy1: 224) > BezierCurve(x0: 770, y0: 224, x1: 765, y1: 222, cx0: 768, cy0: 224, cx1: 767, cy1: 223) > BezierCurve(x0: 766, y0: 221, x1: 770, y1: 223, cx0: 767, cy0: 222, cx1: 769, cy1: 223) > BezierCurve(x0: 770, y0: 223, x1: 774, y1: 221, cx0: 771, cy0: 223, cx1: 773, cy1: 222))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 765, y0: 222, x1: 764, y1: 217, cx0: 764, cy0: 221, cx1: 764, cy1: 219) > BezierCurve(x0: 764, y0: 217, x1: 765, y1: 213, cx0: 764, cy0: 215, cx1: 764, cy1: 214) > BezierCurve(x0: 766, y0: 213, x1: 765, y1: 217, cx0: 765, cy0: 214, cx1: 765, cy1: 216) > BezierCurve(x0: 765, y0: 217, x1: 766, y1: 221, cx0: 765, cy0: 219, cx1: 765, cy1: 220))
-Clip: Path (BezierCurve(x0: 765, y0: 217, x1: 770, y1: 212, cx0: 765, cy0: 214, cx1: 767, cy1: 212) > BezierCurve(x0: 770, y0: 212, x1: 775, y1: 217, cx0: 773, cy0: 212, cx1: 775, cy1: 214) > BezierCurve(x0: 775, y0: 217, x1: 770, y1: 223, cx0: 775, cy0: 220, cx1: 773, cy1: 223) > BezierCurve(x0: 770, y0: 223, x1: 765, y1: 217, cx0: 767, cy0: 223, cx1: 765, cy1: 220))
-  Shape: rgb(42,42,42) Circle(x: 767, y: 214, r: 3)
-Clip: Path (BezierCurve(x0: 175, y0: 265, x1: 184, y1: 256, cx0: 175, cy0: 260, cx1: 179, cy1: 256) > BezierCurve(x0: 184, y0: 256, x1: 193, y1: 265, cx0: 189, cy0: 256, cx1: 193, cy1: 260) > BezierCurve(x0: 193, y0: 265, x1: 184, y1: 274, cx0: 193, cy0: 270, cx1: 189, cy1: 274) > BezierCurve(x0: 184, y0: 274, x1: 175, y1: 265, cx0: 179, cy0: 274, cx1: 175, cy1: 270))
-  Fill: rgb(222,222,222)
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 177, y0: 258, x1: 184, y1: 255, cx0: 178, cy0: 256, cx1: 181, cy1: 255) > BezierCurve(x0: 184, y0: 255, x1: 191, y1: 258, cx0: 186, cy0: 255, cx1: 189, cy1: 256) > BezierCurve(x0: 190, y0: 259, x1: 184, y1: 256, cx0: 188, cy0: 257, cx1: 186, cy1: 256) > BezierCurve(x0: 184, y0: 256, x1: 177, y1: 259, cx0: 181, cy0: 256, cx1: 179, cy1: 257))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 191, y0: 258, x1: 194, y1: 265, cx0: 192, cy0: 260, cx1: 194, cy1: 262) > BezierCurve(x0: 194, y0: 265, x1: 191, y1: 272, cx0: 194, cy0: 268, cx1: 192, cy1: 270) > BezierCurve(x0: 190, y0: 272, x1: 193, y1: 265, cx0: 192, cy0: 270, cx1: 193, cy1: 268) > BezierCurve(x0: 193, y0: 265, x1: 190, y1: 259, cx0: 193, cy0: 263, cx1: 192, cy1: 260))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 191, y0: 272, x1: 184, y1: 275, cx0: 189, cy0: 274, cx1: 186, cy1: 275) > BezierCurve(x0: 184, y0: 275, x1: 177, y1: 272, cx0: 181, cy0: 275, cx1: 178, cy1: 274) > BezierCurve(x0: 177, y0: 272, x1: 184, y1: 274, cx0: 179, cy0: 273, cx1: 181, cy1: 274) > BezierCurve(x0: 184, y0: 274, x1: 190, y1: 272, cx0: 186, cy0: 274, cx1: 188, cy1: 273))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 177, y0: 272, x1: 174, y1: 265, cx0: 175, cy0: 270, cx1: 174, cy1: 268) > BezierCurve(x0: 174, y0: 265, x1: 177, y1: 258, cx0: 174, cy0: 262, cx1: 175, cy1: 260) > BezierCurve(x0: 177, y0: 259, x1: 175, y1: 265, cx0: 176, cy0: 260, cx1: 175, cy1: 263) > BezierCurve(x0: 175, y0: 265, x1: 177, y1: 272, cx0: 175, cy0: 268, cx1: 176, cy1: 270))
-Clip: Path (BezierCurve(x0: 175, y0: 265, x1: 184, y1: 256, cx0: 175, cy0: 260, cx1: 179, cy1: 256) > BezierCurve(x0: 184, y0: 256, x1: 193, y1: 265, cx0: 189, cy0: 256, cx1: 193, cy1: 260) > BezierCurve(x0: 193, y0: 265, x1: 184, y1: 274, cx0: 193, cy0: 270, cx1: 189, cy1: 274) > BezierCurve(x0: 184, y0: 274, x1: 175, y1: 265, cx0: 179, cy0: 274, cx1: 175, cy1: 270))
-Clip: Path (BezierCurve(x0: 309, y0: 355, x1: 408, y1: 256, cx0: 309, cy0: 301, cx1: 353, cy1: 256) > BezierCurve(x0: 408, y0: 256, x1: 507, y1: 355, cx0: 462, cy0: 256, cx1: 507, cy1: 301) > BezierCurve(x0: 507, y0: 355, x1: 408, y1: 454, cx0: 507, cy0: 410, cx1: 462, cy1: 454) > BezierCurve(x0: 408, y0: 454, x1: 309, y1: 355, cx0: 353, cy0: 454, cx1: 309, cy1: 410))
-  Fill: rgb(222,222,222)
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 337, y0: 284, x1: 408, y1: 255, cx0: 355, cy0: 266, cx1: 380, cy1: 255) > BezierCurve(x0: 408, y0: 255, x1: 478, y1: 284, cx0: 435, cy0: 255, cx1: 460, cy1: 266) > BezierCurve(x0: 478, y0: 285, x1: 408, y1: 256, cx0: 460, cy0: 267, cx1: 435, cy1: 256) > BezierCurve(x0: 408, y0: 256, x1: 338, y1: 285, cx0: 380, cy0: 256, cx1: 356, cy1: 267))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 478, y0: 284, x1: 508, y1: 355, cx0: 496, cy0: 303, cx1: 508, cy1: 328) > BezierCurve(x0: 508, y0: 355, x1: 478, y1: 426, cx0: 508, cy0: 383, cx1: 496, cy1: 408) > BezierCurve(x0: 478, y0: 425, x1: 507, y1: 355, cx0: 496, cy0: 407, cx1: 507, cy1: 383) > BezierCurve(x0: 507, y0: 355, x1: 478, y1: 285, cx0: 507, cy0: 328, cx1: 496, cy1: 303))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 478, y0: 426, x1: 408, y1: 455, cx0: 460, cy0: 444, cx1: 435, cy1: 455) > BezierCurve(x0: 408, y0: 455, x1: 337, y1: 426, cx0: 380, cy0: 455, cx1: 355, cy1: 444) > BezierCurve(x0: 338, y0: 425, x1: 408, y1: 454, cx0: 356, cy0: 443, cx1: 380, cy1: 454) > BezierCurve(x0: 408, y0: 454, x1: 478, y1: 425, cx0: 435, cy0: 454, cx1: 460, cy1: 443))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 337, y0: 426, x1: 308, y1: 355, cx0: 319, cy0: 408, cx1: 308, cy1: 383) > BezierCurve(x0: 308, y0: 355, x1: 337, y1: 284, cx0: 308, cy0: 328, cx1: 319, cy1: 303) > BezierCurve(x0: 338, y0: 285, x1: 309, y1: 355, cx0: 320, cy0: 303, cx1: 309, cy1: 328) > BezierCurve(x0: 309, y0: 355, x1: 338, y1: 425, cx0: 309, cy0: 383, cx1: 320, cy1: 407))
-Clip: Path (BezierCurve(x0: 309, y0: 355, x1: 408, y1: 256, cx0: 309, cy0: 301, cx1: 353, cy1: 256) > BezierCurve(x0: 408, y0: 256, x1: 507, y1: 355, cx0: 462, cy0: 256, cx1: 507, cy1: 301) > BezierCurve(x0: 507, y0: 355, x1: 408, y1: 454, cx0: 507, cy0: 410, cx1: 462, cy1: 454) > BezierCurve(x0: 408, y0: 454, x1: 309, y1: 355, cx0: 353, cy0: 454, cx1: 309, cy1: 410))
-Clip: Path (BezierCurve(x0: 533, y0: 355, x1: 632, y1: 256, cx0: 533, cy0: 301, cx1: 577, cy1: 256) > BezierCurve(x0: 632, y0: 256, x1: 731, y1: 355, cx0: 686, cy0: 256, cx1: 731, cy1: 301) > BezierCurve(x0: 731, y0: 355, x1: 632, y1: 454, cx0: 731, cy0: 410, cx1: 686, cy1: 454) > BezierCurve(x0: 632, y0: 454, x1: 533, y1: 355, cx0: 577, cy0: 454, cx1: 533, cy1: 410))
-  Fill: rgb(222,222,222)
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 561, y0: 284, x1: 632, y1: 255, cx0: 579, cy0: 266, cx1: 604, cy1: 255) > BezierCurve(x0: 632, y0: 255, x1: 702, y1: 284, cx0: 659, cy0: 255, cx1: 684, cy1: 266) > BezierCurve(x0: 702, y0: 285, x1: 632, y1: 256, cx0: 684, cy0: 267, cx1: 659, cy1: 256) > BezierCurve(x0: 632, y0: 256, x1: 562, y1: 285, cx0: 604, cy0: 256, cx1: 580, cy1: 267))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 702, y0: 284, x1: 732, y1: 355, cx0: 720, cy0: 303, cx1: 732, cy1: 328) > BezierCurve(x0: 732, y0: 355, x1: 702, y1: 426, cx0: 732, cy0: 383, cx1: 720, cy1: 408) > BezierCurve(x0: 702, y0: 425, x1: 731, y1: 355, cx0: 720, cy0: 407, cx1: 731, cy1: 383) > BezierCurve(x0: 731, y0: 355, x1: 702, y1: 285, cx0: 731, cy0: 328, cx1: 720, cy1: 303))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 702, y0: 426, x1: 632, y1: 455, cx0: 684, cy0: 444, cx1: 659, cy1: 455) > BezierCurve(x0: 632, y0: 455, x1: 561, y1: 426, cx0: 604, cy0: 455, cx1: 579, cy1: 444) > BezierCurve(x0: 562, y0: 425, x1: 632, y1: 454, cx0: 580, cy0: 443, cx1: 604, cy1: 454) > BezierCurve(x0: 632, y0: 454, x1: 702, y1: 425, cx0: 659, cy0: 454, cx1: 684, cy1: 443))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 561, y0: 426, x1: 532, y1: 355, cx0: 543, cy0: 408, cx1: 532, cy1: 383) > BezierCurve(x0: 532, y0: 355, x1: 561, y1: 284, cx0: 532, cy0: 328, cx1: 543, cy1: 303) > BezierCurve(x0: 562, y0: 285, x1: 533, y1: 355, cx0: 544, cy0: 303, cx1: 533, cy1: 328) > BezierCurve(x0: 533, y0: 355, x1: 562, y1: 425, cx0: 533, cy0: 383, cx1: 544, cy1: 407))
-Clip: Path (BezierCurve(x0: 533, y0: 355, x1: 632, y1: 256, cx0: 533, cy0: 301, cx1: 577, cy1: 256) > BezierCurve(x0: 632, y0: 256, x1: 731, y1: 355, cx0: 686, cy0: 256, cx1: 731, cy1: 301) > BezierCurve(x0: 731, y0: 355, x1: 632, y1: 454, cx0: 731, cy0: 410, cx1: 686, cy1: 454) > BezierCurve(x0: 632, y0: 454, x1: 533, y1: 355, cx0: 577, cy0: 454, cx1: 533, cy1: 410))
-  Shape: rgb(42,42,42) Circle(x: 582, y: 305, r: 50)
-Clip: Path (BezierCurve(x0: 757, y0: 262, x1: 759, y1: 260, cx0: 757, cy0: 261, cx1: 757, cy1: 260) > BezierCurve(x0: 765, y0: 260, x1: 767, y1: 262, cx0: 767, cy0: 260, cx1: 767, cy1: 261) > BezierCurve(x0: 767, y0: 269, x1: 765, y1: 271, cx0: 767, cy0: 270, cx1: 767, cy1: 271) > BezierCurve(x0: 759, y0: 271, x1: 757, y1: 269, cx0: 757, cy0: 271, cx1: 757, cy1: 270))
-  Fill: rgb(222,222,222)
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 756, y0: 260, x1: 759, y1: 259, cx0: 757, cy0: 259, cx1: 758, cy1: 259) > BezierCurve(x0: 765, y0: 259, x1: 768, y1: 260, cx0: 766, cy0: 259, cx1: 767, cy1: 259) > BezierCurve(x0: 767, y0: 260, x1: 765, y1: 260, cx0: 766, cy0: 260, cx1: 766, cy1: 260) > BezierCurve(x0: 759, y0: 260, x1: 757, y1: 260, cx0: 758, cy0: 260, cx1: 758, cy1: 260))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 768, y0: 260, x1: 768, y1: 262, cx0: 768, cy0: 260, cx1: 768, cy1: 261) > BezierCurve(x0: 768, y0: 269, x1: 768, y1: 271, cx0: 768, cy0: 269, cx1: 768, cy1: 270) > BezierCurve(x0: 767, y0: 270, x1: 767, y1: 269, cx0: 767, cy0: 270, cx1: 767, cy1: 269) > BezierCurve(x0: 767, y0: 262, x1: 767, y1: 260, cx0: 767, cy0: 261, cx1: 767, cy1: 261))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 768, y0: 271, x1: 765, y1: 272, cx0: 767, cy0: 271, cx1: 766, cy1: 272) > BezierCurve(x0: 759, y0: 272, x1: 756, y1: 271, cx0: 758, cy0: 272, cx1: 757, cy1: 271) > BezierCurve(x0: 757, y0: 270, x1: 759, y1: 271, cx0: 758, cy0: 270, cx1: 758, cy1: 271) > BezierCurve(x0: 765, y0: 271, x1: 767, y1: 270, cx0: 766, cy0: 271, cx1: 766, cy1: 270))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 756, y0: 271, x1: 756, y1: 269, cx0: 756, cy0: 270, cx1: 756, cy1: 269) > BezierCurve(x0: 756, y0: 262, x1: 756, y1: 260, cx0: 756, cy0: 261, cx1: 756, cy1: 260) > BezierCurve(x0: 757, y0: 260, x1: 757, y1: 262, cx0: 757, cy0: 261, cx1: 757, cy1: 261) > BezierCurve(x0: 757, y0: 269, x1: 757, y1: 270, cx0: 757, cy0: 269, cx1: 757, cy1: 270))
-Clip: Path (BezierCurve(x0: 757, y0: 262, x1: 759, y1: 260, cx0: 757, cy0: 261, cx1: 757, cy1: 260) > BezierCurve(x0: 765, y0: 260, x1: 767, y1: 262, cx0: 767, cy0: 260, cx1: 767, cy1: 261) > BezierCurve(x0: 767, y0: 269, x1: 765, y1: 271, cx0: 767, cy0: 270, cx1: 767, cy1: 271) > BezierCurve(x0: 759, y0: 271, x1: 757, y1: 269, cx0: 757, cy0: 271, cx1: 757, cy1: 270))
-Clip: Path (BezierCurve(x0: 48, y0: 482, x1: 50, y1: 480, cx0: 48, cy0: 481, cx1: 49, cy1: 480) > BezierCurve(x0: 57, y0: 480, x1: 59, y1: 482, cx0: 58, cy0: 480, cx1: 59, cy1: 481) > BezierCurve(x0: 59, y0: 489, x1: 57, y1: 491, cx0: 59, cy0: 490, cx1: 58, cy1: 491) > BezierCurve(x0: 50, y0: 491, x1: 48, y1: 489, cx0: 49, cy0: 491, cx1: 48, cy1: 490))
-  Fill: rgb(222,222,222)
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 48, y0: 480, x1: 50, y1: 479, cx0: 48, cy0: 479, cx1: 49, cy1: 479) > BezierCurve(x0: 57, y0: 479, x1: 59, y1: 480, cx0: 57, cy0: 479, cx1: 58, cy1: 479) > BezierCurve(x0: 58, y0: 480, x1: 57, y1: 480, cx0: 58, cy0: 480, cx1: 57, cy1: 480) > BezierCurve(x0: 50, y0: 480, x1: 48, y1: 480, cx0: 49, cy0: 480, cx1: 49, cy1: 480))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 59, y0: 480, x1: 60, y1: 482, cx0: 59, cy0: 480, cx1: 60, cy1: 481) > BezierCurve(x0: 60, y0: 489, x1: 59, y1: 491, cx0: 60, cy0: 489, cx1: 59, cy1: 490) > BezierCurve(x0: 58, y0: 490, x1: 59, y1: 489, cx0: 58, cy0: 490, cx1: 59, cy1: 489) > BezierCurve(x0: 59, y0: 482, x1: 58, y1: 480, cx0: 59, cy0: 481, cx1: 58, cy1: 481))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 59, y0: 491, x1: 57, y1: 492, cx0: 58, cy0: 491, cx1: 57, cy1: 492) > BezierCurve(x0: 50, y0: 492, x1: 48, y1: 491, cx0: 49, cy0: 492, cx1: 48, cy1: 491) > BezierCurve(x0: 48, y0: 490, x1: 50, y1: 491, cx0: 49, cy0: 490, cx1: 49, cy1: 491) > BezierCurve(x0: 57, y0: 491, x1: 58, y1: 490, cx0: 57, cy0: 491, cx1: 58, cy1: 490))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 48, y0: 491, x1: 47, y1: 489, cx0: 47, cy0: 490, cx1: 47, cy1: 489) > BezierCurve(x0: 47, y0: 482, x1: 48, y1: 480, cx0: 47, cy0: 481, cx1: 47, cy1: 480) > BezierCurve(x0: 48, y0: 480, x1: 48, y1: 482, cx0: 48, cy0: 481, cx1: 48, cy1: 481) > BezierCurve(x0: 48, y0: 489, x1: 48, y1: 490, cx0: 48, cy0: 489, cx1: 48, cy1: 490))
-Clip: Path (BezierCurve(x0: 48, y0: 482, x1: 50, y1: 480, cx0: 48, cy0: 481, cx1: 49, cy1: 480) > BezierCurve(x0: 57, y0: 480, x1: 59, y1: 482, cx0: 58, cy0: 480, cx1: 59, cy1: 481) > BezierCurve(x0: 59, y0: 489, x1: 57, y1: 491, cx0: 59, cy0: 490, cx1: 58, cy1: 491) > BezierCurve(x0: 50, y0: 491, x1: 48, y1: 489, cx0: 49, cy0: 491, cx1: 48, cy1: 490))
-  Shape: rgb(42,42,42) Path (Vector(x: 52, y: 489) > Vector(x: 49, y: 486) > Vector(x: 50, y: 484) > Vector(x: 52, y: 486) > Vector(x: 56, y: 482) > Vector(x: 58, y: 483) > Vector(x: 52, y: 489))
-Clip: Path (BezierCurve(x0: 248, y0: 478, x1: 250, y1: 476, cx0: 248, cy0: 477, cx1: 249, cy1: 476) > BezierCurve(x0: 264, y0: 476, x1: 266, y1: 478, cx0: 265, cy0: 476, cx1: 266, cy1: 477) > BezierCurve(x0: 266, y0: 492, x1: 264, y1: 494, cx0: 266, cy0: 493, cx1: 265, cy1: 494) > BezierCurve(x0: 250, y0: 494, x1: 248, y1: 492, cx0: 249, cy0: 494, cx1: 248, cy1: 493))
-  Fill: rgb(222,222,222)
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 248, y0: 476, x1: 250, y1: 475, cx0: 249, cy0: 476, cx1: 249, cy1: 475) > BezierCurve(x0: 264, y0: 475, x1: 266, y1: 476, cx0: 265, cy0: 475, cx1: 266, cy1: 476) > BezierCurve(x0: 266, y0: 477, x1: 264, y1: 476, cx0: 265, cy0: 476, cx1: 265, cy1: 476) > BezierCurve(x0: 250, y0: 476, x1: 249, y1: 477, cx0: 250, cy0: 476, cx1: 249, cy1: 476))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 266, y0: 476, x1: 267, y1: 478, cx0: 267, cy0: 477, cx1: 267, cy1: 477) > BezierCurve(x0: 267, y0: 492, x1: 266, y1: 494, cx0: 267, cy0: 493, cx1: 267, cy1: 494) > BezierCurve(x0: 266, y0: 494, x1: 266, y1: 492, cx0: 266, cy0: 493, cx1: 266, cy1: 493) > BezierCurve(x0: 266, y0: 478, x1: 266, y1: 477, cx0: 266, cy0: 478, cx1: 266, cy1: 477))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 266, y0: 494, x1: 264, y1: 495, cx0: 266, cy0: 495, cx1: 265, cy1: 495) > BezierCurve(x0: 250, y0: 495, x1: 248, y1: 494, cx0: 249, cy0: 495, cx1: 249, cy1: 495) > BezierCurve(x0: 249, y0: 494, x1: 250, y1: 494, cx0: 249, cy0: 494, cx1: 250, cy1: 494) > BezierCurve(x0: 264, y0: 494, x1: 266, y1: 494, cx0: 265, cy0: 494, cx1: 265, cy1: 494))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 248, y0: 494, x1: 247, y1: 492, cx0: 248, cy0: 494, cx1: 247, cy1: 493) > BezierCurve(x0: 247, y0: 478, x1: 248, y1: 476, cx0: 247, cy0: 477, cx1: 248, cy1: 477) > BezierCurve(x0: 249, y0: 477, x1: 248, y1: 478, cx0: 248, cy0: 477, cx1: 248, cy1: 478) > BezierCurve(x0: 248, y0: 492, x1: 249, y1: 494, cx0: 248, cy0: 493, cx1: 248, cy1: 493))
-Clip: Path (BezierCurve(x0: 248, y0: 478, x1: 250, y1: 476, cx0: 248, cy0: 477, cx1: 249, cy1: 476) > BezierCurve(x0: 264, y0: 476, x1: 266, y1: 478, cx0: 265, cy0: 476, cx1: 266, cy1: 477) > BezierCurve(x0: 266, y0: 492, x1: 264, y1: 494, cx0: 266, cy0: 493, cx1: 265, cy1: 494) > BezierCurve(x0: 250, y0: 494, x1: 248, y1: 492, cx0: 249, cy0: 494, cx1: 248, cy1: 493))
-Clip: Path (BezierCurve(x0: 382, y0: 478, x1: 384, y1: 476, cx0: 382, cy0: 477, cx1: 383, cy1: 476) > BezierCurve(x0: 578, y0: 476, x1: 580, y1: 478, cx0: 579, cy0: 476, cx1: 580, cy1: 477) > BezierCurve(x0: 580, y0: 672, x1: 578, y1: 674, cx0: 580, cy0: 673, cx1: 579, cy1: 674) > BezierCurve(x0: 384, y0: 674, x1: 382, y1: 672, cx0: 383, cy0: 674, cx1: 382, cy1: 673))
-  Fill: rgb(222,222,222)
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 382, y0: 476, x1: 384, y1: 475, cx0: 383, cy0: 476, cx1: 383, cy1: 475) > BezierCurve(x0: 578, y0: 475, x1: 580, y1: 476, cx0: 579, cy0: 475, cx1: 580, cy1: 476) > BezierCurve(x0: 580, y0: 477, x1: 578, y1: 476, cx0: 579, cy0: 476, cx1: 579, cy1: 476) > BezierCurve(x0: 384, y0: 476, x1: 383, y1: 477, cx0: 384, cy0: 476, cx1: 383, cy1: 476))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 580, y0: 476, x1: 581, y1: 478, cx0: 581, cy0: 477, cx1: 581, cy1: 477) > BezierCurve(x0: 581, y0: 672, x1: 580, y1: 674, cx0: 581, cy0: 673, cx1: 581, cy1: 674) > BezierCurve(x0: 580, y0: 674, x1: 580, y1: 672, cx0: 580, cy0: 673, cx1: 580, cy1: 673) > BezierCurve(x0: 580, y0: 478, x1: 580, y1: 477, cx0: 580, cy0: 478, cx1: 580, cy1: 477))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 580, y0: 674, x1: 578, y1: 675, cx0: 580, cy0: 675, cx1: 579, cy1: 675) > BezierCurve(x0: 384, y0: 675, x1: 382, y1: 674, cx0: 383, cy0: 675, cx1: 383, cy1: 675) > BezierCurve(x0: 383, y0: 674, x1: 384, y1: 674, cx0: 383, cy0: 674, cx1: 384, cy1: 674) > BezierCurve(x0: 578, y0: 674, x1: 580, y1: 674, cx0: 579, cy0: 674, cx1: 579, cy1: 674))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 382, y0: 674, x1: 381, y1: 672, cx0: 382, cy0: 674, cx1: 381, cy1: 673) > BezierCurve(x0: 381, y0: 478, x1: 382, y1: 476, cx0: 381, cy0: 477, cx1: 382, cy1: 477) > BezierCurve(x0: 383, y0: 477, x1: 382, y1: 478, cx0: 382, cy0: 477, cx1: 382, cy1: 478) > BezierCurve(x0: 382, y0: 672, x1: 383, y1: 674, cx0: 382, cy0: 673, cx1: 382, cy1: 673))
-Clip: Path (BezierCurve(x0: 382, y0: 478, x1: 384, y1: 476, cx0: 382, cy0: 477, cx1: 383, cy1: 476) > BezierCurve(x0: 578, y0: 476, x1: 580, y1: 478, cx0: 579, cy0: 476, cx1: 580, cy1: 477) > BezierCurve(x0: 580, y0: 672, x1: 578, y1: 674, cx0: 580, cy0: 673, cx1: 579, cy1: 674) > BezierCurve(x0: 384, y0: 674, x1: 382, y1: 672, cx0: 383, cy0: 674, cx1: 382, cy1: 673))
-Clip: Path (BezierCurve(x0: 11, y0: 698, x1: 13, y1: 696, cx0: 11, cy0: 697, cx1: 12, cy1: 696) > BezierCurve(x0: 207, y0: 696, x1: 209, y1: 698, cx0: 208, cy0: 696, cx1: 209, cy1: 697) > BezierCurve(x0: 209, y0: 892, x1: 207, y1: 894, cx0: 209, cy0: 893, cx1: 208, cy1: 894) > BezierCurve(x0: 13, y0: 894, x1: 11, y1: 892, cx0: 12, cy0: 894, cx1: 11, cy1: 893))
-  Fill: rgb(222,222,222)
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 11, y0: 696, x1: 13, y1: 695, cx0: 11, cy0: 696, cx1: 12, cy1: 695) > BezierCurve(x0: 207, y0: 695, x1: 209, y1: 696, cx0: 208, cy0: 695, cx1: 209, cy1: 696) > BezierCurve(x0: 208, y0: 697, x1: 207, y1: 696, cx0: 208, cy0: 696, cx1: 208, cy1: 696) > BezierCurve(x0: 13, y0: 696, x1: 12, y1: 697, cx0: 12, cy0: 696, cx1: 12, cy1: 696))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 209, y0: 696, x1: 210, y1: 698, cx0: 210, cy0: 697, cx1: 210, cy1: 697) > BezierCurve(x0: 210, y0: 892, x1: 209, y1: 894, cx0: 210, cy0: 893, cx1: 210, cy1: 894) > BezierCurve(x0: 208, y0: 894, x1: 209, y1: 892, cx0: 209, cy0: 893, cx1: 209, cy1: 893) > BezierCurve(x0: 209, y0: 698, x1: 208, y1: 697, cx0: 209, cy0: 698, cx1: 209, cy1: 697))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 209, y0: 894, x1: 207, y1: 895, cx0: 209, cy0: 895, cx1: 208, cy1: 895) > BezierCurve(x0: 13, y0: 895, x1: 11, y1: 894, cx0: 12, cy0: 895, cx1: 11, cy1: 895) > BezierCurve(x0: 12, y0: 894, x1: 13, y1: 894, cx0: 12, cy0: 894, cx1: 12, cy1: 894) > BezierCurve(x0: 207, y0: 894, x1: 208, y1: 894, cx0: 208, cy0: 894, cx1: 208, cy1: 894))
-Shape: rgb(165,165,165) Path (BezierCurve(x0: 11, y0: 894, x1: 10, y1: 892, cx0: 10, cy0: 894, cx1: 10, cy1: 893) > BezierCurve(x0: 10, y0: 698, x1: 11, y1: 696, cx0: 10, cy0: 697, cx1: 10, cy1: 697) > BezierCurve(x0: 12, y0: 697, x1: 11, y1: 698, cx0: 11, cy0: 697, cx1: 11, cy1: 698) > BezierCurve(x0: 11, y0: 892, x1: 12, y1: 894, cx0: 11, cy0: 893, cx1: 11, cy1: 893))
-Clip: Path (BezierCurve(x0: 11, y0: 698, x1: 13, y1: 696, cx0: 11, cy0: 697, cx1: 12, cy1: 696) > BezierCurve(x0: 207, y0: 696, x1: 209, y1: 698, cx0: 208, cy0: 696, cx1: 209, cy1: 697) > BezierCurve(x0: 209, y0: 892, x1: 207, y1: 894, cx0: 209, cy0: 893, cx1: 208, cy1: 894) > BezierCurve(x0: 13, y0: 894, x1: 11, y1: 892, cx0: 12, cy0: 894, cx1: 11, cy1: 893))
-  Shape: rgb(42,42,42) Path (Vector(x: 89, y: 853) > Vector(x: 42, y: 806) > Vector(x: 65, y: 783) > Vector(x: 89, y: 808) > Vector(x: 156, y: 741) > Vector(x: 178, y: 763) > Vector(x: 89, y: 853))
-Transform: (733, 221) [3, 0, 0, 3, 0, 0]
-  Clip: Path (BezierCurve(x0: 728, y0: 217, x1: 733, y1: 212, cx0: 728, cy0: 214, cx1: 730, cy1: 212) > BezierCurve(x0: 733, y0: 212, x1: 739, y1: 217, cx0: 736, cy0: 212, cx1: 739, cy1: 214) > BezierCurve(x0: 739, y0: 217, x1: 733, y1: 223, cx0: 739, cy0: 220, cx1: 736, cy1: 223) > BezierCurve(x0: 733, y0: 223, x1: 728, y1: 217, cx0: 730, cy0: 223, cx1: 728, cy1: 220))
-    Fill: rgb(222,222,222)
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 729, y0: 213, x1: 733, y1: 211, cx0: 730, cy0: 212, cx1: 731, cy1: 211) > BezierCurve(x0: 733, y0: 211, x1: 738, y1: 213, cx0: 735, cy0: 211, cx1: 737, cy1: 212) > BezierCurve(x0: 737, y0: 213, x1: 733, y1: 212, cx0: 736, cy0: 212, cx1: 735, cy1: 212) > BezierCurve(x0: 733, y0: 212, x1: 729, y1: 213, cx0: 732, cy0: 212, cx1: 730, cy1: 212))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 738, y0: 213, x1: 740, y1: 217, cx0: 739, cy0: 214, cx1: 740, cy1: 215) > BezierCurve(x0: 740, y0: 217, x1: 738, y1: 222, cx0: 740, cy0: 219, cx1: 739, cy1: 221) > BezierCurve(x0: 737, y0: 221, x1: 739, y1: 217, cx0: 738, cy0: 220, cx1: 739, cy1: 219) > BezierCurve(x0: 739, y0: 217, x1: 737, y1: 213, cx0: 739, cy0: 216, cx1: 738, cy1: 214))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 738, y0: 222, x1: 733, y1: 224, cx0: 737, cy0: 223, cx1: 735, cy1: 224) > BezierCurve(x0: 733, y0: 224, x1: 729, y1: 222, cx0: 731, cy0: 224, cx1: 730, cy1: 223) > BezierCurve(x0: 729, y0: 221, x1: 733, y1: 223, cx0: 730, cy0: 222, cx1: 732, cy1: 223) > BezierCurve(x0: 733, y0: 223, x1: 737, y1: 221, cx0: 735, cy0: 223, cx1: 736, cy1: 222))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 729, y0: 222, x1: 727, y1: 217, cx0: 728, cy0: 221, cx1: 727, cy1: 219) > BezierCurve(x0: 727, y0: 217, x1: 729, y1: 213, cx0: 727, cy0: 215, cx1: 728, cy1: 214) > BezierCurve(x0: 729, y0: 213, x1: 728, y1: 217, cx0: 728, cy0: 214, cx1: 728, cy1: 216) > BezierCurve(x0: 728, y0: 217, x1: 729, y1: 221, cx0: 728, cy0: 219, cx1: 728, cy1: 220))
-  Clip: Path (BezierCurve(x0: 728, y0: 217, x1: 733, y1: 212, cx0: 728, cy0: 214, cx1: 730, cy1: 212) > BezierCurve(x0: 733, y0: 212, x1: 739, y1: 217, cx0: 736, cy0: 212, cx1: 739, cy1: 214) > BezierCurve(x0: 739, y0: 217, x1: 733, y1: 223, cx0: 739, cy0: 220, cx1: 736, cy1: 223) > BezierCurve(x0: 733, y0: 223, x1: 728, y1: 217, cx0: 730, cy0: 223, cx1: 728, cy1: 220))
-Transform: (16, 269) [3, 0, 0, 3, 0, 0]
-  Clip: Path (BezierCurve(x0: 11, y0: 265, x1: 16, y1: 260, cx0: 11, cy0: 262, cx1: 13, cy1: 260) > BezierCurve(x0: 16, y0: 260, x1: 22, y1: 265, cx0: 19, cy0: 260, cx1: 22, cy1: 262) > BezierCurve(x0: 22, y0: 265, x1: 16, y1: 271, cx0: 22, cy0: 268, cx1: 19, cy1: 271) > BezierCurve(x0: 16, y0: 271, x1: 11, y1: 265, cx0: 13, cy0: 271, cx1: 11, cy1: 268))
-    Fill: rgb(222,222,222)
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 12, y0: 261, x1: 16, y1: 259, cx0: 13, cy0: 260, cx1: 15, cy1: 259) > BezierCurve(x0: 16, y0: 259, x1: 21, y1: 261, cx0: 18, cy0: 259, cx1: 20, cy1: 260) > BezierCurve(x0: 20, y0: 261, x1: 16, y1: 260, cx0: 19, cy0: 260, cx1: 18, cy1: 260) > BezierCurve(x0: 16, y0: 260, x1: 13, y1: 261, cx0: 15, cy0: 260, cx1: 14, cy1: 260))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 21, y0: 261, x1: 23, y1: 265, cx0: 22, cy0: 262, cx1: 23, cy1: 263) > BezierCurve(x0: 23, y0: 265, x1: 21, y1: 270, cx0: 23, cy0: 267, cx1: 22, cy1: 269) > BezierCurve(x0: 20, y0: 269, x1: 22, y1: 265, cx0: 21, cy0: 268, cx1: 22, cy1: 267) > BezierCurve(x0: 22, y0: 265, x1: 20, y1: 261, cx0: 22, cy0: 264, cx1: 21, cy1: 262))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 21, y0: 270, x1: 16, y1: 272, cx0: 20, cy0: 271, cx1: 18, cy1: 272) > BezierCurve(x0: 16, y0: 272, x1: 12, y1: 270, cx0: 15, cy0: 272, cx1: 13, cy1: 271) > BezierCurve(x0: 13, y0: 269, x1: 16, y1: 271, cx0: 14, cy0: 270, cx1: 15, cy1: 271) > BezierCurve(x0: 16, y0: 271, x1: 20, y1: 269, cx0: 18, cy0: 271, cx1: 19, cy1: 270))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 12, y0: 270, x1: 10, y1: 265, cx0: 11, cy0: 269, cx1: 10, cy1: 267) > BezierCurve(x0: 10, y0: 265, x1: 12, y1: 261, cx0: 10, cy0: 263, cx1: 11, cy1: 262) > BezierCurve(x0: 13, y0: 261, x1: 11, y1: 265, cx0: 12, cy0: 262, cx1: 11, cy1: 264) > BezierCurve(x0: 11, y0: 265, x1: 13, y1: 269, cx0: 11, cy0: 267, cx1: 12, cy1: 268))
-  Clip: Path (BezierCurve(x0: 11, y0: 265, x1: 16, y1: 260, cx0: 11, cy0: 262, cx1: 13, cy1: 260) > BezierCurve(x0: 16, y0: 260, x1: 22, y1: 265, cx0: 19, cy0: 260, cx1: 22, cy1: 262) > BezierCurve(x0: 22, y0: 265, x1: 16, y1: 271, cx0: 22, cy0: 268, cx1: 19, cy1: 271) > BezierCurve(x0: 16, y0: 271, x1: 11, y1: 265, cx0: 13, cy0: 271, cx1: 11, cy1: 268))
-    Shape: rgb(42,42,42) Circle(x: 13, y: 262, r: 3)
-Transform: (53, 269) [3, 0, 0, 3, 0, 0]
-  Clip: Path (BezierCurve(x0: 48, y0: 265, x1: 53, y1: 260, cx0: 48, cy0: 262, cx1: 50, cy1: 260) > BezierCurve(x0: 53, y0: 260, x1: 59, y1: 265, cx0: 56, cy0: 260, cx1: 59, cy1: 262) > BezierCurve(x0: 59, y0: 265, x1: 53, y1: 271, cx0: 59, cy0: 268, cx1: 56, cy1: 271) > BezierCurve(x0: 53, y0: 271, x1: 48, y1: 265, cx0: 50, cy0: 271, cx1: 48, cy1: 268))
-    Fill: rgb(222,222,222)
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 49, y0: 261, x1: 53, y1: 259, cx0: 50, cy0: 260, cx1: 51, cy1: 259) > BezierCurve(x0: 53, y0: 259, x1: 58, y1: 261, cx0: 55, cy0: 259, cx1: 57, cy1: 260) > BezierCurve(x0: 57, y0: 261, x1: 53, y1: 260, cx0: 56, cy0: 260, cx1: 55, cy1: 260) > BezierCurve(x0: 53, y0: 260, x1: 49, y1: 261, cx0: 52, cy0: 260, cx1: 50, cy1: 260))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 58, y0: 261, x1: 60, y1: 265, cx0: 59, cy0: 262, cx1: 60, cy1: 263) > BezierCurve(x0: 60, y0: 265, x1: 58, y1: 270, cx0: 60, cy0: 267, cx1: 59, cy1: 269) > BezierCurve(x0: 57, y0: 269, x1: 59, y1: 265, cx0: 58, cy0: 268, cx1: 59, cy1: 267) > BezierCurve(x0: 59, y0: 265, x1: 57, y1: 261, cx0: 59, cy0: 264, cx1: 58, cy1: 262))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 58, y0: 270, x1: 53, y1: 272, cx0: 57, cy0: 271, cx1: 55, cy1: 272) > BezierCurve(x0: 53, y0: 272, x1: 49, y1: 270, cx0: 51, cy0: 272, cx1: 50, cy1: 271) > BezierCurve(x0: 49, y0: 269, x1: 53, y1: 271, cx0: 50, cy0: 270, cx1: 52, cy1: 271) > BezierCurve(x0: 53, y0: 271, x1: 57, y1: 269, cx0: 55, cy0: 271, cx1: 56, cy1: 270))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 49, y0: 270, x1: 47, y1: 265, cx0: 48, cy0: 269, cx1: 47, cy1: 267) > BezierCurve(x0: 47, y0: 265, x1: 49, y1: 261, cx0: 47, cy0: 263, cx1: 48, cy1: 262) > BezierCurve(x0: 49, y0: 261, x1: 48, y1: 265, cx0: 48, cy0: 262, cx1: 48, cy1: 264) > BezierCurve(x0: 48, y0: 265, x1: 49, y1: 269, cx0: 48, cy0: 267, cx1: 48, cy1: 268))
-  Clip: Path (BezierCurve(x0: 48, y0: 265, x1: 53, y1: 260, cx0: 48, cy0: 262, cx1: 50, cy1: 260) > BezierCurve(x0: 53, y0: 260, x1: 59, y1: 265, cx0: 56, cy0: 260, cx1: 59, cy1: 262) > BezierCurve(x0: 59, y0: 265, x1: 53, y1: 271, cx0: 59, cy0: 268, cx1: 56, cy1: 271) > BezierCurve(x0: 53, y0: 271, x1: 48, y1: 265, cx0: 50, cy0: 271, cx1: 48, cy1: 268))
-Transform: (16, 489) [3, 0, 0, 3, 0, 0]
-  Clip: Path (BezierCurve(x0: 11, y0: 482, x1: 13, y1: 480, cx0: 11, cy0: 481, cx1: 12, cy1: 480) > BezierCurve(x0: 20, y0: 480, x1: 22, y1: 482, cx0: 21, cy0: 480, cx1: 22, cy1: 481) > BezierCurve(x0: 22, y0: 489, x1: 20, y1: 491, cx0: 22, cy0: 490, cx1: 21, cy1: 491) > BezierCurve(x0: 13, y0: 491, x1: 11, y1: 489, cx0: 12, cy0: 491, cx1: 11, cy1: 490))
-    Fill: rgb(222,222,222)
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 11, y0: 480, x1: 13, y1: 479, cx0: 11, cy0: 479, cx1: 12, cy1: 479) > BezierCurve(x0: 20, y0: 479, x1: 22, y1: 480, cx0: 21, cy0: 479, cx1: 21, cy1: 479) > BezierCurve(x0: 21, y0: 480, x1: 20, y1: 480, cx0: 21, cy0: 480, cx1: 20, cy1: 480) > BezierCurve(x0: 13, y0: 480, x1: 12, y1: 480, cx0: 12, cy0: 480, cx1: 12, cy1: 480))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 22, y0: 480, x1: 23, y1: 482, cx0: 22, cy0: 480, cx1: 23, cy1: 481) > BezierCurve(x0: 23, y0: 489, x1: 22, y1: 491, cx0: 23, cy0: 489, cx1: 22, cy1: 490) > BezierCurve(x0: 21, y0: 490, x1: 22, y1: 489, cx0: 22, cy0: 490, cx1: 22, cy1: 489) > BezierCurve(x0: 22, y0: 482, x1: 21, y1: 480, cx0: 22, cy0: 481, cx1: 22, cy1: 481))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 22, y0: 491, x1: 20, y1: 492, cx0: 21, cy0: 491, cx1: 21, cy1: 492) > BezierCurve(x0: 13, y0: 492, x1: 11, y1: 491, cx0: 12, cy0: 492, cx1: 11, cy1: 491) > BezierCurve(x0: 12, y0: 490, x1: 13, y1: 491, cx0: 12, cy0: 490, cx1: 12, cy1: 491) > BezierCurve(x0: 20, y0: 491, x1: 21, y1: 490, cx0: 20, cy0: 491, cx1: 21, cy1: 490))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 11, y0: 491, x1: 10, y1: 489, cx0: 10, cy0: 490, cx1: 10, cy1: 489) > BezierCurve(x0: 10, y0: 482, x1: 11, y1: 480, cx0: 10, cy0: 481, cx1: 10, cy1: 480) > BezierCurve(x0: 12, y0: 480, x1: 11, y1: 482, cx0: 11, cy0: 481, cx1: 11, cy1: 481) > BezierCurve(x0: 11, y0: 489, x1: 12, y1: 490, cx0: 11, cy0: 489, cx1: 11, cy1: 490))
-  Clip: Path (BezierCurve(x0: 11, y0: 482, x1: 13, y1: 480, cx0: 11, cy0: 481, cx1: 12, cy1: 480) > BezierCurve(x0: 20, y0: 480, x1: 22, y1: 482, cx0: 21, cy0: 480, cx1: 22, cy1: 481) > BezierCurve(x0: 22, y0: 489, x1: 20, y1: 491, cx0: 22, cy0: 490, cx1: 21, cy1: 491) > BezierCurve(x0: 13, y0: 491, x1: 11, y1: 489, cx0: 12, cy0: 491, cx1: 11, cy1: 490))
-Transform: (90, 489) [3, 0, 0, 3, 0, 0]
-  Clip: Path (BezierCurve(x0: 85, y0: 482, x1: 87, y1: 480, cx0: 85, cy0: 481, cx1: 85, cy1: 480) > BezierCurve(x0: 93, y0: 480, x1: 95, y1: 482, cx0: 95, cy0: 480, cx1: 95, cy1: 481) > BezierCurve(x0: 95, y0: 489, x1: 93, y1: 491, cx0: 95, cy0: 490, cx1: 95, cy1: 491) > BezierCurve(x0: 87, y0: 491, x1: 85, y1: 489, cx0: 85, cy0: 491, cx1: 85, cy1: 490))
-    Fill: rgb(222,222,222)
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 84, y0: 480, x1: 87, y1: 479, cx0: 85, cy0: 479, cx1: 86, cy1: 479) > BezierCurve(x0: 93, y0: 479, x1: 96, y1: 480, cx0: 94, cy0: 479, cx1: 95, cy1: 479) > BezierCurve(x0: 95, y0: 480, x1: 93, y1: 480, cx0: 94, cy0: 480, cx1: 94, cy1: 480) > BezierCurve(x0: 87, y0: 480, x1: 85, y1: 480, cx0: 86, cy0: 480, cx1: 86, cy1: 480))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 96, y0: 480, x1: 96, y1: 482, cx0: 96, cy0: 480, cx1: 96, cy1: 481) > BezierCurve(x0: 96, y0: 489, x1: 96, y1: 491, cx0: 96, cy0: 489, cx1: 96, cy1: 490) > BezierCurve(x0: 95, y0: 490, x1: 95, y1: 489, cx0: 95, cy0: 490, cx1: 95, cy1: 489) > BezierCurve(x0: 95, y0: 482, x1: 95, y1: 480, cx0: 95, cy0: 481, cx1: 95, cy1: 481))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 96, y0: 491, x1: 93, y1: 492, cx0: 95, cy0: 491, cx1: 94, cy1: 492) > BezierCurve(x0: 87, y0: 492, x1: 84, y1: 491, cx0: 86, cy0: 492, cx1: 85, cy1: 491) > BezierCurve(x0: 85, y0: 490, x1: 87, y1: 491, cx0: 86, cy0: 490, cx1: 86, cy1: 491) > BezierCurve(x0: 93, y0: 491, x1: 95, y1: 490, cx0: 94, cy0: 491, cx1: 94, cy1: 490))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 84, y0: 491, x1: 84, y1: 489, cx0: 84, cy0: 490, cx1: 84, cy1: 489) > BezierCurve(x0: 84, y0: 482, x1: 84, y1: 480, cx0: 84, cy0: 481, cx1: 84, cy1: 480) > BezierCurve(x0: 85, y0: 480, x1: 85, y1: 482, cx0: 85, cy0: 481, cx1: 85, cy1: 481) > BezierCurve(x0: 85, y0: 489, x1: 85, y1: 490, cx0: 85, cy0: 489, cx1: 85, cy1: 490))
-  Clip: Path (BezierCurve(x0: 85, y0: 482, x1: 87, y1: 480, cx0: 85, cy0: 481, cx1: 85, cy1: 480) > BezierCurve(x0: 93, y0: 480, x1: 95, y1: 482, cx0: 95, cy0: 480, cx1: 95, cy1: 481) > BezierCurve(x0: 95, y0: 489, x1: 93, y1: 491, cx0: 95, cy0: 490, cx1: 95, cy1: 491) > BezierCurve(x0: 87, y0: 491, x1: 85, y1: 489, cx0: 85, cy0: 491, cx1: 85, cy1: 490))
-    Shape: rgb(42,42,42) Path (Vector(x: 89, y: 489) > Vector(x: 86, y: 486) > Vector(x: 87, y: 484) > Vector(x: 89, y: 486) > Vector(x: 93, y: 482) > Vector(x: 94, y: 483) > Vector(x: 89, y: 489))
-Transform: (127, 489) [3, 0, 0, 3, 0, 0]
-  Clip: Path (BezierCurve(x0: 121, y0: 482, x1: 123, y1: 480, cx0: 121, cy0: 481, cx1: 122, cy1: 480) > BezierCurve(x0: 130, y0: 480, x1: 132, y1: 482, cx0: 131, cy0: 480, cx1: 132, cy1: 481) > BezierCurve(x0: 132, y0: 489, x1: 130, y1: 491, cx0: 132, cy0: 490, cx1: 131, cy1: 491) > BezierCurve(x0: 123, y0: 491, x1: 121, y1: 489, cx0: 122, cy0: 491, cx1: 121, cy1: 490))
-    Fill: rgb(222,222,222)
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 121, y0: 480, x1: 123, y1: 479, cx0: 122, cy0: 479, cx1: 123, cy1: 479) > BezierCurve(x0: 130, y0: 479, x1: 132, y1: 480, cx0: 131, cy0: 479, cx1: 132, cy1: 479) > BezierCurve(x0: 132, y0: 480, x1: 130, y1: 480, cx0: 131, cy0: 480, cx1: 131, cy1: 480) > BezierCurve(x0: 123, y0: 480, x1: 122, y1: 480, cx0: 123, cy0: 480, cx1: 122, cy1: 480))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 132, y0: 480, x1: 133, y1: 482, cx0: 133, cy0: 480, cx1: 133, cy1: 481) > BezierCurve(x0: 133, y0: 489, x1: 132, y1: 491, cx0: 133, cy0: 489, cx1: 133, cy1: 490) > BezierCurve(x0: 132, y0: 490, x1: 132, y1: 489, cx0: 132, cy0: 490, cx1: 132, cy1: 489) > BezierCurve(x0: 132, y0: 482, x1: 132, y1: 480, cx0: 132, cy0: 481, cx1: 132, cy1: 481))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 132, y0: 491, x1: 130, y1: 492, cx0: 132, cy0: 491, cx1: 131, cy1: 492) > BezierCurve(x0: 123, y0: 492, x1: 121, y1: 491, cx0: 123, cy0: 492, cx1: 122, cy1: 491) > BezierCurve(x0: 122, y0: 490, x1: 123, y1: 491, cx0: 122, cy0: 490, cx1: 123, cy1: 491) > BezierCurve(x0: 130, y0: 491, x1: 132, y1: 490, cx0: 131, cy0: 491, cx1: 131, cy1: 490))
-  Shape: rgb(165,165,165) Path (BezierCurve(x0: 121, y0: 491, x1: 120, y1: 489, cx0: 121, cy0: 490, cx1: 120, cy1: 489) > BezierCurve(x0: 120, y0: 482, x1: 121, y1: 480, cx0: 120, cy0: 481, cx1: 121, cy1: 480) > BezierCurve(x0: 122, y0: 480, x1: 121, y1: 482, cx0: 122, cy0: 481, cx1: 121, cy1: 481) > BezierCurve(x0: 121, y0: 489, x1: 122, y1: 490, cx0: 121, cy0: 489, cx1: 122, cy1: 490))
-  Clip: Path (BezierCurve(x0: 121, y0: 482, x1: 123, y1: 480, cx0: 121, cy0: 481, cx1: 122, cy1: 480) > BezierCurve(x0: 130, y0: 480, x1: 132, y1: 482, cx0: 131, cy0: 480, cx1: 132, cy1: 481) > BezierCurve(x0: 132, y0: 489, x1: 130, y1: 491, cx0: 132, cy0: 490, cx1: 131, cy1: 491) > BezierCurve(x0: 123, y0: 491, x1: 121, y1: 489, cx0: 122, cy0: 491, cx1: 121, cy1: 490))
--- a/tests/reftests/iframe.txt
+++ b/tests/reftests/iframe.txt
@ -1,7 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
-Opacity: 1
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 8) > Vector(x: 512, y: 8) > Vector(x: 510, y: 10) > Vector(x: 10, y: 10))
-Shape: rgb(0,0,0) Path (Vector(x: 512, y: 8) > Vector(x: 512, y: 512) > Vector(x: 510, y: 510) > Vector(x: 510, y: 10))
-Shape: rgb(0,0,0) Path (Vector(x: 512, y: 512) > Vector(x: 8, y: 512) > Vector(x: 10, y: 510) > Vector(x: 510, y: 510))
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 512) > Vector(x: 8, y: 8) > Vector(x: 10, y: 10) > Vector(x: 10, y: 510))
--- a/tests/reftests/ignore.txt
+++ b/tests/reftests/ignore.txt
@ -0,0 +1,2 @@
+[Safari]/tests/reftests/acid2.html
+[Safari]/tests/reftests/background/encoded.html
--- a/tests/reftests/images/base.html
+++ b/tests/reftests/images/base.html
@ -15,6 +15,9 @@
 <h1>External image</h1>
 <img src="http://localhost:8081/assets/image2.jpg" style="border:5px solid black;" />

+<h1>External svg image</h1>
+<img src="http://localhost:8081/assets/image.svg" style="border:5px solid black;" />
+
 <h1>External image (using &lt;base&gt; href)</h1>
 <img src="/assets/image_1.jpg" />
 </body>
--- a/tests/reftests/images/base.txt
+++ b/tests/reftests/images/base.txt
@ -1,16 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
-Opacity: 1
-Text: rgb(0,0,0) normal normal 700 32 Arial
-  [8, 22]: External
-  [143, 22]: image
-Text: rgb(0,0,0) normal normal 700 32 Arial
-  [8, 278]: External
-  [143, 278]: image
-  [244, 278]: (using
-  [350, 278]: <base>
-  [469, 278]: href)
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 80) > Vector(x: 439, y: 80) > Vector(x: 434, y: 85) > Vector(x: 13, y: 85))
-Shape: rgb(0,0,0) Path (Vector(x: 439, y: 80) > Vector(x: 439, y: 253) > Vector(x: 434, y: 248) > Vector(x: 434, y: 85))
-Shape: rgb(0,0,0) Path (Vector(x: 439, y: 253) > Vector(x: 8, y: 253) > Vector(x: 13, y: 248) > Vector(x: 434, y: 248))
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 253) > Vector(x: 8, y: 80) > Vector(x: 13, y: 85) > Vector(x: 13, y: 248))
--- a/tests/reftests/images/canvas.html
+++ b/tests/reftests/images/canvas.html
@ -1,27 +1,30 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
    <title>Image tests</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="../../test.js"></script>
    <script type="text/javascript">
-      function setUp() {
-        if ($('#testcanvas')[0].getContext) {
-          var ctx = $('#testcanvas')[0].getContext('2d');
+        function setUp() {
+            var ctx = document.querySelector('#testcanvas').getContext('2d');

-          ctx.fillStyle = "rgb(200,0,0)";
-          ctx.fillRect (10, 10, 55, 50);
+            ctx.fillStyle = "rgb(200,0,0)";
+            ctx.fillRect (10, 10, 55, 50);

-          ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
-          ctx.fillRect (30, 30, 55, 50);
-        } else {
-          $('#testcanvas').remove();
+            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+            ctx.fillRect (30, 30, 55, 50);
+
+            var gl = document.querySelector('#webglcanvas').getContext('webgl', {preserveDrawingBuffer: true});
+            if (gl) {
+                gl.clearColor(0.0, 1.0, 0.0, 1.0);
+                gl.clear(gl.COLOR_BUFFER_BIT);
+            }
        }
-      };
    </script>
-  </head>
-  <body>
-    <canvas id="testcanvas" style="width:700px;height:300px;"></canvas>
-  </body>
+</head>
+<body>
+<canvas id="testcanvas" style="width:700px;height:300px;"></canvas>
+<canvas id="webglcanvas" style="width:300px;height:300px;"></canvas>
+</body>
 </html>
--- a/tests/reftests/images/canvas.txt
+++ b/tests/reftests/images/canvas.txt
@ -1,5 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
-Opacity: 1
-Clip: Path (Vector(x: 8, y: 8) > Vector(x: 708, y: 8) > Vector(x: 708, y: 308) > Vector(x: 8, y: 308))
-  Draw image: Canvas (source: [0, 0, 300, 150]) (destination: [0, 0, 300, 150])
--- a/tests/reftests/images/cross-origin.html
+++ b/tests/reftests/images/cross-origin.html
@ -16,5 +16,6 @@
    <body>
        <h1>External image (CORS)</h1>
        <img src="http://localhost:8081/cors/tests/assets/image2.jpg" />
+        <img src="http://localhost:8081/cors/tests/assets/image.svg" />
    </body>
 </html>
--- a/tests/reftests/images/cross-origin.txt
+++ b/tests/reftests/images/cross-origin.txt
@ -1,7 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
-Opacity: 1
-Text: rgb(0,0,0) normal normal 700 32 Arial
-  [8, 22]: External
-  [143, 22]: image
-  [244, 22]: (CORS)
--- a/tests/reftests/images/doctype.html
+++ b/tests/reftests/images/doctype.html
@ -0,0 +1,11 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <script type="text/javascript" src="../../test.js"></script>
+</head>
+<body>
+    <img src="../../assets/image.jpg" />
+    <img src="../../assets/image2.jpg" style="display:block;" />
+	<br>
+</body>
+</html>
--- a/tests/reftests/images/empty.txt
+++ b/tests/reftests/images/empty.txt
@ -1,32 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
-Opacity: 1
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [8, 8]: Image
-  [57, 8]: without
-  [112, 8]: src
-  [138, 8]: attribute,
-  [204, 8]: should
-  [256, 8]: not
-  [283, 8]: crash:
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [8, 78]: Image
-  [57, 78]: with
-  [90, 78]: broken
-  [143, 78]: src
-  [169, 78]: attribute,
-  [236, 78]: should
-  [287, 78]: not
-  [314, 78]: crash:
-Shape: rgb(255,0,0) Path (Vector(x: 8, y: 26) > Vector(x: 60, y: 26) > Vector(x: 59, y: 27) > Vector(x: 9, y: 27))
-Shape: rgb(255,0,0) Path (Vector(x: 60, y: 26) > Vector(x: 60, y: 78) > Vector(x: 59, y: 77) > Vector(x: 59, y: 27))
-Shape: rgb(255,0,0) Path (Vector(x: 60, y: 78) > Vector(x: 8, y: 78) > Vector(x: 9, y: 77) > Vector(x: 59, y: 77))
-Shape: rgb(255,0,0) Path (Vector(x: 8, y: 78) > Vector(x: 8, y: 26) > Vector(x: 9, y: 27) > Vector(x: 9, y: 77))
-Shape: rgb(255,0,0) Path (Vector(x: 8, y: 96) > Vector(x: 60, y: 96) > Vector(x: 59, y: 97) > Vector(x: 9, y: 97))
-Shape: rgb(255,0,0) Path (Vector(x: 60, y: 96) > Vector(x: 60, y: 148) > Vector(x: 59, y: 147) > Vector(x: 59, y: 97))
-Shape: rgb(255,0,0) Path (Vector(x: 60, y: 148) > Vector(x: 8, y: 148) > Vector(x: 9, y: 147) > Vector(x: 59, y: 147))
-Shape: rgb(255,0,0) Path (Vector(x: 8, y: 148) > Vector(x: 8, y: 96) > Vector(x: 9, y: 97) > Vector(x: 9, y: 147))
-Shape: rgb(255,0,0) Path (Vector(x: 8, y: 148) > Vector(x: 60, y: 148) > Vector(x: 59, y: 149) > Vector(x: 9, y: 149))
-Shape: rgb(255,0,0) Path (Vector(x: 60, y: 148) > Vector(x: 60, y: 200) > Vector(x: 59, y: 199) > Vector(x: 59, y: 149))
-Shape: rgb(255,0,0) Path (Vector(x: 60, y: 200) > Vector(x: 8, y: 200) > Vector(x: 9, y: 199) > Vector(x: 59, y: 199))
-Shape: rgb(255,0,0) Path (Vector(x: 8, y: 200) > Vector(x: 8, y: 148) > Vector(x: 9, y: 149) > Vector(x: 9, y: 199))
--- a/tests/reftests/images/images.txt
+++ b/tests/reftests/images/images.txt
@ -1,36 +0,0 @@
-Window: [800, 703]
-Rectangle: [0, 0, 800, 703] rgba(0,0,0,0)
-Opacity: 1
-Clip: Path (Vector(x: 8, y: 433) > Vector(x: 83, y: 433) > Vector(x: 83, y: 508) > Vector(x: 8, y: 508))
-  Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
-Clip: Path (Vector(x: 87, y: 108) > Vector(x: 137, y: 108) > Vector(x: 137, y: 508) > Vector(x: 87, y: 508))
-  Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
-Clip: Path (Vector(x: 141, y: 8) > Vector(x: 641, y: 8) > Vector(x: 641, y: 508) > Vector(x: 141, y: 508))
-  Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
-Clip: Path (BezierCurve(x0: 645, y0: 458, x1: 695, y1: 408, cx0: 645, cy0: 430, cx1: 667, cy1: 408) > BezierCurve(x0: 695, y0: 408, x1: 745, y1: 458, cx0: 723, cy0: 408, cx1: 745, cy1: 430) > BezierCurve(x0: 745, y0: 458, x1: 695, y1: 508, cx0: 745, cy0: 486, cx1: 723, cy1: 508) > BezierCurve(x0: 695, y0: 508, x1: 645, y1: 458, cx0: 667, cy0: 508, cx1: 645, cy1: 486))
-  Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
-Clip: Path (Vector(x: 8, y: 597) > Vector(x: 508, y: 597) > Vector(x: 508, y: 637) > Vector(x: 8, y: 637))
-  Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
-Shape: rgb(0,0,0) Path (Vector(x: 512, y: 512) > Vector(x: 637, y: 512) > Vector(x: 632, y: 517) > Vector(x: 517, y: 517))
-Shape: rgb(0,0,0) Path (Vector(x: 637, y: 512) > Vector(x: 637, y: 637) > Vector(x: 632, y: 632) > Vector(x: 632, y: 517))
-Shape: rgb(0,0,0) Path (Vector(x: 637, y: 637) > Vector(x: 512, y: 637) > Vector(x: 517, y: 632) > Vector(x: 632, y: 632))
-Shape: rgb(0,0,0) Path (Vector(x: 512, y: 637) > Vector(x: 512, y: 512) > Vector(x: 517, y: 517) > Vector(x: 517, y: 632))
-Clip: Path (Vector(x: 517, y: 517) > Vector(x: 632, y: 517) > Vector(x: 632, y: 632) > Vector(x: 517, y: 632))
-  Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
-Shape: rgb(0,0,0) Path (Vector(x: 641, y: 537) > Vector(x: 716, y: 537) > Vector(x: 716, y: 542) > Vector(x: 641, y: 542))
-Clip: Path (Vector(x: 641, y: 542) > Vector(x: 716, y: 542) > Vector(x: 716, y: 637) > Vector(x: 641, y: 637))
-  Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
-Shape: rgb(0,0,0) Path (Vector(x: 720, y: 562) > Vector(x: 770, y: 562) > Vector(x: 770, y: 567) > Vector(x: 720, y: 567))
-Clip: Path (Vector(x: 720, y: 567) > Vector(x: 770, y: 567) > Vector(x: 770, y: 637) > Vector(x: 720, y: 637))
-  Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 641) > Vector(x: 58, y: 641) > Vector(x: 58, y: 646) > Vector(x: 8, y: 646))
-Clip: Path (Vector(x: 8, y: 646) > Vector(x: 58, y: 646) > Vector(x: 58, y: 691) > Vector(x: 8, y: 691))
-  Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
-Shape: rgb(0,0,0) Path (Vector(x: 62, y: 689) > Vector(x: 64, y: 689) > Vector(x: 63, y: 690) > Vector(x: 63, y: 690))
-Shape: rgb(0,0,0) Path (Vector(x: 64, y: 689) > Vector(x: 64, y: 691) > Vector(x: 63, y: 690) > Vector(x: 63, y: 690))
-Shape: rgb(0,0,0) Path (Vector(x: 64, y: 691) > Vector(x: 62, y: 691) > Vector(x: 63, y: 690) > Vector(x: 63, y: 690))
-Shape: rgb(0,0,0) Path (Vector(x: 62, y: 691) > Vector(x: 62, y: 689) > Vector(x: 63, y: 690) > Vector(x: 63, y: 690))
-Clip: Path (Vector(x: 63, y: 690) > Vector(x: 63, y: 690) > Vector(x: 63, y: 690) > Vector(x: 63, y: 690))
-  Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
-Clip: Path (Vector(x: 68, y: 691) > Vector(x: 68, y: 691) > Vector(x: 68, y: 691) > Vector(x: 68, y: 691))
-  Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
--- a/tests/reftests/images/svg/base64.txt
+++ b/tests/reftests/images/svg/base64.txt
@ -1,9 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
-Opacity: 1
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [8, 8]: Inline
-  [51, 8]: svg
-  [80, 8]: image:
-Clip: Path (Vector(x: 8, y: 26) > Vector(x: 208, y: 26) > Vector(x: 208, y: 226) > Vector(x: 8, y: 226))
-  Draw image: Image ("/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53") (source: [0, 0, 306, 296]) (destination: [0, 0, 306, 296])
--- a/tests/reftests/images/svg/external.txt
+++ b/tests/reftests/images/svg/external.txt
@ -1,9 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
-Opacity: 1
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [8, 8]: SVG
-  [46, 8]: taints
-  [89, 8]: image:
-Clip: Path (Vector(x: 8, y: 26) > Vector(x: 666, y: 26) > Vector(x: 666, y: 363) > Vector(x: 8, y: 363))
-  Draw image: Image ("/tests/assets/image.svg") (source: [0, 0, 658, 337]) (destination: [0, 0, 658, 337])
--- a/tests/reftests/images/svg/inline.txt
+++ b/tests/reftests/images/svg/inline.txt
@ -1,7 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
-Opacity: 1
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [8, 8]: Inline
-  [51, 8]: svg
-  [80, 8]: image:
--- a/tests/reftests/images/svg/native_only.txt
+++ b/tests/reftests/images/svg/native_only.txt
@ -1,7 +0,0 @@
-Window: [800, 656]
-Rectangle: [0, 0, 800, 656] rgba(0,0,0,0)
-Opacity: 1
-Clip: Path (Vector(x: 8, y: 8) > Vector(x: 666, y: 8) > Vector(x: 666, y: 345) > Vector(x: 8, y: 345))
-  Draw image: Image ("/tests/assets/image.svg") (source: [0, 0, 658, 337]) (destination: [0, 0, 658, 337])
-Clip: Path (Vector(x: 523, y: 445) > Vector(x: 723, y: 445) > Vector(x: 723, y: 645) > Vector(x: 523, y: 645))
-  Draw image: Image ("/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53") (source: [0, 0, 306, 296]) (destination: [0, 0, 306, 296])
--- a/tests/reftests/images/svg/node.txt
+++ b/tests/reftests/images/svg/node.txt
@ -1,7 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
-Opacity: 1
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [8, 8]: SVG
-  [46, 8]: node
-  [86, 8]: image:
--- a/tests/reftests/list/decimal-leading-zero.txt
+++ b/tests/reftests/list/decimal-leading-zero.txt
@ -1,203 +0,0 @@
-Window: [800, 5016]
-Rectangle: [0, 0, 800, 5016] rgba(0,0,0,0)
-Opacity: 1
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 22]: 1
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 72]: 2
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 122]: 3
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 172]: 4
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 222]: 5
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 272]: 6
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 322]: 7
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 372]: 8
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 422]: 9
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 472]: 10
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 522]: 11
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 572]: 12
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 622]: 13
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 672]: 14
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 722]: 15
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 772]: 16
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 822]: 17
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 872]: 18
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 922]: 19
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 972]: 20
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1022]: 21
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1072]: 22
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1122]: 23
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1172]: 24
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1222]: 25
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1272]: 26
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1322]: 27
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1372]: 28
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1422]: 29
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1472]: 30
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1522]: 31
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1572]: 32
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1622]: 33
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1672]: 34
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1722]: 35
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1772]: 36
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1822]: 37
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1872]: 38
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1922]: 39
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1972]: 40
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2022]: 41
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2072]: 42
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2122]: 43
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2172]: 44
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2222]: 45
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2272]: 46
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2322]: 47
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2372]: 48
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2422]: 49
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2472]: 50
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2522]: 51
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2572]: 52
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2622]: 53
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2672]: 54
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2722]: 55
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2772]: 56
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2822]: 57
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2872]: 58
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2922]: 59
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2972]: 60
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3022]: 61
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3072]: 62
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3122]: 63
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3172]: 64
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3222]: 65
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3272]: 66
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3322]: 67
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3372]: 68
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3422]: 69
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3472]: 70
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3522]: 71
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3572]: 72
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3622]: 73
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3672]: 74
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3722]: 75
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3772]: 76
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3822]: 77
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3872]: 78
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3922]: 79
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3972]: 80
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4022]: 81
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4072]: 82
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4122]: 83
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4172]: 84
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4222]: 85
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4272]: 86
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4322]: 87
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4372]: 88
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4422]: 89
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4472]: 90
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4522]: 91
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4572]: 92
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4622]: 93
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4672]: 94
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4722]: 95
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4772]: 96
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4822]: 97
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4872]: 98
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4922]: 99
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4972]: 100
--- a/tests/reftests/list/decimal.txt
+++ b/tests/reftests/list/decimal.txt
@ -1,203 +0,0 @@
-Window: [800, 5016]
-Rectangle: [0, 0, 800, 5016] rgba(0,0,0,0)
-Opacity: 1
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 22]: 1
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 72]: 2
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 122]: 3
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 172]: 4
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 222]: 5
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 272]: 6
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 322]: 7
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 372]: 8
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 422]: 9
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 472]: 10
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 522]: 11
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 572]: 12
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 622]: 13
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 672]: 14
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 722]: 15
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 772]: 16
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 822]: 17
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 872]: 18
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 922]: 19
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 972]: 20
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1022]: 21
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1072]: 22
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1122]: 23
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1172]: 24
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1222]: 25
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1272]: 26
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1322]: 27
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1372]: 28
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1422]: 29
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1472]: 30
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1522]: 31
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1572]: 32
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1622]: 33
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1672]: 34
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1722]: 35
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1772]: 36
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1822]: 37
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1872]: 38
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1922]: 39
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1972]: 40
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2022]: 41
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2072]: 42
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2122]: 43
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2172]: 44
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2222]: 45
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2272]: 46
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2322]: 47
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2372]: 48
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2422]: 49
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2472]: 50
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2522]: 51
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2572]: 52
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2622]: 53
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2672]: 54
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2722]: 55
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2772]: 56
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2822]: 57
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2872]: 58
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2922]: 59
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2972]: 60
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3022]: 61
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3072]: 62
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3122]: 63
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3172]: 64
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3222]: 65
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3272]: 66
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3322]: 67
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3372]: 68
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3422]: 69
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3472]: 70
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3522]: 71
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3572]: 72
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3622]: 73
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3672]: 74
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3722]: 75
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3772]: 76
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3822]: 77
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3872]: 78
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3922]: 79
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3972]: 80
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4022]: 81
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4072]: 82
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4122]: 83
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4172]: 84
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4222]: 85
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4272]: 86
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4322]: 87
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4372]: 88
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4422]: 89
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4472]: 90
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4522]: 91
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4572]: 92
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4622]: 93
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4672]: 94
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4722]: 95
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4772]: 96
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4822]: 97
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4872]: 98
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4922]: 99
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4972]: 100
--- a/tests/reftests/list/liststyle.html
+++ b/tests/reftests/list/liststyle.html
@ -0,0 +1,102 @@
+<!doctype html>
+<html>
+	<head>
+		<title>List tests</title>
+    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<script type="text/javascript" src="../../test.js"></script>
+
+		<style>
+            li {
+                margin: 10px 5%;
+            }
+			.list1 {
+				list-style-type: circle;
+			}
+
+			.list2 {
+				list-style-image: url(../../assets/image.jpg);
+			}
+
+			.list3 {
+				list-style-image: linear-gradient(60deg, deeppink, aquamarine);
+				list-style-position: inside;
+			}
+
+			.list4 {
+			}
+
+			.list5 {
+				list-style-type: lower-roman;
+			}
+
+			.list6 {
+				list-style-type: hiragana;
+			}
+
+			.list7 {
+				list-style-type: simp-chinese-informal;
+			}
+
+            .list8 {
+                list-style-type: lower-roman;
+            }
+
+            .list8 li {
+                display: block;
+            }
+
+            .list9 {
+                display: list-item;
+                list-style-type: lower-alpha;
+                margin: 10px;
+                position: relative;
+                left: 200px;
+            }
+		</style>
+	</head>
+	<body>
+		<ul class="list1">
+			<li>Alpha</li>
+			<li>Beta</li>
+			<li>Gamma</li>
+		</ul>
+		<ul class="list2">
+			<li>Alpha</li>
+			<li>Beta</li>
+			<li>Gamma</li>
+		</ul>
+		<ul class="list3">
+			<li>Alpha</li>
+			<li>Beta</li>
+			<li>Gamma</li>
+		</ul>
+		<ol class="list4" start="-1">
+			<li>Alpha</li>
+			<li>Beta</li>
+			<li>Gamma</li>
+		</ol>
+		<ol class="list5">
+			<li>Alpha</li>
+			<li value="5">Beta</li>
+			<li>Gamma</li>
+		</ol>
+		<ol class="list6">
+			<li>Alpha</li>
+			<li>Beta</li>
+			<li>Gamma</li>
+		</ol>
+		<ol class="list7">
+			<li>Alpha</li>
+			<li>Beta</li>
+			<li>Gamma</li>
+		</ol>
+        <ol class="list8">
+            <li>Alpha</li>
+            <li>Beta</li>
+            <li>Gamma</li>
+        </ol>
+        <div class="list9">Alpha</div>
+        <div class="list9">Beta</div>
+        <div class="list9">Gamma</div>
+	</body>
+</html>
--- a/tests/reftests/list/lower-alpha.txt
+++ b/tests/reftests/list/lower-alpha.txt
@ -1,203 +0,0 @@
-Window: [800, 5016]
-Rectangle: [0, 0, 800, 5016] rgba(0,0,0,0)
-Opacity: 1
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 22]: 1
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 72]: 2
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 122]: 3
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 172]: 4
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 222]: 5
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 272]: 6
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 322]: 7
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 372]: 8
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 422]: 9
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 472]: 10
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 522]: 11
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 572]: 12
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 622]: 13
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 672]: 14
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 722]: 15
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 772]: 16
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 822]: 17
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 872]: 18
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 922]: 19
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 972]: 20
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1022]: 21
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1072]: 22
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1122]: 23
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1172]: 24
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1222]: 25
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1272]: 26
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1322]: 27
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1372]: 28
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1422]: 29
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1472]: 30
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1522]: 31
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1572]: 32
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1622]: 33
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1672]: 34
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1722]: 35
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1772]: 36
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1822]: 37
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1872]: 38
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1922]: 39
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1972]: 40
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2022]: 41
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2072]: 42
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2122]: 43
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2172]: 44
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2222]: 45
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2272]: 46
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2322]: 47
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2372]: 48
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2422]: 49
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2472]: 50
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2522]: 51
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2572]: 52
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2622]: 53
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2672]: 54
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2722]: 55
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2772]: 56
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2822]: 57
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2872]: 58
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2922]: 59
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2972]: 60
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3022]: 61
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3072]: 62
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3122]: 63
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3172]: 64
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3222]: 65
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3272]: 66
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3322]: 67
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3372]: 68
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3422]: 69
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3472]: 70
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3522]: 71
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3572]: 72
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3622]: 73
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3672]: 74
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3722]: 75
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3772]: 76
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3822]: 77
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3872]: 78
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3922]: 79
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3972]: 80
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4022]: 81
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4072]: 82
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4122]: 83
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4172]: 84
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4222]: 85
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4272]: 86
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4322]: 87
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4372]: 88
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4422]: 89
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4472]: 90
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4522]: 91
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4572]: 92
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4622]: 93
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4672]: 94
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4722]: 95
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4772]: 96
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4822]: 97
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4872]: 98
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4922]: 99
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4972]: 100
--- a/tests/reftests/list/upper-roman.txt
+++ b/tests/reftests/list/upper-roman.txt
@ -1,203 +0,0 @@
-Window: [800, 5016]
-Rectangle: [0, 0, 800, 5016] rgba(0,0,0,0)
-Opacity: 1
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 22]: 1
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 72]: 2
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 122]: 3
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 172]: 4
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 222]: 5
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 272]: 6
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 322]: 7
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 372]: 8
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 422]: 9
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 472]: 10
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 522]: 11
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 572]: 12
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 622]: 13
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 672]: 14
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 722]: 15
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 772]: 16
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 822]: 17
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 872]: 18
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 922]: 19
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 972]: 20
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1022]: 21
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1072]: 22
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1122]: 23
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1172]: 24
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1222]: 25
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1272]: 26
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1322]: 27
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1372]: 28
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1422]: 29
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1472]: 30
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1522]: 31
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1572]: 32
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1622]: 33
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1672]: 34
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1722]: 35
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1772]: 36
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1822]: 37
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1872]: 38
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1922]: 39
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 1972]: 40
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2022]: 41
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2072]: 42
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2122]: 43
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2172]: 44
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2222]: 45
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2272]: 46
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2322]: 47
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2372]: 48
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2422]: 49
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2472]: 50
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2522]: 51
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2572]: 52
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2622]: 53
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2672]: 54
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2722]: 55
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2772]: 56
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2822]: 57
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2872]: 58
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2922]: 59
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 2972]: 60
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3022]: 61
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3072]: 62
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3122]: 63
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3172]: 64
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3222]: 65
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3272]: 66
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3322]: 67
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3372]: 68
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3422]: 69
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3472]: 70
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3522]: 71
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3572]: 72
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3622]: 73
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3672]: 74
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3722]: 75
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3772]: 76
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3822]: 77
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3872]: 78
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3922]: 79
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 3972]: 80
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4022]: 81
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4072]: 82
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4122]: 83
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4172]: 84
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4222]: 85
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4272]: 86
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4322]: 87
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4372]: 88
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4422]: 89
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4472]: 90
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4522]: 91
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4572]: 92
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4622]: 93
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4672]: 94
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4722]: 95
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4772]: 96
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4822]: 97
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4872]: 98
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4922]: 99
-Text: rgb(0,0,0) normal normal 400 20 Arial
-  [48, 4972]: 100
--- a/tests/reftests/options/ignore.html
+++ b/tests/reftests/options/ignore.html
@ -4,7 +4,9 @@
    <title>element render test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script>
-
+        h2cOptions = {ignoreElements: function(element) {
+            return element.className === 'ignored';
+        }};
    </script>
    <script type="text/javascript" src="../../test.js"></script>
    <style>
@ -15,7 +17,7 @@
            background: green;
        }

-        #ignored {
+        #ignored, .ignored {
            background: red;
            width: 100px;
            height: 100px;
@ -32,10 +34,11 @@
 <div id="ignored" data-html2canvas-ignore>
    great failure
 </div>
+<div class="ignored">
+    ignore predicate
+</div>
 <div id="div1">
    great success
 </div>
-
-
 </body>
 </html>
--- a/tests/reftests/options/onclone.html
+++ b/tests/reftests/options/onclone.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>element render test</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script>
+        h2cOptions = {onclone: function(document) {
+            const remove = document.querySelector('.ignored');
+            remove.parentNode.removeChild(remove);
+        }};
+    </script>
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        #div1 {
+
+            width: 100px;
+            height: 100px;
+            background: green;
+        }
+
+        #ignored, .ignored {
+            background: red;
+            width: 100px;
+            height: 100px;
+        }
+
+        body, html {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+
+</head>
+<body>
+<div class="ignored">
+    ignore during onclone
+</div>
+<div id="div1">
+    great success
+</div>
+</body>
+</html>
--- a/tests/reftests/overflow/overflow-transform.txt
+++ b/tests/reftests/overflow/overflow-transform.txt
@ -1,134 +0,0 @@
-Window: [800, 600]
-Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
-Opacity: 1
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 8) > Vector(x: 312, y: 8) > Vector(x: 310, y: 10) > Vector(x: 10, y: 10))
-Shape: rgb(0,0,0) Path (Vector(x: 312, y: 8) > Vector(x: 312, y: 312) > Vector(x: 310, y: 310) > Vector(x: 310, y: 10))
-Shape: rgb(0,0,0) Path (Vector(x: 312, y: 312) > Vector(x: 8, y: 312) > Vector(x: 10, y: 310) > Vector(x: 310, y: 310))
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 312) > Vector(x: 8, y: 8) > Vector(x: 10, y: 10) > Vector(x: 10, y: 310))
-Clip: Path (Vector(x: 10, y: 10) > Vector(x: 310, y: 10) > Vector(x: 310, y: 310) > Vector(x: 10, y: 310))
-Clip: Path (Vector(x: 10, y: 10) > Vector(x: 310, y: 10) > Vector(x: 310, y: 310) > Vector(x: 10, y: 310))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [10, 26]: Le
-    [32, 26]: Lorem
-    [82, 26]: Ipsum
-    [130, 26]: est
-    [156, 26]: simplement
-    [242, 26]: du
-    [264, 26]: faux
-    [10, 42]: texte
-    [49, 42]: employé
-    [114, 42]: dans
-    [153, 42]: la
-    [170, 42]: composition
-    [260, 42]: et
-    [278, 42]: la
-    [10, 59]: mise
-    [48, 59]: en
-    [70, 59]: page
-    [110, 59]: avant
-    [154, 59]: impression.
-    [240, 59]: Le
-    [262, 59]: Lorem
-    [10, 76]: Ipsum
-    [58, 76]: est
-    [84, 76]: le
-    [101, 76]: faux
-    [135, 76]: texte
-    [174, 76]: standard
-    [241, 76]: de
-    [10, 93]: l'imprimerie
-    [96, 93]: depuis
-    [147, 93]: les
-    [172, 93]: années
-    [229, 93]: 1500,
-    [10, 110]: quand
-    [59, 110]: un
-    [81, 110]: peintre
-    [134, 110]: anonyme
-    [205, 110]: assembla
-    [10, 126]: ensemble
-    [84, 126]: des
-    [114, 126]: morceaux
-    [189, 126]: de
-    [211, 126]: texte
-    [250, 126]: pour
-    [10, 143]: réaliser
-    [67, 143]: un
-    [89, 143]: livre
-    [123, 143]: spécimen
-    [196, 143]: de
-    [218, 143]: polices
-    [272, 143]: de
-    [10, 160]: texte.
-    [54, 160]: Il
-    [66, 160]: n'a
-    [91, 160]: pas
-    [122, 160]: fait
-    [147, 160]: que
-    [178, 160]: survivre
-    [239, 160]: cinq
-    [10, 177]: siècles,
-    [68, 177]: mais
-    [106, 177]: s'est
-    [143, 177]: aussi
-    [185, 177]: adapté
-    [238, 177]: à
-    [251, 177]: la
-    [10, 194]: bureautique
-    [99, 194]: informatique,
-    [196, 194]: sans
-    [234, 194]: que
-    [265, 194]: son
-    [10, 210]: contenu
-    [71, 210]: n'en
-    [106, 210]: soit
-    [135, 210]: modifié.
-    [195, 210]: Il
-    [208, 210]: a
-    [221, 210]: été
-    [10, 227]: popularisé
-    [88, 227]: dans
-    [128, 227]: les
-    [152, 227]: années
-    [209, 227]: 1960
-    [249, 227]: grâce
-    [294, 227]: à
-    [10, 244]: la
-    [27, 244]: vente
-    [70, 244]: de
-    [93, 244]: feuilles
-    [147, 244]: Letraset
-    [209, 244]: contenant
-    [284, 244]: des
-    [10, 261]: passages
-    [83, 261]: du
-    [105, 261]: Lorem
-    [155, 261]: Ipsum,
-    [208, 261]: et,
-    [230, 261]: plus
-    [10, 278]: récemment,
-    [99, 278]: par
-    [126, 278]: son
-    [157, 278]: inclusion
-    [224, 278]: dans
-    [262, 278]: des
-    [10, 294]: applications
-    [99, 294]: de
-    [121, 294]: mise
-    [160, 294]: en
-    [182, 294]: page
-    [222, 294]: de
-    [244, 294]: texte,
-    [10, 311]: comme
-    [67, 311]: Aldus
-    [111, 311]: PageMaker.
-Transform: (91, 525) [-0.92, -0.39, 0.39, -0.92, 0, 0]
-  Clip: Path (Vector(x: 10, y: 10) > Vector(x: 310, y: 10) > Vector(x: 310, y: 310) > Vector(x: 10, y: 310))
-    Clip: Path (Vector(x: -140, y: 215) > Vector(x: 321, y: 215) > Vector(x: 321, y: 835) > Vector(x: -140, y: 835))
-      Fill: rgb(255,0,0)
-  Clip: Path (Vector(x: 10, y: 10) > Vector(x: 310, y: 10) > Vector(x: 310, y: 310) > Vector(x: 10, y: 310))
-Transform: (268, -94) [-0.92, -0.39, 0.39, -0.92, 0, 0]
-  Clip: Path (Vector(x: 10, y: 10) > Vector(x: 310, y: 10) > Vector(x: 310, y: 310) > Vector(x: 10, y: 310))
-    Clip: Path (Vector(x: -47, y: -402) > Vector(x: 582, y: -402) > Vector(x: 582, y: 215) > Vector(x: -47, y: 215))
-      Fill: rgb(255,0,255)
-  Clip: Path (Vector(x: 10, y: 10) > Vector(x: 310, y: 10) > Vector(x: 310, y: 310) > Vector(x: 10, y: 310))
--- a/tests/reftests/overflow/overflow.html
+++ b/tests/reftests/overflow/overflow.html
@ -1,84 +1,122 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Overflow tests</title>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <script type="text/javascript" src="../../test.js"></script>
-        <style>
-            .small{
-                font-size:14px;
-            }
+<head>
+    <title>Overflow tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        .small{
+            font-size:14px;
+        }

-            .medium{
-                font-size:18px;
-            }
-            .large{
-                font-size:24px;
-            }
-            div{
-                background: #ccc;
-                border:6px solid black;
-                width:300px;
-                height:200px;
-                margin: 0 0 60px 0;
-            }
-            h1 {
-                margin:0;
-                line-height: 40px;
-            }
-            body {
-                font-family: Arial;
-                line-height: 17px;
-                font-size: 1em;
-            }
-        </style>
+        .medium{
+            font-size:18px;
+        }
+        .large{
+            font-size:24px;
+        }
+        div{
+            background: #ccc;
+            border:6px solid black;
+            width:300px;
+            height:200px;
+            margin: 0 0 60px 0;
+        }
+        h1 {
+            margin:0;
+            line-height: 40px;
+        }
+        body {
+            font-family: Arial;
+            line-height: 17px;
+            font-size: 1em;
+        }
+        .cell {
+            display: inline-block;
+            width: 100px;
+            float: right;
+            height: 100px;
+        }

-    </head>
-    <body>
+        .cell p {
+            height: 60px;
+        }

-        <h1>Overflow: visible</h1>
-        <div>              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.
-        </div>
+        .visible {
+            overflow: visible;
+        }
+        .hidden {
+            overflow: hidden;
+        }
+        .scroll {
+            overflow: scroll;
+        }
+        .auto {
+            overflow: auto;
+        }
+    </style>

-        <h1>Overflow: hidden</h1>
-        <div style="overflow:hidden;float: right; height: 100px; border-radius: 100%; border-color: transparent;">
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
+</head>
+<body>
+<div class="cell">
+    visible
+    <p class="visible">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pretium facilisis. Praesent rutrum eget nisl in tristique. Sed tincidunt nisl et tellus vulputate, nec rhoncus orci pretium.</p>
+</div>
+<div class="cell">
+    hidden
+    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pretium facilisis. Praesent rutrum eget nisl in tristique. Sed tincidunt nisl et tellus vulputate, nec rhoncus orci pretium.</p>
+</div>
+<div class="cell">
+    scroll
+    <p class="scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pretium facilisis. Praesent rutrum eget nisl in tristique. Sed tincidunt nisl et tellus vulputate, nec rhoncus orci pretium.</p>
+</div>
+<div class="cell">
+    auto
+    <p class="auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pretium facilisis. Praesent rutrum eget nisl in tristique. Sed tincidunt nisl et tellus vulputate, nec rhoncus orci pretium.</p>
+</div>
+<h1>Overflow: visible</h1>
+<div>              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.
+</div>

-            with the release of <div style="border-width:10px 0 5px 0;background:green;">a</div>Letraset sheets containing Lorem Ipsum passages, <img src="../../assets/image.jpg" /> and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.
+<h1>Overflow: hidden</h1>
+<div style="overflow:hidden;float: right; height: 100px; border-radius: 100%; border-color: transparent;">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
+
+    with the release of <div style="border-width:10px 0 5px 0;background:green;">a</div>Letraset sheets containing Lorem Ipsum passages, <img src="../../assets/image.jpg" /> and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.


-            <div style="overflow:visible;position:relative;"><u>position:relative within a overflow:hidden element</u><br /> <br />
+    <div style="overflow:visible;position:relative;"><u>position:relative within a overflow:hidden element</u><br /> <br />

-                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.

-            </div>
-        </div>
-        <div style="overflow:hidden;">
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
+    </div>
+</div>
+<div style="overflow:hidden;">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s

-            with the release of <div style="border-width:10px 0 5px 0;background:green;">a</div>Letraset sheets containing Lorem Ipsum passages, <img src="../../assets/image.jpg" /> and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.
+    with the release of <div style="border-width:10px 0 5px 0;background:green;">a</div>Letraset sheets containing Lorem Ipsum passages, <img src="../../assets/image.jpg" /> and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.


-            <div style="overflow:visible;position:relative;"><u>position:relative within a overflow:hidden element</u><br /> <br />
+    <div style="overflow:visible;position:relative;"><u>position:relative within a overflow:hidden element</u><br /> <br />

-                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.

-            </div>
-        </div>
-        <div style="overflow:scroll; height: 100px;" id="scroll">
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
+    </div>
+</div>
+<div style="overflow:scroll; height: 100px;" id="scroll">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s

-            with the release of <div style="border-width:10px 0 5px 0;background:green;">a</div>Letraset sheets containing Lorem Ipsum passages, <img src="../../assets/image.jpg" /> and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.
+    with the release of <div style="border-width:10px 0 5px 0;background:green;">a</div>Letraset sheets containing Lorem Ipsum passages, <img src="../../assets/image.jpg" /> and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.


-            <div style="overflow:visible;position:relative;"><u>position:relative within a overflow:hidden element</u><br /> <br />
+    <div style="overflow:visible;position:relative;"><u>position:relative within a overflow:hidden element</u><br /> <br />

-                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.

-            </div>
-            <script>
-                document.querySelector('#scroll').scrollTo(0, 200);
-            </script>
-        </div>
-    </body>
+    </div>
+    <script>
+        document.querySelector('#scroll').scrollTo(0, 200);
+    </script>
+</div>
+</body>
 </html>
--- a/tests/reftests/overflow/overflow.txt
+++ b/tests/reftests/overflow/overflow.txt
@ -1,567 +0,0 @@
-Window: [800, 632]
-Rectangle: [0, 0, 800, 632] rgba(0,0,0,0)
-Opacity: 1
-Text: rgb(0,0,0) normal normal 700 32 Arial
-  [8, 10]: Overflow:
-  [164, 10]: visible
-Clip: Path (Vector(x: 8, y: 48) > Vector(x: 320, y: 48) > Vector(x: 320, y: 260) > Vector(x: 8, y: 260))
-  Fill: rgb(204,204,204)
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 48) > Vector(x: 320, y: 48) > Vector(x: 314, y: 54) > Vector(x: 14, y: 54))
-Shape: rgb(0,0,0) Path (Vector(x: 320, y: 48) > Vector(x: 320, y: 260) > Vector(x: 314, y: 254) > Vector(x: 314, y: 54))
-Shape: rgb(0,0,0) Path (Vector(x: 320, y: 260) > Vector(x: 8, y: 260) > Vector(x: 14, y: 254) > Vector(x: 314, y: 254))
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 260) > Vector(x: 8, y: 48) > Vector(x: 14, y: 54) > Vector(x: 14, y: 254))
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [14, 54]: Lorem
-  [64, 54]: Ipsum
-  [112, 54]: is
-  [128, 54]: simply
-  [178, 54]: dummy
-  [234, 54]: text
-  [265, 54]: of
-  [282, 54]: the
-  [14, 70]: printing
-  [71, 70]: and
-  [102, 70]: typesetting
-  [184, 70]: industry.
-  [248, 70]: Lorem
-  [14, 87]: Ipsum
-  [62, 87]: has
-  [92, 87]: been
-  [132, 87]: the
-  [159, 87]: industry's
-  [230, 87]: standard
-  [14, 104]: dummy
-  [71, 104]: text
-  [101, 104]: ever
-  [137, 104]: since
-  [178, 104]: the
-  [205, 104]: 1500s,
-  [258, 104]: when
-  [14, 121]: an
-  [36, 121]: unknown
-  [105, 121]: printer
-  [154, 121]: took
-  [189, 121]: a
-  [202, 121]: galley
-  [249, 121]: of
-  [267, 121]: type
-  [14, 138]: and
-  [45, 138]: scrambled
-  [123, 138]: it
-  [136, 138]: to
-  [154, 138]: make
-  [197, 138]: a
-  [210, 138]: type
-  [245, 138]: specimen
-  [14, 154]: book.
-  [58, 154]: It
-  [71, 154]: has
-  [101, 154]: survived
-  [165, 154]: not
-  [192, 154]: only
-  [226, 154]: five
-  [14, 171]: centuries,
-  [88, 171]: but
-  [114, 171]: also
-  [148, 171]: the
-  [175, 171]: leap
-  [210, 171]: into
-  [240, 171]: electronic
-  [14, 188]: typesetting,
-  [100, 188]: remaining
-  [175, 188]: essentially
-  [14, 205]: unchanged.
-  [102, 205]: It
-  [116, 205]: was
-  [148, 205]: popularised
-  [236, 205]: in
-  [252, 205]: the
-  [14, 222]: 1960s
-  [62, 222]: with
-  [95, 222]: the
-  [122, 222]: release
-  [178, 222]: of
-  [196, 222]: Letraset
-  [258, 222]: sheets
-  [14, 238]: containing
-  [91, 238]: Lorem
-  [141, 238]: Ipsum
-  [189, 238]: passages,
-  [266, 238]: and
-  [14, 255]: more
-  [55, 255]: recently
-  [115, 255]: with
-  [148, 255]: desktop
-  [209, 255]: publishing
-  [14, 272]: software
-  [79, 272]: like
-Text: rgb(0,0,0) normal normal 400 16 Arial
-  [245, 272]: including
-  [14, 289]: versions
-  [78, 289]: of
-  [96, 289]: Lorem
-  [146, 289]: Ipsum.
-Text: rgb(0,0,0) normal normal 700 32 Arial
-  [8, 322]: Overflow:
-  [164, 322]: hidden
-Clip: Path (Vector(x: 8, y: 360) > Vector(x: 320, y: 360) > Vector(x: 320, y: 572) > Vector(x: 8, y: 572))
-  Fill: rgb(204,204,204)
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 360) > Vector(x: 320, y: 360) > Vector(x: 314, y: 366) > Vector(x: 14, y: 366))
-Shape: rgb(0,0,0) Path (Vector(x: 320, y: 360) > Vector(x: 320, y: 572) > Vector(x: 314, y: 566) > Vector(x: 314, y: 366))
-Shape: rgb(0,0,0) Path (Vector(x: 320, y: 572) > Vector(x: 8, y: 572) > Vector(x: 14, y: 566) > Vector(x: 314, y: 566))
-Shape: rgb(0,0,0) Path (Vector(x: 8, y: 572) > Vector(x: 8, y: 360) > Vector(x: 14, y: 366) > Vector(x: 14, y: 566))
-Clip: Path (Vector(x: 14, y: 366) > Vector(x: 314, y: 366) > Vector(x: 314, y: 566) > Vector(x: 14, y: 566))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [14, 366]: Lorem
-    [64, 366]: Ipsum
-    [112, 366]: is
-    [128, 366]: simply
-    [178, 366]: dummy
-    [234, 366]: text
-    [265, 366]: of
-    [282, 366]: the
-    [14, 382]: printing
-    [71, 382]: and
-    [102, 382]: typesetting
-    [184, 382]: industry.
-    [248, 382]: Lorem
-    [14, 399]: Ipsum
-    [62, 399]: has
-    [92, 399]: been
-    [132, 399]: the
-    [159, 399]: industry's
-    [230, 399]: standard
-    [14, 416]: dummy
-    [71, 416]: text
-    [101, 416]: ever
-    [137, 416]: since
-    [178, 416]: the
-    [205, 416]: 1500s,
-    [258, 416]: when
-    [14, 433]: an
-    [36, 433]: unknown
-    [105, 433]: printer
-    [154, 433]: took
-    [189, 433]: a
-    [202, 433]: galley
-    [249, 433]: of
-    [267, 433]: type
-    [14, 450]: and
-    [45, 450]: scrambled
-    [123, 450]: it
-    [136, 450]: to
-    [154, 450]: make
-    [197, 450]: a
-    [210, 450]: type
-    [245, 450]: specimen
-    [14, 466]: book.
-    [58, 466]: It
-    [71, 466]: has
-    [101, 466]: survived
-    [165, 466]: not
-    [192, 466]: only
-    [226, 466]: five
-    [14, 483]: centuries,
-    [88, 483]: but
-    [114, 483]: also
-    [148, 483]: the
-    [175, 483]: leap
-    [210, 483]: into
-    [240, 483]: electronic
-    [14, 500]: typesetting,
-    [100, 500]: remaining
-    [175, 500]: essentially
-    [14, 517]: unchanged.
-    [102, 517]: It
-    [116, 517]: was
-    [148, 517]: popularised
-    [236, 517]: in
-    [252, 517]: the
-    [14, 534]: 1960s
-    [62, 534]: with
-    [95, 534]: the
-    [122, 534]: release
-    [178, 534]: of
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [14, 825]: Letraset
-    [76, 825]: sheets
-    [128, 825]: containing
-    [205, 825]: Lorem
-    [255, 825]: Ipsum
-    [14, 903]: passages,
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [171, 903]: and
-    [202, 903]: more
-    [243, 903]: recently
-    [14, 920]: with
-    [47, 920]: desktop
-    [107, 920]: publishing
-    [184, 920]: software
-    [249, 920]: like
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [152, 937]: including
-    [220, 937]: versions
-    [284, 937]: of
-    [14, 954]: Lorem
-    [64, 954]: Ipsum.
-Clip: Path (Vector(x: 14, y: 366) > Vector(x: 314, y: 366) > Vector(x: 314, y: 566) > Vector(x: 14, y: 566))
-  Clip: Path (Vector(x: 14, y: 551) > Vector(x: 314, y: 551) > Vector(x: 314, y: 766) > Vector(x: 14, y: 766))
-    Fill: rgb(0,128,0)
-  Shape: rgb(0,0,0) Path (Vector(x: 14, y: 551) > Vector(x: 314, y: 551) > Vector(x: 314, y: 561) > Vector(x: 14, y: 561))
-  Shape: rgb(0,0,0) Path (Vector(x: 314, y: 551) > Vector(x: 314, y: 766) > Vector(x: 314, y: 761) > Vector(x: 314, y: 561))
-  Shape: rgb(0,0,0) Path (Vector(x: 314, y: 766) > Vector(x: 14, y: 766) > Vector(x: 14, y: 761) > Vector(x: 314, y: 761))
-  Shape: rgb(0,0,0) Path (Vector(x: 14, y: 766) > Vector(x: 14, y: 551) > Vector(x: 14, y: 561) > Vector(x: 14, y: 761))
-Clip: Path (Vector(x: 14, y: 366) > Vector(x: 314, y: 366) > Vector(x: 314, y: 566) > Vector(x: 14, y: 566))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [14, 560]: a
-Clip: Path (BezierCurve(x0: 480, y0: 416, x1: 636, y1: 360, cx0: 480, cy0: 385, cx1: 550, cy1: 360) > BezierCurve(x0: 636, y0: 360, x1: 792, y1: 416, cx0: 722, cy0: 360, cx1: 792, cy1: 385) > BezierCurve(x0: 792, y0: 416, x1: 636, y1: 472, cx0: 792, cy0: 447, cx1: 722, cy1: 472) > BezierCurve(x0: 636, y0: 472, x1: 480, y1: 416, cx0: 550, cy0: 472, cx1: 480, cy1: 447))
-  Fill: rgb(204,204,204)
-Clip: Path (BezierCurve(x0: 486, y0: 416, x1: 636, y1: 366, cx0: 486, cy0: 388, cx1: 553, cy1: 366) > BezierCurve(x0: 636, y0: 366, x1: 786, y1: 416, cx0: 719, cy0: 366, cx1: 786, cy1: 388) > BezierCurve(x0: 786, y0: 416, x1: 636, y1: 466, cx0: 786, cy0: 444, cx1: 719, cy1: 466) > BezierCurve(x0: 636, y0: 466, x1: 486, y1: 416, cx0: 553, cy0: 466, cx1: 486, cy1: 444))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [486, 366]: Lorem
-    [536, 366]: Ipsum
-    [584, 366]: is
-    [600, 366]: simply
-    [650, 366]: dummy
-    [706, 366]: text
-    [737, 366]: of
-    [754, 366]: the
-    [486, 382]: printing
-    [543, 382]: and
-    [574, 382]: typesetting
-    [656, 382]: industry.
-    [720, 382]: Lorem
-    [486, 399]: Ipsum
-    [534, 399]: has
-    [564, 399]: been
-    [604, 399]: the
-    [631, 399]: industry's
-    [702, 399]: standard
-    [486, 416]: dummy
-    [543, 416]: text
-    [573, 416]: ever
-    [609, 416]: since
-    [650, 416]: the
-    [677, 416]: 1500s,
-    [730, 416]: when
-    [486, 433]: an
-    [508, 433]: unknown
-    [577, 433]: printer
-    [626, 433]: took
-    [661, 433]: a
-    [674, 433]: galley
-    [721, 433]: of
-    [739, 433]: type
-    [486, 450]: and
-    [517, 450]: scrambled
-    [595, 450]: it
-    [608, 450]: to
-    [626, 450]: make
-    [669, 450]: a
-    [682, 450]: type
-    [717, 450]: specimen
-    [486, 466]: book.
-    [530, 466]: It
-    [543, 466]: has
-    [573, 466]: survived
-    [637, 466]: not
-    [664, 466]: only
-    [698, 466]: five
-    [486, 483]: centuries,
-    [560, 483]: but
-    [586, 483]: also
-    [620, 483]: the
-    [647, 483]: leap
-    [682, 483]: into
-    [712, 483]: electronic
-    [486, 500]: typesetting,
-    [572, 500]: remaining
-    [647, 500]: essentially
-    [486, 517]: unchanged.
-    [574, 517]: It
-    [588, 517]: was
-    [620, 517]: popularised
-    [708, 517]: in
-    [724, 517]: the
-    [486, 534]: 1960s
-    [534, 534]: with
-    [567, 534]: the
-    [594, 534]: release
-    [650, 534]: of
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [486, 825]: Letraset
-    [548, 825]: sheets
-    [600, 825]: containing
-    [677, 825]: Lorem
-    [727, 825]: Ipsum
-    [486, 903]: passages,
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [643, 903]: and
-    [674, 903]: more
-    [715, 903]: recently
-    [486, 920]: with
-    [519, 920]: desktop
-    [579, 920]: publishing
-    [656, 920]: software
-    [721, 920]: like
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [624, 937]: including
-    [692, 937]: versions
-    [756, 937]: of
-    [486, 954]: Lorem
-    [536, 954]: Ipsum.
-Clip: Path (BezierCurve(x0: 486, y0: 416, x1: 636, y1: 366, cx0: 486, cy0: 388, cx1: 553, cy1: 366) > BezierCurve(x0: 636, y0: 366, x1: 786, y1: 416, cx0: 719, cy0: 366, cx1: 786, cy1: 388) > BezierCurve(x0: 786, y0: 416, x1: 636, y1: 466, cx0: 786, cy0: 444, cx1: 719, cy1: 466) > BezierCurve(x0: 636, y0: 466, x1: 486, y1: 416, cx0: 553, cy0: 466, cx1: 486, cy1: 444))
-  Clip: Path (Vector(x: 486, y: 551) > Vector(x: 786, y: 551) > Vector(x: 786, y: 766) > Vector(x: 486, y: 766))
-    Fill: rgb(0,128,0)
-  Shape: rgb(0,0,0) Path (Vector(x: 486, y: 551) > Vector(x: 786, y: 551) > Vector(x: 786, y: 561) > Vector(x: 486, y: 561))
-  Shape: rgb(0,0,0) Path (Vector(x: 786, y: 551) > Vector(x: 786, y: 766) > Vector(x: 786, y: 761) > Vector(x: 786, y: 561))
-  Shape: rgb(0,0,0) Path (Vector(x: 786, y: 766) > Vector(x: 486, y: 766) > Vector(x: 486, y: 761) > Vector(x: 786, y: 761))
-  Shape: rgb(0,0,0) Path (Vector(x: 486, y: 766) > Vector(x: 486, y: 551) > Vector(x: 486, y: 561) > Vector(x: 486, y: 761))
-Clip: Path (BezierCurve(x0: 486, y0: 416, x1: 636, y1: 366, cx0: 486, cy0: 388, cx1: 553, cy1: 366) > BezierCurve(x0: 636, y0: 366, x1: 786, y1: 416, cx0: 719, cy0: 366, cx1: 786, cy1: 388) > BezierCurve(x0: 786, y0: 416, x1: 636, y1: 466, cx0: 786, cy0: 444, cx1: 719, cy1: 466) > BezierCurve(x0: 636, y0: 466, x1: 486, y1: 416, cx0: 553, cy0: 466, cx1: 486, cy1: 444))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [486, 560]: a
-Clip: Path (BezierCurve(x0: 486, y0: 416, x1: 636, y1: 366, cx0: 486, cy0: 388, cx1: 553, cy1: 366) > BezierCurve(x0: 636, y0: 366, x1: 786, y1: 416, cx0: 719, cy0: 366, cx1: 786, cy1: 388) > BezierCurve(x0: 786, y0: 416, x1: 636, y1: 466, cx0: 786, cy0: 444, cx1: 719, cy1: 466) > BezierCurve(x0: 636, y0: 466, x1: 486, y1: 416, cx0: 553, cy0: 466, cx1: 486, cy1: 444))
-  Clip: Path (Vector(x: 563, y: 843) > Vector(x: 638, y: 843) > Vector(x: 638, y: 918) > Vector(x: 563, y: 918))
-    Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
-Clip: Path (BezierCurve(x0: 486, y0: 416, x1: 636, y1: 366, cx0: 486, cy0: 388, cx1: 553, cy1: 366) > BezierCurve(x0: 636, y0: 366, x1: 786, y1: 416, cx0: 719, cy0: 366, cx1: 786, cy1: 388) > BezierCurve(x0: 786, y0: 416, x1: 636, y1: 466, cx0: 786, cy0: 444, cx1: 719, cy1: 466) > BezierCurve(x0: 636, y0: 466, x1: 486, y1: 416, cx0: 553, cy0: 466, cx1: 486, cy1: 444))
-  Text: rgb(0,0,0) normal normal 700 16 Arial
-    [486, 937]: Aldus
-    [535, 937]: PageMaker
-Text: rgb(0,0,0) normal normal 700 16 Arial
-  [107, 272]: Aldus
-  [156, 272]: PageMaker
-Clip: Path (Vector(x: 14, y: 366) > Vector(x: 314, y: 366) > Vector(x: 314, y: 566) > Vector(x: 14, y: 566))
-  Clip: Path (Vector(x: 91, y: 843) > Vector(x: 166, y: 843) > Vector(x: 166, y: 918) > Vector(x: 91, y: 918))
-    Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
-Clip: Path (Vector(x: 14, y: 366) > Vector(x: 314, y: 366) > Vector(x: 314, y: 566) > Vector(x: 14, y: 566))
-  Text: rgb(0,0,0) normal normal 700 16 Arial
-    [14, 937]: Aldus
-    [63, 937]: PageMaker
-Clip: Path (BezierCurve(x0: 486, y0: 416, x1: 636, y1: 366, cx0: 486, cy0: 388, cx1: 553, cy1: 366) > BezierCurve(x0: 636, y0: 366, x1: 786, y1: 416, cx0: 719, cy0: 366, cx1: 786, cy1: 388) > BezierCurve(x0: 786, y0: 416, x1: 636, y1: 466, cx0: 786, cy0: 444, cx1: 719, cy1: 466) > BezierCurve(x0: 636, y0: 466, x1: 486, y1: 416, cx0: 553, cy0: 466, cx1: 486, cy1: 444))
-  Clip: Path (Vector(x: 486, y: 971) > Vector(x: 798, y: 971) > Vector(x: 798, y: 1183) > Vector(x: 486, y: 1183))
-    Fill: rgb(204,204,204)
-  Shape: rgb(0,0,0) Path (Vector(x: 486, y: 971) > Vector(x: 798, y: 971) > Vector(x: 792, y: 977) > Vector(x: 492, y: 977))
-  Shape: rgb(0,0,0) Path (Vector(x: 798, y: 971) > Vector(x: 798, y: 1183) > Vector(x: 792, y: 1177) > Vector(x: 792, y: 977))
-  Shape: rgb(0,0,0) Path (Vector(x: 798, y: 1183) > Vector(x: 486, y: 1183) > Vector(x: 492, y: 1177) > Vector(x: 792, y: 1177))
-  Shape: rgb(0,0,0) Path (Vector(x: 486, y: 1183) > Vector(x: 486, y: 971) > Vector(x: 492, y: 977) > Vector(x: 492, y: 1177))
-Clip: Path (BezierCurve(x0: 486, y0: 416, x1: 636, y1: 366, cx0: 486, cy0: 388, cx1: 553, cy1: 366) > BezierCurve(x0: 636, y0: 366, x1: 786, y1: 416, cx0: 719, cy0: 366, cx1: 786, cy1: 388) > BezierCurve(x0: 786, y0: 416, x1: 636, y1: 466, cx0: 786, cy0: 444, cx1: 719, cy1: 466) > BezierCurve(x0: 636, y0: 466, x1: 486, y1: 416, cx0: 553, cy0: 466, cx1: 486, cy1: 444))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [492, 1027]: Lorem
-    [542, 1027]: Ipsum
-    [590, 1027]: is
-    [606, 1027]: simply
-    [656, 1027]: dummy
-    [712, 1027]: text
-    [743, 1027]: of
-    [760, 1027]: the
-    [492, 1044]: printing
-    [549, 1044]: and
-    [580, 1044]: typesetting
-    [662, 1044]: industry.
-    [726, 1044]: Lorem
-    [492, 1061]: Ipsum
-    [540, 1061]: has
-    [570, 1061]: been
-    [610, 1061]: the
-    [637, 1061]: industry's
-    [708, 1061]: standard
-    [492, 1077]: dummy
-    [549, 1077]: text
-    [579, 1077]: ever
-    [615, 1077]: since
-    [656, 1077]: the
-    [683, 1077]: 1500s,
-    [736, 1077]: when
-    [492, 1094]: an
-    [514, 1094]: unknown
-    [583, 1094]: printer
-    [632, 1094]: took
-    [667, 1094]: a
-    [680, 1094]: galley
-    [727, 1094]: of
-    [745, 1094]: type
-    [492, 1111]: and
-    [523, 1111]: scrambled
-    [601, 1111]: it
-    [614, 1111]: to
-    [632, 1111]: make
-    [675, 1111]: a
-    [688, 1111]: type
-    [723, 1111]: specimen
-    [492, 1128]: book.
-    [536, 1128]: It
-    [549, 1128]: has
-    [579, 1128]: survived
-    [643, 1128]: not
-    [670, 1128]: only
-    [704, 1128]: five
-    [492, 1145]: centuries,
-    [566, 1145]: but
-    [592, 1145]: also
-    [626, 1145]: the
-    [653, 1145]: leap
-    [688, 1145]: into
-    [718, 1145]: electronic
-    [492, 1161]: typesetting,
-    [578, 1161]: remaining
-    [653, 1161]: essentially
-    [492, 1178]: unchanged.
-    [580, 1178]: It
-    [594, 1178]: was
-    [626, 1178]: popularised
-    [714, 1178]: in
-    [730, 1178]: the
-    [492, 1195]: 1960s
-    [540, 1195]: with
-    [573, 1195]: the
-    [600, 1195]: release
-    [656, 1195]: of
-    [674, 1195]: Letraset
-    [736, 1195]: sheets
-    [492, 1212]: containing
-    [569, 1212]: Lorem
-    [619, 1212]: Ipsum
-    [667, 1212]: passages,
-    [744, 1212]: and
-    [492, 1229]: more
-    [533, 1229]: recently
-    [593, 1229]: with
-    [626, 1229]: desktop
-    [687, 1229]: publishing
-    [492, 1245]: software
-    [557, 1245]: like
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [723, 1245]: including
-    [492, 1262]: versions
-    [556, 1262]: of
-    [574, 1262]: Lorem
-    [624, 1262]: Ipsum.
-Clip: Path (BezierCurve(x0: 486, y0: 416, x1: 636, y1: 366, cx0: 486, cy0: 388, cx1: 553, cy1: 366) > BezierCurve(x0: 636, y0: 366, x1: 786, y1: 416, cx0: 719, cy0: 366, cx1: 786, cy1: 388) > BezierCurve(x0: 786, y0: 416, x1: 636, y1: 466, cx0: 786, cy0: 444, cx1: 719, cy1: 466) > BezierCurve(x0: 636, y0: 466, x1: 486, y1: 416, cx0: 553, cy0: 466, cx1: 486, cy1: 444))
-  Text: rgb(0,0,0) normal normal 400 16 Arial solid rgb(0,0,0) underline
-    [492, 977]: position:relative
-    [603, 977]:  
-    [608, 977]: within
-    [648, 977]:  
-    [653, 977]: a
-    [662, 977]:  
-    [666, 977]: overflow:hidden
-    [778, 976]:  
-    [492, 993]: element
-Clip: Path (BezierCurve(x0: 486, y0: 416, x1: 636, y1: 366, cx0: 486, cy0: 388, cx1: 553, cy1: 366) > BezierCurve(x0: 636, y0: 366, x1: 786, y1: 416, cx0: 719, cy0: 366, cx1: 786, cy1: 388) > BezierCurve(x0: 786, y0: 416, x1: 636, y1: 466, cx0: 786, cy0: 444, cx1: 719, cy1: 466) > BezierCurve(x0: 636, y0: 466, x1: 486, y1: 416, cx0: 553, cy0: 466, cx1: 486, cy1: 444))
-  Text: rgb(0,0,0) normal normal 700 16 Arial
-    [585, 1245]: Aldus
-    [634, 1245]: PageMaker
-Clip: Path (Vector(x: 14, y: 366) > Vector(x: 314, y: 366) > Vector(x: 314, y: 566) > Vector(x: 14, y: 566))
-  Clip: Path (Vector(x: 14, y: 971) > Vector(x: 326, y: 971) > Vector(x: 326, y: 1183) > Vector(x: 14, y: 1183))
-    Fill: rgb(204,204,204)
-  Shape: rgb(0,0,0) Path (Vector(x: 14, y: 971) > Vector(x: 326, y: 971) > Vector(x: 320, y: 977) > Vector(x: 20, y: 977))
-  Shape: rgb(0,0,0) Path (Vector(x: 326, y: 971) > Vector(x: 326, y: 1183) > Vector(x: 320, y: 1177) > Vector(x: 320, y: 977))
-  Shape: rgb(0,0,0) Path (Vector(x: 326, y: 1183) > Vector(x: 14, y: 1183) > Vector(x: 20, y: 1177) > Vector(x: 320, y: 1177))
-  Shape: rgb(0,0,0) Path (Vector(x: 14, y: 1183) > Vector(x: 14, y: 971) > Vector(x: 20, y: 977) > Vector(x: 20, y: 1177))
-Clip: Path (Vector(x: 14, y: 366) > Vector(x: 314, y: 366) > Vector(x: 314, y: 566) > Vector(x: 14, y: 566))
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [20, 1027]: Lorem
-    [70, 1027]: Ipsum
-    [118, 1027]: is
-    [134, 1027]: simply
-    [184, 1027]: dummy
-    [240, 1027]: text
-    [271, 1027]: of
-    [288, 1027]: the
-    [20, 1044]: printing
-    [77, 1044]: and
-    [108, 1044]: typesetting
-    [190, 1044]: industry.
-    [254, 1044]: Lorem
-    [20, 1061]: Ipsum
-    [68, 1061]: has
-    [98, 1061]: been
-    [138, 1061]: the
-    [165, 1061]: industry's
-    [236, 1061]: standard
-    [20, 1077]: dummy
-    [77, 1077]: text
-    [107, 1077]: ever
-    [143, 1077]: since
-    [184, 1077]: the
-    [211, 1077]: 1500s,
-    [264, 1077]: when
-    [20, 1094]: an
-    [42, 1094]: unknown
-    [111, 1094]: printer
-    [160, 1094]: took
-    [195, 1094]: a
-    [208, 1094]: galley
-    [255, 1094]: of
-    [273, 1094]: type
-    [20, 1111]: and
-    [51, 1111]: scrambled
-    [129, 1111]: it
-    [142, 1111]: to
-    [160, 1111]: make
-    [203, 1111]: a
-    [216, 1111]: type
-    [251, 1111]: specimen
-    [20, 1128]: book.
-    [64, 1128]: It
-    [77, 1128]: has
-    [107, 1128]: survived
-    [171, 1128]: not
-    [198, 1128]: only
-    [232, 1128]: five
-    [20, 1145]: centuries,
-    [94, 1145]: but
-    [120, 1145]: also
-    [154, 1145]: the
-    [181, 1145]: leap
-    [216, 1145]: into
-    [246, 1145]: electronic
-    [20, 1161]: typesetting,
-    [106, 1161]: remaining
-    [181, 1161]: essentially
-    [20, 1178]: unchanged.
-    [108, 1178]: It
-    [122, 1178]: was
-    [154, 1178]: popularised
-    [242, 1178]: in
-    [258, 1178]: the
-    [20, 1195]: 1960s
-    [68, 1195]: with
-    [101, 1195]: the
-    [128, 1195]: release
-    [184, 1195]: of
-    [202, 1195]: Letraset
-    [264, 1195]: sheets
-    [20, 1212]: containing
-    [97, 1212]: Lorem
-    [147, 1212]: Ipsum
-    [195, 1212]: passages,
-    [272, 1212]: and
-    [20, 1229]: more
-    [61, 1229]: recently
-    [121, 1229]: with
-    [154, 1229]: desktop
-    [215, 1229]: publishing
-    [20, 1245]: software
-    [85, 1245]: like
-  Text: rgb(0,0,0) normal normal 400 16 Arial
-    [251, 1245]: including
-    [20, 1262]: versions
-    [84, 1262]: of
-    [102, 1262]: Lorem
-    [152, 1262]: Ipsum.
-Clip: Path (Vector(x: 14, y: 366) > Vector(x: 314, y: 366) > Vector(x: 314, y: 566) > Vector(x: 14, y: 566))
-  Text: rgb(0,0,0) normal normal 400 16 Arial solid rgb(0,0,0) underline
-    [20, 977]: position:relative
-    [131, 977]:  
-    [136, 977]: within
-    [176, 977]:  
-    [181, 977]: a
-    [190, 977]:  
-    [194, 977]: overflow:hidden
-    [306, 976]:  
-    [20, 993]: element
-Clip: Path (Vector(x: 14, y: 366) > Vector(x: 314, y: 366) > Vector(x: 314, y: 566) > Vector(x: 14, y: 566))
-  Text: rgb(0,0,0) normal normal 700 16 Arial
-    [113, 1245]: Aldus
-    [162, 1245]: PageMaker
--- a/tests/reftests/pseudo-content.html
+++ b/tests/reftests/pseudo-content.html
@ -0,0 +1,104 @@
+<!doctype html>
+<html>
+	<head>
+        <script type="text/javascript" src="../test.js"></script>
+
+		<style>
+			body {
+				quotes: "<{" "}>" "->" "<-" "(" ")" "-:" ":-";
+			}
+
+			.counter1,
+			.counter2,
+			.quotes1,
+			.attr-url {
+				border: 1px solid deepskyblue;
+				padding: 5px;
+				margin-bottom: 10px;			
+			}
+
+			.counter1 {
+				counter-reset: c1 3;
+			}
+
+			.counter1 > div::before {
+				content: "«\"" counter(c1) "\»";
+				counter-increment: c1 -1;
+			}
+
+			.counter2 {
+				counter-reset: c2;
+			}
+
+			.counter2 > div::before {
+				content: "["counters(c2, " < ", upper-roman) ']';
+				counter-increment: c2 2;
+			}
+
+			.quotes1::before {
+				content: open-quote "!" open-quote close-quote open-quote;
+			}
+
+			.quotes1::after {
+				content: "!" close-quote close-quote;
+			}
+
+			.quotes2 {
+				quotes: "«" "»" "“" "”";
+			}
+
+			.quotes2::before {
+				content: open-quote;
+			}
+
+			.quotes2::after {
+				content: close-quote;
+			}
+
+			.attr-url > div::after {
+				content: url(../assets/image.jpg) "///" attr(data-text);
+			}
+		</style>
+	</head>
+	<body>
+		<div class="counter1">
+			<div>A</div>
+			<div>B</div>
+			<div>C</div>
+			<div>D</div>
+		</div>
+
+		<div class="counter2">
+			<div>A</div>
+			<div>B</div>
+			<div>
+				C
+				<div class="counter2">
+					<div>a</div>
+					<div>b</div>
+					<div>
+						c
+						<div class="counter2">
+							<div>Aa</div>
+							<div>Bb</div>
+							<div>Cc</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div>D</div>
+		</div>
+
+		<div class="quotes1">
+			Hello
+			<div class="quotes2">
+				Quoted
+				<div class="quotes2">World</div>
+			</div>
+		</div>
+
+		<div class="attr-url">
+			<div data-text="Hello World"></div>
+		</div>
+	</body>
+</html>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
CI	029235a652	chore(release): 1.0.0-rc.0	2019-04-07 22:01:14 +00:00
Niklas von Hertzen	44f3d79f68	build: update webpack and babel (#1793 )	2019-04-07 14:24:17 -07:00
Niklas von Hertzen	7ebef72e92	ci: automate changelog generation (#1792 )	2019-04-07 12:49:10 -07:00
Paul Thompson	2c018d1987	fix: wrap .sheet.cssRules access in try...catch. (#1693 )	2019-04-07 12:17:43 -07:00
earshinov	5cbe5db351	fix: prevent unhandled promise rejections for hidden frames (#1762 )	2019-04-06 23:44:01 -07:00
jwallet	3212184146	docs: improve canvas size limit documentation (#1576 )	2019-04-06 23:36:29 -07:00
ahebrank	349bbf137a	fix: enforce colorstop min 0 (#1743 )	2019-04-06 23:24:07 -07:00
Niklas von Hertzen	c45ef099fe	ci: Improve CI pipeline (#1790 )	2019-04-06 23:07:52 -07:00
Niklas von Hertzen	24823d0491	Upgrade gatsbyjs to v2	2019-04-05 21:28:45 -07:00
Erik Koopmans	41eb8ab22f	Add support for ES and browser bundlers (#1534 )	2018-07-06 23:03:14 +08:00
Jihwan Oh	4e02a4c7a1	Remove unintended space (#1501 )	2018-07-06 23:02:50 +08:00
Niklas von Hertzen	ce45c1bbdd	Update proxy version	2018-07-06 22:55:59 +08:00
Niklas von Hertzen	078b388974	Update mocha	2018-07-06 22:55:11 +08:00
Niklas von Hertzen	3ae7dd2ebb	Flow ignore rollup config	2018-07-06 22:39:35 +08:00
Niklas von Hertzen	dab77acde4	Update package-lock.json	2018-07-06 22:31:13 +08:00
Niklas von Hertzen	83e7eaa795	Fix type import	2018-07-06 22:28:48 +08:00
Niklas von Hertzen	cb7fbcf33e	Begin implementing rollup	2018-07-06 22:28:30 +08:00
Niklas von Hertzen	9a6e57aa00	v1.0.0-alpha.12	2018-04-05 20:49:54 +08:00
Niklas von Hertzen	a3e25d71cb	Fix white space appearing on element rendering (Fix #1438 )	2018-04-05 20:41:16 +08:00
Niklas von Hertzen	9da0f60551	Reset canvas transform on finish (Fix #1494 )	2018-04-05 19:42:32 +08:00
Niklas von Hertzen	f347953042	Remove iOS 8.4 tests	2018-04-01 17:42:27 +08:00
Niklas von Hertzen	48b4c20e24	v1.0.0-alpha.11	2018-04-01 17:14:38 +08:00
Niklas von Hertzen	6341788edf	Update package-lock.json	2018-04-01 17:09:49 +08:00
Simon	0e273418c7	IE11 Member not found fix Wrap accesing the cssText property in a try...catch (#1415 ) * https://github.com/niklasvh/html2canvas/issues/1374 - Wrap accesing the cssText property in a try...catch	2018-04-01 16:49:23 +08:00
Niklas von Hertzen	e6bbc1abb5	Merge pull request #1487 from mapleeit/support-blob-image-resources support blob image resources in non-foreignObjectRendering mode	2018-04-01 16:43:40 +08:00
maplemiao	13bbc90048	support blob image resources in non-foreignObjectRendering mode	2018-03-30 16:37:18 +08:00
Niklas von Hertzen	102b5a1282	v1.0.0-alpha.10	2018-02-15 22:50:40 +08:00
Niklas von Hertzen	01e4920876	Fix window reference for node tests	2018-02-15 22:19:25 +08:00
Niklas von Hertzen	da2794f7f7	Fix version logging (Fix #1421 )	2018-02-15 22:07:40 +08:00
Niklas von Hertzen	9fb9898894	Re-introduce onclone option (Fix #1434 )	2018-02-15 21:40:48 +08:00
Niklas von Hertzen	952eb4cf7c	Fix Travis chrome tests	2018-02-15 21:28:11 +08:00
Niklas von Hertzen	fad4f837c9	Add ignoreElements predicate function option	2018-02-15 21:26:09 +08:00
Niklas von Hertzen	e6c44afca1	Merge pull request #1417 from eKoopmans/bugfix/underlines Revert "Fix underlines, relative to 'bottom' baseline"	2018-02-15 21:00:48 +08:00
Erik Koopmans	d023de0b99	Revert "Fix underlines, relative to 'bottom' baseline" This reverts commit `0c8d38d9c0`.	2018-01-26 18:10:15 +11:00
Niklas von Hertzen	0f01810005	Update website styles	2018-01-08 22:21:11 +08:00
Niklas von Hertzen	bf03cf5237	Make website responsive	2018-01-08 21:38:54 +08:00
Niklas von Hertzen	a555dfc085	Revert "Revert "Update html2canvas version"" This reverts commit `69fb48969e`.	2018-01-08 20:42:48 +08:00
Niklas von Hertzen	69fb48969e	Revert "Update html2canvas version" This reverts commit `c9a60c4ff9`. # Conflicts: # www/package-lock.json # www/package.json	2018-01-07 23:19:47 +08:00
Niklas von Hertzen	974c35c368	Update website html2canvas package	2018-01-07 22:14:16 +08:00
Niklas von Hertzen	0fe9632a32	v1.0.0-alpha.9	2018-01-07 20:56:59 +08:00
Niklas von Hertzen	c9a60c4ff9	Update html2canvas version	2018-01-07 20:54:22 +08:00
Niklas von Hertzen	4c14894a0a	Correctly clone dynami CSSStyleSheets (Fix #1370 )	2018-01-07 20:13:26 +08:00
Niklas von Hertzen	8788a9f458	Add npm badges	2018-01-07 19:22:36 +08:00
Niklas von Hertzen	e198eae398	Merge branch 'jkrielaars-border-radius'	2018-01-07 19:20:24 +08:00
Niklas von Hertzen	474b5e81a7	Refactor border-radius update	2018-01-07 19:19:55 +08:00
Jasper Krielaars	b97972eeb6	updated calculation of border-radius	2018-01-04 08:59:38 +01:00
Niklas von Hertzen	b7c7464c5f	v1.0.0-alpha.8	2018-01-02 20:24:12 +08:00
Niklas von Hertzen	ae019f174c	Use correct doctype in cloned Document (Fix #1298 )	2018-01-02 20:06:24 +08:00
Niklas von Hertzen	ea6062c85b	Fix individual border rendering (Fix #1349 )	2018-01-02 20:04:28 +08:00
Niklas von Hertzen	9a4a506366	v1.0.0-alpha.7	2017-12-31 20:22:20 +08:00
Niklas von Hertzen	cb93b80d0d	Add thai text test	2017-12-31 20:19:27 +08:00
Niklas von Hertzen	79e1c857e6	Fix form input text positions (Fix #1338 #1347 )	2017-12-31 19:38:31 +08:00
Niklas von Hertzen	cc9d1f89dc	Merge pull request #1348 from niklasvh/line-breaking Implement unicode line-breaking	2017-12-31 19:14:26 +08:00
Niklas von Hertzen	d0f7ecfa9a	Update css-line-breaking to 1.0.1	2017-12-31 00:24:38 +08:00
Niklas von Hertzen	1870433307	Implement unicode line-breaking	2017-12-31 00:14:21 +08:00
Niklas von Hertzen	3a5ed43e97	Update package-lock.json	2017-12-29 19:15:49 +08:00
Niklas von Hertzen	8429761e8f	Fix tag names	2017-12-28 14:25:29 +08:00
Niklas von Hertzen	c4e670addf	v1.0.0-alpha6	2017-12-28 14:19:52 +08:00
Niklas von Hertzen	0aeb54ca2e	Remove console.logs	2017-12-28 13:58:42 +08:00
Niklas von Hertzen	eec84fa39e	Fix list-style-type: none (Fix #1340 )	2017-12-28 13:52:05 +08:00
Niklas von Hertzen	22f58d5d1c	Merge branch 'vnmc-feature/HTC-0010_PseudoContent'	2017-12-24 17:09:27 +08:00
Niklas von Hertzen	9046e0d554	Update to use list style parser from ListItem	2017-12-24 17:08:54 +08:00
Niklas von Hertzen	afa5d7cb8e	Merge branch 'feature/HTC-0010_PseudoContent' of git://github.com/vnmc/html2canvas into vnmc-feature/HTC-0010_PseudoContent	2017-12-24 16:30:13 +08:00
Niklas von Hertzen	3881e3cf96	Update support for list-style	2017-12-22 00:07:10 +08:00
Niklas von Hertzen	0aa973ab0d	v1.0.0-alpha.5	2017-12-21 23:54:27 +08:00
Niklas von Hertzen	baaf9b0701	Merge branch 'bugfix/underlines' of git://github.com/eKoopmans/html2canvas into eKoopmans-bugfix/underlines	2017-12-21 23:45:06 +08:00
Niklas von Hertzen	02de2ee829	Document data-html2canvas-ignore (Fix #1316 )	2017-12-21 23:42:59 +08:00
Niklas von Hertzen	a570f5df74	Update useCORS documentation (Fix #1323 )	2017-12-21 23:41:01 +08:00
Niklas von Hertzen	38749bc4b6	Fix canvas rendering on Chrome	2017-12-21 23:31:55 +08:00
Niklas von Hertzen	e1d6b4c76f	Fix overflow: auto	2017-12-21 23:29:59 +08:00
Niklas von Hertzen	31f2c22477	Fix list style issues	2017-12-21 23:22:09 +08:00
Matthias Christen	6d0cd2d226	fixed flow problems in PseudoNodeContent.js	2017-12-15 23:46:26 +01:00
Matthias Christen	7335984ab7	added support for rendering ordered lists and list-style	2017-12-15 22:55:27 +01:00
Matthias Christen	78c3c7fc71	improved support of 'content' for pseudo elements (multiple components, counters, attr, quotes)	2017-12-15 12:40:04 +01:00
Niklas von Hertzen	4551976246	Merge pull request #1312 from a0viedo/patch-1 change build badge to SVG	2017-12-14 11:01:32 +08:00
Alejandro Oviedo	9e04772b42	change build badge to SVG since it will be better for high-res screens	2017-12-13 13:01:35 -03:00
Niklas von Hertzen	54c4002df7	Fix example button hitbox	2017-12-12 23:58:09 +08:00
Niklas von Hertzen	91641a3746	Deploy new website	2017-12-12 23:26:28 +08:00
Niklas von Hertzen	c4ba6f795c	Update CHANGELOG	2017-12-12 22:55:32 +08:00
Niklas von Hertzen	0b9f34a5bf	Fix formatting	2017-12-12 22:39:27 +08:00
Niklas von Hertzen	757c32f6c4	Update unsupported features	2017-12-12 22:32:20 +08:00
Niklas von Hertzen	09bab18b48	Fix flow error	2017-12-12 22:32:12 +08:00
Niklas von Hertzen	7e53b195ea	Add no-response bot config	2017-12-12 22:28:27 +08:00
Niklas von Hertzen	ab966ff311	Fix formatting	2017-12-12 22:23:48 +08:00
Niklas von Hertzen	7bb4a6f08f	Fix compiled code using symbols	2017-12-12 22:18:15 +08:00
Niklas von Hertzen	f50da9718f	Fix NaN color stop in IE	2017-12-12 22:08:46 +08:00
Niklas von Hertzen	3965a0fd40	Fix backgroundColor option documentation (Fix #1164 )	2017-12-12 21:23:53 +08:00
Niklas von Hertzen	77d258f1d8	Fix rendering with multiple fonts defined (Fix #796 )	2017-12-12 21:08:19 +08:00
Niklas von Hertzen	261702a693	Merge branch 'vnmc-feature/HTC-0009_RadialGradients'	2017-12-12 20:58:07 +08:00
Niklas von Hertzen	cacb9f64e4	Radial gradient support	2017-12-12 20:57:48 +08:00
Matthias Christen	8ef3861a5c	added support for radial gradients	2017-12-12 20:16:04 +08:00
Niklas von Hertzen	0b74e69611	Update website demo	2017-12-12 19:43:59 +08:00
Niklas von Hertzen	c272b2e122	Remove reftest results	2017-12-11 21:38:16 +08:00
Niklas von Hertzen	2d132b85c6	Add gzipped package size to website (Fix #992 )	2017-12-11 21:20:14 +08:00
Niklas von Hertzen	50608e9cd4	Fix external SVG loading with proxies (#802 )	2017-12-11 20:51:39 +08:00
Niklas von Hertzen	d87fef11a4	Fix logging option (#1302 )	2017-12-11 20:23:43 +08:00
Niklas von Hertzen	250208dc99	Add support for rendering webgl canvas content (#646 )	2017-12-11 20:17:20 +08:00
Niklas von Hertzen	2237e8e230	Update wip website	2017-12-10 22:28:34 +08:00
Niklas von Hertzen	d3c640088c	Merge branch 'feature/HTC-0008_LinearGradients' of git://github.com/vnmc/html2canvas into vnmc-feature/HTC-0008_LinearGradients	2017-12-10 16:46:31 +08:00
Niklas von Hertzen	8fd616aed2	Update wip website	2017-12-10 16:43:34 +08:00
Matthias Christen	d1e870de88	added support for gradient background size and fixed linear gradient angle when vendor prefix is used	2017-12-09 23:07:27 +01:00
Erik Koopmans	0c8d38d9c0	Fix underlines, relative to 'bottom' baseline	2017-12-06 23:49:11 +11:00