chore(release): 1.1.5

* fix: emoji line breaking (fix #1813)

* test: fix text.html reftest

CHANGELOG.md

@@ -2,6 +2,42 @@
 
 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.1.5](https://github.com/niklasvh/html2canvas/compare/v1.1.4...v1.1.5) (2021-08-02)
+
+
+### docs
+
+* update README to github discussion Q/A ([5dea36b](https://github.com/niklasvh/html2canvas/commit/5dea36bd6964164e8ba3f8780309e792f5d16255))
+
+### fix
+
+* emoji line breaking (fix #1813) (#2621) ([7d788c6](https://github.com/niklasvh/html2canvas/commit/7d788c6f3d221b87f6b59fcda8517731340b2d1f)), closes [#1813](https://github.com/niklasvh/html2canvas/issues/1813) [#2621](https://github.com/niklasvh/html2canvas/issues/2621) [#1813](https://github.com/niklasvh/html2canvas/issues/1813)
+* natural sizes for images with srcset (#2622) ([96e23d1](https://github.com/niklasvh/html2canvas/commit/96e23d185198b7131cf0cfa31c14c165790464e9)), closes [#2622](https://github.com/niklasvh/html2canvas/issues/2622)
+
+
+
+## [1.1.4](https://github.com/niklasvh/html2canvas/compare/v1.1.3...v1.1.4) (2021-07-15)
+
+
+### feat
+
+* add support for webkit-text-stroke and paint-order (#2591) ([522e5aa](https://github.com/niklasvh/html2canvas/commit/522e5aac5fdad090953d095b5d558053a5e2d43d)), closes [#2591](https://github.com/niklasvh/html2canvas/issues/2591)
+
+### fix
+
+* don't copy 'all' css property (#2586) ([fa60716](https://github.com/niklasvh/html2canvas/commit/fa60716d07ed590ec64543a586a7960cbc8557df)), closes [#2586](https://github.com/niklasvh/html2canvas/issues/2586)
+* svg d path getting truncated on copy (#2589) ([dd6d885](https://github.com/niklasvh/html2canvas/commit/dd6d8856eca820a13a0990c467b9e531433fd4a9)), closes [#2589](https://github.com/niklasvh/html2canvas/issues/2589)
+* text position for form elements and list markers (#2588) ([cd99f11](https://github.com/niklasvh/html2canvas/commit/cd99f11b1b9eb1260a548a63e2a370a0a5ddafa0)), closes [#2588](https://github.com/niklasvh/html2canvas/issues/2588)
+* this.canvas.ownerDocument is undefined (#2590) ([45efe54](https://github.com/niklasvh/html2canvas/commit/45efe54da8145f97b9ee0463e686103280e3c8b1)), closes [#2590](https://github.com/niklasvh/html2canvas/issues/2590)
+* word-break seperators (#2593) ([e9f7f48](https://github.com/niklasvh/html2canvas/commit/e9f7f48d571304be14610a181feedca3c3b42864)), closes [#2593](https://github.com/niklasvh/html2canvas/issues/2593)
+
+### test
+
+* refactor language tests (#2594) ([4c360fc](https://github.com/niklasvh/html2canvas/commit/4c360fc1f059f4dcab71a79f9dc8a5b2e25411ea)), closes [#2594](https://github.com/niklasvh/html2canvas/issues/2594)
+* update box-shadow with radius ([578bb77](https://github.com/niklasvh/html2canvas/commit/578bb771bfeb7e81362e9e355d6cc9ae910e3920))
+
+
+
 ## [1.1.3](https://github.com/niklasvh/html2canvas/compare/v1.1.2...v1.1.3) (2021-07-14)
 
 

README.md

@@ -1,7 +1,7 @@
 html2canvas
 ===========
 
-[Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](http://stackoverflow.com/questions/tagged/html2canvas?sort=newest)
+[Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](https://github.com/niklasvh/html2canvas/discussions/categories/q-a)
 
 [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 
 ![CI](https://github.com/niklasvh/html2canvas/workflows/CI/badge.svg?branch=master)

docs/features.md

@@ -12,9 +12,9 @@ Below is a list of all the supported CSS properties and values.
        - url()
        - linear-gradient()
        - radial-gradient()
-   - background-origin 
+   - background-origin
    - background-position
-   - background-size   
+   - background-size
  - border
    - border-color
    - border-radius
@@ -50,6 +50,7 @@ Below is a list of all the supported CSS properties and values.
  - overflow
  - overflow-wrap
  - padding
+ - paint-order
  - position
  - right
  - text-align
@@ -58,17 +59,18 @@ Below is a list of all the supported CSS properties and values.
    - text-decoration-line
    - text-decoration-style (**Only supports `solid`**)
  - text-shadow
- - text-transform 
+ - text-transform
  - top
  - transform (**Limited support**)
  - visibility
  - white-space
  - width
+ - webkit-text-stroke
  - word-break
  - word-spacing
  - word-wrap
  - z-index
-    
+
 ## Unsupported CSS properties
 These CSS properties are **NOT** currently supported
  - [background-blend-mode](https://github.com/niklasvh/html2canvas/issues/966)

package-lock.json

@@ -1,14 +1,14 @@
 {
   "name": "html2canvas",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "1.1.0",
+      "version": "1.1.4",
       "license": "MIT",
       "dependencies": {
-        "css-line-break": "1.1.1"
+        "css-line-break": "2.0.0"
       },
       "devDependencies": {
         "@babel/cli": "^7.4.3",
@@ -8630,9 +8630,9 @@
       }
     },
     "node_modules/css-line-break": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
-      "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.0.0.tgz",
+      "integrity": "sha512-zEKNpyrJHt4R3qAXLTdJkJc7F/4dkNWG+ij2CHF6/o346QJ6GSjD+oaKOUQoibOy0Wvl3F8IYdEEx3yb/+rdJw==",
       "dependencies": {
         "base64-arraybuffer": "^0.2.0"
       }
@@ -32811,9 +32811,9 @@
       }
     },
     "css-line-break": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
-      "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.0.0.tgz",
+      "integrity": "sha512-zEKNpyrJHt4R3qAXLTdJkJc7F/4dkNWG+ij2CHF6/o346QJ6GSjD+oaKOUQoibOy0Wvl3F8IYdEEx3yb/+rdJw==",
       "requires": {
         "base64-arraybuffer": "^0.2.0"
       }

package.json

@@ -6,7 +6,7 @@
   "module": "dist/html2canvas.esm.js",
   "typings": "dist/types/index.d.ts",
   "browser": "dist/html2canvas.js",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "author": {
     "name": "Niklas von Hertzen",
     "email": "niklasvh@gmail.com",
@@ -118,6 +118,6 @@
   "homepage": "https://html2canvas.hertzen.com",
   "license": "MIT",
   "dependencies": {
-    "css-line-break": "1.1.1"
+    "css-line-break": "2.0.0"
   }
 }

src/css/index.ts

@@ -73,6 +73,9 @@ import {counterIncrement} from './property-descriptors/counter-increment';
 import {counterReset} from './property-descriptors/counter-reset';
 import {quotes} from './property-descriptors/quotes';
 import {boxShadow} from './property-descriptors/box-shadow';
+import {paintOrder} from './property-descriptors/paint-order';
+import {webkitTextStrokeColor} from './property-descriptors/webkit-text-stroke-color';
+import {webkitTextStrokeWidth} from './property-descriptors/webkit-text-stroke-width';
 
 export class CSSParsedDeclaration {
     backgroundClip: ReturnType<typeof backgroundClip.parse>;
@@ -125,6 +128,7 @@ export class CSSParsedDeclaration {
     paddingRight: LengthPercentage;
     paddingBottom: LengthPercentage;
     paddingLeft: LengthPercentage;
+    paintOrder: ReturnType<typeof paintOrder.parse>;
     position: ReturnType<typeof position.parse>;
     textAlign: ReturnType<typeof textAlign.parse>;
     textDecorationColor: Color;
@@ -134,6 +138,8 @@ export class CSSParsedDeclaration {
     transform: ReturnType<typeof transform.parse>;
     transformOrigin: ReturnType<typeof transformOrigin.parse>;
     visibility: ReturnType<typeof visibility.parse>;
+    webkitTextStrokeColor: Color;
+    webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>;
     wordBreak: ReturnType<typeof wordBreak.parse>;
     zIndex: ReturnType<typeof zIndex.parse>;
 
@@ -189,6 +195,7 @@ export class CSSParsedDeclaration {
         this.paddingRight = parse(paddingRight, declaration.paddingRight);
         this.paddingBottom = parse(paddingBottom, declaration.paddingBottom);
         this.paddingLeft = parse(paddingLeft, declaration.paddingLeft);
+        this.paintOrder = parse(paintOrder, declaration.paintOrder);
         this.position = parse(position, declaration.position);
         this.textAlign = parse(textAlign, declaration.textAlign);
         this.textDecorationColor = parse(textDecorationColor, declaration.textDecorationColor ?? declaration.color);
@@ -201,6 +208,8 @@ export class CSSParsedDeclaration {
         this.transform = parse(transform, declaration.transform);
         this.transformOrigin = parse(transformOrigin, declaration.transformOrigin);
         this.visibility = parse(visibility, declaration.visibility);
+        this.webkitTextStrokeColor = parse(webkitTextStrokeColor, declaration.webkitTextStrokeColor);
+        this.webkitTextStrokeWidth = parse(webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
         this.wordBreak = parse(wordBreak, declaration.wordBreak);
         this.zIndex = parse(zIndex, declaration.zIndex);
     }

src/css/layout/text.ts

@@ -70,6 +70,9 @@ 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,
@@ -81,7 +84,24 @@ const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {
 
     while (!(bk = breaker.next()).done) {
         if (bk.value) {
-            words.push(bk.value.slice());
+            const value = bk.value.slice();
+            const codePoints = toCodePoints(value);
+            let word = '';
+            codePoints.forEach((codePoint) => {
+                if (wordSeparators.indexOf(codePoint) === -1) {
+                    word += fromCodePoint(codePoint);
+                } else {
+                    if (word.length) {
+                        words.push(word);
+                    }
+                    words.push(fromCodePoint(codePoint));
+                    word = '';
+                }
+            });
+
+            if (word.length) {
+                words.push(word);
+            }
         }
     }
 

src/css/property-descriptors/__tests__/paint-order.ts

@@ -0,0 +1,86 @@
+import {deepStrictEqual} from 'assert';
+import {Parser} from '../../syntax/parser';
+import {paintOrder, PAINT_ORDER_LAYER} from '../paint-order';
+
+const paintOrderParse = (value: string) => paintOrder.parse(Parser.parseValues(value));
+
+describe('property-descriptors', () => {
+    describe('paint-order', () => {
+        it('none', () =>
+            deepStrictEqual(paintOrderParse('none'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('EMPTY', () =>
+            deepStrictEqual(paintOrderParse(''), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('other values', () =>
+            deepStrictEqual(paintOrderParse('other values'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('normal', () =>
+            deepStrictEqual(paintOrderParse('normal'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('stroke', () =>
+            deepStrictEqual(paintOrderParse('stroke'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('fill', () =>
+            deepStrictEqual(paintOrderParse('fill'), [
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('markers', () =>
+            deepStrictEqual(paintOrderParse('markers'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.STROKE
+            ]));
+
+        it('stroke fill', () =>
+            deepStrictEqual(paintOrderParse('stroke fill'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+
+        it('markers stroke', () =>
+            deepStrictEqual(paintOrderParse('markers stroke'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL
+            ]));
+
+        it('markers stroke fill', () =>
+            deepStrictEqual(paintOrderParse('markers stroke fill'), [
+                PAINT_ORDER_LAYER.MARKERS,
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL
+            ]));
+
+        it('stroke fill markers', () =>
+            deepStrictEqual(paintOrderParse('stroke fill markers'), [
+                PAINT_ORDER_LAYER.STROKE,
+                PAINT_ORDER_LAYER.FILL,
+                PAINT_ORDER_LAYER.MARKERS
+            ]));
+    });
+});

src/css/property-descriptors/paint-order.ts

@@ -0,0 +1,41 @@
+import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+import {CSSValue, isIdentToken} from '../syntax/parser';
+export enum PAINT_ORDER_LAYER {
+    FILL,
+    STROKE,
+    MARKERS
+}
+
+export type PaintOrder = PAINT_ORDER_LAYER[];
+
+export const paintOrder: IPropertyListDescriptor<PaintOrder> = {
+    name: 'paint-order',
+    initialValue: 'normal',
+    prefix: false,
+    type: PropertyDescriptorParsingType.LIST,
+    parse: (tokens: CSSValue[]): PaintOrder => {
+        const DEFAULT_VALUE = [PAINT_ORDER_LAYER.FILL, PAINT_ORDER_LAYER.STROKE, PAINT_ORDER_LAYER.MARKERS];
+        let layers: PaintOrder = [];
+
+        tokens.filter(isIdentToken).forEach((token) => {
+            switch (token.value) {
+                case 'stroke':
+                    layers.push(PAINT_ORDER_LAYER.STROKE);
+                    break;
+                case 'fill':
+                    layers.push(PAINT_ORDER_LAYER.FILL);
+                    break;
+                case 'markers':
+                    layers.push(PAINT_ORDER_LAYER.MARKERS);
+                    break;
+            }
+        });
+        DEFAULT_VALUE.forEach((value) => {
+            if (layers.indexOf(value) === -1) {
+                layers.push(value);
+            }
+        });
+
+        return layers;
+    }
+};

src/css/property-descriptors/webkit-text-stroke-color.ts

@@ -0,0 +1,8 @@
+import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+export const webkitTextStrokeColor: IPropertyTypeValueDescriptor = {
+    name: `-webkit-text-stroke-color`,
+    initialValue: 'currentcolor',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'color'
+};

src/css/property-descriptors/webkit-text-stroke-width.ts

@@ -0,0 +1,14 @@
+import {CSSValue, isDimensionToken} from '../syntax/parser';
+import {IPropertyValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+export const webkitTextStrokeWidth: IPropertyValueDescriptor<number> = {
+    name: `-webkit-text-stroke-width`,
+    initialValue: '0',
+    type: PropertyDescriptorParsingType.VALUE,
+    prefix: false,
+    parse: (token: CSSValue): number => {
+        if (isDimensionToken(token)) {
+            return token.number;
+        }
+        return 0;
+    }
+};

src/dom/document-cloner.ts

@@ -132,8 +132,15 @@ export class DocumentCloner {
         }
 
         const clone = node.cloneNode(false) as T;
-        if (isImageElement(clone) && clone.loading === 'lazy') {
-            clone.loading = 'eager';
+        if (isImageElement(clone)) {
+            if (isImageElement(node) && node.currentSrc && node.currentSrc !== node.src) {
+                clone.src = node.currentSrc;
+                clone.srcset = '';
+            }
+
+            if (clone.loading === 'lazy') {
+                clone.loading = 'eager';
+            }
         }
 
         return clone;
@@ -443,12 +450,17 @@ const iframeLoader = (iframe: HTMLIFrameElement): Promise<HTMLIFrameElement> =>
     });
 };
 
+const ignoredStyleProperties = [
+    'all', // #2476
+    'd', // #2483
+    'content' // Safari shows pseudoelements if content is set
+];
+
 export const copyCSSStyles = <T extends HTMLElement | SVGElement>(style: CSSStyleDeclaration, target: T): T => {
     // Edge does not provide value for cssText
     for (let i = style.length - 1; i >= 0; i--) {
         const property = style.item(i);
-        // Safari shows pseudoelements if content is set
-        if (property !== 'content') {
+        if (ignoredStyleProperties.indexOf(property) === -1) {
             target.style.setProperty(property, style.getPropertyValue(property));
         }
     }

src/render/canvas/canvas-renderer.ts

@@ -43,6 +43,7 @@ import {TextareaElementContainer} from '../../dom/elements/textarea-element-cont
 import {SelectElementContainer} from '../../dom/elements/select-element-container';
 import {IFrameElementContainer} from '../../dom/replaced-elements/iframe-element-container';
 import {TextShadow} from '../../css/property-descriptors/text-shadow';
+import {PAINT_ORDER_LAYER} from '../../css/property-descriptors/paint-order';
 
 export type RenderConfigurations = RenderOptions & {
     backgroundColor: Color | null;
@@ -179,65 +180,88 @@ export class CanvasRenderer {
         const [font, fontFamily, fontSize] = this.createFontStyle(styles);
 
         this.ctx.font = font;
-        this.ctx.textBaseline = 'alphabetic';
 
+        this.ctx.textBaseline = 'alphabetic';
         const {baseline, middle} = this.fontMetrics.getMetrics(fontFamily, fontSize);
+        const paintOrder = styles.paintOrder;
 
         text.textBounds.forEach((text) => {
-            this.ctx.fillStyle = asString(styles.color);
-            this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
-            const textShadows: TextShadow = styles.textShadow;
-
-            if (textShadows.length && text.text.trim().length) {
-                textShadows
-                    .slice(0)
-                    .reverse()
-                    .forEach((textShadow) => {
-                        this.ctx.shadowColor = asString(textShadow.color);
-                        this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
-                        this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
-                        this.ctx.shadowBlur = textShadow.blur.number;
-
+            paintOrder.forEach((paintOrderLayer) => {
+                switch (paintOrderLayer) {
+                    case PAINT_ORDER_LAYER.FILL:
+                        this.ctx.fillStyle = asString(styles.color);
                         this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
-                    });
+                        const textShadows: TextShadow = styles.textShadow;
 
-                this.ctx.shadowColor = '';
-                this.ctx.shadowOffsetX = 0;
-                this.ctx.shadowOffsetY = 0;
-                this.ctx.shadowBlur = 0;
-            }
+                        if (textShadows.length && text.text.trim().length) {
+                            textShadows
+                                .slice(0)
+                                .reverse()
+                                .forEach((textShadow) => {
+                                    this.ctx.shadowColor = asString(textShadow.color);
+                                    this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
+                                    this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
+                                    this.ctx.shadowBlur = textShadow.blur.number;
 
-            if (styles.textDecorationLine.length) {
-                this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
-                styles.textDecorationLine.forEach((textDecorationLine) => {
-                    switch (textDecorationLine) {
-                        case TEXT_DECORATION_LINE.UNDERLINE:
-                            // Draws a line at the baseline of the font
-                            // TODO As some browsers display the line as more than 1px if the font-size is big,
-                            // need to take that into account both in position and size
-                            this.ctx.fillRect(
-                                text.bounds.left,
-                                Math.round(text.bounds.top + baseline),
-                                text.bounds.width,
-                                1
-                            );
+                                    this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
+                                });
 
-                            break;
-                        case TEXT_DECORATION_LINE.OVERLINE:
-                            this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top), text.bounds.width, 1);
-                            break;
-                        case TEXT_DECORATION_LINE.LINE_THROUGH:
-                            // TODO try and find exact position for line-through
-                            this.ctx.fillRect(
-                                text.bounds.left,
-                                Math.ceil(text.bounds.top + middle),
-                                text.bounds.width,
-                                1
-                            );
-                            break;
-                    }
-                });
-            }
+                            this.ctx.shadowColor = '';
+                            this.ctx.shadowOffsetX = 0;
+                            this.ctx.shadowOffsetY = 0;
+                            this.ctx.shadowBlur = 0;
+                        }
+
+                        if (styles.textDecorationLine.length) {
+                            this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
+                            styles.textDecorationLine.forEach((textDecorationLine) => {
+                                switch (textDecorationLine) {
+                                    case TEXT_DECORATION_LINE.UNDERLINE:
+                                        // Draws a line at the baseline of the font
+                                        // TODO As some browsers display the line as more than 1px if the font-size is big,
+                                        // need to take that into account both in position and size
+                                        this.ctx.fillRect(
+                                            text.bounds.left,
+                                            Math.round(text.bounds.top + baseline),
+                                            text.bounds.width,
+                                            1
+                                        );
+
+                                        break;
+                                    case TEXT_DECORATION_LINE.OVERLINE:
+                                        this.ctx.fillRect(
+                                            text.bounds.left,
+                                            Math.round(text.bounds.top),
+                                            text.bounds.width,
+                                            1
+                                        );
+                                        break;
+                                    case TEXT_DECORATION_LINE.LINE_THROUGH:
+                                        // TODO try and find exact position for line-through
+                                        this.ctx.fillRect(
+                                            text.bounds.left,
+                                            Math.ceil(text.bounds.top + middle),
+                                            text.bounds.width,
+                                            1
+                                        );
+                                        break;
+                                }
+                            });
+                        }
+                        break;
+                    case PAINT_ORDER_LAYER.STROKE:
+                        if (styles.webkitTextStrokeWidth && text.text.trim().length) {
+                            this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
+                            this.ctx.lineWidth = styles.webkitTextStrokeWidth;
+                            this.ctx.lineJoin = !!(window as any).chrome ? 'miter' : 'round';
+                            this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline);
+                        }
+                        this.ctx.strokeStyle = '';
+                        this.ctx.lineWidth = 0;
+                        this.ctx.lineJoin = 'miter';
+                        break;
+                }
+            });
         });
     }
 
@@ -376,7 +400,7 @@ export class CanvasRenderer {
             this.ctx.font = fontFamily;
             this.ctx.fillStyle = asString(styles.color);
 
-            this.ctx.textBaseline = 'middle';
+            this.ctx.textBaseline = 'alphabetic';
             this.ctx.textAlign = canvasTextAlign(container.styles.textAlign);
 
             const bounds = contentBox(container);
@@ -409,7 +433,7 @@ export class CanvasRenderer {
                 baseline
             );
             this.ctx.restore();
-            this.ctx.textBaseline = 'bottom';
+            this.ctx.textBaseline = 'alphabetic';
             this.ctx.textAlign = 'left';
         }
 
@@ -427,7 +451,7 @@ export class CanvasRenderer {
                     }
                 }
             } else if (paint.listValue && container.styles.listStyleType !== LIST_STYLE_TYPE.NONE) {
-                const [fontFamily, fontSize] = this.createFontStyle(styles);
+                const [fontFamily] = this.createFontStyle(styles);
 
                 this.ctx.font = fontFamily;
                 this.ctx.fillStyle = asString(styles.color);
@@ -441,12 +465,10 @@ export class CanvasRenderer {
                     computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 1
                 );
 
-                const {baseline} = this.fontMetrics.getMetrics(fontFamily, fontSize);
-
                 this.renderTextWithLetterSpacing(
                     new TextBounds(paint.listValue, bounds),
                     styles.letterSpacing,
-                    baseline
+                    computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 2
                 );
                 this.ctx.textBaseline = 'bottom';
                 this.ctx.textAlign = 'left';
@@ -554,7 +576,8 @@ export class CanvasRenderer {
             return image;
         }
 
-        const canvas = (this.canvas.ownerDocument as Document).createElement('canvas');
+        const ownerDocument = this.canvas.ownerDocument ?? document;
+        const canvas = ownerDocument.createElement('canvas');
         canvas.width = Math.max(1, width);
         canvas.height = Math.max(1, height);
         const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

tests/reftests/background/box-shadow.html

@@ -9,7 +9,7 @@
             margin: 10px;
             display: inline-block;
             min-height: 50px;
-       //     border-radius: 10px;
+            border-radius: 10px;
         }
 
         body {

tests/reftests/images/images.html

@@ -24,6 +24,9 @@
 
     <img src="../../assets/image.jpg" style="width:0px;height:0px;border:1px solid black" />
     <img src="../../assets/image.jpg" style="width:0px;height:0px;" />
+
+    <img srcset="../../assets/image.jpg, ../../assets/image2.jpg 2x" src="../../assets/image.jpg" style="width: 75px">
+
     <script>
       const base64 = "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";
       const bytes = atob(base64);

tests/reftests/images/svg/native_only.html

@@ -40,5 +40,13 @@
         <text x="65" y="35" class="canvas">canvas</text>
     </svg>
     <img width="200" height="200" src="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjMwNiIgaGVpZ2h0PSIyOTYiPjxkZWZzIGlkPSJkZWZzNCIgLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYyLjQ2OTk1LC00NzcuMjg2MykiIGlkPSJsYXllcjEiPjxwYXRoIGQ9Im0gMzE0LjE1NzQ1LDQ4MS42OTU1OCBjIC01OS4yMDA4OSwwLjUzNzc0IC0xMTQuODA5NzksMzYuNzIyMTkgLTEzNy4zMTI1LDk1LjM0Mzc1IC0yOS4zOTEyOSw3Ni41NjY5MyA4LjgzOTMyLDE2Mi40NTI0NiA4NS40MDYyNSwxOTEuODQzNzUgbCAzNC4wMzEyNSwtODguNjg3NSBjIC0yMC4wNjc4LC03LjcxMzU4IC0zNC4zMTI1LC0yNy4xNTMyNCAtMzQuMzEyNSwtNDkuOTM3NSAwLC0yOS41NDcyMyAyMy45NTI3NywtNTMuNSA1My41LC01My41IDI5LjU0NzIzLDAgNTMuNSwyMy45NTI3NyA1My41LDUzLjUgMCwyMi43ODQyNiAtMTQuMjQ0Nyw0Mi4yMjM5MiAtMzQuMzEyNSw0OS45Mzc1IGwgMzQuMDMxMjUsODguNjg3NSBjIDM5LjI5MDg1LC0xNS4wODIzNCA3MC4zMjM5LC00Ni4xMTU0IDg1LjQwNjI1LC04NS40MDYyNSAyOS4zOTEyOSwtNzYuNTY2OTMgLTguODM5MzIsLTE2Mi40ODM3MSAtODUuNDA2MjUsLTE5MS44NzUgLTE3Ljk0NTM3LC02Ljg4ODU5IC0zNi40MDg1MywtMTAuMDcwODcgLTU0LjUzMTI1LC05LjkwNjI1IHoiIGlkPSJwYXRoMjgzMCIgc3R5bGU9ImZpbGw6IzQwYWE1NDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzIwNTUyYTtzdHJva2Utd2lkdGg6Ny45OTk5OTk1MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1vcGFjaXR5OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAvPjwvZz48L3N2Zz4=" /></div>
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width=50 height=20>
+        <g data-z-index="0.1" opacity="1" transform="translate(-974,-30) scale(1 1)">
+            <path fill="#7cb5ec" d="M 990 37.734399999999994 A 4 4 0 1 1 990.0039999993332 37.73439800000016 Z" opacity="1" stroke-width="0.00015790535835003006"></path>
+            <path fill="#7cb5ec" d="M 999 37.734399999999994 A 4 4 0 1 1 999.0039999993332 37.73439800000016 Z" opacity="1" stroke-width="0.00015790535835003006"></path>
+            <path fill="#7cb5ec" d="M 1009 37.734399999999994 A 4 4 0 1 1 1009.0039999993332 37.73439800000016 Z" opacity="1" stroke-width="0.00015790535835003006"></path>
+            <path fill="#7cb5ec" d="M 1019 37.734399999999994 A 4 4 0 1 1 1019.0039999993332 37.73439800000016 Z" opacity="1" stroke-width="0.00015790535835003006"></path>
+        </g>
+    </svg>
 </body>
 </html>

tests/reftests/text/lang/chinese.html

@@ -3,7 +3,7 @@
   <head>
     <title>Chinese text</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <script type="text/javascript" src="../../test.js"></script>
+    <script type="text/javascript" src="../../../test.js"></script>
     <style>
       .chn-text-block {
         width: 500px;

tests/reftests/text/lang/persian.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html dir="rtl" lang="fa-IR">
+<head>
+    <title>Persian rtl</title>
+
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../../test.js"></script>
+    <style>
+        body{
+            font-family: Arial;
+        }
+        .test{
+            padding: 10px 25px;
+            direction: rtl;
+        }
+    </style>
+</head>
+<body>
+<div class="test" lang="fa">
+    <p>
+        سلام دنیا! این یک تست است...
+    </p>
+</div>
+<span class="test" lang="fa">من می‌توانم. این است قدرت جاوااسکریپت!</span>
+</body>
+</html>

tests/reftests/text/lang/thai.html

@@ -3,7 +3,7 @@
 <head>
     <title>Thai text</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <script type="text/javascript" src="../../test.js"></script>
+    <script type="text/javascript" src="../../../test.js"></script>
     <style>
         .text-block {
             width: 500px;

tests/reftests/text/text.html

@@ -1,137 +1,153 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Text tests</title>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <script type="text/javascript" src="../../test.js"></script>
-        <style>
-            body {
-                font-family: Arial;
-            }
-            .small{
-                font-size:14px;
-                line-height: 1vw;
-            }
+<head>
+    <title>Text tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        body {
+            font-family: Arial;
+        }
 
-            .medium{
-                font-size:18px;
-                line-height: 2vw;
-            }
-            .large{
-                font-size:24px;
-                line-height: 3vw;
-            }
-            div{
-                float:left;
-            }
-            h2 {
-                clear:both;
-            }
-            h1 {
-                font-size: 36px;
-                line-height: 4vw;
-            }
+        .small {
+            font-size: 14px;
+            line-height: 1vw;
+        }
 
-            h2 {
-                font-size: 24px;
-                line-height: 3vw;
-            }
+        .medium {
+            font-size: 18px;
+            line-height: 2vw;
+        }
 
-            h3 {
-                font-size: 16px;
-                line-height: 2vw;
-            }
-        </style>
+        .large {
+            font-size: 24px;
+            line-height: 3vw;
+        }
 
-    </head>
-    <body>           <h1>&lt;h1&gt; text-decoration</h1>
-        <div style="font-family:Arial;">
-            <h2>Arial</h2>
-            <ol class="small">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
+        div {
+            float: left;
+        }
 
-            <ol class="medium">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-            <ol class="large">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-        </div>
+        h2 {
+            clear: both;
+        }
 
-        <div style="font-family:Verdana;">
-            <h2>Verdana</h2>
-            <ol class="small">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
+        h1 {
+            font-size: 36px;
+            line-height: 4vw;
+        }
 
-            <ol class="medium">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-            <ol class="large">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-        </div>
+        h2 {
+            font-size: 24px;
+            line-height: 3vw;
+        }
 
-        <div style="font-family:Tahoma;">
-            <h2>Tahoma</h2>
-            <ol class="small">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
+        h3 {
+            font-size: 16px;
+            line-height: 2vw;
+        }
 
-            <ol class="medium">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-            <ol class="large">
-                <li style="text-decoration:none;">text-decoration:none;</li>
-                <li style="text-decoration:underline;">text-decoration:underline;</li>
-                <li style="text-decoration:overline;">text-decoration:overline;</li>
-                <li style="text-decoration:line-through;">text-decoration:line-through;</li>
-            </ol>
-        </div>
+        .raw {
+            font-size: 60px;
+            word-spacing: 30px;
+        }
+    </style>
 
-        <h2>&lt;h2&gt; text-transform</h2>
-        <ul>
-            <li style="text-transform:none;">text-transform:none;</li>
-            <li style="text-transform:capitalize;">text-transform: capitalize; (including foreign characters such as Öaäå)</li>
-            <li style="text-transform:uppercase;">text-transform:uppercase;</li>
-            <li style="text-transform:lowercase;">text-transform:lowercase;</li>
-        </ul>
-        <h3>&lt;h3&gt; misc text alignments</h3>
-        <ul>
-            <li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always be correct)</li>
-            <li style="line-height:35px;">line-height:35px; <br />(same goes for line-height)</li>
-            <li style="letter-spacing:5px;">letter-spacing:5px;</li>
-            <li style="letter-spacing:0.9px;">letter-spacing:0.9px;</li>
-            <li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
-            <li style="font-variant:small-caps;">font-variant:small-caps; </li>
-        </ul>
+</head>
+<body>
 
-        <div style="font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace">npm install --save html2canvas</div>
+<h1>&lt;h1&gt; text-decoration</h1>
+<div style="font-family:Arial;">
+    <h2>Arial</h2>
+    <ol class="small">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
 
-    </body>
+    <ol class="medium">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+    <ol class="large">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+</div>
+
+<div style="font-family:Verdana;">
+    <h2>Verdana</h2>
+    <ol class="small">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+    <ol class="medium">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+    <ol class="large">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+</div>
+<div style="font-family:Tahoma;">
+    <h2>Tahoma</h2>
+    <ol class="small">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+
+    <ol class="medium">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+    <ol class="large">
+        <li style="text-decoration:none;">text-decoration:none;</li>
+        <li style="text-decoration:underline;">text-decoration:underline;</li>
+        <li style="text-decoration:overline;">text-decoration:overline;</li>
+        <li style="text-decoration:line-through;">text-decoration:line-through;</li>
+    </ol>
+</div>
+
+<h2>&lt;h2&gt; text-transform</h2>
+<ul>
+    <li style="text-transform:none;">text-transform:none;</li>
+    <li style="text-transform:capitalize;">text-transform: capitalize; (including foreign characters such as Öaäå)
+    </li>
+    <li style="text-transform:uppercase;">text-transform:uppercase;</li>
+    <li style="text-transform:lowercase;">text-transform:lowercase;</li>
+</ul>
+<h3>&lt;h3&gt; misc text alignments</h3>
+<ul>
+    <li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always
+        be correct)
+    </li>
+    <li style="line-height:35px;">line-height:35px; <br/>(same goes for line-height)</li>
+    <li style="letter-spacing:5px;">letter-spacing:5px;</li>
+    <li style="letter-spacing:0.9px;">letter-spacing:0.9px;</li>
+    <li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
+    <li style="font-variant:small-caps;">font-variant:small-caps;</li>
+</ul>
+
+<div style="font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace">npm install --save html2canvas</div>
+<div class="raw" style="">
+    <span>[AB / CD]</span>
+</div>
+<div>Emojis 🤷🏾‍♂️👨‍👩‍👧‍👦 :)</div>
+</body>
 </html>