chore(release): 1.2.2

.github/workflows/ci.yml

@@ -117,6 +117,9 @@ jobs:
             name: iOS Simulator Safari 15
             targetBrowser: Safari_IOS_15
             xcode: /Applications/Xcode_13.0.app
+          - os: windows-latest
+            name: Windows Internet Explorer 9 (Emulated)
+            targetBrowser: IE_9
           - os: windows-latest
             name: Windows Internet Explorer 10 (Emulated)
             targetBrowser: IE_10

CHANGELOG.md

@@ -2,6 +2,29 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.2.2](https://github.com/niklasvh/html2canvas/compare/v1.2.1...v1.2.2) (2021-08-10)
+
+
+### ci
+
+* add ios15 target (#2564) ([e429e04](https://github.com/niklasvh/html2canvas/commit/e429e0443adf5c7ca3041b97a8157b8911302206)), closes [#2564](https://github.com/niklasvh/html2canvas/issues/2564)
+
+### docs
+
+* update test previewer (#2637) ([7a06d0c](https://github.com/niklasvh/html2canvas/commit/7a06d0c2c2f3b8a1d1a8a85c540f8288b782e8c6)), closes [#2637](https://github.com/niklasvh/html2canvas/issues/2637)
+
+### fix
+
+* parsing counter content in pseudo element (#2640) ([1941b9e](https://github.com/niklasvh/html2canvas/commit/1941b9e0acfd9243da0beaf70e1643cab1b4a963)), closes [#2640](https://github.com/niklasvh/html2canvas/issues/2640)
+* radial gradient ry check (#2631) ([a0dd38a](https://github.com/niklasvh/html2canvas/commit/a0dd38a8be4e540ae1c1f4b4e41f6c386f3e454f)), closes [#2631](https://github.com/niklasvh/html2canvas/issues/2631)
+* test for ios range line break error (#2635) ([f43f942](https://github.com/niklasvh/html2canvas/commit/f43f942fcd793dde9cdc6c0438f379ec3c05c405)), closes [#2635](https://github.com/niklasvh/html2canvas/issues/2635)
+
+### test
+
+* large base64 encoded background (#2636) ([e36408a](https://github.com/niklasvh/html2canvas/commit/e36408ad030fe31acd9969a37fe24c1621c0bd04)), closes [#2636](https://github.com/niklasvh/html2canvas/issues/2636)
+
+
+
 ## [1.2.1](https://github.com/niklasvh/html2canvas/compare/v1.2.0...v1.2.1) (2021-08-05)
 
 

README.md

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

docs/documentation.md

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

karma.conf.js

@@ -48,6 +48,12 @@ module.exports = function(config) {
             platform: 'iOS',
             sdk: '15.0'
         },
+        SauceLabs_IE9: {
+            base: 'SauceLabs',
+            browserName: 'internet explorer',
+            version: '9.0',
+            platform: 'Windows 7'
+        },
         SauceLabs_IE10: {
             base: 'SauceLabs',
             browserName: 'internet explorer',
@@ -87,6 +93,11 @@ module.exports = function(config) {
             version: '9.3',
             device: 'iPhone 6 Plus Simulator'
         },
+        IE_9: {
+            base: 'IE',
+            'x-ua-compatible': 'IE=EmulateIE9',
+            flags: ['-extoff']
+        },
         IE_10: {
             base: 'IE',
             'x-ua-compatible': 'IE=EmulateIE10',

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "html2canvas",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

package.json

@@ -6,7 +6,7 @@
   "module": "dist/html2canvas.esm.js",
   "typings": "dist/types/index.d.ts",
   "browser": "dist/html2canvas.js",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "author": {
     "name": "Niklas von Hertzen",
     "email": "niklasvh@gmail.com",

src/core/cache-storage.ts

@@ -12,6 +12,7 @@ export class CacheStorage {
         }
 
         link.href = url;
+        link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/
         return link.protocol + link.hostname + link.port;
     }
 

src/css/types/functions/counter.ts

@@ -4,10 +4,7 @@ import {contains} from '../../../core/bitwise';
 import {CSSParsedCounterDeclaration} from '../../index';
 
 export class CounterState {
-    readonly counters: {[key: string]: number[]};
+    private readonly counters: {[key: string]: number[]} = {};
-    constructor() {
-        this.counters = {};
-    }
 
     getCounterValue(name: string): number {
         const counter = this.counters[name];
@@ -18,7 +15,7 @@ export class CounterState {
         return 1;
     }
 
-    getCounterValues(name: string): number[] {
+    getCounterValues(name: string): readonly number[] {
         const counter = this.counters[name];
         return counter ? counter : [];
     }
@@ -37,6 +34,9 @@ export class CounterState {
                 const counter = this.counters[entry.counter];
                 if (counter && entry.increment !== 0) {
                     canReset = false;
+                    if (!counter.length) {
+                        counter.push(1);
+                    }
                     counter[Math.max(0, counter.length - 1)] += entry.increment;
                 }
             });

tests/reftests/pseudo-content.html

@@ -86,6 +86,20 @@
                                             of the section counter, separated
                                             by a period */
         }
+
+        .issue-2639 {
+            display: flex;
+        }
+
+        .issue-2639::before {
+            content: counter(ol0) '. ';
+            counter-increment: ol0;
+        }
+
+        .issue-2639:first-child {
+            counter-reset: ol0;
+        }
+
     </style>
 </head>
 <body>
@@ -163,5 +177,10 @@
     <li>item</li>          <!-- 2     -->
 </ol>
 
+<ol>
+    <li class="issue-2639">one</li>
+    <li class="issue-2639">two</li>
+</ol>
+
 </body>
 </html>

tests/testrunner.ts

@@ -8,14 +8,15 @@ import {ScreenshotRequest} from './types';
 // @ts-ignore
 window.Promise = Promise;
 const testRunnerUrl = location.href;
+const hasHistoryApi = typeof window.history !== 'undefined' && typeof window.history.replaceState !== 'undefined';
 
 const uploadResults = (canvas: HTMLCanvasElement, url: string) => {
-    // @ts-ignore
+    return new Promise((resolve: () => void, reject: (error: string) => void) => {
-    return new Promise((resolve: () => void, reject: (error: any) => void) => {
+        // @ts-ignore
-        const xhr = new XMLHttpRequest();
+        const xhr = 'withCredentials' in new XMLHttpRequest() ? new XMLHttpRequest() : new XDomainRequest();
 
         xhr.onload = () => {
-            if (xhr.status === 200) {
+            if (typeof xhr.status !== 'number' || xhr.status === 200) {
                 resolve();
             } else {
                 reject(`Failed to send screenshot with status ${xhr.status}`);
@@ -61,17 +62,21 @@ testList
                 testContainer.onload = () => done();
 
                 testContainer.src = url + '?selenium&run=false&reftest&' + Math.random();
-                // Chrome does not resolve relative background urls correctly inside of a nested iframe
+                if (hasHistoryApi) {
-                try {
+                    // Chrome does not resolve relative background urls correctly inside of a nested iframe
-                    history.replaceState(null, '', url);
+                    try {
-                } catch (e) {}
+                        history.replaceState(null, '', url);
+                    } catch (e) {}
+                }
 
                 document.body.appendChild(testContainer);
             });
             after(() => {
-                try {
+                if (hasHistoryApi) {
-                    history.replaceState(null, '', testRunnerUrl);
+                    try {
-                } catch (e) {}
+                        history.replaceState(null, '', testRunnerUrl);
+                    } catch (e) {}
+                }
                 document.body.removeChild(testContainer);
             });