Get border/padding from fragment when painting background.

Since @page border box layout objects aren't in the the layout tree, any code that wants to walk up the tree to find the containing block will be in for a surprise. This would happen if percentage-based @page padding was used [1]. Recomputing padding during painting when we have already done it during layout is rather pointless anyway. Read it out directly from the fragment. [1] #1 blink::LayoutBox::ContainingBlockLogicalWidthForContent() #2 blink::LayoutBoxModelObject::ComputedCSSPadding() #3 blink::LayoutBoxModelObject::PaddingTop() #4 blink::LayoutBoxModelObject::PaddingOutsets() #5 blink::BoxPainterBase::PaintFillLayer() #6 blink::BoxPainterBase::PaintFillLayers() #7 blink::BoxFragmentPainter::PaintBackground() Bug: 40286153 Change-Id: I1e6e92c2ce1d81aab2673ec9a877eac455534102
web-platform-tests · May 14, 2024 · bcd8665 · bcd8665
1 parent 70155d9
commit bcd8665
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/css/css-page/page-box-007-print-ref.html b/css/css-page/page-box-007-print-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  @page {
+    size: 400px 800px;
+    margin: 0;
+  }
+  body {
+    margin: 0;
+  }
+</style>
+<div style="box-sizing:border-box; height:100vh; border:solid hotpink; background:yellow; border-width:40px 80px 120px 160px; padding:4px;">
+  The page padding (in hotpink) should be smallest at the top, larger at the
+  right, even larger at the bottom, and largest at the left. There should be no
+  red.
+</div>
diff --git a/css/css-page/page-box-007-print.html b/css/css-page/page-box-007-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-007-print-ref.html">
+<meta name="assert" content="Test percentage-based @page padding">
+<style>
+  @page {
+    size: 400px 800px;
+    margin: 0;
+    padding: 5% 20% 15% 40%;
+    background: red;
+  }
+  body {
+    margin: 0;
+    background: hotpink;
+  }
+</style>
+<div style="box-sizing:border-box; padding:4px; height:100vh; background:yellow;">
+  The page padding (in hotpink) should be smallest at the top, larger at the
+  right, even larger at the bottom, and largest at the left. There should be no
+  red.
+</div>