diff --git a/testing/web-platform/tests/css/css-page/body-background-slr-print-ref.html b/testing/web-platform/tests/css/css-page/body-background-slr-print-ref.html
new file mode 100644
index 0000000000000..d47a59af4d3f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-page/body-background-slr-print-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+body {
+  margin: 20px;
+  background: linear-gradient(lightgray 0%, lightgray 50%, white 50%, white 100%)
+}
+@page {
+  size: 800px 600px;
+  margin: 0;
+}
+</style>
+<p style="writing-mode:horizontal-tb; position:absolute; right:0; top:0; width:200px;">
+  There should be a bottom-left-aligned blue box on the first page, and a
+  bottom-left-aligned hotpink box on the second page.
+  The background of the first page is lightgray, and the background of the
+  second page is white.
+</p>
+<div style="width:600px; height:100px; break-inside:avoid; background:blue; margin-top:480px;"></div>
+<div style="height:500px"></div>
+<div style="width:800px; height:100px; break-inside:avoid; background:hotpink; margin-left:-20px;"></div>
diff --git a/testing/web-platform/tests/css/css-page/body-background-slr-print.html b/testing/web-platform/tests/css/css-page/body-background-slr-print.html
new file mode 100644
index 0000000000000..d7c1e91db7ce1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-page/body-background-slr-print.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-page-3/">
+<meta name="assert" content="Body's background is fragmented correctly in sideways-lr writing mode.">
+<link rel="match" href="body-background-slr-print-ref.html">
+<style>
+html { writing-mode: sideways-lr; }
+body {
+  margin: 20px;
+  background: linear-gradient(90deg, lightgray 0%, lightgray 50%, white 50%, white 100%)
+}
+@page {
+  size: 800px 600px;
+  margin: 0;
+}
+</style>
+<p style="writing-mode:horizontal-tb; position:absolute; right:0; top:0; width:200px;">
+  There should be a bottom-left-aligned blue box on the first page, and a
+  bottom-left-aligned hotpink box on the second page.
+  The background of the first page is lightgray, and the background of the
+  second page is white.
+</p>
+<div style="width:600px; height:100px; break-inside:avoid; background:blue;"></div>
+<div style="width:800px; height:100px; break-inside:avoid; background:hotpink;"></div>
diff --git a/testing/web-platform/tests/css/css-page/body-background-srl-print-ref.html b/testing/web-platform/tests/css/css-page/body-background-srl-print-ref.html
new file mode 100644
index 0000000000000..293bcbae7d5ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-page/body-background-srl-print-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<style>
+body {
+  margin: 20px;
+  background: linear-gradient(to bottom, white 0%, white 50%, lightgray 50%, lightgray 100%);
+  padding-bottom: 480px;
+}
+@page {
+  size: 800px 600px;
+  margin: 0;
+}
+</style>
+<div style="position:absolute; left:0; top:0; width:200px;">
+  There should be a right-aligned blue box on the first page, and a
+  right-aligned hotpink box on the second page.
+  The background of the first page is lightgray, and the background of the
+  second page is white.
+</div>
+<!-- Right-align with auto left margin. -->
+<div style="margin-left:auto; width:600px; height:100px; background:blue;"></div>
+<!-- Retain the inline-start margin in the test by setting the top margin to
+     20px. Cancel out the block-start body margin (shouldn't be repeated on
+     every page) in the test, by setting the left margin to -20px. -->
+<div style="break-before:page; width:800px; height:100px; margin:20px 0 0 -20px; background:hotpink;"></div>
diff --git a/testing/web-platform/tests/css/css-page/body-background-srl-print.html b/testing/web-platform/tests/css/css-page/body-background-srl-print.html
new file mode 100644
index 0000000000000..1c5f1c3362244
--- /dev/null
+++ b/testing/web-platform/tests/css/css-page/body-background-srl-print.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-page-3/">
+<meta name="assert" content="Body's background is fragmented correctly in sideways-rl writing mode.">
+<link rel="match" href="body-background-srl-print-ref.html">
+<style>
+html { writing-mode: sideways-rl; }
+body {
+  margin: 20px;
+  background: linear-gradient(to left, lightgray 0%, lightgray 50%, white 50%, white 100%);
+}
+@page {
+  size: 800px 600px;
+  margin: 0;
+}
+</style>
+<div style="writing-mode:horizontal-tb; position:absolute; left:0; top:0; width:200px;">
+  There should be a right-aligned blue box on the first page, and a
+  right-aligned hotpink box on the second page.
+  The background of the first page is lightgray, and the background of the
+  second page is white.
+</div>
+<div style="width:600px; height:100px; break-inside:avoid; background:blue;"></div>
+<div style="width:800px; height:100px; break-inside:avoid; background:hotpink;"></div>
