Move page margin handling over to Blink.

Remove the margin handling code from PrintRenderFrameHelper (used by the actual browser) and SpoolPagesWithBoundariesForTesting() (web tests). This allows @page backgrounds to cover the entire page box, including the margin area. Tests included. This CL also paves the road for implementing @page margin boxes (such as author-specified headers and footers), which was the main objective anyway. The fact that Blink is now responsible for the entire page box means that the code that deals with shrinking / centering paginated content to fit the target paper also has to be moved over to Blink. WebPrintPageDescription still provides margin info for each page. Although PrintRenderFrameHelper no longer needs to position the page area within the page box based on margins, the margins are still needed in order to figure out if there's enough room for UA-generated headers and footers. By moving all of this into Blink, it will be rather straight-forward to add web tests for page fitting, rather than writing clunky PrintRenderFrameHelper component browser tests for it. Will follow up with a CL for this. Three page-orientation tests now start passing. The code in SpoolPagesWithBoundariesForTesting() didn't add margin translation at the correct time when rotating. The margins are no longer added there, so the problem is gone. Bug: 40286153, 40341678 Change-Id: I418b2e08ed76b297ea5d5fc223545b52b3e9b09f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5526464 Reviewed-by: Lei Zhang <thestig@chromium.org> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1300225}
web-platform-tests · May 13, 2024 · 287e8d7 · 287e8d7
1 parent 38a6c3e
commit 287e8d7
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 0 deletions.
diff --git a/css/css-page/page-box-005-print-ref.html b/css/css-page/page-box-005-print-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  @page {
+    size: 400px;
+    margin: 0;
+  }
+  body {
+    margin: 0;
+  }
+  .pagebox {
+    display: flex;
+    break-before: page;
+    height: 400px;
+  }
+  .pagearea {
+    margin: 50px;
+    border: 10px dotted;
+    padding: 20px;
+  }
+</style>
+<div class="pagebox">
+  <div class="pagearea" style="border-color:orange;">
+    White background (including page margins). Orange dotted border. Black text.
+  </div>
+</div>
+<div class="pagebox" style="background:yellow;">
+  <div class="pagearea" style="border-color:hotpink;">
+    Yellow background (including page margins). Hotpink dotted border. Black text.
+  </div>
+</div>
+<div class="pagebox" style="background:cyan;">
+  <div class="pagearea">
+    Cyan background (including page margins). Black dotted border. Black text.
+  </div>
+</div>
diff --git a/css/css-page/page-box-005-print.html b/css/css-page/page-box-005-print.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-page-3/#page-properties">
+<link rel="match" href="page-box-005-print-ref.html">
+<style>
+  @page {
+    size: 400px;
+    margin: 50px;
+    color: hotpink;
+    border: 10px dotted;
+    padding: 20px;
+    background: yellow;
+  }
+  @page :first {
+    color: orange;
+    background: white;
+  }
+  @page :right {
+    /* The first page in a horizontal writing mode LTR document is a right
+       page. :first has higher specificity than :right, so these declarations
+       are only for the third page. */
+    color: black;
+    background: cyan;
+  }
+  body {
+    margin: 0;
+  }
+</style>
+White background (including page margins). Orange dotted border. Black text.
+<div style="break-before:page;">
+  Yellow background (including page margins). Hotpink dotted border. Black text.
+</div>
+<div style="break-before:page;">
+  Cyan background (including page margins). Black dotted border. Black text.
+</div>
diff --git a/css/css-page/page-box-006-print-ref.html b/css/css-page/page-box-006-print-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  @page {
+    size: 400px;
+    margin: 0;
+  }
+  body {
+    margin: 0;
+  }
+</style>
+<div style="margin:50px; height:300px; background:yellow;">
+  Yellow background, white page margins.
+</div>
+<div style="display:flow-root; break-before:page; height:400px; background:blue;">
+  <div style="margin:50px; height:300px; background:yellow;">
+    Yellow background, blue page margins.
+  </div>
+</div>
diff --git a/css/css-page/page-box-006-print.html b/css/css-page/page-box-006-print.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-page-3/#page-properties">
+<link rel="match" href="page-box-006-print-ref.html">
+<style>
+  @page {
+    size: 400px;
+    margin: 50px;
+    background: blue;
+  }
+  @page :first {
+    background: white;
+  }
+  body {
+    margin: 0;
+    background: yellow;
+  }
+</style>
+Yellow background, white page margins.
+<div style="break-before:page;">
+  Yellow background, blue page margins.
+</div>