fix: box-shadow issues with border-radius

2023-08-10 21:13:10 +03:00 · 2021-07-15 18:55:04 +08:00
12 changed files with 148 additions and 252 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,42 +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.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)


--- a/README.md
+++ b/README.md
@ -1,7 +1,7 @@
 html2canvas
 ===========

-[Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](https://github.com/niklasvh/html2canvas/discussions/categories/q-a)
+[Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](http://stackoverflow.com/questions/tagged/html2canvas?sort=newest)

 [![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)
--- a/package-lock.json
+++ b/package-lock.json
@ -1,14 +1,14 @@
 {
  "name": "html2canvas",
-  "version": "1.1.5",
+  "version": "1.1.3",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
-      "version": "1.1.4",
+      "version": "1.1.0",
      "license": "MIT",
      "dependencies": {
-        "css-line-break": "2.0.0"
+        "css-line-break": "1.1.1"
      },
      "devDependencies": {
        "@babel/cli": "^7.4.3",
@ -8630,9 +8630,9 @@
      }
    },
    "node_modules/css-line-break": {
-      "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==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
+      "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
      "dependencies": {
        "base64-arraybuffer": "^0.2.0"
      }
@ -32811,9 +32811,9 @@
      }
    },
    "css-line-break": {
-      "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==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
+      "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
      "requires": {
        "base64-arraybuffer": "^0.2.0"
      }
--- 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.5",
+  "version": "1.1.3",
  "author": {
    "name": "Niklas von Hertzen",
    "email": "niklasvh@gmail.com",
@ -118,6 +118,6 @@
  "homepage": "https://html2canvas.hertzen.com",
  "license": "MIT",
  "dependencies": {
-    "css-line-break": "2.0.0"
+    "css-line-break": "1.1.1"
  }
 }
--- 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/dom/document-cloner.ts
+++ b/src/dom/document-cloner.ts
@ -132,15 +132,8 @@ export class DocumentCloner {
        }

        const clone = node.cloneNode(false) as T;
-        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';
-            }
+        if (isImageElement(clone) && clone.loading === 'lazy') {
+            clone.loading = 'eager';
        }

        return clone;
--- 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/images/images.html
+++ b/tests/reftests/images/images.html
@ -24,9 +24,6 @@

    <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);
--- 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,153 +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>
-    <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>
+    </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;