Add printing WPT test for fixedpos and variable page size.

Fixed-positioned elements are positioned within the initial containing block, which, for pagination, is defined as the page area size of the first page. Even if the first page isn't large enough for the fixed-positioned element, subsequent pages may be large enough. This test passes in Blink. Change-Id: I49fdc8d735a126ff928e6098c733e9fe053f80fe Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5499460 Reviewed-by: Ian Kilpatrick <[email protected]> Commit-Queue: Morten Stenshorne <[email protected]> Cr-Commit-Position: refs/heads/main@{#1294362}
DanielRyanSmith · Apr 30, 2024 · 9753aaa · 9753aaa
1 parent 873ff0c
commit 9753aaa
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 0 deletions.
diff --git a/css/css-page/fixedpos-010-print-ref.html b/css/css-page/fixedpos-010-print-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
+<style>
+  @page {
+    size: 400px;
+    margin: 0;
+  }
+  @page large {
+    size: 500px 400px;
+  }
+  body {
+    margin: 0;
+  }
+</style>
+This page should <em>not</em> have a blue box.
+<div style="page:large;">
+  <div style="float:right; margin-top:300px; width:100px; height:100px; background:blue;"></div>
+  <div style="width:400px;">
+    This page should have a blue box in the bottom right corner.
+  </div>
+  <div style="break-before:page;">
+    <div style="float:right; margin-top:300px; width:100px; height:100px; background:blue;"></div>
+    <div style="width:400px;">
+      This page should have a blue box in the bottom right corner.
+    </div>
+  </div>
+</div>
+This page should <em>not</em> have a blue box.
diff --git a/css/css-page/fixedpos-010-print.html b/css/css-page/fixedpos-010-print.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#valdef-position-fixed">
+<link rel="match" href="fixedpos-010-print-ref.html">
+<style>
+  @page {
+    size: 400px;
+    margin: 0;
+  }
+  @page large {
+    size: 500px 400px;
+  }
+  body {
+    margin: 0;
+  }
+</style>
+<div style="position:fixed; right:-100px; bottom:0; width:100px; height:100px; background:blue;"></div>
+This page should <em>not</em> have a blue box.
+<div style="page:large; width:400px;">
+  This page should have a blue box in the bottom right corner.
+  <div style="break-before:page;">
+    This page should have a blue box in the bottom right corner.
+  </div>
+</div>
+This page should <em>not</em> have a blue box.