Workaround for Chrome printing problem

vivliostyle · Nov 29, 2017 · 5b22b44 · 5b22b44
1 parent 2003526
commit 5b22b44
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 2 deletions.
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
@@ -1261,7 +1261,7 @@ adapt.ops.StyleInstance.prototype.layoutNextPage = function(page, cp) {
     /** @type {!adapt.task.Frame.<adapt.vtree.LayoutPosition>} */ var frame
         = adapt.task.newFrame("layoutNextPage");
     frame.loopWithFrame(function(loopFrame) {
-        self.layoutContainer(page, pageMaster, page.bleedBox, bleedBoxPaddingEdge, bleedBoxPaddingEdge,
+        self.layoutContainer(page, pageMaster, page.bleedBox, bleedBoxPaddingEdge, bleedBoxPaddingEdge+1, // Compensate 'top: -1px' on page master
             [], pageFloatLayoutContext).then(function() {
                 if (!pageFloatLayoutContext.isInvalidated()) {
                     pageFloatLayoutContext.finish();
@@ -1317,6 +1317,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
@@ -72,6 +72,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>