Workaround for Chrome printing problem

vivliostyle · Nov 7, 2017 · dae1ad1 · dae1ad1
1 parent 6ab135c
commit dae1ad1
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 1 deletion.
diff --git a/resources/vivliostyle-viewport.css b/resources/vivliostyle-viewport.css
@@ -37,6 +37,7 @@
     overflow: hidden;
     max-width: 100%;
     max-height: 100%;
+    box-sizing: border-box;
 }
 
 @media print {

diff --git a/src/adapt/ops.js b/src/adapt/ops.js
@@ -1312,6 +1312,8 @@ adapt.ops.StyleInstance.prototype.setPageSizeAndBleed = function(evaluatedPageSi
     page.bleedBox.style.top = evaluatedPageSizeAndBleed.bleedOffset + "px";
     page.bleedBox.style.bottom = evaluatedPageSizeAndBleed.bleedOffset + "px";
     page.bleedBox.style.padding = evaluatedPageSizeAndBleed.bleed + "px";
+    // Shift 1px to workaround Chrome printing bug
+    page.bleedBox.style.paddingTop = (evaluatedPageSizeAndBleed.bleed+1) + "px";
 };
 
 /**

diff --git a/src/adapt/pm.js b/src/adapt/pm.js
@@ -175,6 +175,8 @@ adapt.pm.PageMaster = function(scope, name, pseudoName, classes, parent, conditi
     this.specified["wrap-flow"] =  new adapt.csscasc.CascadeValue(adapt.css.ident.auto, 0);
     this.specified["position"] = new adapt.csscasc.CascadeValue(adapt.css.ident.relative, 0);
     this.specified["overflow"] = new adapt.csscasc.CascadeValue(adapt.css.ident.visible, 0);
+    // Shift 1px to workaround Chrome printing bug
+    this.specified["top"] = new adapt.csscasc.CascadeValue(new adapt.css.Numeric(-1, "px"), 0);
     /** @type {Object.<string,string>} */ this.keyMap = {};
 };
 goog.inherits(adapt.pm.PageMaster, adapt.pm.PageBox);

diff --git a/src/vivliostyle/page.js b/src/vivliostyle/page.js
@@ -898,7 +898,8 @@ vivliostyle.page.PageRuleMasterInstance.prototype.initHorizontal = function() {
  */
 vivliostyle.page.PageRuleMasterInstance.prototype.initVertical = function() {
     var style = this.style;
-    style["top"] = adapt.css.numericZero;
+    // Shift 1px to workaround Chrome printing bug
+    style["top"] = new adapt.css.Numeric(-1, "px");
     style["margin-top"] = adapt.css.numericZero;
     style["border-top-width"] = adapt.css.numericZero;
     style["padding-top"] = adapt.css.numericZero;

diff --git a/test/files/file-list.js b/test/files/file-list.js
@@ -71,6 +71,12 @@ module.exports = [
             {file: "page_breaks/class_C_break_point.html", title: "Class C break point"}
         ]
     },
+    {
+        category: "Print",
+        files: [
+            {file: "print/chrome_page_top_margin_bug.html", title: "Chrome page top margin bug"}
+        ]
+    },
     {
         category: "Column",
         files: [

diff --git a/test/files/print/chrome_page_top_margin_bug.html b/test/files/print/chrome_page_top_margin_bug.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Chrome page top margin bug</title>
+  <style>
+    @page {
+      size: 400px 200px;
+      margin: 0;
+    }
+
+    body {
+      margin: 0;
+    }
+
+    section {
+      margin-top: 20px;
+      page-break-after: always;
+    }
+  </style>
+</head>
+<body>
+<section>
+  (1st page) Print this on Chrome and check layout
+</section>
+<section>
+  (2nd page) There should be 20px top margin above this text
+</section>
+</body>
+</html>