Need to include non-auto margins when resolving auto margins. (web-pl…

…atform-tests#46517) Make sure that an auto margin doesn't receive the space actually taken up by the non-auto margin on the other side of the box. Didn't get this right for @page auto margins. Bug: 40286153 Change-Id: Iff877c6f0ad9ecee594f51ef7b4ca5f71eb3be26 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5573406 Commit-Queue: Morten Stenshorne <[email protected]> Reviewed-by: Ian Kilpatrick <[email protected]> Cr-Commit-Position: refs/heads/main@{#1307087} Co-authored-by: Morten Stenshorne <[email protected]>
linnan-github · May 31, 2024 · 8ab167e · 8ab167e
1 parent 9c182a9
commit 8ab167e
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 0 deletions.
diff --git a/css/css-page/page-margin-auto-and-non-zero-print-ref.html b/css/css-page/page-margin-auto-and-non-zero-print-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
+<style>
+  @page {
+    size: 20em 7em;
+    margin: 0;
+  }
+  .pagebox {
+    break-before: page;
+    display: flex;
+    width: 20em;
+    height: 7em;
+  }
+  .pagebox > div {
+    flex: 1;
+    margin: 30px;
+    border: solid;
+    background: yellow;
+  }
+  body {
+    margin: 0;
+  }
+</style>
+<div class="pagebox">
+  <div>center / middle</div>
+</div>
+<div class="pagebox">
+  <div style="margin-top:0;">center / top</div>
+</div>
+<div class="pagebox">
+  <div style="margin-bottom:0;">center / bottom</div>
+</div>
+<div class="pagebox">
+  <div style="margin-top:0; margin-left:0;">top / left</div>
+</div>
+<div class="pagebox">
+  <div style="margin-top:0; margin-right:0;">top / right</div>
+</div>
+<div class="pagebox">
+  <div style="margin-bottom:0; margin-right:0;">bottom / right</div>
+</div>
diff --git a/css/css-page/page-margin-auto-and-non-zero-print.html b/css/css-page/page-margin-auto-and-non-zero-print.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-page-3/#page-properties">
+<link rel="match" href="page-margin-auto-and-non-zero-print-ref.html">
+<style>
+  @page {
+    size: 20em 7em;
+    border: solid;
+    margin: 30px;
+  }
+  @page aaa { }
+  @page bbb {
+    margin-top: auto;
+  }
+  @page ccc {
+    margin-bottom: auto;
+  }
+  @page ddd {
+    margin-top: auto;
+    margin-left: auto;
+  }
+  @page eee {
+    margin-top: auto;
+    margin-right: auto;
+  }
+  @page fff {
+    margin-bottom: auto;
+    margin-right: auto;
+  }
+  body {
+    margin: 0;
+    background: yellow;
+  }
+</style>
+<div style="page:aaa;">
+  center / middle
+</div>
+<div style="page:bbb;">
+  center / top
+</div>
+<div style="page:ccc;">
+  center / bottom
+</div>
+<div style="page:ddd;">
+  top / left
+</div>
+<div style="page:eee;">
+  top / right
+</div>
+<div style="page:fff;">
+  bottom / right
+</div>