Bug 1144096 part 26 - [css-grid] Fragmentation reftests.
authorMats Palmgren <mats@mozilla.com>
Fri, 11 Mar 2016 17:39:28 +0100
changeset 288318 552aabbcd11631edd38087a55e8730db1384bdfc
parent 288317 5e3e2675488c1b089e82a442dfeee46da1152cf1
child 288319 50c03319c341910196103c4451f17299eb144313
push id30079
push userryanvm@gmail.com
push dateSat, 12 Mar 2016 20:24:19 +0000
treeherdermozilla-central@d1d47ba19ce9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1144096
milestone48.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1144096 part 26 - [css-grid] Fragmentation reftests.
layout/reftests/css-grid/grid-fragmentation-001-ref.html
layout/reftests/css-grid/grid-fragmentation-001.html
layout/reftests/css-grid/grid-fragmentation-002-ref.html
layout/reftests/css-grid/grid-fragmentation-002.html
layout/reftests/css-grid/grid-fragmentation-003-ref.html
layout/reftests/css-grid/grid-fragmentation-003.html
layout/reftests/css-grid/grid-fragmentation-004-ref.html
layout/reftests/css-grid/grid-fragmentation-004.html
layout/reftests/css-grid/grid-fragmentation-005-ref.html
layout/reftests/css-grid/grid-fragmentation-005.html
layout/reftests/css-grid/grid-fragmentation-006-ref.html
layout/reftests/css-grid/grid-fragmentation-006.html
layout/reftests/css-grid/grid-fragmentation-007-ref.html
layout/reftests/css-grid/grid-fragmentation-007.html
layout/reftests/css-grid/grid-fragmentation-008-ref.html
layout/reftests/css-grid/grid-fragmentation-008.html
layout/reftests/css-grid/grid-fragmentation-009-ref.html
layout/reftests/css-grid/grid-fragmentation-009.html
layout/reftests/css-grid/grid-fragmentation-010-ref.html
layout/reftests/css-grid/grid-fragmentation-010.html
layout/reftests/css-grid/grid-fragmentation-011-ref.html
layout/reftests/css-grid/grid-fragmentation-011.html
layout/reftests/css-grid/grid-fragmentation-012-ref.html
layout/reftests/css-grid/grid-fragmentation-012.html
layout/reftests/css-grid/grid-fragmentation-013-ref.html
layout/reftests/css-grid/grid-fragmentation-013.html
layout/reftests/css-grid/grid-fragmentation-014-ref.html
layout/reftests/css-grid/grid-fragmentation-014.html
layout/reftests/css-grid/grid-fragmentation-015-ref.html
layout/reftests/css-grid/grid-fragmentation-015.html
layout/reftests/css-grid/grid-fragmentation-016-ref.html
layout/reftests/css-grid/grid-fragmentation-016.html
layout/reftests/css-grid/grid-fragmentation-017-ref.html
layout/reftests/css-grid/grid-fragmentation-017.html
layout/reftests/css-grid/grid-fragmentation-018-ref.html
layout/reftests/css-grid/grid-fragmentation-018.html
layout/reftests/css-grid/grid-fragmentation-019-ref.html
layout/reftests/css-grid/grid-fragmentation-019.html
layout/reftests/css-grid/grid-fragmentation-020-ref.html
layout/reftests/css-grid/grid-fragmentation-020.html
layout/reftests/css-grid/grid-fragmentation-021-ref.html
layout/reftests/css-grid/grid-fragmentation-021.html
layout/reftests/css-grid/grid-fragmentation-022.html
layout/reftests/css-grid/grid-fragmentation-023-ref.html
layout/reftests/css-grid/grid-fragmentation-023.html
layout/reftests/css-grid/grid-fragmentation-024-ref.html
layout/reftests/css-grid/grid-fragmentation-024.html
layout/reftests/css-grid/grid-fragmentation-025-ref.html
layout/reftests/css-grid/grid-fragmentation-025.html
layout/reftests/css-grid/grid-fragmentation-026-ref.html
layout/reftests/css-grid/grid-fragmentation-026.html
layout/reftests/css-grid/grid-fragmentation-027.html
layout/reftests/css-grid/grid-fragmentation-028-ref.html
layout/reftests/css-grid/grid-fragmentation-028.html
layout/reftests/css-grid/grid-fragmentation-029-ref.html
layout/reftests/css-grid/grid-fragmentation-029.html
layout/reftests/css-grid/grid-fragmentation-030-ref.html
layout/reftests/css-grid/grid-fragmentation-030.html
layout/reftests/css-grid/grid-fragmentation-031-ref.html
layout/reftests/css-grid/grid-fragmentation-031.html
layout/reftests/css-grid/grid-fragmentation-dyn1-002.html
layout/reftests/css-grid/grid-fragmentation-dyn1-006.html
layout/reftests/css-grid/grid-fragmentation-dyn1-015.html
layout/reftests/css-grid/grid-fragmentation-dyn1-016.html
layout/reftests/css-grid/grid-fragmentation-dyn1-019.html
layout/reftests/css-grid/grid-fragmentation-dyn1-020.html
layout/reftests/css-grid/grid-fragmentation-dyn1-021.html
layout/reftests/css-grid/grid-fragmentation-dyn1-023.html
layout/reftests/css-grid/grid-fragmentation-dyn1-024.html
layout/reftests/css-grid/grid-fragmentation-dyn1-026.html
layout/reftests/css-grid/grid-fragmentation-dyn1-027.html
layout/reftests/css-grid/grid-fragmentation-dyn1-028.html
layout/reftests/css-grid/grid-fragmentation-dyn1-029.html
layout/reftests/css-grid/grid-fragmentation-dyn2-018.html
layout/reftests/css-grid/grid-fragmentation-dyn2-019.html
layout/reftests/css-grid/grid-fragmentation-dyn2-020.html
layout/reftests/css-grid/grid-fragmentation-dyn2-021.html
layout/reftests/css-grid/grid-fragmentation-dyn2-022.html
layout/reftests/css-grid/grid-fragmentation-dyn2-023.html
layout/reftests/css-grid/grid-fragmentation-dyn2-025.html
layout/reftests/css-grid/grid-fragmentation-dyn2-026.html
layout/reftests/css-grid/grid-fragmentation-dyn2-027.html
layout/reftests/css-grid/grid-fragmentation-dyn2-028.html
layout/reftests/css-grid/grid-fragmentation-dyn2-029.html
layout/reftests/css-grid/grid-fragmentation-dyn2-030.html
layout/reftests/css-grid/grid-fragmentation-dyn2-031.html
layout/reftests/css-grid/grid-fragmentation-dyn3-001.html
layout/reftests/css-grid/grid-fragmentation-dyn3-002.html
layout/reftests/css-grid/grid-fragmentation-dyn3-003.html
layout/reftests/css-grid/grid-fragmentation-dyn3-007.html
layout/reftests/css-grid/grid-fragmentation-dyn3-009.html
layout/reftests/css-grid/grid-fragmentation-dyn3-017.html
layout/reftests/css-grid/grid-fragmentation-dyn3-019.html
layout/reftests/css-grid/grid-fragmentation-dyn3-021.html
layout/reftests/css-grid/grid-fragmentation-dyn3-023.html
layout/reftests/css-grid/grid-fragmentation-dyn3-026.html
layout/reftests/css-grid/grid-fragmentation-dyn3-027.html
layout/reftests/css-grid/grid-fragmentation-dyn3-028.html
layout/reftests/css-grid/grid-fragmentation-dyn4-001.html
layout/reftests/css-grid/grid-fragmentation-dyn4-004.html
layout/reftests/css-grid/grid-fragmentation-dyn4-005.html
layout/reftests/css-grid/grid-fragmentation-dyn4-015.html
layout/reftests/css-grid/grid-fragmentation-dyn4-019.html
layout/reftests/css-grid/grid-fragmentation-dyn4-021.html
layout/reftests/css-grid/grid-fragmentation-dyn4-023.html
layout/reftests/css-grid/grid-fragmentation-dyn4-026.html
layout/reftests/css-grid/grid-fragmentation-dyn4-027.html
layout/reftests/css-grid/grid-fragmentation-dyn4-028.html
layout/reftests/css-grid/grid-fragmentation-dyn5-005.html
layout/reftests/css-grid/grid-fragmentation-dyn5-007.html
layout/reftests/css-grid/grid-fragmentation-dyn5-008.html
layout/reftests/css-grid/grid-fragmentation-dyn5-016.html
layout/reftests/css-grid/grid-fragmentation-dyn5-019.html
layout/reftests/css-grid/grid-fragmentation-dyn5-021.html
layout/reftests/css-grid/grid-fragmentation-dyn5-023.html
layout/reftests/css-grid/grid-fragmentation-dyn5-026.html
layout/reftests/css-grid/grid-fragmentation-dyn5-027.html
layout/reftests/css-grid/grid-fragmentation-dyn5-028.html
layout/reftests/css-grid/reftest.list
layout/reftests/css-grid/support/dyn.js
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-001-ref.html
@@ -0,0 +1,161 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of height:auto grid, not top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.block {
+  border:5px solid;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-template-rows: 50px;
+  grid-column-gap: 12px;
+  border:5px solid;
+}
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+br { page-break-before:always; break-before:always; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+<span><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="block">
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="block" style="height:2px/*creates a Class C break opportunity at the end*/">
+</div></div></div>
+
+<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-001.html
@@ -0,0 +1,122 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of height:auto grid, not top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid" style="height:2px/*creates a Class C break opportunity at the end*/">
+</div></div></div>
+
+<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-002-ref.html
@@ -0,0 +1,135 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation height:auto two row grid without grid items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.block {
+  position:relative;
+  border:5px solid;
+}
+.grid {
+  display: grid;
+  position:relative;
+  grid-template-columns: 30px 30px 30px;
+  grid-template-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+}
+span { grid-row:1/2; position:absolute; top:0;bottom:0;right:0;left:0;background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+br { page-break-before:always; break-before:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span style="height:48px"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+</div></div></div>
+
+<div class="columns" style="height: 64px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span style="height:48px"><x></x></span>
+</div>
+<div class="grid b">
+</div></div></div>
+
+<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="block">
+<span style="height:0"></span>
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="block t" style="height:2px">
+<span style="height:0px"></span>
+</div>
+<div class="block b" style="margin-top:6px;height:0px">
+</div></div></div>
+
+<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span style="height:48px"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+</div></div></div>
+
+<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span style="height:48px"><x></x></span>
+</div>
+<div class="grid b">
+</div></div></div>
+
+<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span><x></x></span>
+</div>
+<div class="grid b">
+</div></div></div>
+
+<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span><x></x></span>
+</div>
+<div class="grid b">
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span><x></x></span>
+</div>
+<div class="grid b">
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span><x></x></span>
+</div>
+<div class="grid b">
+</div></div></div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-002.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation height:auto two row grid without grid items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-002-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  position:relative;
+  grid-template-columns: 30px 30px 30px;
+  grid-template-rows: 50px 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { position:absolute; top:0;bottom:0;right:0;left:0;background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 64px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid" style="grid-template-rows:auto">
+<span></span>
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid" style="grid-template-rows:auto; height:2px/*creates a Class C break opportunity at the end*/">
+<span></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-003-ref.html
@@ -0,0 +1,138 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation height:auto grid with first grid row at top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.block {
+  border:5px solid;
+  border-top-width:0;
+  border-bottom-width:10px;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width:0;
+  border-bottom-width:10px;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+br { page-break-before:always; break-before:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 120px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+<span><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="block">
+</div></div></div>
+
+<div class="columns" style="height: 10px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="block" style="height:2px/*creates a Class C break opportunity at the end*/">
+</div></div></div>
+
+<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/">
+<div style="background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */">
+<div style="background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-003.html
@@ -0,0 +1,105 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation height:auto grid with first grid row at top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-003-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width:0;
+  border-bottom-width:10px;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 120px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid">
+</div></div></div>
+
+<div class="columns" style="height: 10px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid" style="height:2px/*creates a Class C break opportunity at the end*/">
+</div></div></div>
+
+<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-004-ref.html
@@ -0,0 +1,166 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation with first grid row at top-of-page and Class C break opportunities</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.block {
+  border:5px solid;
+  border-top-width:0;
+  border-bottom-width:10px;
+  height: 120px;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width: 0;
+  border-bottom-width: 10px;
+  align-content: center;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+.grid.t {padding-top:4px;}
+
+.br1 { height:1px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 122px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid t" style="height:112px; padding-bottom:4px;">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div>
+<div style="height:2px;"></div>
+<div class="block" style="border-top-style:none; height:0px;">
+</div></div></div>
+
+<div class="columns" style="height: 122px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="block">
+</div></div></div>
+
+<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/">
+<div style="background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="br1"></div>
+<div class="grid b" style="padding-bottom:16px">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */">
+<div style="background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid m" style="padding-bottom:10px">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div>
+<div class="block" style="border-top-style:none; height:6px;">
+</div>
+</div></div>
+
+<!--  TODO XXX depends on bug 1238294
+
+<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="background:grey">
+<div class="br1"></div>
+<div class="grid m">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid m">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div>
+<div class="block" style="margin-top:-19px; border-top-style:none; height:20px;">
+</div>
+</div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="background:grey">
+<div class="br1"></div>
+<div class="grid m">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid m">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div>
+<div style="background:black; padding-bottom:10px;"></div>
+</div></div>
+
+<div class="columns" style="height: 2px/*fragmentainer ends between the start border but before the first row */">
+<div style="background:grey;">
+<div class="br1"></div>
+<div class="grid m">
+<span><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+<span class="t"><x></x></span>
+</div>
+<div class="grid m">
+<span><x></x></span>
+<span class="b" style="height:11px; background:cyan"><x></x></span>
+<span class="b"style=""><x></x></span>
+</div>
+<div style="background:black; padding-bottom:10px;"></div>
+</div></div>
+
+-->
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-004.html
@@ -0,0 +1,115 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation with first grid row at top-of-page and Class C break opportunities</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-004-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width: 0;
+  border-bottom-width: 10px;
+  height: 120px; /* 4px before/after first/last row are Class C break opportunities */
+  align-content: center;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 122px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 122px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid">
+</div></div></div>
+
+<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<!--  TODO XXX depends on bug 1238294
+
+<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 2px/*fragmentainer ends between the start border but before the first row */">
+<div style="background:grey">
+<div class="grid">
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div></div>
+
+-->
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-005-ref.html
@@ -0,0 +1,149 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of height:auto grid, not top-of-page, forced breaks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+.br1 { height:1px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b">
+<span class="b"><x></x></span>
+<span class="b" style="grid-area:1/3; height:6px; background:cyan"><x></x></span>
+<span style="grid-area:1/3; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid break-before">
+</div></div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:40px;"></div>
+<div class="grid">
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:90px;"></div>
+<div class="grid">
+<span style="height:35px"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div class="grid m">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span class="b" style="background:cyan"><x></x></span>
+<span style="grid-area:1/1; align-self:end; background:pink"><x></x></span>
+</div>
+<div style="height:50px"></div>
+<div class="grid b">
+<span style=""><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid t">
+<span class="t" style="grid-row: span 2"><x></x></span>
+<span style="grid-row: span 2"><x></x></span>
+</div>
+<div style="height:53px"></div>
+<div class="grid b">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-005.html
@@ -0,0 +1,133 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of height:auto grid, not top-of-page, forced breaks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-005-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+m { display:block; padding-top:10px; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid break-before">
+</div></div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span class="break-before"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span class="break-after" style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span class="break-before" style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span style="grid-row:3"><x></x></span>
+<span class="break-after" style="grid-row:span 2; background:cyan"><x></x></span>
+<span class="break-before" style="grid-row:2; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span class="break-after" style="grid-row: span 3"><x></x></span>
+<span class="break-after" style="grid-row: span 2"><x></x></span>
+</div>
+</div></div>
+
+<!-- TODO XXX bug 775628? (break-after on last row should propagate to container)
+<div class="columns" style="height: 135px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span class="break-after" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+<div style="height:20px;background:yellow"></div>
+</div></div>
+-->
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-006-ref.html
@@ -0,0 +1,116 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of height:auto grid, not top-of-page, item break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.br1 { height:94px; border-width:5px; border-top-style:solid; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 110px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 70px/*item will be INCOMPLETE*/">
+<div style="background:grey">
+<div class="grid">
+<span><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*item will be INCOMPLETE*/">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 140px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span style="grid-row:span 3"><x></x></span>
+<span style="grid-row:span 2"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span></div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-auto-rows: 50px; height:50px;">
+<span class="t" style="grid-row:span 2; height:49px; overflow:hidden"><i></i><i></i><i></i><x></x></span>
+</div>
+<div style="height:44px"></div>
+<div class="grid b" style="grid-auto-rows: 50px; height:50px;">
+<span class="b" style="grid-row:span 2; height:11px; overflow:hidden"><i style="margin-top:0;height:2px"></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="br1"></div>
+<div class="grid b" style="grid-auto-rows: 50px; height:116px;">
+<span style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="br1"></div>
+<div class="grid b" style="grid-auto-rows: 50px; height:116px; grid-gap:0;">
+<span style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="br1"></div>
+<div class="grid b" style="grid-auto-rows: 50px; height:116px; grid-gap:0;">
+<span style="height:100px; background:pink"><x></x></span>
+<span style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-006.html
@@ -0,0 +1,108 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of height:auto grid, not top-of-page, item break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-006-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 110px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span class="avoid-break"><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 70px/*item will be INCOMPLETE*/">
+<div style="background:grey">
+<div class="grid">
+<span class="avoid-break"><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*item will be INCOMPLETE*/">
+<div style="background:grey">
+<div class="grid">
+<span class="avoid-break" style="grid-row:span 2"><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 140px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span style="grid-row:span 3"><x></x></span>
+<span class="avoid-break" style="grid-row:span 2"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><x></x></span></div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-auto-rows: 50px;">
+<span class="avoid-break" style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-auto-rows: 50px; height:116px;">
+<span class="avoid-break" style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-auto-rows: 50px; height:116px; grid-gap:0;">
+<span class="avoid-break" style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-auto-rows: 50px; height:116px; grid-gap:0;">
+<span style="height:100px; background:pink"><x></x></span>
+<span class="avoid-break" style="grid-row:span 2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-007-ref.html
@@ -0,0 +1,134 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of height:auto grid, not top-of-page, forced break growing 'fr' row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;">
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;">
+<span class="m"><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;">
+<span class="b" style="grid-column:3"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;">
+<span class="m"><x></x></span>
+<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 50px; grid-gap:0;">
+</div>
+<div class="grid m" style="grid-template-rows: 1fr; grid-gap:0; height:100px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-007.html
@@ -0,0 +1,104 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of height:auto grid, not top-of-page, forced break growing 'fr' row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-007-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px 1fr 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px 1fr 50px;">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px 1fr 50px; grid-gap:0;">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-008-ref.html
@@ -0,0 +1,132 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of height:auto grid, top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width:0;
+  align-content: start;
+}
+span { padding-top:20px; background:lime; border:1px solid black; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 94px">
+<div style="background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:82px">
+<span style="height:50px;"><i style="height:54px"></i></span>
+<span style="height:60px"><i></i><i></i><i></i></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;">
+<span></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px">
+<div style="background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:82px">
+<span class="t"></span>
+<span style="height:50px;"><i style="height:54px"></i></span>
+<span style="height:60px"><i></i><i></i><i></i></span>
+</div>
+<div style="height:12px"></div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;">
+<span class="b"></span>
+<span class="m" style="padding:0; height:6px; background:blue; margin: 0 1px; border-width:0"></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px">
+<div style="background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:82px">
+<span class="t"></span>
+<span style="height:50px"><i style="height:54px"></i></span>
+<span style="height:60px"><i></i><i></i><i></i></span>
+</div>
+<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;">
+<span class="m"></span>
+<span class="m" style="padding:0; height:6px; background:blue; margin: 0 1px; border-width:0"></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-gap:0;">
+<span class="b"></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px">
+<div style="background:grey">
+<div class="grid t" style="grid-template-rows: 5px; grid-row-gap:0; height:5px">
+<span class="t" style="grid-column:3"></span>
+</div>
+<div style="height:88px"></div>
+<div class="grid m" style="grid-template-rows: 1fr; grid-row-gap:0; height:82px">
+<span style="height:50px"><i style="height:54px"></i></span>
+<span style="height:60px"><i></i><i></i><i></i></span>
+<span class="m"></span>
+</div>
+<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;">
+<span class="m" style="padding:0; height:6px; background:blue; margin: 0 1px; border-width:0"></span>
+<span class="m" style="grid-column:3"></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;">
+<span class="b" style="grid-column:3"></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px">
+<div style="background:grey">
+<div class="grid t" style="grid-template-rows: 5px; grid-row-gap:0; height:5px">
+<span class="t"></span>
+</div>
+<div style="height:88px"></div>
+<div class="grid m" style="grid-template-rows: 1fr; grid-row-gap:0; height:82px">
+<span class="m"></span>
+<span style="height:50px"><i style="height:54px"></i></span>
+<span style="height:60px"><i></i><i></i><i></i></span>
+</div>
+<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;">
+<span class="m"></span>
+<span class="m" style="padding:0; height:6px; background:blue; margin: 0 1px; border-width:0"></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;">
+<span class="b"></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-008.html
@@ -0,0 +1,95 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of height:auto grid, top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-008-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width:0;
+  align-content: space-evenly;
+}
+span { padding-top:20px; background:lime; border:1px solid black; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 94px/*trigger OVERFLOW_INCOMPLETE for the item*/">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i></span>
+<span style="grid-row:2"></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px/*trigger OVERFLOW_INCOMPLETE for the item*/">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 2"></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px/*trigger OVERFLOW_INCOMPLETE for the item*/">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 4"></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px/*trigger INCOMPLETE for the item*/">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 5px 1fr 50px;">
+<span style="grid-row:2; height:50px"><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 94px/*trigger INCOMPLETE for the item*/">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 5px 1fr 50px;">
+<span style="grid-row:1/span 5"></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-009-ref.html
@@ -0,0 +1,161 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of definite height, not top-of-page, forced breaks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b" style="height:60px">
+<span class="b"><x></x></span>
+<span class="b" style="grid-area:1/3; height:6px; background:cyan"><x></x></span>
+<span style="grid-area:1/3; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="padding-top:10px; background:grey">
+<div style="height:90px;border:5px solid;"></div>
+</div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:50px;"></div>
+<div class="grid t">
+<span><x></x></span>
+</div>
+<div style="height:60px; border:5px solid; border-top-width:0;">
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b" style="padding-bottom:30px">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b" style="padding-bottom:30px">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:90px;"></div>
+<div class="grid" style="padding-bottom:18px">
+<span style="height:35px"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:87px;"></div>
+<div class="grid t" style="padding-bottom:18px">
+<span style="height:35px"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span>
+</div>
+<div class="grid b"></div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div class="grid m">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span class="b" style="background:cyan"><x></x></span>
+<span style="grid-area:1/1; align-self:end; background:pink"><x></x></span>
+</div>
+<div style="height:50px"></div>
+<div class="grid b">
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid t">
+<span class="t" style="grid-row: span 2"><x></x></span>
+<span style="grid-row: span 2"><x></x></span>
+</div>
+<div style="height:53px"></div>
+<div style="height:18px; border:5px solid; border-top-width:0;">
+<span class="b" style="display:block;height:29px;width:28px"></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-009.html
@@ -0,0 +1,144 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of definite height grid, not top-of-page, forced breaks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-009-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  height: 90px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+m { display:block; padding-top:10px; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="background:grey"><m></m>
+<div class="grid break-before">
+</div></div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span class="break-before"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span class="break-after" style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span class="break-before" style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span class="break-before" style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span style="grid-row:3"><x></x></span>
+<span class="break-after" style="grid-row:span 2; background:cyan"><x></x></span>
+<span class="break-before" style="grid-row:2; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span class="break-after" style="grid-row: span 3"><x></x></span>
+<span class="break-after" style="grid-row: span 2"><x></x></span>
+</div>
+</div></div>
+
+<!-- TODO XXX bug 775628? (break-after on last row should propagate to container)
+<div class="columns" style="height: 135px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span class="break-after" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+<div style="height:20px;background:yellow"></div>
+</div></div>
+-->
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-010-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation in print context of height:auto grid, not top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+br { page-break-after:always; break-after:always; display:block; height:1px; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:0.5in; background:grey">
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+<span><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:0.54in; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-010.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation in print context of height:auto grid, not top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-010-ref.html">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+  align-content: start;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:0.5in; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:1.5in; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-011-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation in print context of height:auto grid with first grid row at top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+  border-top-width: 0;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+br { page-break-after:always; break-after:always; display:block; height:1px; }
+
+</style>
+</head>
+<body>
+
+<div style="background:grey">
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+<span><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:0.54in; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-011.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation in print context of height:auto grid with first grid row at top-of-page</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-011-ref.html">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+  border-top-width: 0;
+  align-content: start;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+
+</style>
+</head>
+<body>
+
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:1.5in; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-012-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation in print context of height:auto grid, not top-of-page, forced breaks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 0.5in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+  border-top-width: 0;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+br { page-break-after:always; break-after:always; display:block; height:1px; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:0.5in; background:grey">
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid b">
+<span><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:0.15in; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-012.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation in print context of height:auto grid, not top-of-page, forced breaks</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-012-ref.html">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 0.5in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+  border-top-width: 0;
+  align-content: start;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:0.5in; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:0.6in; background:cyan"><x></x></span>
+<span><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-013-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation in print context of height:auto grid, item break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+br { page-break-after:always; break-after:always; display:block; height:1px; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:1in; background:grey">
+  <div class="grid t">
+    <span class="t"><x style="height:auto"></x></span>
+  </div>
+  <div class="grid b" style="border-color:transparent; grid-auto-rows: 0;">
+    <span class="b"><x style="height:0.04in"></x></span>
+  </div>
+</div>
+
+<div style="padding-top:0.91in; background:grey;">
+  <div class="grid t" style="height:0.9in">
+    <span class="t" style="height:0.86in"><x></x></span>
+  </div>
+</div>
+  <div class="grid b" style="border-color:transparent; grid-auto-rows: 0;">
+    <span class="b"><x style="height:0.04in"></x></span>
+  </div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-013.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation in print context of height:auto grid, item break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-013-ref.html">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:1in; background:grey">
+<div class="grid">
+<span class="avoid-break"><x></x><x></x><x></x><x></x><x></x></span>
+</div></div>
+
+<div style="padding-top:1in; background:grey">
+<div class="grid" style="align-content:end; grid-auto-rows:auto; height:1in">
+<span xclass="avoid-break"><x></x><x></x><x></x><x></x><x></x></span>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-014-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation in print context of height:auto grid, item break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  border: 0.1in solid;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+i { display:block; height:0.1in; background:blue; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:1in; background:grey">
+<div class="grid" style="grid-template-rows: .91in 1in;">
+<span style="height:0.2in"><i style="height:1.5in"></i><x></x></span>
+<span style="height:0.25in"><i></i><i></i><i></i><x></x></span>
+<span style="grid-area:2/2"><x></x></span>
+</div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-014.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-print"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation in print context of height:auto grid, item break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-014-ref.html">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 0.6in 0.6in 0.6in;
+  grid-auto-rows: 1in;
+  grid-gap: 0.1in;
+  border: 0.1in solid;
+  align-content: start;
+}
+span { display:block; background:lime; border:0.05in solid black; }
+x { display:block; height:0.2in; }
+i { display:block; height:0.1in; background:blue; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+</style>
+</head>
+<body>
+
+<div style="padding-top:1in; background:grey">
+<div class="grid" style="grid-template-rows: 1fr 1in; grid-gap:0;">
+<span style="height:0.2in"><i style="height:1.5in"></i><x></x></span>
+<span class="avoid-break" style="height:0.25in"><i></i><i></i><i></i><x></x></span>
+<span style="grid-area:2/2"><x></x></span>
+</div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-015-ref.html
@@ -0,0 +1,128 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation edge cases</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  height: 90px;
+  grid-template-columns: 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+
+</style>
+</head>
+<body>
+
+<!-- grid wrapped in inline -->
+<div class="columns" style="height: 40px">
+<div style="padding-top:2px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<!-- grid wrapped in inline with orthogonal writing-mode -->
+<div class="columns" style="width: 40px; height:40px;">
+<div style="padding-top:2px; background:grey">
+<div class="grid" style="overflow:hidden; writing-mode:vertical-lr">
+<span style="grid-row:span 2;"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<!-- grid wrapped in overflow:hidden block -->
+<div class="columns" style="height: 40px; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<div class="grid" style="overflow:hidden">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<!-- grid wrapped in FIELDSET block -->
+<div class="columns" style="height: 40px; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<div style="display:block; overflow:hidden; border:none; padding:0; margin:0">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></div></div></div>
+
+<!-- grid wrapped in FIELDSET inline -->
+<div class="columns" style="height: 40px; margin-left:200px">
+<div style="padding-top:2px; background:grey">
+<div style="display:inline-block; overflow:hidden; border:none; padding:0; margin:0">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></div></div></div>
+
+<!-- grid wrapped in FIELDSET overflow:hidden block -->
+<div class="columns" style="height: 40px; margin-left:400px">
+<div style="padding-top:2px; background:grey">
+<div style="display:block; overflow:hidden; border:none; padding:0; margin:0; width:-moz-min-content">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></div></div></div>
+
+<!-- grid with orthogonal writing-mode to fragmentainer -->
+<div class="columns" style="height: 40px; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<y>
+<div class="grid" style="overflow:hidden; writing-mode:vertical-lr">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></y></div></div>
+
+<!-- vertical grid and fragmentainer with intermediary horizontal writing-mode inline -->
+<!-- XXX bug 1242660: remove the visibility:hidden DIV when we know what the rendering should be -->
+<div style="visibility:hidden">
+<div class="columns" style="width: 50px; writing-mode:vertical-lr; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<y style="writing-mode:horizontal-lr">
+<div class="grid" style="writing-mode:vertical-lr">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></y></div></div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-015.html
@@ -0,0 +1,134 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation edge cases</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-015-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  height: 90px;
+  grid-template-columns: 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+
+</style>
+</head>
+<body>
+
+<!-- grid wrapped in inline -->
+<div class="columns" style="height: 40px">
+<div style="padding-top:2px; background:grey">
+<y>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></y></div></div>
+
+<!-- grid wrapped in inline with orthogonal writing-mode -->
+<div class="columns" style="width: 40px; height:40px">
+<div style="padding-top:2px; background:grey">
+<y style="writing-mode:vertical-lr">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></y></div></div>
+
+<!-- grid wrapped in overflow:hidden block -->
+<div class="columns" style="height: 40px; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<y style="display:block;overflow:hidden">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></y></div></div>
+
+<!-- grid wrapped in FIELDSET block -->
+<div class="columns" style="height: 40px; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<fieldset style="display:block; border:none; padding:0; margin:0">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></fieldset></div></div>
+
+<!-- grid wrapped in FIELDSET inline -->
+<div class="columns" style="height: 40px; margin-left:200px">
+<div style="padding-top:2px; background:grey">
+<fieldset style="display:inline; border:none; padding:0; margin:0">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></fieldset></div></div>
+
+<!-- grid wrapped in FIELDSET overflow:hidden block -->
+<div class="columns" style="height: 40px; margin-left:400px">
+<div style="padding-top:2px; background:grey">
+<fieldset style="display:block; overflow:hidden; border:none; padding:0; margin:0">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></fieldset></div></div>
+
+<!-- grid with orthogonal writing-mode to fragmentainer -->
+<div class="columns" style="height: 40px; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<y>
+<div class="grid" style="writing-mode:vertical-lr">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></y></div></div>
+
+<!-- vertical grid and fragmentainer with intermediary horizontal writing-mode inline -->
+<!-- XXX bug 1242660: remove the visibility:hidden DIV when we know what the rendering should be -->
+<div style="visibility:hidden">
+<div class="columns" style="width: 50px; writing-mode:vertical-lr; margin-top:70px">
+<div style="padding-top:2px; background:grey">
+<y style="writing-mode:horizontal-lr">
+<div class="grid" style="writing-mode:vertical-lr">
+<span style="grid-row:span 2"><x></x></span>
+<span><x></x></span>
+<span><x></x></span>
+</div></y></div></div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-016-ref.html
@@ -0,0 +1,167 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of height:auto grid, not top-of-page, box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.block {
+  border:5px solid;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+}
+span { background:lime; border:1px solid black; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+x { display:block; height:20px; }
+br { page-break-before:always; break-before:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid">
+<span><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="block">
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="block" style="height:1px; overflow:hidden">
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="block" style="height:1px; overflow:hidden"></div>
+<div class="block" style="height:1px; overflow:hidden"></div>
+</div></div>
+
+<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-016.html
@@ -0,0 +1,128 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of height:auto grid, not top-of-page, box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-016-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  box-decoration-break: clone;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 130px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 18px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid" style="height:1px/*creates a Class C break opportunity at the end*/">
+</div></div></div>
+
+<div class="columns" style="height: 20px/*fragmentainer ends in the end border*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid" style="height:2px/*creates a Class C break opportunity at the end*/">
+</div></div></div>
+
+<div class="columns" style="height: 100px/*fragmentainer ends in the last row*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 70px/*fragmentainer ends in the grid gap between the rows */">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 40px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 13px/*fragmentainer ends in the grid start border */; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends above the grid*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-017-ref.html
@@ -0,0 +1,139 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation height:auto grid with first grid row at top-of-page and box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.block {
+  border:5px solid;
+  border-top-width:0;
+  border-bottom-width:10px;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width:0;
+  border-bottom-width:10px;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+br { page-break-before:always; break-before:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 120px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid">
+<span><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:3; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="block">
+</div></div></div>
+
+<div class="columns" style="height: 10px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="block" style="height:1px;overflow:hidden"></div>
+<div class="block" style="height:1px;overflow:hidden"></div>
+</div></div>
+
+<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/">
+<div style="background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<br>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */">
+<div style="background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span style="background:cyan" class="t"><x></x></span>
+</div>
+<div class="grid">
+<span class="b"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:1; height:11px;"><x></x></span>
+<span class="b" style="grid-row:1; grid-column:3; height:11px; background:cyan"><x></x></span>
+<span style="grid-row:1; grid-column:1; align-self:end; background:pink"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-017.html
@@ -0,0 +1,107 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation height:auto grid with first grid row at top-of-page and box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-017-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 50px;
+  grid-gap: 12px;
+  border:5px solid;
+  border-top-width:0;
+  border-bottom-width:10px;
+  box-decoration-break: clone;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 120px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 8px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid">
+</div></div></div>
+
+<div class="columns" style="height: 10px/*fragmentainer ends in the end border*/">
+<div style="background:grey">
+<div class="grid" style="height:2px/*creates a Class C break opportunity at the end*/">
+</div></div></div>
+
+<div class="columns" style="height: 90px/*fragmentainer ends in the last row*/">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 60px/*fragmentainer ends in the grid gap between the rows */">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 30px/*fragmentainer ends in the first row*/; margin-bottom:30px">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 0px/*zero height fragmentainer*/; margin-bottom:60px">
+<div style="background:grey">
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:60px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:60px"><x></x></span>
+</div></div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-018-ref.html
@@ -0,0 +1,161 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of definite height, not top-of-page, forced breaks, and box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid" style="height:60px">
+<span class="b"><x></x></span>
+<span class="b" style="grid-area:1/3; height:6px; background:cyan"><x></x></span>
+<span style="grid-area:1/3; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="padding-top:10px; background:grey">
+<div style="height:90px;border:5px solid;box-decoration-break: clone;"></div>
+</div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:50px;"></div>
+<div class="grid" style="padding-bottom:20px">
+<span><x></x></span>
+</div>
+<div style="height:40px; border:5px solid;"></div>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid" style="padding-bottom:30px">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid" style="padding-bottom:30px">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:90px;"></div>
+<div class="grid" style="padding-bottom:18px">
+<span style="height:35px"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 97px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:87px;"></div>
+<div class="grid" style="padding-bottom:15px">
+<span style="height:35px"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span>
+</div>
+<div style="height:3px;border:5px solid;box-decoration-break: clone;"></div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div class="grid" style="padding-bottom:30px">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span class="b" style="background:cyan"><x></x></span>
+<span style="grid-area:1/1; align-self:end; background:pink"><x></x></span>
+</div></div>
+<div style="height:10px"></div>
+<div class="grid m" style="height:0; margin-top:1px">
+<span><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span class="t" style="grid-row: span 2"><x></x></span>
+<span style="grid-row: span 2"><x></x></span>
+</div>
+<div style="height:48px"></div>
+<div style="height:18px; border:5px solid;">
+<span class="b" style="display:block;height:29px;width:28px"></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-018.html
@@ -0,0 +1,145 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of definite height grid, not top-of-page, forced breaks, and box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-018-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  height: 90px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  box-decoration-break: clone;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+m { display:block; padding-top:10px; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="background:grey"><m></m>
+<div class="grid break-before">
+</div></div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span class="break-before"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span class="break-after" style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span class="break-before" style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span class="break-before" style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span style="grid-row:3"><x></x></span>
+<span class="break-after" style="grid-row:span 2; background:cyan"><x></x></span>
+<span class="break-before" style="grid-row:2; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span class="break-after" style="grid-row: span 3"><x></x></span>
+<span class="break-after" style="grid-row: span 2"><x></x></span>
+</div>
+</div></div>
+
+<!-- TODO XXX bug 775628? (break-after on last row should propagate to container)
+<div class="columns" style="height: 135px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span class="break-after" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+<div style="height:20px;background:yellow"></div>
+</div></div>
+-->
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-019-ref.html
@@ -0,0 +1,150 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of height:auto grid, not top-of-page, forced break growing 'fr' row, and box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+  box-decoration-break: clone;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:89px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 50px; grid-gap:0;">
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:89px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 50px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:89px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 80px; grid-gap:0;">
+<span class="m"><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 30px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:89px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:44px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 50px; grid-row-gap:0; margin-bottom:40px;">
+<span class="m" style="height:16px; background:blue; margin: -5px 1px 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 72px; grid-row-gap:0;">
+<span class="b" style="grid-column:3"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:89px">
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:44px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+<div class="grid" style="grid-template-rows: 50px; grid-row-gap:0; margin-bottom:40px;">
+<span class="m"><x></x></span>
+<span class="m" style="height:16px; color:blue; background:blue; margin: -5px 1px 0 1px; border-width:0"></span>
+</div>
+<div class="grid" style="grid-template-rows: 72px; grid-row-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px; grid-gap:0;">
+</div>
+<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:90px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 50px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 61px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px; grid-gap:0;">
+</div>
+<div class="grid" style="grid-template-rows: 1fr; grid-gap:0; height:62px">
+<span style="height:60px"><x></x></span>
+<span style="height:50px"><i style="height:54px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 0; grid-gap:0; border-width:0 5px">
+<span class=m style="grid-column:2; border-width:0 1px; height:0"><i style="height:6px;margin:0"></i></span>
+<span class=b style="grid-column:3; height:0"></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-019.html
@@ -0,0 +1,115 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of height:auto grid, not top-of-page, forced break growing 'fr' row, and box-decoration-break:clone</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-019-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+  box-decoration-break: clone;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 1fr 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px 1fr 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px 1fr 50px;">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px 1fr 50px; grid-gap:0;">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 61px/*trigger OVERFLOW_INCOMPLETE for the item*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px 1fr; grid-gap:0;">
+<span style="grid-row:2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-020-ref.html
@@ -0,0 +1,208 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation with forced break propagation</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+.no-border { border-style:none; }
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px;
+  grid-auto-rows: 10px;
+  grid-gap: 2px;
+  border:5px solid;
+  height: 20px; /* create Class C break opportunities at both ends */
+  align-content: center;
+}
+.start {
+  align-content: start;
+}
+
+span { background:lime; border:1px solid black; }
+.bb { border-bottom-width:6px; }
+x { display:block; height: 40px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m {  border:5px solid; border-top-width:0; border-bottom-width:0; }
+.br1 { height:34px; border-width:5px; border-top-style:solid; }
+.br2 { height:4px; }
+.br3 { height:39px; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid start">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="br1"></div>
+<div class="grid b">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid start">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="padding-top:1px; background:grey">
+<div class="br3"></div>
+<div class="grid">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="padding-top:1px; background:grey">
+<div class="br3"></div>
+<div class="grid start">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="padding-top:1px; background:grey">
+<div class="br1"></div>
+<div class="grid b">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="padding-top:1px; background:grey">
+<div class="grid start">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:16px">
+<div style="background:grey">
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:16px">
+<div style="padding-top:1px; background:grey">
+<div class="br2"></div>
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:10px">
+<div style="background:grey">
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:10px">
+<div style="padding-top:1px; background:grey">
+<div class="br2"></div>
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:0px">
+<div style="background:grey">
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:0px; margin-top:20px">
+<div style="background:grey">
+<div style="height:1px; overflow:hidden"></div>
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div style="height:1px; overflow:hidden"></div>
+<div style="height:5px; overflow:hidden; background:black; "></div>
+<div class="grid m" style="height:10px;grid-auto-rows: 0px; align-content:start;">
+<span class="bb"></span>
+</div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div style="">
+<div style="height:1px; overflow:hidden"></div>
+<div style="height:5px; overflow:hidden; background:black; "></div>
+</div>
+<div style="height:7px; width:30px; margin-left:5px; overflow:hidden; background:black;"></div>
+<div class="grid m" style="height:10px;grid-auto-rows: 0px; align-content:start;">
+<span class="bb"></span>
+</div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div style="height:1px; overflow:hidden; position:relative"></div>
+<div style="border:5px solid; height:1px; overflow:hidden; ">
+<div style="height:7px; width:30px; overflow:hidden;  position:absolute; background:black;"></div>
+</div>
+</div>
+</div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div style="padding-top:1px; ">
+<div style="height:1px; overflow:hidden"></div>
+<div class="grid" style="height:1px;grid-auto-rows: 1px;">
+<span class="break-before bb"></span>
+<span class="break-before bb"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div style="padding-top:1px; ">
+<div style="height:1px; overflow:hidden"></div>
+<div class="grid" style="height:1px;grid-auto-rows: 11px;">
+<span class="break-before bb"></span>
+<span class="break-before bb"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div style="padding-top:1px; ">
+<div style="height:1px; overflow:hidden"></div>
+<div class="grid" style="height:1px;grid-auto-rows: 11px;">
+<span class="break-before bb" style="grid-row:span 2"></span>
+<span class="break-before bb"></span>
+</div></div></div>
+
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div style="padding-top:1px; ">
+<div style="height:1px; overflow:hidden"></div>
+<div class="grid" style="height:1px;grid-auto-rows: 11px;">
+<span class="break-before bb"></span>
+<span class="break-before bb" style="grid-row:span 2"></span>
+</div></div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-020.html
@@ -0,0 +1,215 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation with forced break propagation</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-020-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+.no-border { border-style:none; }
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px;
+  grid-auto-rows: 10px;
+  grid-gap: 2px;
+  border:5px solid;
+  height: 20px; /* create Class C break opportunities at both ends */
+  align-content: center;
+}
+.start {
+  align-content: start;
+}
+
+span { background:lime; border:1px solid black; }
+.bb { border-bottom-width:6px; }
+x { display:block; height: 40px; }
+m { display:block; padding-top:1px; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid start">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid start">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey"><m></m>
+<div class="grid start">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey"><m></m>
+<div class="grid start">
+<span class="avoid-break"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:16px">
+<div style="background:grey">
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:16px">
+<div style="background:grey"><m></m>
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:10px">
+<div style="background:grey">
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:10px">
+<div style="background:grey"><m></m>
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:0px">
+<div style="background:grey">
+<div class="grid" style="height:10px">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns" style="height:0px; margin-top:20px">
+<div style="background:grey"><m></m>
+<div class="grid" style="height:10px;">
+<span class="break-before"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div><m></m>
+<div class="grid" style="height:10px;grid-auto-rows: 0px;">
+<span class="break-before bb"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div><m></m>
+<div class="grid" style="height:10px;grid-auto-rows: 0px;">
+<span class="break-before bb"></span>
+<span class="break-before bb"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div><m></m>
+<div class="grid" style="height:1px;grid-auto-rows: 1px;">
+<span class="break-before bb"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div><m></m>
+<div class="grid" style="height:1px;grid-auto-rows: 1px;">
+<span class="break-before bb"></span>
+<span class="break-before bb"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div><m></m>
+<div class="grid" style="height:1px;grid-auto-rows: 11px;">
+<span class="break-before bb"></span>
+<span class="break-before bb"></span>
+</div></div></div>
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div><m></m>
+<div class="grid" style="height:1px;grid-auto-rows: 11px;">
+<span class="break-before bb" style="grid-row:span 2"></span>
+<span class="break-before bb"></span>
+</div></div></div>
+
+
+<div class="columns no-border" style="height:0px; margin-top:20px">
+<div><m></m>
+<div class="grid" style="height:1px;grid-auto-rows: 11px;">
+<span class="break-before bb"></span>
+<span class="break-before bb" style="grid-row:span 2"></span>
+</div></div></div>
+
+<!--
+
+XXX TODO: propagation of break-after on the last row to the container doesn't work.
+XXX TODO: I'm guessing the block frame code doesn't know how to deal with that b/c
+XXX TODO: it expects the frame constructor to have created a nsPageBreakFrame...
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid">
+<span class="break-after"></span>
+</div>
+<div style="border-top:2px solid blue"></div>
+</div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid">
+<img src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=" class="break-after"></button>
+</div>
+<div style="border-top:2px solid blue"></div>
+</div></div>
+
+-->
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-021-ref.html
@@ -0,0 +1,188 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation with ::before/::after items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 3;
+      -ms-columns: 3;
+  -webkit-columns: 3;
+          columns: 3;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 1px;
+  height: 150px;
+}
+.no-border { border-style:none; }
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px;
+  grid-auto-rows: 20px;
+  grid-gap: 2px;
+  border:5px solid;
+  counter-reset: item;
+}
+.start {
+  align-content: start;
+}
+
+span { counter-increment:item; }
+.br1.before { grid-row:1; }
+.ar1.after { grid-row:1; }
+.br2.before { grid-row:2; }
+.ar2.after { grid-row:2; }
+.br7.before { grid-row:7; }
+.ar7.after { grid-row:7; }
+
+.span5 { grid-row-end: span 5; background:lime; }
+
+.span15 { grid-row: 1 / span 15; grid-column:1; background:lime; }
+.span15.before { grid-row-end: span 15; grid-column:3; background:grey; }
+.span15.after { grid-row: 2 / span 15; grid-column:2; background:lime; }
+
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+</style>
+</head>
+<body>
+
+<div class="columns">
+<div class="grid">
+<span><c>5:before</c></span>
+<span><c>2:after</c></span>
+<span><c>1:before</c></span>
+<span class="ar2"><c>1</c></span>
+<span class="ar2"><c>1:after</c></span>
+<span class="ar2"><c>2:before</c></span>
+<span><c>2</c></span>
+<span><c>3:before</c></span>
+<span><c>3</c></span>
+<span><c>3:after</c></span>
+<span><c>4:before</c></span>
+<span><c>4</c></span>
+<span class="br1"><c>4:after</c></span>
+<span class="br1"><c>5</c></span>
+<span class="br1"><c>5:after</c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c>5:after</c></span>
+<span><c>4:after</c></span>
+<span><c>1:before</c></span>
+<span><c>1</c></span>
+<span><c>1:after</c></span>
+<span><c>2:before</c></span>
+<span><c>2</c></span>
+<span><c>2:after</c></span>
+<span><c>3:before</c></span>
+<span class="ar2"><c>3</c></span>
+<span class="ar2"><c>3:after</c></span>
+<span class="ar2"><c>4:before</c></span>
+<span class="ar1"><c>4</c></span>
+<span class="ar1"><c>5:before</c></span>
+<span class="ar1"><c>5</c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c>5:after</c></span>
+<span><c>5:before</c></span>
+<span><c>1:before</c></span>
+<span><c>1</c></span>
+<span><c>1:after</c></span>
+<span><c>2:before</c></span>
+<span><c>2</c></span>
+<span><c>2:after</c></span>
+<span><c>3:before</c></span>
+<span><c>3</c></span>
+<span><c>3:after</c></span>
+<span><c>4:before</c></span>
+<span class="ar1 br2"><c>4</c></span>
+<span class="ar1 br2"><c>4:after</c></span>
+<span class="ar1 br2"><c>5</c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c>5:before</c></span>
+<span><c>5:after</c></span>
+<span><c>1:before</c></span>
+<span><c>1</c></span>
+<span><c>1:after</c></span>
+<span><c>2:before</c></span>
+<span><c>2</c></span>
+<span><c>2:after</c></span>
+<span><c>3:before</c></span>
+<span><c>3</c></span>
+<span><c>3:after</c></span>
+<span><c>4:before</c></span>
+<span class="ar2 br1"><c>4</c></span>
+<span class="ar2 br1"><c>4:after</c></span>
+<span class="ar2 br1"><c>5</c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c>5:before</c></span>
+<span><c>4:before</c></span>
+<span><c>1:before</c></span>
+<span><c>1</c></span>
+<span><c>1:after</c></span>
+<span><c>2:before</c></span>
+<span><c>2</c></span>
+<span><c>2:after</c></span>
+<span><c>3:before</c></span>
+<span class="br2"><c>3</c></span>
+<span class="br2"><c>3:after</c></span>
+<span class="br2"><c>4</c></span>
+<span class="br1"><c>4:after</c></span>
+<span class="br1"><c>5</c></span>
+<span class="br1"><c>5:after</c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c>1:before</c></span>
+<span><c>5:before</c></span>
+<span><c>1</c></span>
+<span><c>1:after</c></span>
+<span><c>2:before</c></span>
+<span><c>2</c></span>
+<span><c>4:before</c></span>
+<span><c>2:after</c></span>
+<span class="span5"><c>3:before</c></span>
+<span class="span5"><c>3</c></span>
+<span class="span5"><c></c></span>
+<span class="br7"><c></c></span>
+<span class="br2"><c></c></span>
+<span class="br2"><c></c></span>
+<span class="br2"><c></c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid" style="grid-template-columns: 30px 30px 30px">
+<span class="span15 before"><c>1:before</c></span>
+<span class="span15"><c>1</c></span>
+<span class="span15 after"><c>1:after</c></span>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-021.html
@@ -0,0 +1,133 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation with ::before/::after items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-021-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 3;
+      -ms-columns: 3;
+  -webkit-columns: 3;
+          columns: 3;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 1px;
+  height: 150px;
+}
+.no-border { border-style:none; }
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px;
+  grid-auto-rows: 20px;
+  grid-gap: 2px;
+  border:5px solid;
+  counter-reset: item;
+}
+.start {
+  align-content: start;
+}
+
+span { display:contents; }
+span::before { counter-increment:item; content: counter(item) ":before"; }
+span::after { content: counter(item) ":after"; }
+c::before { content: counter(item); }
+.br1::before { grid-row:1; }
+.ar1::after { grid-row:1; }
+.br2::before { grid-row:2; }
+.ar2::after { grid-row:2; }
+.br7::before { grid-row:7; }
+.ar7::after { grid-row:7; }
+
+.span5 * { grid-row-end: span 5; background:lime; }
+.span5::before { grid-row-end: span 5; background:lime; }
+.span5::after { grid-row-end: span 5; background:lime; }
+
+.span15 * { grid-row: 1 / span 15; background:lime; }
+.span15::before { grid-row-end: span 15; background:grey; }
+.span15::after { grid-row: 2 / span 15; background:lime; }
+
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+</style>
+</head>
+<body>
+
+<div class="columns">
+<div class="grid">
+<span><c></c></span>
+<span class="ar2"><c></c></span>
+<span><c></c></span>
+<span><c></c></span>
+<span class="br1"><c></c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c></c></span>
+<span><c></c></span>
+<span><c></c></span>
+<span class="ar2"><c></c></span>
+<span class="ar1"><c></c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c></c></span>
+<span><c></c></span>
+<span><c></c></span>
+<span><c></c></span>
+<span class="ar1 br2"><c></c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c></c></span>
+<span><c></c></span>
+<span><c></c></span>
+<span><c></c></span>
+<span class="ar2 br1"><c></c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c></c></span>
+<span><c></c></span>
+<span><c></c></span>
+<span class="br2"><c></c></span>
+<span class="br1"><c></c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid">
+<span><c></c></span>
+<span><c></c></span>
+<span class="span5"><c></c></span>
+<span class="br7"><c></c></span>
+<span class="br2"><c></c></span>
+</div></div>
+
+<div class="columns">
+<div class="grid" style="grid-template-columns: 30px 30px 30px">
+<span class="span15"><c></c></span>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-022.html
@@ -0,0 +1,104 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of height:auto grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-007-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-023-ref.html
@@ -0,0 +1,138 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of definite height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:86px">
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:86px">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 80px; grid-gap:0; padding-bottom:6px">
+<span class="m"><x></x></span>
+</div></div>
+<div style="height:9px"></div>
+<div class="grid" style="align-content: start; grid-gap:0; height:1px; border-width:0; margin-left:5px">
+<span class="b"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 86px; grid-row-gap:0;">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3; height:92px;"><x></x></span>
+</div></div>
+<div style="height:9px"></div>
+<div class="grid" style="grid-template-rows: auto; grid-row-gap:0; height:1px; border-width:0; margin-left:5px;">
+<span class="b" style="grid-column:3; height:29px"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+<div class="grid b" style="grid-template-rows: 86px; grid-row-gap:0;">
+<span class="m" style="height:92px"><x></x></span>
+<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span>
+</div></div>
+<div style="height:9px"></div>
+<div class="grid" style="grid-template-rows: 0; grid-row-gap:0; height:1px; border-width:0; margin-left:5px;">
+<span class="b" style="height:29px"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 50px; grid-gap:0;">
+</div>
+<div class="grid m" style="grid-template-rows: 1fr; grid-gap:0; height:100px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:30px;">
+<span class="b" style="height:49px"><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-023.html
@@ -0,0 +1,105 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of definite height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-023-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  height: 180px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-024-ref.html
@@ -0,0 +1,172 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of a height:auto  definite max-height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:50px">
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:50px">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;">
+<span class="m"><x></x></span>
+</div>
+<div style="height:20px"></div>
+<div class="grid b" style="grid-gap:0; height:6px">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 92px; grid-row-gap:0; height:86px">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div></div>
+<div style="height:9px"></div>
+<div class="grid" style="grid-template-rows: auto; grid-row-gap:0; height:1px; border-width:0; margin-left:5px;">
+<span class="b" style="grid-column:3; height:29px"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+<div class="grid b" style="grid-template-rows: 92px; grid-row-gap:0; height:86px">
+<span class="m"><x></x></span>
+<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span>
+</div></div>
+<div style="height:9px"></div>
+<div class="grid" style="grid-template-rows: auto; grid-row-gap:0; height:1px; border-width:0; margin-left:5px;">
+<span class="b" style="height:29px"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 50px; grid-gap:0;">
+</div>
+<div class="grid m" style="grid-template-rows: 1fr; grid-gap:0; height:100px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:30px;">
+<span class="b" style="height:49px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;">
+<span class="m"><x></x></span>
+</div>
+<div style="height:20px"></div>
+<div class="grid b" style="grid-gap:0; height:6px">
+<span class="b"><x></x></span>
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 92px; grid-row-gap:0; height:86px">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div></div>
+<div style="height:9px"></div>
+<div class="grid m" style="border-style:none; margin-left:5px">
+<span><x></x></span>
+<span class="b" style="grid-column:3; height:29px"><x></x></span>
+</div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-024.html
@@ -0,0 +1,126 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of a height:auto  definite max-height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-024-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  max-height: 180px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+<span style="grid-row:4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:5"><x></x></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-025-ref.html
@@ -0,0 +1,177 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of a height:auto, small definite max-height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px; grid-gap:0; height:20px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div></div>
+<div style="height:69px"></div>
+<div class="grid" style="grid-template-rows: 50px; border-style:none; margin-left:5px">
+<span><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px; grid-gap:0; height:20px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div></div>
+<div style="height:69px"></div>
+<div class="grid" style="grid-template-rows: 50px; border-style:none; margin-left:5px">
+<span class="b"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px; grid-gap:0; height:20px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div></div>
+<div class="grid m" style="grid-template-rows: 80px; border-style:none; margin-left:5px">
+<span class="m"><x></x></span>
+</div>
+<div style="height:20px"></div>
+<div class="grid b" style="border-style:none; margin-left:5px">
+<span class="b"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 17px 77px; grid-row-gap:0; height:20px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div></div>
+<div class="grid" style="grid-template-rows: 92px; grid-row-gap:0; height:86px; border-style:none; margin-left:5px">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div>
+<div style="height:9px"></div>
+<div class="grid" style="grid-template-rows: auto; border-style:none; margin-left:5px">
+<span class="b" style="grid-column:3; height:29px"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 17px 77px; grid-row-gap:0; height:20px">
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div></div>
+<div class="grid" style="grid-template-rows: 92px; grid-row-gap:0; height:86px; border-style:none; margin-left:5px">
+<span class="m"><x></x></span>
+<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span>
+</div>
+<div style="height:9px"></div>
+<div class="grid" style="grid-template-rows: auto; border-style:none; margin-left:5px">
+<span class="b" style="height:29px"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px; grid-gap:0; height:20px">
+</div></div>
+<div style="height:69px"></div>
+<div class="grid" style="grid-template-rows: 100px; grid-gap:0; border-style:none; margin-left:5px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid" style="grid-template-rows: 50px; border-style:none; margin-left:5px">
+<span class="b" style="height:49px"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px; grid-gap:0; height:20px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div></div>
+<div style="height:69px"></div>
+<div class="grid" style="grid-template-rows: 80px; border-style:none; margin-left:5px">
+<span class="m"><x></x></span>
+</div>
+<div style="height:20px"></div>
+<div class="grid" style="grid-gap:0; border-style:none; margin-left:5px">
+<span class="b"><x></x></span>
+<span><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 17px 77px; grid-row-gap:0; height:20px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div></div>
+<div style="height:69px"></div>
+<div class="grid" style="grid-template-rows: 92px; grid-row-gap:0; height:86px; border-style:none; margin-left:5px">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div>
+<div style="height:9px"></div>
+<div class="grid" style="border-style:none; margin-left:5px">
+<span><x></x></span>
+<span class="b" style="grid-column:3; height:29px"><x></x></span>
+</div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-025.html
@@ -0,0 +1,126 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of a height:auto, small definite max-height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-025-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  max-height: 20px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+<span style="grid-row:4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:5"><x></x></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-026-ref.html
@@ -0,0 +1,166 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of definite height grid, forced row breaks, avoid-break grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+s { display:block; height:90px; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<s></s>
+<div class="grid t">
+<span><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b" style="height:60px">
+<span class="b"><x></x></span>
+<span class="b" style="grid-area:1/3; height:6px; background:cyan"><x></x></span>
+<span style="grid-area:1/3; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="padding-top:10px; background:grey">
+<s style="height:20px;"></s>
+<div style="height:90px;border:5px solid;"></div>
+</div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:50px;"></div>
+<div class="grid t">
+<span><x></x></span>
+</div>
+<div style="height:60px; border:5px solid; border-top-width:0;">
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<s></s>
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b" style="padding-bottom:30px">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<s></s>
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div style="height:40px;"></div>
+<div class="grid b" style="padding-bottom:30px">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span style="align-self:end; grid-area:1/1; background:pink"><x></x></span>
+<span class="b"><x></x></span>
+<span class="b" style="height:6px; background:cyan"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:90px;"></div>
+<div class="grid" style="padding-bottom:18px">
+<span style="height:35px"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/">
+<div style="padding-top:10px; background:grey">
+<div style="height:87px;"></div>
+<div class="grid t" style="padding-bottom:18px">
+<span style="height:35px"><x></x></span>
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="grid-area:2/1; align-self:end; background:pink"><x></x></span>
+</div>
+<div class="grid b"></div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid t">
+<span class="t"><x></x></span>
+<span class="t" style="background:cyan"><x></x></span>
+</div>
+<div class="grid m">
+<span class="b" style="grid-area:1/1; height:6px"><x></x></span>
+<span class="b" style="background:cyan"><x></x></span>
+<span style="grid-area:1/1; align-self:end; background:pink"><x></x></span>
+</div>
+<div style="height:50px"></div>
+<div class="grid b">
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid t">
+<span class="t" style="grid-row: span 2"><x></x></span>
+<span style="grid-row: span 2"><x></x></span>
+</div>
+<div style="height:53px"></div>
+<div style="height:18px; border:5px solid; border-top-width:0;">
+<span class="b" style="display:block;height:29px;width:28px"></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-026.html
@@ -0,0 +1,134 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of definite height grid, forced row breaks, avoid-break grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-026-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  height: 90px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+
+  page-break-inside:avoid;
+  break-inside:avoid;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+m { display:block; padding-top:10px; }
+.break-before { page-break-before:always; break-before:always; }
+.break-after { page-break-after:always; break-after:always; }
+
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*two rows would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1"><x></x></span>
+<span><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height:30px">
+<div style="background:grey"><m></m>
+<div class="grid break-before">
+</div></div></div>
+
+<div class="columns" style="height: 60px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span class="break-before"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span class="break-before" style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div></div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span class="break-after" style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*everything would fit in 1st column*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span class="break-before" style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 97px/*everything would fit in 1st column, except bottom border*/">
+<div style="background:grey"><m></m>
+<div class="grid">
+<span style="grid-row:span 2"><x></x></span>
+<span style="height:35px; background:cyan"><x></x></span>
+<span style="align-self:end; background:pink"><x></x></span>
+<span class="break-before" style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 80px/*one row fits in 1st column, two in 2nd column, but forced break there*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span style="grid-row:3"><x></x></span>
+<span class="break-after" style="grid-row:span 2; background:cyan"><x></x></span>
+<span class="break-before" style="grid-row:2; align-self:end; background:pink"><x></x></span>
+<span style="grid-row:1; height:35px"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 160px/*everything would fit in 1st column*/">
+<div style="padding-top:30px; background:grey">
+<div class="grid">
+<span class="break-after" style="grid-row: span 3"><x></x></span>
+<span class="break-after" style="grid-row: span 2"><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-027.html
@@ -0,0 +1,127 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of a height:auto, small definite min/max-height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-025-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  max-height: 10px;
+  min-height: 20px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0;">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+<span style="grid-row:4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px;">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:5"><x></x></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-028-ref.html
@@ -0,0 +1,174 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of a height:auto, small definite min-height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: space-evenly;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-top-width:0; border-bottom-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;">
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 50px; grid-gap:0; height:100px">
+<span class="b"><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 50px; grid-gap:0; height:100px">
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0; height:6px">
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;">
+<span class="m"><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0;">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 30px; grid-row-gap:0;">
+<span class="b" style="grid-column:3"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:50px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+<div class="grid b" style="grid-template-rows: 92px; grid-row-gap:0; align-content:start; height:26px;">
+<span class="m"><x></x></span>
+<span class="m" style="height:11px; color:blue; background:blue; margin: 0 1px; border-width:0"></span>
+</div></div>
+<div style="height:69px"></div>
+<div class="grid" style="grid-template-rows: 30px; grid-row-gap:0; align-content:start; height:1px; border-width:0; margin-left:5px;">
+<span class="b"><x></x></span>
+</div>
+</div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 50px; grid-gap:0;">
+</div>
+<div class="grid m" style="grid-template-rows: 1fr; grid-gap:0; height:100px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid b" style="grid-template-rows: 50px; grid-gap:0;">
+<span class="b"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 1fr; grid-gap:0; height:94px">
+<span class="t"><x></x></span>
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span style="height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 80px; grid-gap:0;">
+<span class="m"><x></x></span>
+</div>
+<div style="height:20px"></div>
+<div class="grid b" style="grid-gap:0;">
+<span class="b"><x></x></span>
+<span><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 17px 1fr; grid-row-gap:0; height:94px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span class="t" style="grid-row:1/span 2"><x></x></span>
+</div>
+<div class="grid m" style="grid-template-rows: 92px; grid-row-gap:0; height:92px">
+<span class="m" style="height:10px; background:blue; margin: 0 1px; border-width:0"><x></x></span>
+<span class="m" style="grid-column:3"><x></x></span>
+</div>
+<div style="height:8px"></div>
+<div class="grid b" style="">
+<span><x></x></span>
+<span class="b" style="grid-column:3; height:29px"><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-028.html
@@ -0,0 +1,125 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of a height:auto, small definite min-height grid, forced break growing min-content row</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-028-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  min-height: 20px;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0; min-height:300px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 2"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0; min-height:120px">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px; min-height:120px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px; min-height:120px; max-height:100px">
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow row 2*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 50px min-content 50px; grid-gap:0; min-height:120px">
+<span style="grid-row:2/span 2"><x></x></span>
+<span style="grid-row:2; height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><i></i><i></i><i></i><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 50px; grid-gap:0;">
+<span style="height:50px"><i style="height:60px"></i><x></x></span>
+<span class="avoid-break" style="height:60px"><i></i><i></i><i></i><x></x></span>
+<span style="grid-row:1/span 4"><x></x></span>
+<span style="grid-row:4"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 5px min-content 50px; min-height:200px">
+<span style="grid-row:2; height:50px"><x></x><i style="height:60px"></i></span>
+<span class="avoid-break" style="grid-row:2; height:60px"><x></x><i></i><i></i><i></i></span>
+<span style="grid-row:1/span 5"><x></x></span>
+<span style="grid-row:5"><x></x></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-029-ref.html
@@ -0,0 +1,207 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation, various edge cases</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: block;
+  border:5px solid;
+  align-content: start;
+}
+span { display:block; height:20px; width:30px; }
+i { display:block; height:10px; background:blue; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-bottom-width:0; border-top-width:0; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height:30px">
+<div style="background:grey">
+<div class="grid t" style="height:25px">
+<span><i style="height:25px"></i></span>
+</div>
+<div class="grid m" style="height:25px">
+<span><i style="height:25px"></i></span>
+</div>
+<div class="grid m" style="height:25px">
+<span><i style="height:10px"></i></span>
+</div>
+<div class="grid b" style="height:25px">
+</div>
+</div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid t" style="height:60px; overflow:hidden">
+<span><i style="overflow:hidden;height:60px"></i></span>
+</div>
+<div class="grid m" style="height:40px">
+<span><i style="height:20px"></i></span>
+</div>
+<div class="grid b" style="height:0px">
+</div>
+</div></div>
+
+<div class="columns" style="height:30px; margin-left:40px">
+<div style="background:grey">
+<div class="grid t" style="height:25px">
+<span><i style="height:25px"></i></span>
+</div>
+<div class="grid m" style="height:25px">
+<span><i style="height:25px"></i></span>
+</div>
+<div class="grid m" style="height:25px">
+<span><i style="height:10px"></i></span>
+</div>
+<div class="grid b" style="height:25px">
+</div>
+</div></div>
+
+<div class="columns" style="height:40px; margin-left:40px">
+<div style="background:grey">
+<div class="grid t" style="height:60px; overflow:hidden">
+<span><i style="overflow:hidden;height:60px"></i></span>
+</div>
+<div class="grid m" style="height:40px">
+<span><i style="height:20px"></i></span>
+</div>
+<div class="grid b" style="height:0px">
+</div>
+</div></div>
+
+<div class="columns" style="height:40px; margin-left:80px">
+<div style="background:grey">
+<div class="grid" style="height:20px">
+<span><i style="overflow:hidden;height:60px"></i></span>
+</div></div>
+<div style="height:10px"></div>
+<div style="margin-left:5px">
+<span><i style="height:20px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px; margin-left:120px">
+<div style="background:grey">
+<div class="grid t" style="height:30px">
+<span><i style="height:30px"></i></span>
+</div>
+<div style="height:35px"></div>
+<div class="grid b" style="height:30px">
+<span><i style="height:50px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid t" style="height:30px">
+<span><i style="height:30px"></i></span>
+</div>
+<div style="height:35px"></div>
+<div class="grid b" style="height:32px">
+<span><i style="height:50px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid t" style="height:45px">
+<span style="height:45px"><i style="height:45px"></i></span>
+</div>
+<div style="height:20px"></div>
+<div class="grid b" style="height:16px">
+<span style="height:16px"><i style="height:35px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid t" style="height:65px">
+<span style="height:65px"><i style="height:65px"></i></span>
+</div>
+<div class="grid b" style="height:0px">
+<span><i style="height:15px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid t" style="height:60px">
+<span style="height:60px"><i style="height:60px"></i></span>
+</div>
+<div style="height:5px"></div>
+<div class="grid b" style="height:1px">
+<span><i style="height:20px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid t" style="height:61px">
+<span style="height:62px"><i style="height:62px"></i></span>
+</div>
+<div style="height:4px"></div>
+<div class="grid b" style="height:0px">
+<span><i style="height:18px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div style="overflow:hidden">
+<div class="grid" style="height:32px;">
+<span><i style="height:33px;"></i></span>
+</div>
+</div>
+<div class="grid m" style="height:0px">
+<span><i style="height:40px"></i></span>
+</div></div>
+<div style="height:40px"></div>
+<div class="grid m" style="height:0px">
+<span><i style="height:7px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div style="overflow:hidden">
+<div class="grid" style="height:32px;">
+<span><i style="height:33px;"></i></span>
+</div>
+</div>
+<div class="grid m" style="height:0px">
+<span><i style="height:40px"></i></span>
+</div></div>
+<div style="height:40px"></div>
+<div class="grid m" style="height:0px">
+<span><i style="height:7px"></i></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-029.html
@@ -0,0 +1,141 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation, various edge cases</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-029-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 30px 30px 30px;
+  grid-auto-rows: 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; height:20px; }
+x { display:block; height:20px;}
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height:30px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 5px; min-height:100px">
+<span><i style="height:60px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 60px; min-height:100px">
+<span><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:30px; margin-left:40px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 5px; height:100px; min-height:100px">
+<span><i style="height:60px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:40px; margin-left:40px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 60px; height:20px; min-height:100px">
+<span><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:40px; margin-left:80px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 60px; height:20px;">
+<span><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px; margin-left:120px">
+<div style="background:grey">
+<div class="grid" style="grid-gap:2px; min-height:50px">
+<span style="grid-row:span 2"><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid" style="grid-gap:2px; height:62px">
+<span style="grid-row:span 2"><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 30px 15px 16px; grid-gap:0; height:61px">
+<span style="grid-row:span 2; height:auto"><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 30px 35px 0px; grid-gap:0; height:61px">
+<span style="grid-row:span 2; height:auto"><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 30px 30px 1px; grid-gap:0; height:61px">
+<span style="grid-row:span 2; height:auto"><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:70px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 30px 30px 2px 10px; grid-gap:0; height:61px">
+<span style="grid-row:span 3; height:auto"><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 33px 30px; max-height:32px;">
+<span><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+<div class="columns" style="height:40px">
+<div style="background:grey">
+<div class="grid" style="grid-template-rows: 33px 30px; min-height:32px; max-height:0px;">
+<span><i style="height:80px"></i></span>
+</div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-030-ref.html
@@ -0,0 +1,111 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation of a height:auto, growing min-content row that makes the grid container break</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  max-height: 20px;
+  grid-template-columns: 30px 30px 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:90px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:89px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:94px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:95px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:200px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:none;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-030.html
@@ -0,0 +1,114 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation of a height:auto, growing min-content row that makes the grid container break</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-030-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  max-height: 20px;
+  grid-template-columns: 30px 30px 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:90px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:89px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:94px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:95px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:200px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:none;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-031-ref.html
@@ -0,0 +1,115 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Fragmentation with specified grid height, growing min-content row that makes the grid container break</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  max-height: 20px;
+  grid-template-columns: 30px 30px 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.t { border-bottom-width:0; }
+.b { border-top-width:0; }
+.m { border-bottom-width:0; border-top-width:0; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 94px; grid-gap:0; height:90px; max-height:90px; ">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+</div>
+<div style="height:4px"></div>
+<div class="grid b" style="height:0px;grid-template-rows: 22px;"><span></span></div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:89px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 94px; grid-gap:0; height:94px; max-height:94px; ">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+</div>
+<div class="grid b" style="height:0px;grid-template-rows: 22px;"><span></span></div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0; max-height:95px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: 94px 10px; grid-gap:0;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid t" style="grid-template-rows: 94px; grid-gap:0; height:90px; max-height:90px; ">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+</div>
+<div style="height:4px"></div>
+<div class="grid b" style="height:0px;grid-template-rows: 10px;"><span></span></div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-031.html
@@ -0,0 +1,114 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Fragmentation with specified grid height, growing min-content row that makes the grid container break</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-031-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+body { overflow:hidden; }
+
+.columns {
+  position:relative;
+     -moz-columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     -moz-column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+}
+
+.grid {
+  display: grid;
+  height: 20px;
+  grid-template-columns: 30px 30px 30px;
+  grid-gap: 12px;
+  border:5px solid;
+  align-content: start;
+}
+span { background:lime; border:1px solid black; }
+x { display:block; height:20px; }
+.avoid-break { page-break-inside:avoid; break-inside:avoid; }
+
+i { display:block; height:10px; margin-top:7px; background:blue; }
+</style>
+</head>
+<body>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; height:90px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; height:89px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; height:94px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; height:95px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; max-height:50px;">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"><x></x></span>
+</div>
+</div></div>
+
+<div class="columns" style="height: 100px/*trigger NS_INLINE_IS_BREAK_BEFORE for the item: grow the row*/">
+<div style="padding-top:1px; background:grey">
+<div class="grid" style="grid-template-rows: min-content 10px; grid-gap:0; min-height:90px">
+<span></span>
+<span class="avoid-break" style="height:60px"><i></i><x></x><i></i><x></x><i></i><x></x></span>
+<span style="grid-row:2;"></span>
+</div>
+</div></div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-002.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 002 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-002-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-002.html", runTest)'></body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-006.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 006 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-006-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-006.html", runTest)'></body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-015.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 015 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-015-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-015.html", runTest)'></body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-016.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 016 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-016-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-016.html", runTest)'></body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-019.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 019 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-019-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>
+function runTest(text) {
+  document.body.innerHTML = text;
+  dyn1('.grid');
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+</head>
+<body onload='dynamicTest("grid-fragmentation-019.html", runTest)'></body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-fragmentation-dyn1-020.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: test 020 dynamic remove/insert first item</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144096">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#pagination">
+  <link rel="match" href="grid-fragmentation-020-ref.html">
+
+<script src="support/dyn.js"></script>
+<script>