Bug 1669333 - Make the fragmentation fallback code use logical coordinates. r=jfkthame

Differential Revision: https://phabricator.services.mozilla.com/D97864

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);

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

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);
     }

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>

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>

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>

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>

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>

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>

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;
 }

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;
 }

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>

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>

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>

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>

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;
 }

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;
 }

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>

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>

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>

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>

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;
 }

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;
 }

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>

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>

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>

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>

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>

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;
 }

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>

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>

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>

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>

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>

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;
 }

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>

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>

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>

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>

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>

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;
 }

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>

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>

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>

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>

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>

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>

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

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>

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>

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>

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>

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>

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>

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>

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>