chore(release): 1.3.0

CHANGELOG.md

@@ -2,6 +2,48 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+# [1.3.0](https://github.com/niklasvh/html2canvas/compare/v1.2.2...v1.3.0) (2021-08-13)
+
+
+### feat
+
+* add rtl render support (#2653) ([6947982](https://github.com/niklasvh/html2canvas/commit/694798284838b16882e648914da0905818aa366c)), closes [#2653](https://github.com/niklasvh/html2canvas/issues/2653)
+* correctly break graphemes (#2652) ([437b367](https://github.com/niklasvh/html2canvas/commit/437b367d3ba9dfd7f9a4c8042ac8d00208c09770)), closes [#2652](https://github.com/niklasvh/html2canvas/issues/2652)
+
+### fix
+
+* correctly handle allowTaint canvas cloning (#2649) ([c378e22](https://github.com/niklasvh/html2canvas/commit/c378e220694c14cb7b3b4b8650a7757f8fc23c7a)), closes [#2649](https://github.com/niklasvh/html2canvas/issues/2649)
+* finish animation/transitions for elements (#2632) ([969638f](https://github.com/niklasvh/html2canvas/commit/969638fb94a0a14c64a667fa6e5689f79d9f1044)), closes [#2632](https://github.com/niklasvh/html2canvas/issues/2632)
+
+### test
+
+* add letter-spacing test for zwj emoji (#2650) ([f919204](https://github.com/niklasvh/html2canvas/commit/f919204efa06af219f155ca279f96124bb92862b)), closes [#2650](https://github.com/niklasvh/html2canvas/issues/2650)
+
+
+
+## [1.2.2](https://github.com/niklasvh/html2canvas/compare/v1.2.1...v1.2.2) (2021-08-10)
+
+
+### ci
+
+* add ios15 target (#2564) ([e429e04](https://github.com/niklasvh/html2canvas/commit/e429e0443adf5c7ca3041b97a8157b8911302206)), closes [#2564](https://github.com/niklasvh/html2canvas/issues/2564)
+
+### docs
+
+* update test previewer (#2637) ([7a06d0c](https://github.com/niklasvh/html2canvas/commit/7a06d0c2c2f3b8a1d1a8a85c540f8288b782e8c6)), closes [#2637](https://github.com/niklasvh/html2canvas/issues/2637)
+
+### fix
+
+* parsing counter content in pseudo element (#2640) ([1941b9e](https://github.com/niklasvh/html2canvas/commit/1941b9e0acfd9243da0beaf70e1643cab1b4a963)), closes [#2640](https://github.com/niklasvh/html2canvas/issues/2640)
+* radial gradient ry check (#2631) ([a0dd38a](https://github.com/niklasvh/html2canvas/commit/a0dd38a8be4e540ae1c1f4b4e41f6c386f3e454f)), closes [#2631](https://github.com/niklasvh/html2canvas/issues/2631)
+* test for ios range line break error (#2635) ([f43f942](https://github.com/niklasvh/html2canvas/commit/f43f942fcd793dde9cdc6c0438f379ec3c05c405)), closes [#2635](https://github.com/niklasvh/html2canvas/issues/2635)
+
+### test
+
+* large base64 encoded background (#2636) ([e36408a](https://github.com/niklasvh/html2canvas/commit/e36408ad030fe31acd9969a37fe24c1621c0bd04)), closes [#2636](https://github.com/niklasvh/html2canvas/issues/2636)
+
+
+
 ## [1.2.1](https://github.com/niklasvh/html2canvas/compare/v1.2.0...v1.2.1) (2021-08-05)
 
 

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.3.0",
   "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": "0.2.0",
+    "base64-arraybuffer": "1.0.1",
     "body-parser": "^1.19.0",
     "chai": "4.1.1",
     "chromeless": "^1.5.2",
@@ -118,6 +118,7 @@
   "homepage": "https://html2canvas.hertzen.com",
   "license": "MIT",
   "dependencies": {
-    "css-line-break": "2.0.1"
+    "css-line-break": "2.0.1",
+    "text-segmentation": "^1.0.2"
   }
 }

src/css/IPropertyDescriptor.ts

@@ -1,8 +1,8 @@
 import {CSSValue} from './syntax/parser';
-import {CSSTypes} from './types/index';
+import {CSSTypes} from './types';
 import {Context} from '../core/context';
 
-export enum PropertyDescriptorParsingType {
+export const enum PropertyDescriptorParsingType {
     VALUE,
     LIST,
     IDENT_VALUE,

src/css/index.ts

@@ -31,6 +31,7 @@ import {
     borderTopWidth
 } from './property-descriptors/border-width';
 import {color} from './property-descriptors/color';
+import {direction} from './property-descriptors/direction';
 import {display, DISPLAY} from './property-descriptors/display';
 import {float, FLOAT} from './property-descriptors/float';
 import {letterSpacing} from './property-descriptors/letter-spacing';
@@ -57,6 +58,7 @@ import {Tokenizer} from './syntax/tokenizer';
 import {Color, color as colorType, isTransparent} from './types/color';
 import {angle} from './types/angle';
 import {image} from './types/image';
+import {time} from './types/time';
 import {opacity} from './property-descriptors/opacity';
 import {textDecorationColor} from './property-descriptors/text-decoration-color';
 import {textDecorationLine} from './property-descriptors/text-decoration-line';
@@ -71,6 +73,7 @@ import {contains} from '../core/bitwise';
 import {content} from './property-descriptors/content';
 import {counterIncrement} from './property-descriptors/counter-increment';
 import {counterReset} from './property-descriptors/counter-reset';
+import {duration} from './property-descriptors/duration';
 import {quotes} from './property-descriptors/quotes';
 import {boxShadow} from './property-descriptors/box-shadow';
 import {paintOrder} from './property-descriptors/paint-order';
@@ -79,6 +82,7 @@ import {webkitTextStrokeWidth} from './property-descriptors/webkit-text-stroke-w
 import {Context} from '../core/context';
 
 export class CSSParsedDeclaration {
+    animationDuration: ReturnType<typeof time.parse>;
     backgroundClip: ReturnType<typeof backgroundClip.parse>;
     backgroundColor: Color;
     backgroundImage: ReturnType<typeof backgroundImage.parse>;
@@ -104,6 +108,7 @@ export class CSSParsedDeclaration {
     borderLeftWidth: ReturnType<typeof borderLeftWidth.parse>;
     boxShadow: ReturnType<typeof boxShadow.parse>;
     color: Color;
+    direction: ReturnType<typeof direction.parse>;
     display: ReturnType<typeof display.parse>;
     float: ReturnType<typeof float.parse>;
     fontFamily: ReturnType<typeof fontFamily.parse>;
@@ -138,6 +143,7 @@ export class CSSParsedDeclaration {
     textTransform: ReturnType<typeof textTransform.parse>;
     transform: ReturnType<typeof transform.parse>;
     transformOrigin: ReturnType<typeof transformOrigin.parse>;
+    transitionDuration: ReturnType<typeof time.parse>;
     visibility: ReturnType<typeof visibility.parse>;
     webkitTextStrokeColor: Color;
     webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>;
@@ -145,6 +151,7 @@ export class CSSParsedDeclaration {
     zIndex: ReturnType<typeof zIndex.parse>;
 
     constructor(context: Context, declaration: CSSStyleDeclaration) {
+        this.animationDuration = parse(context, duration, declaration.animationDuration);
         this.backgroundClip = parse(context, backgroundClip, declaration.backgroundClip);
         this.backgroundColor = parse(context, backgroundColor, declaration.backgroundColor);
         this.backgroundImage = parse(context, backgroundImage, declaration.backgroundImage);
@@ -170,6 +177,7 @@ export class CSSParsedDeclaration {
         this.borderLeftWidth = parse(context, borderLeftWidth, declaration.borderLeftWidth);
         this.boxShadow = parse(context, boxShadow, declaration.boxShadow);
         this.color = parse(context, color, declaration.color);
+        this.direction = parse(context, direction, declaration.direction);
         this.display = parse(context, display, declaration.display);
         this.float = parse(context, float, declaration.cssFloat);
         this.fontFamily = parse(context, fontFamily, declaration.fontFamily);
@@ -213,6 +221,7 @@ export class CSSParsedDeclaration {
         this.textTransform = parse(context, textTransform, declaration.textTransform);
         this.transform = parse(context, transform, declaration.transform);
         this.transformOrigin = parse(context, transformOrigin, declaration.transformOrigin);
+        this.transitionDuration = parse(context, duration, declaration.transitionDuration);
         this.visibility = parse(context, visibility, declaration.visibility);
         this.webkitTextStrokeColor = parse(context, webkitTextStrokeColor, declaration.webkitTextStrokeColor);
         this.webkitTextStrokeWidth = parse(context, webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
@@ -306,6 +315,8 @@ const parse = (context: Context, descriptor: CSSPropertyDescriptor<any>, style?:
                 case 'length-percentage':
                     const value = parser.parseComponentValue();
                     return isLengthPercentage(value) ? value : ZERO_LENGTH;
+                case 'time':
+                    return time.parse(context, parser.parseComponentValue());
             }
             break;
     }

src/css/layout/text.ts

@@ -1,6 +1,7 @@
 import {OVERFLOW_WRAP} from '../property-descriptors/overflow-wrap';
 import {CSSParsedDeclaration} from '../index';
 import {fromCodePoint, LineBreaker, toCodePoints} from 'css-line-break';
+import {splitGraphemes} from 'text-segmentation';
 import {Bounds, parseBounds} from './bounds';
 import {FEATURES} from '../../core/features';
 import {Context} from '../../core/context';
@@ -86,7 +87,7 @@ const getRangeBounds = (context: Context, node: Text, offset: number, length: nu
 };
 
 const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
-    return styles.letterSpacing !== 0 ? toCodePoints(value).map((i) => fromCodePoint(i)) : breakWords(value, styles);
+    return styles.letterSpacing !== 0 ? splitGraphemes(value) : breakWords(value, styles);
 };
 
 // https://drafts.csswg.org/css-text/#word-separator

src/css/property-descriptors/direction.ts

@@ -0,0 +1,23 @@
+import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {Context} from '../../core/context';
+
+export const enum DIRECTION {
+    LTR = 0,
+    RTL = 1
+}
+
+export const direction: IPropertyIdentValueDescriptor<DIRECTION> = {
+    name: 'direction',
+    initialValue: 'ltr',
+    prefix: false,
+    type: PropertyDescriptorParsingType.IDENT_VALUE,
+    parse: (_context: Context, direction: string) => {
+        switch (direction) {
+            case 'rtl':
+                return DIRECTION.RTL;
+            case 'ltr':
+            default:
+                return DIRECTION.LTR;
+        }
+    }
+};

src/css/property-descriptors/duration.ts

@@ -0,0 +1,9 @@
+import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+
+export const duration: IPropertyTypeValueDescriptor = {
+    name: 'duration',
+    initialValue: '0s',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'time'
+};

src/css/property-descriptors/overflow-wrap.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum OVERFLOW_WRAP {
+export const enum OVERFLOW_WRAP {
     NORMAL = 'normal',
     BREAK_WORD = 'break-word'
 }

src/css/syntax/tokenizer.ts

@@ -2,7 +2,7 @@
 
 import {fromCodePoint, toCodePoints} from 'css-line-break';
 
-export enum TokenType {
+export const enum TokenType {
     STRING_TOKEN,
     BAD_STRING_TOKEN,
     LEFT_PARENTHESIS_TOKEN,

src/css/types/functions/counter.ts

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

src/css/types/index.ts

@@ -1 +1 @@
-export type CSSTypes = 'angle' | 'color' | 'image' | 'length' | 'length-percentage';
+export type CSSTypes = 'angle' | 'color' | 'image' | 'length' | 'length-percentage' | 'time';

src/css/types/time.ts

@@ -0,0 +1,20 @@
+import {CSSValue} from '../syntax/parser';
+import {TokenType} from '../syntax/tokenizer';
+import {ITypeDescriptor} from '../ITypeDescriptor';
+import {Context} from '../../core/context';
+
+export const time: ITypeDescriptor<number> = {
+    name: 'time',
+    parse: (_context: Context, value: CSSValue): number => {
+        if (value.type === TokenType.DIMENSION_TOKEN) {
+            switch (value.unit.toLowerCase()) {
+                case 's':
+                    return 1000 * value.number;
+                case 'ms':
+                    return value.number;
+            }
+        }
+
+        throw new Error(`Unsupported time type`);
+    }
+};

src/dom/document-cloner.ts

@@ -24,6 +24,7 @@ import {Context} from '../core/context';
 export interface CloneOptions {
     ignoreElements?: (element: Element) => boolean;
     onclone?: (document: Document, element: HTMLElement) => void;
+    allowTaint?: boolean;
 }
 
 export interface WindowOptions {
@@ -201,14 +202,16 @@ export class DocumentCloner {
             const ctx = canvas.getContext('2d');
             const clonedCtx = clonedCanvas.getContext('2d');
             if (clonedCtx) {
-                if (ctx) {
+                if (!this.options.allowTaint && ctx) {
                     clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);
                 } else {
                     clonedCtx.drawImage(canvas, 0, 0);
                 }
             }
             return clonedCanvas;
-        } catch (e) {}
+        } catch (e) {
+            this.context.logger.info(`Unable to clone canvas as it is tainted`);
+        }
 
         return clonedCanvas;
     }

src/dom/element-container.ts

@@ -21,10 +21,21 @@ export class ElementContainer {
         this.styles = new CSSParsedDeclaration(context, window.getComputedStyle(element, null));
         this.textNodes = [];
         this.elements = [];
-        if (this.styles.transform !== null && isHTMLElementNode(element)) {
-            // getBoundingClientRect takes transforms into account
-            element.style.transform = 'none';
+
+        if (isHTMLElementNode(element)) {
+            if (this.styles.animationDuration > 0) {
+                element.style.animationDuration = '0s';
+            }
+            if (this.styles.transitionDuration > 0) {
+                element.style.transitionDuration = '0s';
+            }
+
+            if (this.styles.transform !== null) {
+                // getBoundingClientRect takes transforms into account
+                element.style.transform = 'none';
+            }
         }
+
         this.bounds = parseBounds(this.context, element);
         this.flags = 0;
     }

src/index.ts

@@ -74,6 +74,7 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
     const foreignObjectRendering = opts.foreignObjectRendering ?? false;
 
     const cloneOptions: CloneConfigurations = {
+        allowTaint: opts.allowTaint ?? false,
         onclone: opts.onclone,
         ignoreElements: opts.ignoreElements,
         inlineImages: foreignObjectRendering,

src/render/canvas/canvas-renderer.ts

@@ -19,7 +19,6 @@ import {
 import {calculateBackgroundRendering, getBackgroundValueForIndex} from '../background';
 import {isDimensionToken} from '../../css/syntax/parser';
 import {TextBounds} from '../../css/layout/text';
-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';
@@ -44,6 +43,8 @@ import {TextShadow} from '../../css/property-descriptors/text-shadow';
 import {PAINT_ORDER_LAYER} from '../../css/property-descriptors/paint-order';
 import {Renderer} from '../renderer';
 import {Context} from '../../core/context';
+import {DIRECTION} from '../../css/property-descriptors/direction';
+import {splitGraphemes} from 'text-segmentation';
 
 export type RenderConfigurations = RenderOptions & {
     backgroundColor: Color | null;
@@ -144,7 +145,7 @@ export class CanvasRenderer extends Renderer {
         if (letterSpacing === 0) {
             this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
         } else {
-            const letters = toCodePoints(text.text).map((i) => fromCodePoint(i));
+            const letters = splitGraphemes(text.text);
             letters.reduce((left, letter) => {
                 this.ctx.fillText(letter, left, text.bounds.top + baseline);
 
@@ -174,6 +175,8 @@ export class CanvasRenderer extends Renderer {
 
         this.ctx.font = font;
 
+        this.ctx.direction = styles.direction === DIRECTION.RTL ? 'rtl' : 'ltr';
+        this.ctx.textAlign = 'left';
         this.ctx.textBaseline = 'alphabetic';
         const {baseline, middle} = this.fontMetrics.getMetrics(fontFamily, fontSize);
         const paintOrder = styles.paintOrder;

tests/reftests/animation.html

@@ -5,46 +5,84 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script type="text/javascript" src="../test.js"></script>
     <style>
-        span {
-            color:blue;
-        }
-        p {
-            background-color: green;
-        }
-        div {
-            background: red;
-            border: 5px solid blue;
-            animation: spin 3s linear 1s infinite;
-        }
         body {
             font-family: Arial;
         }
 
-        @-webkit-keyframes spin {
+        @keyframes rotate0 {
             0% {
-                -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
-                /* Firefox 16+, IE 10+, Opera */ }
-            100% {
-                -webkit-transform: rotate(360deg);
-                transform: rotate(360deg);
-                /* Firefox 16+, IE 10+, Opera */ } }
+            }
+        }
 
-        @keyframes spin {
+        @keyframes rotate45 {
             0% {
-                -webkit-transform: rotate(0deg);
-                transform: rotate(0deg);
-                /* Firefox 16+, IE 10+, Opera */ }
-            100% {
-                -webkit-transform: rotate(360deg);
-                transform: rotate(360deg);
-                /* Firefox 16+, IE 10+, Opera */ } }
+                transform: rotate(45deg);
+            }
+        }
+
+        p {
+            font: 22px/1 Arial, sans-serif;
+            position: absolute;
+            top: 25%;
+            left: 25%;
+            width: 50%;
+            height: 50%;
+            color: #fff;
+            background-color: #666;
+            line-height: 90px;
+            text-align: center;
+        }
+
+        .transformed.working p {
+            transform: rotate(45deg);
+        }
+
+        .animated.working p {
+            animation-name: rotate0;
+            animation-duration: 1ms;
+            animation-play-state: paused;
+        }
+
+        .animated.broken p {
+            animation-name: rotate45;
+            animation-duration: 1ms;
+            animation-play-state: paused;
+        }
+
+        .transitioned p {
+            transition: 1ms;
+            transform: rotate(45deg)
+        }
+
+
+        div {
+            float: left;
+            clear: left;
+            margin-right: 10px;
+            background-color: #ccc;
+            width: 180px;
+            height: 180px;
+            position: relative;
+        }
     </style>
 
 </head>
 <body>
-<div style="clip: rect(0px, 400px, 50px, 200px); ">Some inline text <span> followed by text in span </span> followed by more inline text.
-    <p>Then a block level element.</p>
-    Then more inline text.</div>
+<div class="transformed working">
+    <p>Hello</p>
+</div>
+
+<div class="animated working">
+    <p>Hello</p>
+</div>
+
+<div class="animated broken">
+    <p>Hello</p>
+</div>
+
+<div class="transitioned broken">
+    <p>Hello</p>
+</div>
 </body>
 </html>

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/reftests/text/text.html

@@ -149,5 +149,6 @@
     <span>[AB / CD]</span>
 </div>
 <div>Emojis 🤷🏾‍♂️👨‍👩‍👧‍👦 :)</div>
+<div style="letter-spacing: 2px">Emojis with letter-spacing 🤷🏾‍♂️👨‍👩‍👧‍👦 :)</div>
 </body>
 </html>