examples: fix duplication (#2813)

.github/workflows/ci.yml

@@ -101,22 +101,26 @@ jobs:
           - os: macos-latest
             name: OSX Safari Stable
             targetBrowser: Safari_Stable
-          - os: macos-latest
+          - os: macos-10.15
             name: iOS Simulator Safari 12
             targetBrowser: Safari_IOS_12
             xcode: /Applications/Xcode_10.3.app
-          - os: macos-latest
+          - os: macos-10.15
             name: iOS Simulator Safari 13
             targetBrowser: Safari_IOS_13
-            xcode: /Applications/Xcode_11.6_beta.app
+            xcode: /Applications/Xcode_11.7.app
-          - os: macos-latest
+          - os: macos-10.15
             name: iOS Simulator Safari 14
             targetBrowser: Safari_IOS_14
-            xcode: /Applications/Xcode_12_beta.app
+            xcode: /Applications/Xcode_12.4.app
+          - os: macos-11
+            name: iOS Simulator Safari 15.0
+            targetBrowser: Safari_IOS_15_0
+            xcode: /Applications/Xcode_13.0.app
           - os: macos-11
             name: iOS Simulator Safari 15
             targetBrowser: Safari_IOS_15
-            xcode: /Applications/Xcode_13.0.app
+            xcode: /Applications/Xcode_13.2.app
           - os: windows-latest
             name: Windows Internet Explorer 9 (Emulated)
             targetBrowser: IE_9

CHANGELOG.md

@@ -2,6 +2,66 @@
 
 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.4.1](https://github.com/niklasvh/html2canvas/compare/v1.4.0...v1.4.1) (2022-01-22)
+
+
+### deps
+
+* fix source maps (#2812) ([67c5e8d](https://github.com/niklasvh/html2canvas/commit/67c5e8dec4b2af9260a2b5b75b3399495fd1fee9)), closes [#2812](https://github.com/niklasvh/html2canvas/issues/2812)
+
+### feat
+
+* add support for `<video>` elements (#2788) ([181d1b1](https://github.com/niklasvh/html2canvas/commit/181d1b1103910d6e1b5277d5c007fc5e3006c6bf)), closes [#2788](https://github.com/niklasvh/html2canvas/issues/2788)
+
+### fix
+
+* Properties x and y of BoundingRect is undefined in old browser (#2797) ([e587a82](https://github.com/niklasvh/html2canvas/commit/e587a82dca01d9ada78cae34fd1bdb934e547f9b)), closes [#2797](https://github.com/niklasvh/html2canvas/issues/2797)
+* source maps (#2787) ([46db867](https://github.com/niklasvh/html2canvas/commit/46db86755f064828559a4b0b37310f3ae94f5494)), closes [#2787](https://github.com/niklasvh/html2canvas/issues/2787)
+
+
+
+# [1.4.0](https://github.com/niklasvh/html2canvas/compare/v1.3.4...v1.4.0) (2022-01-01)
+
+
+### feat
+
+* use native text segmenter where available (#2782) ([6521a48](https://github.com/niklasvh/html2canvas/commit/6521a487d78172f7179f7c973c1a3af40eb92009)), closes [#2782](https://github.com/niklasvh/html2canvas/issues/2782)
+
+### fix
+
+* adopted stylesheets (#2785) ([74696fa](https://github.com/niklasvh/html2canvas/commit/74696faf47c07b48b9c9587db0b999da1c08a8be)), closes [#2785](https://github.com/niklasvh/html2canvas/issues/2785)
+* ios text wrapping with 0 width rect (#2786) ([0476d06](https://github.com/niklasvh/html2canvas/commit/0476d065158c33d2020a9f602b3043e5e2f90c75)), closes [#2786](https://github.com/niklasvh/html2canvas/issues/2786)
+* reduce SLICE_STACK_SIZE to 50k (#2784) ([1cc853a](https://github.com/niklasvh/html2canvas/commit/1cc853a3186853eaca00af060f651697dc3497a9)), closes [#2784](https://github.com/niklasvh/html2canvas/issues/2784)
+
+
+
+## [1.3.4](https://github.com/niklasvh/html2canvas/compare/v1.3.3...v1.3.4) (2021-12-29)
+
+
+### ci
+
+* add ios 15.0 testing (#2780) ([d922207](https://github.com/niklasvh/html2canvas/commit/d9222075daaed08884491b0563fc899ee0ced731)), closes [#2780](https://github.com/niklasvh/html2canvas/issues/2780)
+
+### fix
+
+* ios 15 font rendering crash (#2645) ([ba2b1cd](https://github.com/niklasvh/html2canvas/commit/ba2b1cd8e9a9d7932675d7abffce1526a609e769)), closes [#2645](https://github.com/niklasvh/html2canvas/issues/2645)
+
+
+
+## [1.3.3](https://github.com/niklasvh/html2canvas/compare/v1.3.2...v1.3.3) (2021-11-23)
+
+
+### ci
+
+* fix macos action runners (#2757) ([ed57781](https://github.com/niklasvh/html2canvas/commit/ed577815949b6a565df54f2101cf6f0fb731c290)), closes [#2757](https://github.com/niklasvh/html2canvas/issues/2757)
+
+### fix
+
+* "offsets" text when font is big ([fd22a01](https://github.com/niklasvh/html2canvas/commit/fd22a01a3c9e39293f47caaed0c0e13d2dc8170c))
+* const enums (#2651) ([eeda86b](https://github.com/niklasvh/html2canvas/commit/eeda86bd5e81fb4e97675fe9bee3d4d15899997f)), closes [#2651](https://github.com/niklasvh/html2canvas/issues/2651)
+
+
+
 ## [1.3.2](https://github.com/niklasvh/html2canvas/compare/v1.3.1...v1.3.2) (2021-08-15)
 
 
@@ -211,9 +271,14 @@ All notable changes to this project will be documented in this file. See [standa
 
 * update www deps (#2525) ([2a013e2](https://github.com/niklasvh/html2canvas/commit/2a013e20c814b7dbaea98f54f0bde8f553eb79a2)), closes [#2525](https://github.com/niklasvh/html2canvas/issues/2525)
 
+### feat
+
+* add support for border-style dashed, dotted, double (#2531) ([72cd528](https://github.com/niklasvh/html2canvas/commit/72cd5284296e4cdb3fe88f2982ec7528604b6618))
+
 ### fix
 
 * opacity with overflow hidden (#2450) ([82b7da5](https://github.com/niklasvh/html2canvas/commit/82b7da558c342e7f53d298bb1d843a5db86c3b21)), closes [#2450](https://github.com/niklasvh/html2canvas/issues/2450)
+* top right border radius (#2522) ([ba17267](https://github.com/niklasvh/html2canvas/commit/ba172678f07f962e9f54b398df087e86217d7a13))
 
 ### test
 

examples/existing_canvas.html

@@ -29,8 +29,6 @@
     var canvas = document.querySelector("canvas");
     var ctx = canvas.getContext("2d");
 
-    var ctx = canvas.getContext('2d');
-
     ctx.beginPath();
     ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
     ctx.moveTo(110,75);

karma.conf.js

@@ -34,19 +34,25 @@ module.exports = function(config) {
             base: 'MobileSafari',
             name: 'iPhone 8',
             platform: 'iOS',
-            sdk: '13.6'
+            sdk: '13.7'
         },
         Safari_IOS_14: {
             base: 'MobileSafari',
             name: 'iPhone 8',
             platform: 'iOS',
-            sdk: '14.0'
+            sdk: '14.4'
+        },
+        Safari_IOS_15_0: {
+            base: 'MobileSafari',
+            name: 'iPhone 13',
+            platform: 'iOS',
+            sdk: '15.0'
         },
         Safari_IOS_15: {
             base: 'MobileSafari',
-            name: 'iPhone 8',
+            name: 'iPhone 13',
             platform: 'iOS',
-            sdk: '15.0'
+            sdk: '15.2'
         },
         SauceLabs_IE9: {
             base: 'SauceLabs',

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "html2canvas",
-  "version": "1.3.2",
+  "version": "1.4.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "1.2.2",
+      "version": "1.4.0",
       "license": "MIT",
       "dependencies": {
-        "css-line-break": "2.0.1",
+        "css-line-break": "^2.1.0",
-        "text-segmentation": "^1.0.2"
+        "text-segmentation": "^1.0.3"
       },
       "devDependencies": {
         "@babel/cli": "^7.4.3",
@@ -5705,6 +5705,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz",
       "integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA==",
+      "dev": true,
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -8465,19 +8466,11 @@
       }
     },
     "node_modules/css-line-break": {
-      "version": "2.0.1",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
-      "integrity": "sha512-gwKYIMUn7xodIcb346wgUhE2Dt5O1Kmrc16PWi8sL4FTfyDj8P5095rzH7+O8CTZudJr+uw2GCI/hwEkDJFI2w==",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
       "dependencies": {
-        "base64-arraybuffer": "^0.2.0"
+        "utrie": "^1.0.2"
-      }
-    },
-    "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": {
@@ -22757,11 +22750,11 @@
       }
     },
     "node_modules/text-segmentation": {
-      "version": "1.0.2",
+      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
-      "integrity": "sha512-uTqvLxdBrVnx/CFQOtnf8tfzSXFm+1Qxau7Xi54j4OPTZokuDOX8qncQzrg2G8ZicAMOM8TgzFAYTb+AqNO4Cw==",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
       "dependencies": {
-        "utrie": "^1.0.1"
+        "utrie": "^1.0.2"
       }
     },
     "node_modules/text-table": {
@@ -23805,11 +23798,19 @@
       }
     },
     "node_modules/utrie": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
-      "integrity": "sha512-JPaDXF3vzgZxfeEwutdGzlrNoVFL5UvZcbO6Qo9D4GoahrieUPoMU8GCpVpR7MQqcKhmShIh8VlbEN3PLM3EBg==",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
       "dependencies": {
-        "base64-arraybuffer": "^1.0.1"
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
+    "node_modules/utrie/node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
       }
     },
     "node_modules/uuid": {
@@ -29686,7 +29687,8 @@
     "base64-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz",
-      "integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA=="
+      "integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA==",
+      "dev": true
     },
     "base64-js": {
       "version": "1.5.1",
@@ -31950,18 +31952,11 @@
       }
     },
     "css-line-break": {
-      "version": "2.0.1",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
-      "integrity": "sha512-gwKYIMUn7xodIcb346wgUhE2Dt5O1Kmrc16PWi8sL4FTfyDj8P5095rzH7+O8CTZudJr+uw2GCI/hwEkDJFI2w==",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
       "requires": {
-        "base64-arraybuffer": "^0.2.0"
+        "utrie": "^1.0.2"
-      },
-      "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": {
@@ -43210,11 +43205,11 @@
       "dev": true
     },
     "text-segmentation": {
-      "version": "1.0.2",
+      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
-      "integrity": "sha512-uTqvLxdBrVnx/CFQOtnf8tfzSXFm+1Qxau7Xi54j4OPTZokuDOX8qncQzrg2G8ZicAMOM8TgzFAYTb+AqNO4Cw==",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
       "requires": {
-        "utrie": "^1.0.1"
+        "utrie": "^1.0.2"
       }
     },
     "text-table": {
@@ -44011,11 +44006,18 @@
       "dev": true
     },
     "utrie": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
-      "integrity": "sha512-JPaDXF3vzgZxfeEwutdGzlrNoVFL5UvZcbO6Qo9D4GoahrieUPoMU8GCpVpR7MQqcKhmShIh8VlbEN3PLM3EBg==",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
       "requires": {
-        "base64-arraybuffer": "^1.0.1"
+        "base64-arraybuffer": "^1.0.2"
+      },
+      "dependencies": {
+        "base64-arraybuffer": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+          "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+        }
       }
     },
     "uuid": {

package.json

@@ -6,7 +6,7 @@
   "module": "dist/html2canvas.esm.js",
   "typings": "dist/types/index.d.ts",
   "browser": "dist/html2canvas.js",
-  "version": "1.3.2",
+  "version": "1.4.1",
   "author": {
     "name": "Niklas von Hertzen",
     "email": "niklasvh@gmail.com",
@@ -118,7 +118,7 @@
   "homepage": "https://html2canvas.hertzen.com",
   "license": "MIT",
   "dependencies": {
-    "css-line-break": "2.0.1",
+    "css-line-break": "^2.1.0",
-    "text-segmentation": "^1.0.2"
+    "text-segmentation": "^1.0.3"
   }
 }

rollup.config.ts

@@ -30,7 +30,7 @@ export default {
         // Allow json resolution
         json(),
         // Compile TypeScript files
-        typescript(),
+        typescript({ sourceMap: true, inlineSources: true }),
         // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
         commonjs({
             include: 'node_modules/**'

src/core/features.ts

@@ -211,5 +211,12 @@ export const FEATURES = {
         const value = 'withCredentials' in new XMLHttpRequest();
         Object.defineProperty(FEATURES, 'SUPPORT_CORS_XHR', {value});
         return value;
+    },
+    get SUPPORT_NATIVE_TEXT_SEGMENTATION(): boolean {
+        'use strict';
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const value = !!(typeof Intl !== 'undefined' && (Intl as any).Segmenter);
+        Object.defineProperty(FEATURES, 'SUPPORT_NATIVE_TEXT_SEGMENTATION', {value});
+        return value;
     }
 };

src/css/layout/bounds.ts

@@ -17,11 +17,11 @@ export class Bounds {
     }
 
     static fromDOMRectList(context: Context, domRectList: DOMRectList): Bounds {
-        const domRect = domRectList[0];
+        const domRect = Array.from(domRectList).find((rect) => rect.width !== 0);
         return domRect
             ? new Bounds(
-                  domRect.x + context.windowBounds.left,
+                  domRect.left + context.windowBounds.left,
-                  domRect.y + context.windowBounds.top,
+                  domRect.top + context.windowBounds.top,
                   domRect.width,
                   domRect.height
               )

src/css/layout/text.ts

@@ -28,15 +28,24 @@ export const parseTextBounds = (
     textList.forEach((text) => {
         if (styles.textDecorationLine.length || text.trim().length > 0) {
             if (FEATURES.SUPPORT_RANGE_BOUNDS) {
-                if (!FEATURES.SUPPORT_WORD_BREAKING) {
+                const clientRects = createRange(node, offset, text.length).getClientRects();
-                    textBounds.push(
+                if (clientRects.length > 1) {
-                        new TextBounds(
+                    const subSegments = segmentGraphemes(text);
-                            text,
+                    let subOffset = 0;
-                            Bounds.fromDOMRectList(context, createRange(node, offset, text.length).getClientRects())
+                    subSegments.forEach((subSegment) => {
-                        )
+                        textBounds.push(
-                    );
+                            new TextBounds(
+                                subSegment,
+                                Bounds.fromDOMRectList(
+                                    context,
+                                    createRange(node, subOffset + offset, subSegment.length).getClientRects()
+                                )
+                            )
+                        );
+                        subOffset += subSegment.length;
+                    });
                 } else {
-                    textBounds.push(new TextBounds(text, getRangeBounds(context, node, offset, text.length)));
+                    textBounds.push(new TextBounds(text, Bounds.fromDOMRectList(context, clientRects)));
                 }
             } else {
                 const replacementNode = node.splitText(text.length);
@@ -82,12 +91,32 @@ const createRange = (node: Text, offset: number, length: number): Range => {
     return range;
 };
 
-const getRangeBounds = (context: Context, node: Text, offset: number, length: number): Bounds => {
+export const segmentGraphemes = (value: string): string[] => {
-    return Bounds.fromClientRect(context, createRange(node, offset, length).getBoundingClientRect());
+    if (FEATURES.SUPPORT_NATIVE_TEXT_SEGMENTATION) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const segmenter = new (Intl as any).Segmenter(void 0, {granularity: 'grapheme'});
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return Array.from(segmenter.segment(value)).map((segment: any) => segment.segment);
+    }
+
+    return splitGraphemes(value);
+};
+
+const segmentWords = (value: string, styles: CSSParsedDeclaration): string[] => {
+    if (FEATURES.SUPPORT_NATIVE_TEXT_SEGMENTATION) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const segmenter = new (Intl as any).Segmenter(void 0, {
+            granularity: 'word'
+        });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return Array.from(segmenter.segment(value)).map((segment: any) => segment.segment);
+    }
+
+    return breakWords(value, styles);
 };
 
 const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
-    return styles.letterSpacing !== 0 ? splitGraphemes(value) : breakWords(value, styles);
+    return styles.letterSpacing !== 0 ? segmentGraphemes(value) : segmentWords(value, styles);
 };
 
 // https://drafts.csswg.org/css-text/#word-separator

src/css/property-descriptors/background-clip.ts

@@ -1,7 +1,7 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
 import {Context} from '../../core/context';
-export enum BACKGROUND_CLIP {
+export const enum BACKGROUND_CLIP {
     BORDER_BOX = 0,
     PADDING_BOX = 1,
     CONTENT_BOX = 2

src/css/property-descriptors/background-repeat.ts

@@ -3,7 +3,7 @@ import {CSSValue, isIdentToken, parseFunctionArgs} from '../syntax/parser';
 import {Context} from '../../core/context';
 export type BackgroundRepeat = BACKGROUND_REPEAT[];
 
-export enum BACKGROUND_REPEAT {
+export const enum BACKGROUND_REPEAT {
     REPEAT = 0,
     NO_REPEAT = 1,
     REPEAT_X = 2,

src/css/property-descriptors/border-style.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum BORDER_STYLE {
+export const enum BORDER_STYLE {
     NONE = 0,
     SOLID = 1,
     DASHED = 2,

src/css/property-descriptors/float.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum FLOAT {
+export const enum FLOAT {
     NONE = 0,
     LEFT = 1,
     RIGHT = 2,

src/css/property-descriptors/font-style.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum FONT_STYLE {
+export const enum FONT_STYLE {
     NORMAL = 'normal',
     ITALIC = 'italic',
     OBLIQUE = 'oblique'

src/css/property-descriptors/list-style-position.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum LIST_STYLE_POSITION {
+export const enum LIST_STYLE_POSITION {
     INSIDE = 0,
     OUTSIDE = 1
 }

src/css/property-descriptors/list-style-type.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum LIST_STYLE_TYPE {
+export const enum LIST_STYLE_TYPE {
     NONE = -1,
     DISC = 0,
     CIRCLE = 1,

src/css/property-descriptors/overflow.ts

@@ -1,7 +1,7 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
 import {Context} from '../../core/context';
-export enum OVERFLOW {
+export const enum OVERFLOW {
     VISIBLE = 0,
     HIDDEN = 1,
     SCROLL = 2,

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

@@ -1,7 +1,7 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
 import {Context} from '../../core/context';
-export enum PAINT_ORDER_LAYER {
+export const enum PAINT_ORDER_LAYER {
     FILL,
     STROKE,
     MARKERS

src/css/property-descriptors/position.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum POSITION {
+export const enum POSITION {
     STATIC = 0,
     RELATIVE = 1,
     ABSOLUTE = 2,

src/css/property-descriptors/text-align.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum TEXT_ALIGN {
+export const enum TEXT_ALIGN {
     LEFT = 0,
     CENTER = 1,
     RIGHT = 2

src/css/property-descriptors/text-transform.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum TEXT_TRANSFORM {
+export const enum TEXT_TRANSFORM {
     NONE = 0,
     LOWERCASE = 1,
     UPPERCASE = 2,

src/css/property-descriptors/visibility.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum VISIBILITY {
+export const enum VISIBILITY {
     VISIBLE = 0,
     HIDDEN = 1,
     COLLAPSE = 2

src/css/syntax/tokenizer.ts

@@ -657,7 +657,7 @@ export class Tokenizer {
     }
 
     private consumeStringSlice(count: number): string {
-        const SLICE_STACK_SIZE = 60000;
+        const SLICE_STACK_SIZE = 50000;
         let value = '';
         while (count > 0) {
             const amount = Math.min(SLICE_STACK_SIZE, count);

src/css/types/image.ts

@@ -10,7 +10,7 @@ import {radialGradient} from './functions/radial-gradient';
 import {prefixRadialGradient} from './functions/-prefix-radial-gradient';
 import {Context} from '../../core/context';
 
-export enum CSSImageType {
+export const enum CSSImageType {
     URL,
     LINEAR_GRADIENT,
     RADIAL_GRADIENT
@@ -56,12 +56,12 @@ export interface CSSLinearGradientImage extends ICSSGradientImage {
     type: CSSImageType.LINEAR_GRADIENT;
 }
 
-export enum CSSRadialShape {
+export const enum CSSRadialShape {
     CIRCLE,
     ELLIPSE
 }
 
-export enum CSSRadialExtent {
+export const enum CSSRadialExtent {
     CLOSEST_SIDE,
     FARTHEST_SIDE,
     CLOSEST_CORNER,

src/dom/document-cloner.ts

@@ -2,16 +2,19 @@ import {Bounds} from '../css/layout/bounds';
 import {
     isBodyElement,
     isCanvasElement,
+    isCustomElement,
     isElementNode,
     isHTMLElementNode,
     isIFrameElement,
     isImageElement,
     isScriptElement,
     isSelectElement,
+    isSlotElement,
     isStyleElement,
     isSVGElementNode,
     isTextareaElement,
-    isTextNode
+    isTextNode,
+    isVideoElement
 } from './node-parser';
 import {isIdentToken, nonFunctionArgSeparator} from '../css/syntax/parser';
 import {TokenType} from '../css/syntax/tokenizer';
@@ -63,7 +66,7 @@ export class DocumentCloner {
             throw new Error('Cloned element does not have an owner document');
         }
 
-        this.documentElement = this.cloneNode(element.ownerDocument.documentElement) as HTMLElement;
+        this.documentElement = this.cloneNode(element.ownerDocument.documentElement, false) as HTMLElement;
     }
 
     toIFrame(ownerDocument: Document, windowSize: Bounds): Promise<HTMLIFrameElement> {
@@ -143,7 +146,9 @@ export class DocumentCloner {
         if (isCanvasElement(node)) {
             return this.createCanvasClone(node);
         }
-
+        if (isVideoElement(node)) {
+            return this.createVideoClone(node);
+        }
         if (isStyleElement(node)) {
             return this.createStyleClone(node);
         }
@@ -160,6 +165,17 @@ export class DocumentCloner {
             }
         }
 
+        if (isCustomElement(clone)) {
+            return this.createCustomElementClone(clone);
+        }
+
+        return clone;
+    }
+
+    createCustomElementClone(node: HTMLElement): HTMLElement {
+        const clone = document.createElement('html2canvascustomelement');
+        copyCSSStyles(node.style, clone);
+
         return clone;
     }
 
@@ -231,7 +247,63 @@ export class DocumentCloner {
         return clonedCanvas;
     }
 
-    cloneNode(node: Node): Node {
+    createVideoClone(video: HTMLVideoElement): HTMLCanvasElement {
+        const canvas = video.ownerDocument.createElement('canvas');
+
+        canvas.width = video.offsetWidth;
+        canvas.height = video.offsetHeight;
+        const ctx = canvas.getContext('2d');
+
+        try {
+            if (ctx) {
+                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                if (!this.options.allowTaint) {
+                    ctx.getImageData(0, 0, canvas.width, canvas.height);
+                }
+            }
+            return canvas;
+        } catch (e) {
+            this.context.logger.info(`Unable to clone video as it is tainted`, video);
+        }
+
+        const blankCanvas = video.ownerDocument.createElement('canvas');
+
+        blankCanvas.width = video.offsetWidth;
+        blankCanvas.height = video.offsetHeight;
+        return blankCanvas;
+    }
+
+    appendChildNode(clone: HTMLElement | SVGElement, child: Node, copyStyles: boolean): void {
+        if (
+            !isElementNode(child) ||
+            (!isScriptElement(child) &&
+                !child.hasAttribute(IGNORE_ATTRIBUTE) &&
+                (typeof this.options.ignoreElements !== 'function' || !this.options.ignoreElements(child)))
+        ) {
+            if (!this.options.copyStyles || !isElementNode(child) || !isStyleElement(child)) {
+                clone.appendChild(this.cloneNode(child, copyStyles));
+            }
+        }
+    }
+
+    cloneChildNodes(node: Element, clone: HTMLElement | SVGElement, copyStyles: boolean): void {
+        for (
+            let child = node.shadowRoot ? node.shadowRoot.firstChild : node.firstChild;
+            child;
+            child = child.nextSibling
+        ) {
+            if (isElementNode(child) && isSlotElement(child) && typeof child.assignedNodes === 'function') {
+                const assignedNodes = child.assignedNodes() as ChildNode[];
+                if (assignedNodes.length) {
+                    assignedNodes.forEach((assignedNode) => this.appendChildNode(clone, assignedNode, copyStyles));
+                }
+            } else {
+                this.appendChildNode(clone, child, copyStyles);
+            }
+        }
+    }
+
+    cloneNode(node: Node, copyStyles: boolean): Node {
         if (isTextNode(node)) {
             return document.createTextNode(node.data);
         }
@@ -260,17 +332,12 @@ export class DocumentCloner {
             const counters = this.counters.parse(new CSSParsedCounterDeclaration(this.context, style));
             const before = this.resolvePseudoContent(node, clone, styleBefore, PseudoElementType.BEFORE);
 
-            for (let child = node.firstChild; child; child = child.nextSibling) {
+            if (isCustomElement(node)) {
-                if (
+                copyStyles = true;
-                    !isElementNode(child) ||
+            }
-                    (!isScriptElement(child) &&
+
-                        !child.hasAttribute(IGNORE_ATTRIBUTE) &&
+            if (!isVideoElement(node)) {
-                        (typeof this.options.ignoreElements !== 'function' || !this.options.ignoreElements(child)))
+                this.cloneChildNodes(node, clone, copyStyles);
-                ) {
-                    if (!this.options.copyStyles || !isElementNode(child) || !isStyleElement(child)) {
-                        clone.appendChild(this.cloneNode(child));
-                    }
-                }
             }
 
             if (before) {
@@ -284,7 +351,10 @@ export class DocumentCloner {
 
             this.counters.pop(counters);
 
-            if (style && (this.options.copyStyles || isSVGElementNode(node)) && !isIFrameElement(node)) {
+            if (
+                (style && (this.options.copyStyles || isSVGElementNode(node)) && !isIFrameElement(node)) ||
+                copyStyles
+            ) {
                 copyCSSStyles(style, clone);
             }
 

src/dom/node-parser.ts

@@ -124,6 +124,7 @@ export const isHTMLElement = (node: Element): node is HTMLHtmlElement => node.ta
 export const isSVGElement = (node: Element): node is SVGSVGElement => node.tagName === 'svg';
 export const isBodyElement = (node: Element): node is HTMLBodyElement => node.tagName === 'BODY';
 export const isCanvasElement = (node: Element): node is HTMLCanvasElement => node.tagName === 'CANVAS';
+export const isVideoElement = (node: Element): node is HTMLVideoElement => node.tagName === 'VIDEO';
 export const isImageElement = (node: Element): node is HTMLImageElement => node.tagName === 'IMG';
 export const isIFrameElement = (node: Element): node is HTMLIFrameElement => node.tagName === 'IFRAME';
 export const isStyleElement = (node: Element): node is HTMLStyleElement => node.tagName === 'STYLE';
@@ -131,3 +132,5 @@ export const isScriptElement = (node: Element): node is HTMLScriptElement => nod
 export const isTextareaElement = (node: Element): node is HTMLTextAreaElement => node.tagName === 'TEXTAREA';
 export const isSelectElement = (node: Element): node is HTMLSelectElement => node.tagName === 'SELECT';
 export const isSlotElement = (node: Element): node is HTMLSlotElement => node.tagName === 'SLOT';
+// https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
+export const isCustomElement = (node: Element): node is HTMLElement => node.tagName.indexOf('-') > 0;

src/render/canvas/canvas-renderer.ts

@@ -2,7 +2,7 @@ import {ElementPaint, parseStackingContexts, StackingContext} from '../stacking-
 import {asString, Color, isTransparent} from '../../css/types/color';
 import {ElementContainer, FLAGS} from '../../dom/element-container';
 import {BORDER_STYLE} from '../../css/property-descriptors/border-style';
-import {CSSParsedDeclaration} from '../../css/index';
+import {CSSParsedDeclaration} from '../../css';
 import {TextContainer} from '../../dom/text-container';
 import {Path, transformPath} from '../path';
 import {BACKGROUND_CLIP} from '../../css/property-descriptors/background-clip';
@@ -18,12 +18,12 @@ import {
 } from '../border';
 import {calculateBackgroundRendering, getBackgroundValueForIndex} from '../background';
 import {isDimensionToken} from '../../css/syntax/parser';
-import {TextBounds} from '../../css/layout/text';
+import {segmentGraphemes, TextBounds} from '../../css/layout/text';
 import {ImageElementContainer} from '../../dom/replaced-elements/image-element-container';
 import {contentBox} from '../box-sizing';
 import {CanvasElementContainer} from '../../dom/replaced-elements/canvas-element-container';
 import {SVGElementContainer} from '../../dom/replaced-elements/svg-element-container';
-import {ReplacedElementContainer} from '../../dom/replaced-elements/index';
+import {ReplacedElementContainer} from '../../dom/replaced-elements';
 import {EffectTarget, IElementEffect, isClipEffect, isOpacityEffect, isTransformEffect} from '../effects';
 import {contains} from '../../core/bitwise';
 import {calculateGradientDirection, calculateRadius, processColorStops} from '../../css/types/functions/gradient';
@@ -44,7 +44,6 @@ 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;
@@ -149,7 +148,7 @@ export class CanvasRenderer extends Renderer {
         if (letterSpacing === 0) {
             this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
         } else {
-            const letters = splitGraphemes(text.text);
+            const letters = segmentGraphemes(text.text);
             letters.reduce((left, letter) => {
                 this.ctx.fillText(letter, left, text.bounds.top + baseline);
 
@@ -162,7 +161,7 @@ export class CanvasRenderer extends Renderer {
         const fontVariant = styles.fontVariant
             .filter((variant) => variant === 'normal' || variant === 'small-caps')
             .join('');
-        const fontFamily = styles.fontFamily.join(', ');
+        const fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', ');
         const fontSize = isDimensionToken(styles.fontSize)
             ? `${styles.fontSize.number}${styles.fontSize.unit}`
             : `${styles.fontSize.number}px`;
@@ -947,3 +946,12 @@ const canvasTextAlign = (textAlign: TEXT_ALIGN): CanvasTextAlign => {
             return 'left';
     }
 };
+
+// see https://github.com/niklasvh/html2canvas/pull/2645
+const iOSBrokenFonts = ['-apple-system', 'system-ui'];
+
+const fixIOSSystemFonts = (fontFamilies: string[]): string[] => {
+    return /iPhone OS 15_(0|1)/.test(window.navigator.userAgent)
+        ? fontFamilies.filter((fontFamily) => iOSBrokenFonts.indexOf(fontFamily) === -1)
+        : fontFamilies;
+};

src/render/font-metrics.ts

@@ -27,6 +27,7 @@ export class FontMetrics {
         container.style.fontSize = fontSize;
         container.style.margin = '0';
         container.style.padding = '0';
+        container.style.whiteSpace = 'nowrap';
 
         body.appendChild(container);
 

src/render/path.ts

@@ -1,6 +1,6 @@
 import {BezierCurve} from './bezier-curve';
 import {Vector} from './vector';
-export enum PathType {
+export const enum PathType {
     VECTOR = 0,
     BEZIER_CURVE = 1
 }

tests/reftests/images/video.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Video tests</title>
+    <script type="text/javascript" src="../../test.js"></script>
+</head>
+<body>
+<h2>Same origin</h2>
+<video controls width="250">
+    <source src="../../assets/cc0-video.mp4" type="video/mp4">
+    Sorry, your browser doesn't support embedded videos.
+</video>
+<h2>Cross-origin (doesn't taint)</h2>
+<video controls width="250">
+    <source src="http://localhost:8081/cors/tests/assets/cc0-video.mp4" type="video/mp4">
+    Sorry, your browser doesn't support embedded videos.
+</video>
+</body>
+</html>

tests/reftests/text/lang/chinese.html

@@ -11,6 +11,13 @@
         float: left;
       }
 
+      .apple-system {
+          font-family: -apple-system, Arial;
+      }
+
+      .system-ui {
+          font-family: system-ui, Arial;
+      }
     </style>
   </head>
   <body>
@@ -32,5 +39,7 @@
       </p><p>&nbsp;&nbsp;&nbsp;&nbsp;〔13〕 法捷耶夫（一九○一——一九五六），苏联名作家。他所作的小说《毁灭》于一九二七年出版，内容是描写苏联国内战争时期由苏联远东滨海边区工人、农民和革命知识分子所组成的一支游击队同国内反革命白卫军以及日本武装干涉军进行斗争的故事。这部小说曾由鲁迅译为汉文。
       </p><p>&nbsp;&nbsp;&nbsp;&nbsp;〔14〕 见鲁迅《集外集·自嘲》（《鲁迅全集》第7卷，人民文学出版社1981年版，第147页）。</p>
     </div>
+    <div class="apple-system">中文</div>
+    <div class="system-ui">中文</div>
   </body>
 </html>

tests/reftests/text/text.html

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

tests/reftests/webcomponents/autonomous-custom-element.js

@@ -40,6 +40,10 @@ class AutonomousCustomElement extends HTMLElement {
         wrapper.appendChild(img);
         wrapper.appendChild(info);
     }
+
+    connectedCallback() {
+        this.shadowRoot.adoptedStyleSheets = [sheet];
+    }
 }
 
 customElements.define('autonomous-custom-element', AutonomousCustomElement);

tests/reftests/webcomponents/webcomponents.html

@@ -3,10 +3,11 @@
 <head>
     <title>Web components tests</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script>
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync('* { color: red !important; }')
+    </script>
     <script type="text/javascript" src="../../test.js"></script>
-    <style>
-
-    </style>
 </head>
 <body>
 <div>

tests/server.ts

@@ -12,7 +12,7 @@ const mkdirp = require('mkdirp');
 
 export const app = express();
 app.use('/', serveIndex(path.resolve(__dirname, '../'), {icons: true}));
-app.use('/', express.static(path.resolve(__dirname, '../')));
+app.use([/^\/src($|\/)/, '/'], express.static(path.resolve(__dirname, '../')));
 
 export const corsApp = express();
 corsApp.use('/proxy', proxy());

www/.gitignore

@@ -9,3 +9,5 @@ yarn-error.log
 src/results.json
 static/tests/preview.js
 src/preview.js
+.docusaurus
+build/