v1.0.0-alpha.8

Use correct doctype in cloned Document (Fix #1298 )
Fix individual border rendering (Fix #1349 )
2023-08-10 21:13:10 +03:00 · 2018-01-02 20:24:12 +08:00 · 2018-01-02 20:06:24 +08:00 · 2018-01-02 20:04:28 +08:00
7 changed files with 61 additions and 7 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ### Changelog ###

+#### v1.0.0-alpha.8 - 2.1.2018 ####
+ * Use correct doctype in cloned Document (Fix #1298)
+ * Fix individual border rendering (Fix #1349)
+
 #### v1.0.0-alpha.7 - 31.12.2017 ####
 * Fix form input rendering (#1338)
 * Improve word line breaking algorithm
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "html2canvas",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
  "name": "html2canvas",
  "description": "Screenshots with JavaScript",
  "main": "dist/npm/index.js",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
  "author": {
    "name": "Niklas von Hertzen",
    "email": "niklasvh@gmail.com",
--- a/src/Clone.js
+++ b/src/Clone.js
@@ -614,7 +614,7 @@ export const cloneWindow = (
        });

        documentClone.open();
-        documentClone.write('<!DOCTYPE html><html></html>');
+        documentClone.write(`${serializeDoctype(document.doctype)}<html></html>`);
        // Chrome scrolls the parent document for some reason after the write to the cloned window???
        restoreOwnerScroll(referenceElement.ownerDocument, scrollX, scrollY);
        documentClone.replaceChild(
@@ -626,3 +626,29 @@ export const cloneWindow = (
        return iframeLoad;
    });
 };
+
+const serializeDoctype = (doctype: ?DocumentType): string => {
+    let str = '';
+    if (doctype) {
+        str += '<!DOCTYPE ';
+        if (doctype.name) {
+            str += doctype.name;
+        }
+
+        if (doctype.internalSubset) {
+            str += doctype.internalSubset;
+        }
+
+        if (doctype.publicId) {
+            str += `"${doctype.publicId}"`;
+        }
+
+        if (doctype.systemId) {
+            str += `"${doctype.systemId}"`;
+        }
+
+        str += '>';
+    }
+
+    return str;
+};
--- a/src/Renderer.js
+++ b/src/Renderer.js
@@ -165,7 +165,7 @@ export default class Renderer {
            !container.style.background.backgroundColor.isTransparent() ||
            container.style.background.backgroundImage.length;

-        const renderableBorders = container.style.border.filter(
+        const hasRenderableBorders = container.style.border.some(
            border =>
                border.borderStyle !== BORDER_STYLE.NONE && !border.borderColor.isTransparent()
        );
@@ -186,12 +186,17 @@ export default class Renderer {
                });
            }

-            renderableBorders.forEach((border, side) => {
-                this.renderBorder(border, side, container.curvedBounds);
+            container.style.border.forEach((border, side) => {
+                if (
+                    border.borderStyle !== BORDER_STYLE.NONE &&
+                    !border.borderColor.isTransparent()
+                ) {
+                    this.renderBorder(border, side, container.curvedBounds);
+                }
            });
        };

-        if (HAS_BACKGROUND || renderableBorders.length) {
+        if (HAS_BACKGROUND || hasRenderableBorders) {
            const paths = container.parent ? container.parent.getClipPaths() : [];
            if (paths.length) {
                this.target.clip(paths, callback);
--- a/tests/reftests/border/solid.html
+++ b/tests/reftests/border/solid.html
@@ -12,6 +12,7 @@
        margin: 10px;
        background:#6F428C;
        border-style: solid;
+        border-width: 0;
      }

      .box1 {
@@ -33,6 +34,12 @@
        border-color: green;
      }

+      .box5 {
+          border-style: none;
+          border-bottom: 50px solid #807d32;
+          border-bottom-width: 50px;
+      }
+
      html {
        background: #3a84c3;
      }
@@ -43,5 +50,6 @@
    <div class="box2">&nbsp;</div>
    <div class="box3">&nbsp;</div>
    <div class="box4">&nbsp;</div>
+    <div class="box5">&nbsp;</div>
  </body>
 </html>
--- a/tests/reftests/images/doctype.html
+++ b/tests/reftests/images/doctype.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <script type="text/javascript" src="../../test.js"></script>
+</head>
+<body>
+    <img src="../../assets/image.jpg" />
+    <img src="../../assets/image2.jpg" style="display:block;" />
+	<br>
+</body>
+</html>
Author	SHA1	Message	Date
Niklas von Hertzen	b7c7464c5f	v1.0.0-alpha.8	2018-01-02 20:24:12 +08:00
Niklas von Hertzen	ae019f174c	Use correct doctype in cloned Document (Fix #1298 )	2018-01-02 20:06:24 +08:00
Niklas von Hertzen	ea6062c85b	Fix individual border rendering (Fix #1349 )	2018-01-02 20:04:28 +08:00