fix: box-shadow issues with border-radius

2023-08-10 21:13:10 +03:00 · 2021-07-15 18:55:04 +08:00
9 changed files with 136 additions and 208 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,28 +2,6 @@

 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.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)


--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "html2canvas",
-  "version": "1.1.4",
+  "version": "1.1.3",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
  "module": "dist/html2canvas.esm.js",
  "typings": "dist/types/index.d.ts",
  "browser": "dist/html2canvas.js",
-  "version": "1.1.4",
+  "version": "1.1.3",
  "author": {
    "name": "Niklas von Hertzen",
    "email": "niklasvh@gmail.com",
--- a/src/css/layout/text.ts
+++ b/src/css/layout/text.ts
@@ -70,9 +70,6 @@ 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,
@@ -84,24 +81,7 @@ const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {

    while (!(bk = breaker.next()).done) {
        if (bk.value) {
-            const value = bk.value.slice();
-            const codePoints = toCodePoints(value);
-            let word = '';
-            codePoints.forEach((codePoint) => {
-                if (wordSeparators.indexOf(codePoint) === -1) {
-                    word += fromCodePoint(codePoint);
-                } else {
-                    if (word.length) {
-                        words.push(word);
-                    }
-                    words.push(fromCodePoint(codePoint));
-                    word = '';
-                }
-            });
-
-            if (word.length) {
-                words.push(word);
-            }
+            words.push(bk.value.slice());
        }
    }

--- a/src/render/canvas/canvas-renderer.ts
+++ b/src/render/canvas/canvas-renderer.ts
@@ -526,11 +526,14 @@ export class CanvasRenderer {

    mask(paths: Path[]): void {
        this.ctx.beginPath();
+        this.ctx.save();
+        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
        this.ctx.moveTo(0, 0);
        this.ctx.lineTo(this.canvas.width, 0);
        this.ctx.lineTo(this.canvas.width, this.canvas.height);
        this.ctx.lineTo(0, this.canvas.height);
        this.ctx.lineTo(0, 0);
+        this.ctx.restore();
        this.formatPath(paths.slice(0).reverse());
        this.ctx.closePath();
    }
@@ -723,18 +726,19 @@ export class CanvasRenderer {
            await this.renderBackgroundImage(paint.container);

            this.ctx.restore();
+            const borderBoxArea = calculateBorderBoxPath(paint.curves);

            styles.boxShadow
                .slice(0)
                .reverse()
                .forEach((shadow) => {
                    this.ctx.save();
-                    const borderBoxArea = calculateBorderBoxPath(paint.curves);
                    const maskOffset = shadow.inset ? 0 : MASK_OFFSET;
+                    const shadowDirection = shadow.inset ? 1 : -1;
                    const shadowPaintingArea = transformPath(
                        borderBoxArea,
-                        -maskOffset + (shadow.inset ? 1 : -1) * shadow.spread.number,
-                        (shadow.inset ? 1 : -1) * shadow.spread.number,
+                        shadow.offsetX.number - maskOffset + shadowDirection * shadow.spread.number,
+                        shadow.offsetY.number + shadowDirection * shadow.spread.number,
                        shadow.spread.number * (shadow.inset ? -2 : 2),
                        shadow.spread.number * (shadow.inset ? -2 : 2)
                    );
@@ -749,8 +753,8 @@ export class CanvasRenderer {
                        this.path(shadowPaintingArea);
                    }

-                    this.ctx.shadowOffsetX = shadow.offsetX.number + maskOffset;
-                    this.ctx.shadowOffsetY = shadow.offsetY.number;
+                    this.ctx.shadowOffsetX = maskOffset;
+                    this.ctx.shadowOffsetY = 0;
                    this.ctx.shadowColor = asString(shadow.color);
                    this.ctx.shadowBlur = shadow.blur.number;
                    this.ctx.fillStyle = shadow.inset ? asString(shadow.color) : 'rgba(0,0,0,1)';
--- a/tests/reftests/text/lang/chinese.html
+++ b/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;
--- a/tests/reftests/text/lang/persian.html
+++ b/tests/reftests/text/lang/persian.html
@@ -1,26 +0,0 @@
-<!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>
--- a/tests/reftests/text/text.html
+++ b/tests/reftests/text/text.html
@@ -1,145 +1,137 @@
 <!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;
-        }
+    <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;
+            }

-        .small {
-            font-size: 14px;
-            line-height: 1vw;
-        }
+            .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;
+            }

-        .medium {
-            font-size: 18px;
-            line-height: 2vw;
-        }
+            h2 {
+                font-size: 24px;
+                line-height: 3vw;
+            }

-        .large {
-            font-size: 24px;
-            line-height: 3vw;
-        }
+            h3 {
+                font-size: 16px;
+                line-height: 2vw;
+            }
+        </style>

-        div {
-            float: left;
-        }
+    </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>

-        h2 {
-            clear: both;
-        }
+            <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>

-        h1 {
-            font-size: 36px;
-            line-height: 4vw;
-        }
+        <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>

-        h2 {
-            font-size: 24px;
-            line-height: 3vw;
-        }
+            <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>

-        h3 {
-            font-size: 16px;
-            line-height: 2vw;
-        }
+        <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>

-        .raw {
-            font-size: 60px;
-            word-spacing: 30px;
-        }
-    </style>
+            <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>

-</head>
-<body>
+        <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>

-<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 style="font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace">npm install --save html2canvas</div>

-    <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>
-
-    <div class="raw">
-        <span>[AB / CD]</span>
-    </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>
-</body>
+    </body>
 </html>
--- a/tests/reftests/text/lang/thai.html
+++ b/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;