From e94fd41033c56b567bdb52794227ee527083bad4 Mon Sep 17 00:00:00 2001
From: Mats Palmgren <mats@mozilla.com>
Date: Mon, 30 Nov 2020 15:58:19 +0000
Subject: [PATCH] Bug 1669333 - Make the fragmentation fallback code use
 logical coordinates.  r=jfkthame

Differential Revision: https://phabricator.services.mozilla.com/D97864
---
 layout/generic/nsCanvasFrame.cpp              |  2 +-
 layout/generic/nsPageContentFrame.cpp         | 14 ++--
 layout/generic/nsPageFrame.cpp                | 41 ++++++-----
 .../pagination/inline-block-slice-1-ref.html  |  8 +-
 .../pagination/inline-block-slice-1.html      |  8 +-
 .../pagination/inline-block-slice-1b-ref.html | 38 ++++++++++
 .../pagination/inline-block-slice-1b.html     | 38 ++++++++++
 .../pagination/inline-block-slice-1c-ref.html | 38 ++++++++++
 .../pagination/inline-block-slice-1c.html     | 38 ++++++++++
 .../pagination/inline-block-slice-2-ref.html  | 10 +--
 .../pagination/inline-block-slice-2.html      | 10 +--
 .../pagination/inline-block-slice-2b-ref.html | 41 +++++++++++
 .../pagination/inline-block-slice-2b.html     | 41 +++++++++++
 .../pagination/inline-block-slice-2c-ref.html | 41 +++++++++++
 .../pagination/inline-block-slice-2c.html     | 41 +++++++++++
 .../pagination/inline-block-slice-3-ref.html  | 12 +--
 .../pagination/inline-block-slice-3.html      | 12 +--
 .../pagination/inline-block-slice-3b-ref.html | 47 ++++++++++++
 .../pagination/inline-block-slice-3b.html     | 49 +++++++++++++
 .../pagination/inline-block-slice-3c-ref.html | 47 ++++++++++++
 .../pagination/inline-block-slice-3c.html     | 49 +++++++++++++
 .../pagination/inline-block-slice-4-ref.html  | 14 ++--
 .../pagination/inline-block-slice-4.html      | 14 ++--
 .../pagination/inline-block-slice-4b-ref.html | 48 ++++++++++++
 .../pagination/inline-block-slice-4b.html     | 50 +++++++++++++
 .../pagination/inline-block-slice-4c-ref.html | 48 ++++++++++++
 .../pagination/inline-block-slice-4c.html     | 50 +++++++++++++
 .../pagination/inline-block-slice-5-ref.html  | 10 +--
 .../pagination/inline-block-slice-5.html      |  8 +-
 .../pagination/inline-block-slice-5b-ref.html | 48 ++++++++++++
 .../pagination/inline-block-slice-5b.html     | 46 ++++++++++++
 .../pagination/inline-block-slice-5c-ref.html | 48 ++++++++++++
 .../pagination/inline-block-slice-5c.html     | 46 ++++++++++++
 .../pagination/inline-block-slice-6-ref.html  | 12 +--
 .../pagination/inline-block-slice-6.html      | 10 +--
 .../pagination/inline-block-slice-6b-ref.html | 47 ++++++++++++
 .../pagination/inline-block-slice-6b.html     | 45 ++++++++++++
 .../pagination/inline-block-slice-6c-ref.html | 48 ++++++++++++
 .../pagination/inline-block-slice-6c.html     | 46 ++++++++++++
 .../pagination/inline-block-slice-7-ref.html  | 14 ++--
 .../pagination/inline-block-slice-7.html      | 12 +--
 .../pagination/inline-block-slice-8-ref.html  | 39 ++++++++++
 .../pagination/inline-block-slice-8.html      | 37 ++++++++++
 .../pagination/inline-block-slice-8b-ref.html | 40 ++++++++++
 .../pagination/inline-block-slice-8b.html     | 38 ++++++++++
 .../pagination/inline-block-slice-8c-ref.html | 39 ++++++++++
 .../pagination/inline-block-slice-8c.html     | 38 ++++++++++
 layout/reftests/pagination/reftest.list       | 15 ++++
 .../css/css-break/block-001-wm-vlr-print.html | 34 +++++++++
 .../css/css-break/block-001-wm-vlr-ref.html   | 48 ++++++++++++
 .../css/css-break/block-001-wm-vrl-print.html | 33 +++++++++
 .../css/css-break/block-001-wm-vrl-ref.html   | 48 ++++++++++++
 .../css/css-break/block-002-wm-vlr-print.html | 51 +++++++++++++
 .../css/css-break/block-002-wm-vlr-ref.html   | 73 +++++++++++++++++++
 .../css/css-break/block-002-wm-vrl-print.html | 51 +++++++++++++
 .../css/css-break/block-002-wm-vrl-ref.html   | 73 +++++++++++++++++++
 56 files changed, 1844 insertions(+), 102 deletions(-)
 create mode 100644 layout/reftests/pagination/inline-block-slice-1b-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-1b.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-1c-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-1c.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-2b-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-2b.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-2c-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-2c.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-3b-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-3b.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-3c-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-3c.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-4b-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-4b.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-4c-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-4c.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-5b-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-5b.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-5c-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-5c.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-6b-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-6b.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-6c-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-6c.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-8-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-8.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-8b-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-8b.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-8c-ref.html
 create mode 100644 layout/reftests/pagination/inline-block-slice-8c.html
 create mode 100644 testing/web-platform/tests/css/css-break/block-001-wm-vlr-print.html
 create mode 100644 testing/web-platform/tests/css/css-break/block-001-wm-vlr-ref.html
 create mode 100644 testing/web-platform/tests/css/css-break/block-001-wm-vrl-print.html
 create mode 100644 testing/web-platform/tests/css/css-break/block-001-wm-vrl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-break/block-002-wm-vlr-print.html
 create mode 100644 testing/web-platform/tests/css/css-break/block-002-wm-vlr-ref.html
 create mode 100644 testing/web-platform/tests/css/css-break/block-002-wm-vrl-print.html
 create mode 100644 testing/web-platform/tests/css/css-break/block-002-wm-vrl-ref.html

diff --git a/layout/generic/nsCanvasFrame.cpp b/layout/generic/nsCanvasFrame.cpp
index 86cae59a38a9..aee97db426e4 100644
--- a/layout/generic/nsCanvasFrame.cpp
+++ b/layout/generic/nsCanvasFrame.cpp
@@ -759,7 +759,7 @@ void nsCanvasFrame::Reflow(nsPresContext* aPresContext,
           // example of this.
           if (layoutOverflow < 0) {
             LogicalRect so(kidWM, pifChild->ScrollableOverflowRect(),
-                           aReflowInput.ComputedSizeAsContainerIfConstrained());
+                           pifChild->GetSize());
             layoutOverflow = so.BEnd(kidWM) - canvasBSizeSum;
           }
           bOffset = std::max(bOffset, layoutOverflow);
diff --git a/layout/generic/nsPageContentFrame.cpp b/layout/generic/nsPageContentFrame.cpp
index 85fdf2126f22..82c26be97a4b 100644
--- a/layout/generic/nsPageContentFrame.cpp
+++ b/layout/generic/nsPageContentFrame.cpp
@@ -135,13 +135,15 @@ void nsPageContentFrame::Reflow(nsPresContext* aPresContext,
     auto* previous = static_cast<nsPageContentFrame*>(GetPrevContinuation());
     const nscoord previousPageOverflow =
         previous ? previous->mRemainingOverflow : 0;
-
-    const nscoord overflowHeight = InkOverflowRect().YMost();
-    const nscoord pageHeight = GetRect().Height();
-    const nscoord currentPageOverflow = overflowHeight - pageHeight;
-
+    const nsSize containerSize(aReflowInput.AvailableWidth(),
+                               aReflowInput.AvailableHeight());
+    const nscoord pageBSize = GetLogicalRect(containerSize).BSize(wm);
+    const nscoord overflowBSize =
+        LogicalRect(wm, InkOverflowRect(), GetSize()).BEnd(wm);
+    const nscoord currentPageOverflow = overflowBSize - pageBSize;
     nscoord remainingOverflow =
-        std::max(currentPageOverflow, previousPageOverflow - pageHeight);
+        std::max(currentPageOverflow, previousPageOverflow - pageBSize);
+
     if (aStatus.IsFullyComplete() && remainingOverflow > 0) {
       // If we have InkOverflow off the end of our page, then we report
       // ourselves as overflow-incomplete in order to produce an additional
diff --git a/layout/generic/nsPageFrame.cpp b/layout/generic/nsPageFrame.cpp
index d1d4013e4555..a066acd6c285 100644
--- a/layout/generic/nsPageFrame.cpp
+++ b/layout/generic/nsPageFrame.cpp
@@ -551,12 +551,13 @@ static nsTArray<PageAndOffset> GetPreviousPagesWithOverflow(
 
   nsPageContentFrame* pageCF = aPage;
   // The collective height of all prev-continuations we've traversed so far:
-  nscoord offsetToCurrentPageTop = 0;
+  nscoord offsetToCurrentPageBStart = 0;
+  const auto wm = pageCF->GetWritingMode();
   while ((pageCF = GetPreviousPageContentFrame(pageCF))) {
-    offsetToCurrentPageTop += pageCF->GetSize().Height();
+    offsetToCurrentPageBStart += pageCF->BSize(wm);
 
     if (pageCF->HasOverflowAreas()) {
-      pages.EmplaceBack(pageCF, offsetToCurrentPageTop);
+      pages.EmplaceBack(pageCF, offsetToCurrentPageBStart);
     }
   }
 
@@ -570,28 +571,30 @@ static void BuildPreviousPageOverflow(nsDisplayListBuilder* aBuilder,
   const auto previousPagesAndOffsets =
       GetPreviousPagesWithOverflow(aCurrentPageCF);
 
+  const auto wm = aCurrentPageCF->GetWritingMode();
   for (const PageAndOffset& pair : Reversed(previousPagesAndOffsets)) {
     auto* prevPageCF = pair.first;
-    const nscoord offsetToCurrentPageTop = pair.second;
-    const auto inkOverflow = prevPageCF->InkOverflowRectRelativeToSelf();
-    const auto remainingOverflow = inkOverflow.YMost() - offsetToCurrentPageTop;
-
+    const nscoord offsetToCurrentPageBStart = pair.second;
+    const LogicalRect inkOverflow(
+        wm, prevPageCF->InkOverflowRectRelativeToSelf(), prevPageCF->GetSize());
+    const auto remainingOverflow =
+        inkOverflow.BEnd(wm) - offsetToCurrentPageBStart;
     if (remainingOverflow <= 0) {
       continue;
     }
 
     // This rect represents the piece of prevPageCF's overflow that ends up on
     // the current pageContentFrame (in prevPageCF's coordinate system).
-    nsRect overflowRect = inkOverflow;
-    overflowRect.y = offsetToCurrentPageTop;
-    overflowRect.height =
-        std::min(remainingOverflow, prevPageCF->GetSize().Height());
+    LogicalRect overflowRect(inkOverflow);
+    overflowRect.BStart(wm) = offsetToCurrentPageBStart;
+    overflowRect.BSize(wm) = std::min(remainingOverflow, prevPageCF->BSize(wm));
 
     {
       // Convert the overflowRect to the coordinate system of aPageFrame, and
       // set it as the visible rect for display list building.
       const nsRect visibleRect =
-          overflowRect + prevPageCF->GetOffsetTo(aPageFrame);
+          overflowRect.GetPhysicalRect(wm, aPageFrame->GetSize()) +
+          prevPageCF->GetOffsetTo(aPageFrame);
       nsDisplayListBuilder::AutoBuildingDisplayList buildingForChild(
           aBuilder, aPageFrame, visibleRect, visibleRect);
 
@@ -599,12 +602,14 @@ static void BuildPreviousPageOverflow(nsDisplayListBuilder* aBuilder,
       // frame tree, building a display list for the previous page yields
       // display items that are outside of the current page bounds.
       // To fix that, an additional reference frame offset is added, which
-      // shifts the display items down as if the current and previous page were
-      // one long page in the same coordinate system.
-      const nsPoint pageOffset = aCurrentPageCF->GetOffsetTo(prevPageCF);
-      const nsPoint additionalOffset(pageOffset.X(),
-                                     pageOffset.Y() - offsetToCurrentPageTop);
-      buildingForChild.SetAdditionalOffset(additionalOffset);
+      // shifts the display items down (block axis) as if the current and
+      // previous page were one long page in the same coordinate system.
+      const nsSize containerSize = aPageFrame->GetSize();
+      LogicalPoint pageOffset(wm, aCurrentPageCF->GetOffsetTo(prevPageCF),
+                              containerSize);
+      pageOffset.B(wm) -= offsetToCurrentPageBStart;
+      buildingForChild.SetAdditionalOffset(
+          pageOffset.GetPhysicalPoint(wm, containerSize));
 
       aPageFrame->BuildDisplayListForChild(aBuilder, prevPageCF, aLists);
     }
diff --git a/layout/reftests/pagination/inline-block-slice-1-ref.html b/layout/reftests/pagination/inline-block-slice-1-ref.html
index 4afc0010f7b2..9793be3e1170 100644
--- a/layout/reftests/pagination/inline-block-slice-1-ref.html
+++ b/layout/reftests/pagination/inline-block-slice-1-ref.html
@@ -17,15 +17,15 @@ html,body {
 
 .ib {
   display: block;
-  width: 50vw;
-  height: 150vh;
+  inline-size: 50vw;
+  block-size: 150vh;
   background-color: grey;
   vertical-align: top;
 }
 
 .after {
-  width: 50vw;
-  height: 10vh;
+  inline-size: 50vw;
+  block-size: 10vh;
   background-color: black;
 }
 </style>
diff --git a/layout/reftests/pagination/inline-block-slice-1.html b/layout/reftests/pagination/inline-block-slice-1.html
index 7c32cde6c39d..6f8392e5acaf 100644
--- a/layout/reftests/pagination/inline-block-slice-1.html
+++ b/layout/reftests/pagination/inline-block-slice-1.html
@@ -17,15 +17,15 @@ html,body {
 
 .ib {
   display: inline-block;
-  width: 50vw;
-  height: 150vh;
+  inline-size: 50vw;
+  block-size: 150vh;
   background-color: grey;
   vertical-align: top;
 }
 
 .after {
-  width: 50vw;
-  height: 10vh;
+  inline-size: 50vw;
+  block-size: 10vh;
   background-color: black;
 }
 </style>
diff --git a/layout/reftests/pagination/inline-block-slice-1b-ref.html b/layout/reftests/pagination/inline-block-slice-1b-ref.html
new file mode 100644
index 000000000000..d4aba85ca01a
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-1b-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+
+.ib {
+  display: block;
+  inline-size: 50vh;
+  block-size: 150vw;
+  background-color: grey;
+  vertical-align: top;
+}
+
+.after {
+  inline-size: 50vh;
+  block-size: 10vw;
+  background-color: black;
+}
+</style>
+</head>
+<body>
+    <div class="ib"></div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-1b.html b/layout/reftests/pagination/inline-block-slice-1b.html
new file mode 100644
index 000000000000..41619c2d98d0
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-1b.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+
+.ib {
+  display: inline-block;
+  inline-size: 50vh;
+  block-size: 150vw;
+  background-color: grey;
+  vertical-align: top;
+}
+
+.after {
+  inline-size: 50vh;
+  block-size: 10vw;
+  background-color: black;
+}
+</style>
+</head>
+<body>
+    <div class="ib"></div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-1c-ref.html b/layout/reftests/pagination/inline-block-slice-1c-ref.html
new file mode 100644
index 000000000000..b40cbf262e0e
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-1c-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+
+.ib {
+  display: block;
+  inline-size: 50vh;
+  block-size: 150vw;
+  background-color: grey;
+  vertical-align: top;
+}
+
+.after {
+  inline-size: 50vh;
+  block-size: 10vw;
+  background-color: black;
+}
+</style>
+</head>
+<body>
+    <div class="ib"></div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-1c.html b/layout/reftests/pagination/inline-block-slice-1c.html
new file mode 100644
index 000000000000..0eb4f6a6602b
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-1c.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+
+.ib {
+  display: inline-block;
+  inline-size: 50vh;
+  block-size: 150vw;
+  background-color: grey;
+  vertical-align: top;
+}
+
+.after {
+  inline-size: 50vh;
+  block-size: 10vw;
+  background-color: black;
+}
+</style>
+</head>
+<body>
+    <div class="ib"></div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-2-ref.html b/layout/reftests/pagination/inline-block-slice-2-ref.html
index 7c47e1201a2d..11a9f568f19f 100644
--- a/layout/reftests/pagination/inline-block-slice-2-ref.html
+++ b/layout/reftests/pagination/inline-block-slice-2-ref.html
@@ -17,17 +17,17 @@ html,body {
 
 .ib {
   display: block;
-  width: 50vw;
-  height: 150vh;
+  inline-size: 50vw;
+  block-size: 150vh;
   vertical-align: top;
   border: 5px solid black;
 }
 
 .after {
-  width: 60vw;
-  height: 10vh;
+  inline-size: 60vw;
+  block-size: 10vh;
   position: relative;
-  top: -20vh;
+  inset-block-start: -20vh;
   border: 5px solid grey;
   background-color: white;
 }
diff --git a/layout/reftests/pagination/inline-block-slice-2.html b/layout/reftests/pagination/inline-block-slice-2.html
index c22d38374393..258527cfa598 100644
--- a/layout/reftests/pagination/inline-block-slice-2.html
+++ b/layout/reftests/pagination/inline-block-slice-2.html
@@ -17,17 +17,17 @@ html,body {
 
 .ib {
   display: inline-block;
-  width: 50vw;
-  height: 150vh;
+  inline-size: 50vw;
+  block-size: 150vh;
   vertical-align: top;
   border: 5px solid black;
 }
 
 .after {
-  width: 60vw;
-  height: 10vh;
+  inline-size: 60vw;
+  block-size: 10vh;
   position: relative;
-  top: -20vh;
+  inset-block-start: -20vh;
   border: 5px solid grey;
   background-color: white;
 }
diff --git a/layout/reftests/pagination/inline-block-slice-2b-ref.html b/layout/reftests/pagination/inline-block-slice-2b-ref.html
new file mode 100644
index 000000000000..bd648957e657
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-2b-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+
+.ib {
+  display: block;
+  inline-size: 50vh;
+  block-size: 150vw;
+  vertical-align: top;
+  border: 5px solid black;
+}
+
+.after {
+  inline-size: 60vh;
+  block-size: 10vw;
+  position: relative;
+  inset-block-start: -20vw;
+  border: 5px solid grey;
+  background-color: white;
+}
+</style>
+</head>
+<body>
+    <div class="ib"></div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-2b.html b/layout/reftests/pagination/inline-block-slice-2b.html
new file mode 100644
index 000000000000..831e568e71be
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-2b.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+
+.ib {
+  display: inline-block;
+  inline-size: 50vh;
+  block-size: 150vw;
+  vertical-align: top;
+  border: 5px solid black;
+}
+
+.after {
+  inline-size: 60vh;
+  block-size: 10vw;
+  position: relative;
+  inset-block-start: -20vw;
+  border: 5px solid grey;
+  background-color: white;
+}
+</style>
+</head>
+<body>
+    <div class="ib"></div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-2c-ref.html b/layout/reftests/pagination/inline-block-slice-2c-ref.html
new file mode 100644
index 000000000000..1c643d188189
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-2c-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+
+.ib {
+  display: block;
+  inline-size: 50vh;
+  block-size: 150vw;
+  vertical-align: top;
+  border: 5px solid black;
+}
+
+.after {
+  inline-size: 60vh;
+  block-size: 10vw;
+  position: relative;
+  inset-block-start: -20vw;
+  border: 5px solid grey;
+  background-color: white;
+}
+</style>
+</head>
+<body>
+    <div class="ib"></div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-2c.html b/layout/reftests/pagination/inline-block-slice-2c.html
new file mode 100644
index 000000000000..f6ea9f6d7992
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-2c.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+
+.ib {
+  display: inline-block;
+  inline-size: 50vh;
+  block-size: 150vw;
+  vertical-align: top;
+  border: 5px solid black;
+}
+
+.after {
+  inline-size: 60vh;
+  block-size: 10vw;
+  position: relative;
+  inset-block-start: -20vw;
+  border: 5px solid grey;
+  background-color: white;
+}
+</style>
+</head>
+<body>
+    <div class="ib"></div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-3-ref.html b/layout/reftests/pagination/inline-block-slice-3-ref.html
index a8343c9f0d6f..00cadb616687 100644
--- a/layout/reftests/pagination/inline-block-slice-3-ref.html
+++ b/layout/reftests/pagination/inline-block-slice-3-ref.html
@@ -17,21 +17,21 @@ html,body {
 
 .ib {
   display: block;
-  width: 50vw;
-  height: 130vh;
+  inline-size: 50vw;
+  block-size: 130vh;
   vertical-align: top;
   border: 5px solid black;
 }
 
 .ib > div {
-  width: 50vw;
-  height: 150vh;
+  inline-size: 50vw;
+  block-size: 150vh;
   border: 5px solid grey;
 }
 
 .after {
-  width: 60vw;
-  height: 10vh;
+  inline-size: 60vw;
+  block-size: 10vh;
   border: 5px dashed grey;
   background-color: grey;
 }
diff --git a/layout/reftests/pagination/inline-block-slice-3.html b/layout/reftests/pagination/inline-block-slice-3.html
index 529fdc28ae3e..2fcb06d8b845 100644
--- a/layout/reftests/pagination/inline-block-slice-3.html
+++ b/layout/reftests/pagination/inline-block-slice-3.html
@@ -17,23 +17,23 @@ html,body {
 
 .ib {
   display: inline-block;
-  width: 50vw;
-  height: 130vh;
+  inline-size: 50vw;
+  block-size: 130vh;
   vertical-align: top;
   border: 5px solid black;
 }
 
 .ib > div {
-  width: 50vw;
-  height: 150vh;
+  inline-size: 50vw;
+  block-size: 150vh;
   border: 5px solid grey;
 }
 
 .after {
   display: inline-block;
   vertical-align: top;
-  width: 60vw;
-  height: 10vh;
+  inline-size: 60vw;
+  block-size: 10vh;
   border: 5px dashed grey;
   background-color: grey;
 }
diff --git a/layout/reftests/pagination/inline-block-slice-3b-ref.html b/layout/reftests/pagination/inline-block-slice-3b-ref.html
new file mode 100644
index 000000000000..dae62a8ce0c8
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-3b-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+
+.ib {
+  display: block;
+  inline-size: 50vh;
+  block-size: 130vw;
+  vertical-align: top;
+  border: 5px solid black;
+}
+
+.ib > div {
+  inline-size: 50vh;
+  block-size: 150vw;
+  border: 5px solid grey;
+}
+
+.after {
+  inline-size: 60vh;
+  block-size: 10vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+    <div class="ib">
+      <div></div>
+    </div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-3b.html b/layout/reftests/pagination/inline-block-slice-3b.html
new file mode 100644
index 000000000000..3db9323699af
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-3b.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+
+.ib {
+  display: inline-block;
+  inline-size: 50vh;
+  block-size: 130vw;
+  vertical-align: top;
+  border: 5px solid black;
+}
+
+.ib > div {
+  inline-size: 50vh;
+  block-size: 150vw;
+  border: 5px solid grey;
+}
+
+.after {
+  display: inline-block;
+  vertical-align: top;
+  inline-size: 60vh;
+  block-size: 10vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+    <div class="ib">
+      <div></div>
+    </div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-3c-ref.html b/layout/reftests/pagination/inline-block-slice-3c-ref.html
new file mode 100644
index 000000000000..733dbda168af
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-3c-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+
+.ib {
+  display: block;
+  inline-size: 50vh;
+  block-size: 130vw;
+  vertical-align: top;
+  border: 5px solid black;
+}
+
+.ib > div {
+  inline-size: 50vh;
+  block-size: 150vw;
+  border: 5px solid grey;
+}
+
+.after {
+  inline-size: 60vh;
+  block-size: 10vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+    <div class="ib">
+      <div></div>
+    </div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-3c.html b/layout/reftests/pagination/inline-block-slice-3c.html
new file mode 100644
index 000000000000..6bca5af2d4e4
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-3c.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+
+.ib {
+  display: inline-block;
+  inline-size: 50vh;
+  block-size: 130vw;
+  vertical-align: top;
+  border: 5px solid black;
+}
+
+.ib > div {
+  inline-size: 50vh;
+  block-size: 150vw;
+  border: 5px solid grey;
+}
+
+.after {
+  display: inline-block;
+  vertical-align: top;
+  inline-size: 60vh;
+  block-size: 10vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+    <div class="ib">
+      <div></div>
+    </div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-4-ref.html b/layout/reftests/pagination/inline-block-slice-4-ref.html
index 865d0750e8f1..ed517fb66ec5 100644
--- a/layout/reftests/pagination/inline-block-slice-4-ref.html
+++ b/layout/reftests/pagination/inline-block-slice-4-ref.html
@@ -14,25 +14,25 @@
 html,body {
   color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
 }
-html { margin-top: 80vh; }
+html { margin-block-start: 80vh; }
 
 .ib {
   display: block;
-  width: 50vw;
-  height: 130vh;
+  inline-size: 50vw;
+  block-size: 130vh;
   vertical-align: top;
   border: 5px solid black;
 }
 
 .ib > div {
-  width: 50vw;
-  height: 150vh;
+  inline-size: 50vw;
+  block-size: 150vh;
   border: 5px solid grey;
 }
 
 .after {
-  width: 60vw;
-  height: 10vh;
+  inline-size: 60vw;
+  block-size: 10vh;
   border: 5px dashed grey;
   background-color: grey;
 }
diff --git a/layout/reftests/pagination/inline-block-slice-4.html b/layout/reftests/pagination/inline-block-slice-4.html
index 952acca02ec5..c3d8008442fa 100644
--- a/layout/reftests/pagination/inline-block-slice-4.html
+++ b/layout/reftests/pagination/inline-block-slice-4.html
@@ -14,27 +14,27 @@
 html,body {
   color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
 }
-html { margin-top: 80vh; }
+html { margin-block-start: 80vh; }
 
 .ib {
   display: inline-block;
-  width: 50vw;
-  height: 130vh;
+  inline-size: 50vw;
+  block-size: 130vh;
   vertical-align: top;
   border: 5px solid black;
 }
 
 .ib > div {
-  width: 50vw;
-  height: 150vh;
+  inline-size: 50vw;
+  block-size: 150vh;
   border: 5px solid grey;
 }
 
 .after {
   display: inline-block;
   vertical-align: top;
-  width: 60vw;
-  height: 10vh;
+  inline-size: 60vw;
+  block-size: 10vh;
   border: 5px dashed grey;
   background-color: grey;
 }
diff --git a/layout/reftests/pagination/inline-block-slice-4b-ref.html b/layout/reftests/pagination/inline-block-slice-4b-ref.html
new file mode 100644
index 000000000000..a3336cac5cf6
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-4b-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+html { margin-block-start: 80vw; }
+
+.ib {
+  display: block;
+  inline-size: 50vh;
+  block-size: 130vw;
+  vertical-align: top;
+  border: 5px solid black;
+}
+
+.ib > div {
+  inline-size: 50vh;
+  block-size: 150vw;
+  border: 5px solid grey;
+}
+
+.after {
+  inline-size: 60vh;
+  block-size: 25vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+    <div class="ib">
+      <div></div>
+    </div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-4b.html b/layout/reftests/pagination/inline-block-slice-4b.html
new file mode 100644
index 000000000000..562931eb86c1
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-4b.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+html { margin-block-start: 80vw; }
+
+.ib {
+  display: inline-block;
+  inline-size: 50vh;
+  block-size: 130vw;
+  vertical-align: top;
+  border: 5px solid black;
+}
+
+.ib > div {
+  inline-size: 50vh;
+  block-size: 150vw;
+  border: 5px solid grey;
+}
+
+.after {
+  display: inline-block;
+  vertical-align: top;
+  inline-size: 60vh;
+  block-size: 25vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+    <div class="ib">
+      <div></div>
+    </div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-4c-ref.html b/layout/reftests/pagination/inline-block-slice-4c-ref.html
new file mode 100644
index 000000000000..de93e8ada171
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-4c-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+html { margin-block-start: 80vw; }
+
+.ib {
+  display: block;
+  inline-size: 50vh;
+  block-size: 130vw;
+  vertical-align: top;
+  border: 5px solid black;
+}
+
+.ib > div {
+  inline-size: 50vh;
+  block-size: 150vw;
+  border: 5px solid grey;
+}
+
+.after {
+  inline-size: 60vh;
+  block-size: 25vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+    <div class="ib">
+      <div></div>
+    </div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-4c.html b/layout/reftests/pagination/inline-block-slice-4c.html
new file mode 100644
index 000000000000..b1415ef93979
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-4c.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+html { margin-block-start: 80vw; }
+
+.ib {
+  display: inline-block;
+  inline-size: 50vh;
+  block-size: 130vw;
+  vertical-align: top;
+  border: 5px solid black;
+}
+
+.ib > div {
+  inline-size: 50vh;
+  block-size: 150vw;
+  border: 5px solid grey;
+}
+
+.after {
+  display: inline-block;
+  vertical-align: top;
+  inline-size: 60vh;
+  block-size: 25vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+    <div class="ib">
+      <div></div>
+    </div>
+    <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-5-ref.html b/layout/reftests/pagination/inline-block-slice-5-ref.html
index b646e0648ff2..0c3b4ae6054a 100644
--- a/layout/reftests/pagination/inline-block-slice-5-ref.html
+++ b/layout/reftests/pagination/inline-block-slice-5-ref.html
@@ -21,8 +21,8 @@ html,body {
 
 .ib {
   display: block;
-  width: 50vw;
-  height: 210vh;
+  inline-size: 50vw;
+  block-size: 210vh;
   border: 5px solid black;
   margin-left: 20px;
   margin-top: -20px;
@@ -30,15 +30,15 @@ html,body {
 
 .after {
   display: block;
-  width: 60vw;
-  height: 10vh;
+  inline-size: 60vw;
+  block-size: 10vh;
   border: 5px dashed grey;
   background-color: grey;
 }
 </style>
 </head>
 <body>
-  X<span style="display:inline-block; width:50vw; border:5px solid transparent"></span>p
+  X<span style="display:inline-block; inline-size:50vw; border:5px solid transparent"></span>p
   <div class="ib"></div>
   <div class="after"></div>
 </body>
diff --git a/layout/reftests/pagination/inline-block-slice-5.html b/layout/reftests/pagination/inline-block-slice-5.html
index 070b545c6777..105ab942f76d 100644
--- a/layout/reftests/pagination/inline-block-slice-5.html
+++ b/layout/reftests/pagination/inline-block-slice-5.html
@@ -21,16 +21,16 @@ html,body {
 
 .ib {
   display: inline-block;
-  width: 50vw;
-  height: 210vh;
+  inline-size: 50vw;
+  block-size: 210vh;
   vertical-align: top;
   border: 5px solid black;
 }
 
 .after {
   display: block;
-  width: 60vw;
-  height: 10vh;
+  inline-size: 60vw;
+  block-size: 10vh;
   border: 5px dashed grey;
   background-color: grey;
 }
diff --git a/layout/reftests/pagination/inline-block-slice-5b-ref.html b/layout/reftests/pagination/inline-block-slice-5b-ref.html
new file mode 100644
index 000000000000..c1d0f6f51745
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-5b-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+
+.ib {
+  display: block;
+  inline-size: 50vh;
+  block-size: 210vw;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  margin-inline-start: 20px;
+  margin-block-end: -20px;
+}
+
+.after {
+  display: block;
+  inline-size: 60vh;
+  block-size: 10vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+  <div class="ib"></div>
+  X<span style="display:inline-block; inline-size:50vh; border:5px solid transparent"></span>p
+  <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-5b.html b/layout/reftests/pagination/inline-block-slice-5b.html
new file mode 100644
index 000000000000..07684ea50653
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-5b.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+
+.ib {
+  display: inline-block;
+  inline-size: 50vh;
+  block-size: 210vw;
+  vertical-align: top;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+}
+
+.after {
+  display: block;
+  inline-size: 60vh;
+  block-size: 10vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+  X<div class="ib"></div>p
+  <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-5c-ref.html b/layout/reftests/pagination/inline-block-slice-5c-ref.html
new file mode 100644
index 000000000000..e3ca38469500
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-5c-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+
+.ib {
+  display: block;
+  inline-size: 50vh;
+  block-size: 210vw;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  margin-inline-start: 20px;
+  margin-block-start: -20px;
+}
+
+.after {
+  display: block;
+  inline-size: 60vh;
+  block-size: 10vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+  X<span style="display:inline-block; inline-size:50vh; border:5px solid transparent"></span>p
+  <div class="ib"></div>
+  <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-5c.html b/layout/reftests/pagination/inline-block-slice-5c.html
new file mode 100644
index 000000000000..4965181ff08d
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-5c.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+
+.ib {
+  display: inline-block;
+  inline-size: 50vh;
+  block-size: 210vw;
+  vertical-align: top;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+}
+
+.after {
+  display: block;
+  inline-size: 60vh;
+  block-size: 10vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+  X<div class="ib"></div>p
+  <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-6-ref.html b/layout/reftests/pagination/inline-block-slice-6-ref.html
index 8887a5c70bac..ad673c23c2e9 100644
--- a/layout/reftests/pagination/inline-block-slice-6-ref.html
+++ b/layout/reftests/pagination/inline-block-slice-6-ref.html
@@ -18,12 +18,12 @@
 html,body {
   color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
 }
-html { height: 40vh; }
+html { block-size: 40vh; }
 
 .ib {
   display: block;
-  width: 50vw;
-  height: 210vh;
+  inline-size: 50vw;
+  block-size: 210vh;
   border: 5px solid black;
   margin-left: 20px;
   margin-top: -20px;
@@ -31,15 +31,15 @@ html { height: 40vh; }
 
 .after {
   display: block;
-  width: 60vw;
-  height: 10vh;
+  inline-size: 60vw;
+  block-size: 10vh;
   border: 5px dashed grey;
   background-color: grey;
 }
 </style>
 </head>
 <body>
-  X<span style="display:inline-block; width:50vw; border:5px solid transparent"></span>p
+  X<span style="display:inline-block; inline-size:50vw; border:5px solid transparent"></span>p
   <div class="ib"></div>
   <div class="after"></div>
 </body>
diff --git a/layout/reftests/pagination/inline-block-slice-6.html b/layout/reftests/pagination/inline-block-slice-6.html
index 5053fb0f5684..e6688ef1999f 100644
--- a/layout/reftests/pagination/inline-block-slice-6.html
+++ b/layout/reftests/pagination/inline-block-slice-6.html
@@ -18,20 +18,20 @@
 html,body {
   color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
 }
-html { height: 40vh; }
+html { block-size: 40vh; }
 
 .ib {
   display: inline-block;
-  width: 50vw;
-  height: 210vh;
+  inline-size: 50vw;
+  block-size: 210vh;
   vertical-align: top;
   border: 5px solid black;
 }
 
 .after {
   display: block;
-  width: 60vw;
-  height: 10vh;
+  inline-size: 60vw;
+  block-size: 10vh;
   border: 5px dashed grey;
   background-color: grey;
 }
diff --git a/layout/reftests/pagination/inline-block-slice-6b-ref.html b/layout/reftests/pagination/inline-block-slice-6b-ref.html
new file mode 100644
index 000000000000..38b1dcfb12f2
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-6b-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+html { block-size: 40vw; }
+
+.ib {
+  display: block;
+  inline-size: 50vh;
+  block-size: 210vw;
+  border: 5px solid black;
+  margin-top: 20px;
+  margin-right: -20px;
+}
+
+.after {
+  display: block;
+  inline-size: 60vh;
+  block-size: 10vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+  <div class="ib"></div>
+  X<span style="display:inline-block; inline-size:50vh; border:5px solid transparent"></span>p
+  <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-6b.html b/layout/reftests/pagination/inline-block-slice-6b.html
new file mode 100644
index 000000000000..1ddbbfdada4b
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-6b.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+html { block-size: 40vw; }
+
+.ib {
+  display: inline-block;
+  inline-size: 50vh;
+  block-size: 210vw;
+  vertical-align: top;
+  border: 5px solid black;
+}
+
+.after {
+  display: block;
+  inline-size: 60vh;
+  block-size: 10vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+  X<div class="ib"></div>p
+  <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-6c-ref.html b/layout/reftests/pagination/inline-block-slice-6c-ref.html
new file mode 100644
index 000000000000..9754426561f7
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-6c-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+html { block-size: 40vw; writing-mode: vertical-rl; }
+
+.ib {
+  display: block;
+  inline-size: 50vh;
+  block-size: 210vw;
+  border: 5px solid black;
+  margin-top: 20px;
+  margin-right: -20px;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+}
+
+.after {
+  display: block;
+  inline-size: 60vh;
+  block-size: 10vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+  X<span style="display:inline-block; inline-size:50vh; border:5px solid transparent"></span>p
+  <div class="ib"></div>
+  <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-6c.html b/layout/reftests/pagination/inline-block-slice-6c.html
new file mode 100644
index 000000000000..425e25936f97
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-6c.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+html { block-size: 40vw; writing-mode: vertical-rl; }
+
+.ib {
+  display: inline-block;
+  inline-size: 50vh;
+  block-size: 210vw;
+  vertical-align: top;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+}
+
+.after {
+  display: block;
+  inline-size: 60vh;
+  block-size: 10vw;
+  border: 5px dashed grey;
+  background-color: grey;
+}
+</style>
+</head>
+<body>
+  X<div class="ib"></div>p
+  <div class="after"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-7-ref.html b/layout/reftests/pagination/inline-block-slice-7-ref.html
index 47e5af564cbf..e47980b573f8 100644
--- a/layout/reftests/pagination/inline-block-slice-7-ref.html
+++ b/layout/reftests/pagination/inline-block-slice-7-ref.html
@@ -18,31 +18,31 @@
 html,body {
   color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
 }
-html { height: 40vh; }
+html { block-size: 40vh; }
 
 .ib {
   display: block;
-  width: 50vw;
-  height: 210vh;
+  inline-size: 50vw;
+  block-size: 210vh;
   border: 5px solid black;
   margin-left: 20px;
   margin-top: -20px;
 }
 .ib > div {
-  height: 220vh; /* creates a bit of scrollable overflow on .ib */
+  block-size: 220vh; /* creates a bit of scrollable overflow on .ib */
 }
 
 .after {
   display: block;
-  width: 60vw;
-  height: 10vh;
+  inline-size: 60vw;
+  block-size: 10vh;
   border: 5px dashed grey;
   background-color: grey;
 }
 </style>
 </head>
 <body>
-  X<span style="display:inline-block; width:50vw; border:5px solid transparent"></span>p
+  X<span style="display:inline-block; inline-size:50vw; border:5px solid transparent"></span>p
   <div class="ib"><div></div></div>
   <div class="after"></div>
 </body>
diff --git a/layout/reftests/pagination/inline-block-slice-7.html b/layout/reftests/pagination/inline-block-slice-7.html
index 84a368a86d3b..a4f69a586381 100644
--- a/layout/reftests/pagination/inline-block-slice-7.html
+++ b/layout/reftests/pagination/inline-block-slice-7.html
@@ -18,23 +18,23 @@
 html,body {
   color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
 }
-html { height: 40vh; }
+html { block-size: 40vh; }
 
 .ib {
   display: inline-block;
-  width: 50vw;
-  height: 210vh;
+  inline-size: 50vw;
+  block-size: 210vh;
   vertical-align: top;
   border: 5px solid black;
 }
 .ib > div {
-  height: 220vh; /* creates a bit of scrollable overflow on .ib */
+  block-size: 220vh; /* creates a bit of scrollable overflow on .ib */
 }
 
 .after {
   display: block;
-  width: 60vw;
-  height: 10vh;
+  inline-size: 60vw;
+  block-size: 10vh;
   border: 5px dashed grey;
   background-color: grey;
 }
diff --git a/layout/reftests/pagination/inline-block-slice-8-ref.html b/layout/reftests/pagination/inline-block-slice-8-ref.html
new file mode 100644
index 000000000000..5f0a0a105a52
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-8-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+html { block-size: 40vh; }
+
+.ib {
+  display: block;
+  inline-size: 50vw;
+  block-size: 210vh;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  margin-inline-start: 20px;
+  margin-block-start: -20px;
+}
+</style>
+</head>
+<body>
+  X<span style="display:inline-block; inline-size:50vw; border:5px solid transparent"></span>p
+  <div class="ib"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-8.html b/layout/reftests/pagination/inline-block-slice-8.html
new file mode 100644
index 000000000000..d5b6968a5c7a
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-8.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+html { block-size: 40vh; }
+
+.ib {
+  display: inline-block;
+  inline-size: 50vw;
+  block-size: 210vh;
+  vertical-align: top;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+}
+</style>
+</head>
+<body>
+  X<div class="ib"></div>p
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-8b-ref.html b/layout/reftests/pagination/inline-block-slice-8b-ref.html
new file mode 100644
index 000000000000..2a4149d7a6fc
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-8b-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+html { block-size: 40vw; }
+
+.ib {
+  display: block;
+  inline-size: 50vh;
+  block-size: 210vw;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  margin-inline-start: 20px;
+  margin-block-end: -20px;
+}
+</style>
+</head>
+<body>
+  <div class="ib"></div>
+  X<span style="display:inline-block; inline-size:50vh; border:5px solid transparent"></span>p
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-8b.html b/layout/reftests/pagination/inline-block-slice-8b.html
new file mode 100644
index 000000000000..1525983a95b0
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-8b.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+html { block-size: 40vw; }
+
+.ib {
+  display: inline-block;
+  inline-size: 50vh;
+  block-size: 210vw;
+  vertical-align: top;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+}
+</style>
+</head>
+<body>
+  X<div class="ib"></div>p
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-8c-ref.html b/layout/reftests/pagination/inline-block-slice-8c-ref.html
new file mode 100644
index 000000000000..839cadf6b680
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-8c-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+html { block-size: 40vw; writing-mode: vertical-rl; }
+
+.ib {
+  display: block;
+  inline-size: 50vh;
+  block-size: 210vw;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  margin-inline-start: 20px;
+  margin-block-start: -20px;
+}
+</style>
+</head>
+<body>
+  X<span style="display:inline-block; inline-size:50vh; border:5px solid transparent"></span>p
+  <div class="ib"></div>
+</body>
+</html>
diff --git a/layout/reftests/pagination/inline-block-slice-8c.html b/layout/reftests/pagination/inline-block-slice-8c.html
new file mode 100644
index 000000000000..6b25d0d95160
--- /dev/null
+++ b/layout/reftests/pagination/inline-block-slice-8c.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+<head>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+html { block-size: 40vw; }
+
+.ib {
+  display: inline-block;
+  inline-size: 50vh;
+  block-size: 210vw;
+  vertical-align: top;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+}
+</style>
+</head>
+<body>
+  X<div class="ib"></div>p
+</body>
+</html>
diff --git a/layout/reftests/pagination/reftest.list b/layout/reftests/pagination/reftest.list
index 7aaa2f5d3c18..13fcdd85a957 100644
--- a/layout/reftests/pagination/reftest.list
+++ b/layout/reftests/pagination/reftest.list
@@ -186,9 +186,24 @@ asserts(2-3) pref(layout.display-list.improve-fragmentation,true) == inline-bloc
 asserts(2-3) pref(layout.display-list.improve-fragmentation,true) == inline-block-frag-offset-2.html inline-block-frag-offset-2-ref.html # Bug 1655630
 asserts(2) pref(layout.display-list.improve-fragmentation,true) == inline-block-frag-text-1.html inline-block-frag-text-1-ref.html # Bug 1655630
 pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-1.html inline-block-slice-1-ref.html
+pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-1b.html inline-block-slice-1b-ref.html
+pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-1c.html inline-block-slice-1c-ref.html
 pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-2.html inline-block-slice-2-ref.html
+pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-2b.html inline-block-slice-2b-ref.html
+pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-2c.html inline-block-slice-2c-ref.html
 pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-3.html inline-block-slice-3-ref.html
+pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-3b.html inline-block-slice-3b-ref.html
+pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-3c.html inline-block-slice-3c-ref.html
 asserts(4) pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-4.html inline-block-slice-4-ref.html # Bug 1655630
+asserts(4) pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-4b.html inline-block-slice-4b-ref.html
+asserts(4) pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-4c.html inline-block-slice-4c-ref.html
 pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-5.html inline-block-slice-5-ref.html
+pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-5b.html inline-block-slice-5b-ref.html
+pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-5c.html inline-block-slice-5c-ref.html
 pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-6.html inline-block-slice-6-ref.html
+pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-6b.html inline-block-slice-6b-ref.html
+pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-6c.html inline-block-slice-6c-ref.html
 pref(layout.display-list.improve-fragmentation,true) != inline-block-slice-7.html inline-block-slice-7-ref.html
+asserts(4) pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-8.html inline-block-slice-8-ref.html # Bug 1655630
+asserts(4) pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-8b.html inline-block-slice-8b-ref.html # Bug 1655630
+asserts(4) pref(layout.display-list.improve-fragmentation,true) == inline-block-slice-8c.html inline-block-slice-8c-ref.html # Bug 1655630
diff --git a/testing/web-platform/tests/css/css-break/block-001-wm-vlr-print.html b/testing/web-platform/tests/css/css-break/block-001-wm-vlr-print.html
new file mode 100644
index 000000000000..6cd5ea07c7b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-001-wm-vlr-print.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/">
+<link rel="match" href="block-001-wm-vlr-ref.html">
+<meta name="flags" content="paged">
+<meta name="fuzzy" content="maxDifference=0-60;totalPixels=0-200">
+<html>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+html { block-size: 40vw; }
+
+.b {
+  inline-size: 50vh;
+  block-size: 210vw;
+  box-sizing: border-box;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  margin-inline-start: 20px;
+  margin-block-end: -20px;
+}
+</style>
+<body>
+  <div class="b"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-break/block-001-wm-vlr-ref.html b/testing/web-platform/tests/css/css-break/block-001-wm-vlr-ref.html
new file mode 100644
index 000000000000..b131b0e48608
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-001-wm-vlr-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<meta name="flags" content="paged">
+<html>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+html { block-size: 40vw; }
+
+.b {
+  box-sizing: border-box;
+  inline-size: 50vh;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  margin-inline-start: 20px;
+}
+
+.b1 {
+  block-size: 100vw;
+  border-block-end-style: none;
+}
+
+.b2 {
+  block-size: 100vw;
+  border-block-start-style: none;
+  border-block-end-style: none;
+}
+
+.b3 {
+  block-size: 10vw;
+  border-block-start-style: none;
+  margin-block-end: -20px;
+}
+</style>
+<body>
+  <div class="b b1"></div>
+  <div class="b b2"></div>
+  <div class="b b3"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-break/block-001-wm-vrl-print.html b/testing/web-platform/tests/css/css-break/block-001-wm-vrl-print.html
new file mode 100644
index 000000000000..6e073121c6ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-001-wm-vrl-print.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/">
+<link rel="match" href="block-001-wm-vrl-ref.html">
+<meta name="flags" content="paged">
+<meta name="fuzzy" content="maxDifference=0-60;totalPixels=0-200">
+<html>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+html { block-size: 40vw; }
+
+.b {
+  inline-size: 50vh;
+  block-size: 210vw;
+  box-sizing: border-box;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  margin-inline-start: 20px;
+}
+</style>
+<body>
+  <div class="b"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-break/block-001-wm-vrl-ref.html b/testing/web-platform/tests/css/css-break/block-001-wm-vrl-ref.html
new file mode 100644
index 000000000000..6fb7e7353c7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-001-wm-vrl-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<meta name="flags" content="paged">
+<html>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+html { block-size: 40vw; }
+
+.b {
+  box-sizing: border-box;
+  inline-size: 50vh;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  margin-inline-start: 20px;
+}
+
+.b1 {
+  block-size: 100vw;
+  border-block-end-style: none;
+}
+
+.b2 {
+  block-size: 100vw;
+  border-block-start-style: none;
+  border-block-end-style: none;
+}
+
+.b3 {
+  block-size: 10vw;
+  border-block-start-style: none;
+  margin-block-end: -20px;
+}
+</style>
+<body>
+  <div class="b b1"></div>
+  <div class="b b2"></div>
+  <div class="b b3"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-break/block-002-wm-vlr-print.html b/testing/web-platform/tests/css/css-break/block-002-wm-vlr-print.html
new file mode 100644
index 000000000000..99949623c392
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-002-wm-vlr-print.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/">
+<link rel="match" href="block-002-wm-vlr-ref.html">
+<meta name="flags" content="paged">
+<meta name="fuzzy" content="maxDifference=0-35;totalPixels=0-220">
+<html>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+html { margin-block-start: 80vw; }
+* { box-sizing: border-box; }
+
+.b {
+  inline-size: 50vh;
+  block-size: 130vw;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  margin-inline-start: 20px;
+}
+
+.b > div {
+  inline-size: 50vh;
+  block-size: 150vw;
+  border: 5px solid grey;
+  margin-inline-start: 20px;
+  margin-block-start: -5px;
+}
+
+.after {
+  inline-size: 60vh;
+  block-size: 30vw;
+  margin-block-start: 5vw;
+  border: 5px solid blue;
+}
+</style>
+<body>
+  <div class="b">
+    <div></div>
+  </div>
+  <div class="after"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-break/block-002-wm-vlr-ref.html b/testing/web-platform/tests/css/css-break/block-002-wm-vlr-ref.html
new file mode 100644
index 000000000000..d3193f20c4f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-002-wm-vlr-ref.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<meta name="flags" content="paged">
+<html>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-lr;
+}
+html { margin-block-start: 80vw; }
+* { box-sizing: border-box; }
+
+.b {
+  inline-size: 50vh;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  margin-inline-start: 20px;
+}
+.b1 {
+  block-size: 20vw;
+  border-block-end-style: none;
+}
+
+.b2 {
+  block-size: 100vw;
+  border-block-start-style: none;
+  border-block-end-style: none;
+}
+
+.b3 {
+  block-size: 10vw;
+  border-block-start-style: none;
+}
+
+.b > div {
+  inline-size: 50vh;
+  block-size: 100vw;
+  border: 5px solid grey;
+  margin-inline-start: 20px;
+}
+.b1 > div {
+  border-block-end-style: none;
+  margin-block-start: -5px;
+}
+.b2 > div {
+  border-block-start-style: none;
+  border-block-end-style: none;
+}
+.b3 > div {
+  block-size: 30vw;
+  border-block-start-style: none;
+}
+
+.after {
+  inline-size: 60vh;
+  block-size: 30vw;
+  margin-block-start: 5vw;
+  border: 5px solid blue;
+}
+</style>
+<body>
+  <div class="b b1"><div></div></div>
+  <div class="b b2"><div></div></div>
+  <div class="b b3"><div></div></div>
+  <div class="after"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-break/block-002-wm-vrl-print.html b/testing/web-platform/tests/css/css-break/block-002-wm-vrl-print.html
new file mode 100644
index 000000000000..084b5325b7ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-002-wm-vrl-print.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/">
+<link rel="match" href="block-002-wm-vrl-ref.html">
+<meta name="flags" content="paged">
+<meta name="fuzzy" content="maxDifference=0-35;totalPixels=0-220">
+<html>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+html { margin-block-start: 80vw; }
+* { box-sizing: border-box; }
+
+.b {
+  inline-size: 50vh;
+  block-size: 130vw;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  margin-inline-start: 20px;
+}
+
+.b > div {
+  inline-size: 50vh;
+  block-size: 150vw;
+  border: 5px solid grey;
+  margin-inline-start: 20px;
+  margin-block-start: -5px;
+}
+
+.after {
+  inline-size: 60vh;
+  block-size: 30vw;
+  margin-block-start: 5vw;
+  border: 5px solid blue;
+}
+</style>
+<body>
+  <div class="b">
+    <div></div>
+  </div>
+  <div class="after"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-break/block-002-wm-vrl-ref.html b/testing/web-platform/tests/css/css-break/block-002-wm-vrl-ref.html
new file mode 100644
index 000000000000..8b5ea92af5fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-002-wm-vrl-ref.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<meta name="flags" content="paged">
+<html>
+<style>
+@page {
+  size: 5in 3in;
+  margin: 0.5in;
+}
+
+html,body {
+  color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+  writing-mode: vertical-rl;
+}
+html { margin-block-start: 80vw; }
+* { box-sizing: border-box; }
+
+.b {
+  inline-size: 50vh;
+  border: 5px solid black;
+  border-block-start-color: blue;
+  border-inline-start-color: lime;
+  margin-inline-start: 20px;
+}
+.b1 {
+  block-size: 20vw;
+  border-block-end-style: none;
+}
+
+.b2 {
+  block-size: 100vw;
+  border-block-start-style: none;
+  border-block-end-style: none;
+}
+
+.b3 {
+  block-size: 10vw;
+  border-block-start-style: none;
+}
+
+.b > div {
+  inline-size: 50vh;
+  block-size: 100vw;
+  border: 5px solid grey;
+  margin-inline-start: 20px;
+}
+.b1 > div {
+  border-block-end-style: none;
+  margin-block-start: -5px;
+}
+.b2 > div {
+  border-block-start-style: none;
+  border-block-end-style: none;
+}
+.b3 > div {
+  block-size: 30vw;
+  border-block-start-style: none;
+}
+
+.after {
+  inline-size: 60vh;
+  block-size: 30vw;
+  margin-block-start: 5vw;
+  border: 5px solid blue;
+}
+</style>
+<body>
+  <div class="b b1"><div></div></div>
+  <div class="b b2"><div></div></div>
+  <div class="b b3"><div></div></div>
+  <div class="after"></div>
+</body>
+</html>