chore(release): 1.2.2

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)
 
 

package-lock.json

@@ -1,15 +1,14 @@
 {
   "name": "html2canvas",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "1.2.1",
+      "version": "1.1.5",
       "license": "MIT",
       "dependencies": {
-        "css-line-break": "2.0.1",
-        "text-segmentation": "^1.0.2"
+        "css-line-break": "2.0.1"
       },
       "devDependencies": {
         "@babel/cli": "^7.4.3",
@@ -37,7 +36,7 @@
         "babel-loader": "^8.0.5",
         "babel-plugin-add-module-exports": "^1.0.2",
         "babel-plugin-dev-expression": "^0.2.1",
-        "base64-arraybuffer": "1.0.1",
+        "base64-arraybuffer": "0.2.0",
         "body-parser": "^1.19.0",
         "chai": "4.1.1",
         "chromeless": "^1.5.2",
@@ -5785,9 +5784,9 @@
       }
     },
     "node_modules/base64-arraybuffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz",
-      "integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==",
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -8638,14 +8637,6 @@
         "base64-arraybuffer": "^0.2.0"
       }
     },
-    "node_modules/css-line-break/node_modules/base64-arraybuffer": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
-      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -23450,14 +23441,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/text-segmentation": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.2.tgz",
-      "integrity": "sha512-uTqvLxdBrVnx/CFQOtnf8tfzSXFm+1Qxau7Xi54j4OPTZokuDOX8qncQzrg2G8ZicAMOM8TgzFAYTb+AqNO4Cw==",
-      "dependencies": {
-        "utrie": "^1.0.1"
-      }
-    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -24534,14 +24517,6 @@
         "node": ">= 0.4.0"
       }
     },
-    "node_modules/utrie": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.1.tgz",
-      "integrity": "sha512-JPaDXF3vzgZxfeEwutdGzlrNoVFL5UvZcbO6Qo9D4GoahrieUPoMU8GCpVpR7MQqcKhmShIh8VlbEN3PLM3EBg==",
-      "dependencies": {
-        "base64-arraybuffer": "^1.0.1"
-      }
-    },
     "node_modules/uuid": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
@@ -30482,9 +30457,9 @@
       }
     },
     "base64-arraybuffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz",
-      "integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA=="
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
     },
     "base64-js": {
       "version": "1.3.0",
@@ -32841,13 +32816,6 @@
       "integrity": "sha512-gwKYIMUn7xodIcb346wgUhE2Dt5O1Kmrc16PWi8sL4FTfyDj8P5095rzH7+O8CTZudJr+uw2GCI/hwEkDJFI2w==",
       "requires": {
         "base64-arraybuffer": "^0.2.0"
-      },
-      "dependencies": {
-        "base64-arraybuffer": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
-          "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
-        }
       }
     },
     "cssom": {
@@ -44541,14 +44509,6 @@
       "integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==",
       "dev": true
     },
-    "text-segmentation": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.2.tgz",
-      "integrity": "sha512-uTqvLxdBrVnx/CFQOtnf8tfzSXFm+1Qxau7Xi54j4OPTZokuDOX8qncQzrg2G8ZicAMOM8TgzFAYTb+AqNO4Cw==",
-      "requires": {
-        "utrie": "^1.0.1"
-      }
-    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -45372,14 +45332,6 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
       "dev": true
     },
-    "utrie": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.1.tgz",
-      "integrity": "sha512-JPaDXF3vzgZxfeEwutdGzlrNoVFL5UvZcbO6Qo9D4GoahrieUPoMU8GCpVpR7MQqcKhmShIh8VlbEN3PLM3EBg==",
-      "requires": {
-        "base64-arraybuffer": "^1.0.1"
-      }
-    },
     "uuid": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",

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",
@@ -48,7 +48,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-dev-expression": "^0.2.1",
-    "base64-arraybuffer": "1.0.1",
+    "base64-arraybuffer": "0.2.0",
     "body-parser": "^1.19.0",
     "chai": "4.1.1",
     "chromeless": "^1.5.2",
@@ -118,7 +118,6 @@
   "homepage": "https://html2canvas.hertzen.com",
   "license": "MIT",
   "dependencies": {
-    "css-line-break": "2.0.1",
-    "text-segmentation": "^1.0.2"
+    "css-line-break": "2.0.1"
   }
 }

src/core/features.ts

@@ -1,4 +1,4 @@
-import {fromCodePoint, toCodePoints} from 'text-segmentation';
+import {fromCodePoint, toCodePoints} from 'css-line-break';
 
 const testRangeBounds = (document: Document) => {
     const TEST_HEIGHT = 123;

src/css/layout/text.ts

@@ -1,5 +1,6 @@
+import {OVERFLOW_WRAP} from '../property-descriptors/overflow-wrap';
 import {CSSParsedDeclaration} from '../index';
-import {splitGraphemes} from 'text-segmentation';
+import {fromCodePoint, LineBreaker, toCodePoints} from 'css-line-break';
 import {Bounds, parseBounds} from './bounds';
 import {FEATURES} from '../../core/features';
 import {Context} from '../../core/context';
@@ -20,7 +21,7 @@ export const parseTextBounds = (
     styles: CSSParsedDeclaration,
     node: Text
 ): TextBounds[] => {
-    const textList = splitGraphemes(value);
+    const textList = breakText(value, styles);
     const textBounds: TextBounds[] = [];
     let offset = 0;
     textList.forEach((text) => {
@@ -83,3 +84,45 @@ const createRange = (node: Text, offset: number, length: number): Range => {
 const getRangeBounds = (context: Context, node: Text, offset: number, length: number): Bounds => {
     return Bounds.fromClientRect(context, createRange(node, offset, length).getBoundingClientRect());
 };
+
+const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
+    return styles.letterSpacing !== 0 ? toCodePoints(value).map((i) => fromCodePoint(i)) : breakWords(value, styles);
+};
+
+// https://drafts.csswg.org/css-text/#word-separator
+const wordSeparators = [0x0020, 0x00a0, 0x1361, 0x10100, 0x10101, 0x1039, 0x1091];
+
+const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {
+    const breaker = LineBreaker(str, {
+        lineBreak: styles.lineBreak,
+        wordBreak: styles.overflowWrap === OVERFLOW_WRAP.BREAK_WORD ? 'break-word' : styles.wordBreak
+    });
+
+    const words = [];
+    let bk;
+
+    while (!(bk = breaker.next()).done) {
+        if (bk.value) {
+            const value = bk.value.slice();
+            const codePoints = toCodePoints(value);
+            let word = '';
+            codePoints.forEach((codePoint) => {
+                if (wordSeparators.indexOf(codePoint) === -1) {
+                    word += fromCodePoint(codePoint);
+                } else {
+                    if (word.length) {
+                        words.push(word);
+                    }
+                    words.push(fromCodePoint(codePoint));
+                    word = '';
+                }
+            });
+
+            if (word.length) {
+                words.push(word);
+            }
+        }
+    }
+
+    return words;
+};

src/css/syntax/tokenizer.ts

@@ -1,6 +1,6 @@
 // https://www.w3.org/TR/css-syntax-3
 
-import {fromCodePoint, toCodePoints} from 'text-segmentation';
+import {fromCodePoint, toCodePoints} from 'css-line-break';
 
 export enum TokenType {
     STRING_TOKEN,

src/css/types/functions/counter.ts

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

src/render/canvas/canvas-renderer.ts

@@ -19,7 +19,7 @@ import {
 import {calculateBackgroundRendering, getBackgroundValueForIndex} from '../background';
 import {isDimensionToken} from '../../css/syntax/parser';
 import {TextBounds} from '../../css/layout/text';
-import {fromCodePoint, toCodePoints} from 'text-segmentation';
+import {fromCodePoint, toCodePoints} from 'css-line-break';
 import {ImageElementContainer} from '../../dom/replaced-elements/image-element-container';
 import {contentBox} from '../box-sizing';
 import {CanvasElementContainer} from '../../dom/replaced-elements/canvas-element-container';

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>