Bug 1602430 - Apply min/max-height correctly for fragmented boxes with no height specified. r=TYLin
authorMats Palmgren <mats@mozilla.com>
Tue, 17 Dec 2019 23:13:13 +0000
changeset 507492 b5c8349e4e351559e92ff2704b0f36033395b24a
parent 507491 44689b5ff306b9ebee413c4e0f0a32f88204ae5c
child 507493 81beebdc2202c3a74844b7ff7614134ffeaf7846
push id103479
push usermpalmgren@mozilla.com
push dateTue, 17 Dec 2019 23:22:44 +0000
treeherderautoland@b5c8349e4e35 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersTYLin
bugs1602430
milestone73.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 1602430 - Apply min/max-height correctly for fragmented boxes with no height specified. r=TYLin Depends on D56738 Differential Revision: https://phabricator.services.mozilla.com/D57561
layout/generic/nsBlockFrame.cpp
layout/generic/nsSplittableFrame.cpp
layout/reftests/pagination/block-max-height-001-ref.html
layout/reftests/pagination/block-max-height-001.html
layout/reftests/pagination/block-max-height-002.html
layout/reftests/pagination/block-min-height-001-ref.html
layout/reftests/pagination/block-min-height-001.html
layout/reftests/pagination/block-min-height-002.html
layout/reftests/pagination/reftest.list
testing/web-platform/tests/css/css-break/block-max-height-001-ref.html
testing/web-platform/tests/css/css-break/block-max-height-001.html
testing/web-platform/tests/css/css-break/block-max-height-001b-ref.html
testing/web-platform/tests/css/css-break/block-max-height-001b.html
testing/web-platform/tests/css/css-break/block-max-height-002.html
testing/web-platform/tests/css/css-break/block-max-height-002b.html
testing/web-platform/tests/css/css-break/block-max-height-003.html
testing/web-platform/tests/css/css-break/block-max-height-003b.html
testing/web-platform/tests/css/css-break/block-min-height-001-ref.html
testing/web-platform/tests/css/css-break/block-min-height-001.html
testing/web-platform/tests/css/css-break/block-min-height-001b-ref.html
testing/web-platform/tests/css/css-break/block-min-height-001b.html
--- a/layout/generic/nsBlockFrame.cpp
+++ b/layout/generic/nsBlockFrame.cpp
@@ -1882,47 +1882,75 @@ void nsBlockFrame::ComputeFinalSize(cons
     // NOTE: We exempt the nsComboboxControlFrame subclass from taking this
     // special case, because comboboxes implicitly honors the size-containment
     // behavior on its nsComboboxDisplayFrame child (which it shrinkwraps)
     // rather than on the nsComboboxControlFrame. (Moreover, the DisplayFrame
     // child doesn't even need any special content-size-ignoring behavior in
     // its reflow method, because that method just resolves "auto" BSize values
     // to one line-height rather than by measuring its contents' BSize.)
     nscoord contentBSize = 0;
-    nscoord autoBSize = aReflowInput.ApplyMinMaxBSize(contentBSize);
+    nscoord autoBSize =
+        aReflowInput.ApplyMinMaxBSize(contentBSize, aState.mConsumedBSize);
     aMetrics.mCarriedOutBEndMargin.Zero();
     autoBSize += borderPadding.BStartEnd(wm);
     finalSize.BSize(wm) = autoBSize;
   } else if (aState.mReflowStatus.IsComplete()) {
     nscoord contentBSize = blockEndEdgeOfChildren - borderPadding.BStart(wm);
     nscoord lineClampedContentBSize =
         ApplyLineClamp(aReflowInput, this, contentBSize);
-    nscoord autoBSize = aReflowInput.ApplyMinMaxBSize(lineClampedContentBSize);
+    nscoord autoBSize = aReflowInput.ApplyMinMaxBSize(lineClampedContentBSize,
+                                                      aState.mConsumedBSize);
     if (autoBSize != contentBSize) {
       // Our min-block-size, max-block-size, or -webkit-line-clamp value made
       // our bsize change.  Don't carry out our kids' block-end margins.
       aMetrics.mCarriedOutBEndMargin.Zero();
     }
-    autoBSize += borderPadding.BStart(wm) + borderPadding.BEnd(wm);
-    finalSize.BSize(wm) = autoBSize;
+    nscoord bSize = autoBSize + borderPadding.BStartEnd(wm);
+    if (MOZ_UNLIKELY(autoBSize > contentBSize &&
+                     bSize > aReflowInput.AvailableBSize() &&
+                     aReflowInput.AvailableBSize() != NS_UNCONSTRAINEDSIZE)) {
+      // Applying `min-size` made us overflow our available size.
+      // Clamp it and report that we're Incomplete.
+      bSize = aReflowInput.AvailableBSize();
+      aState.mReflowStatus.SetIncomplete();
+    }
+    finalSize.BSize(wm) = bSize;
   } else {
     NS_ASSERTION(aReflowInput.AvailableBSize() != NS_UNCONSTRAINEDSIZE,
                  "Shouldn't be incomplete if availableBSize is UNCONSTRAINED.");
     if (aState.mBCoord == nscoord_MAX) {
       // FIXME bug 1574046.
       // This should never happen, but it does. nsFloatManager::ClearFloats
       // returns |nscoord_MAX| when DONT_CLEAR_PUSHED_FLOATS is false.
       blockEndEdgeOfChildren = aState.mBCoord = aReflowInput.AvailableBSize();
     }
-    finalSize.BSize(wm) =
-        std::max(aState.mBCoord, aReflowInput.AvailableBSize());
+    nscoord bSize = std::max(aState.mBCoord, aReflowInput.AvailableBSize());
     if (aReflowInput.AvailableBSize() == NS_UNCONSTRAINEDSIZE) {
       // This should never happen, but it does. See bug 414255
-      finalSize.BSize(wm) = aState.mBCoord;
-    }
+      bSize = aState.mBCoord;
+    }
+    const nscoord maxBSize = aReflowInput.ComputedMaxBSize();
+    if (maxBSize != NS_UNCONSTRAINEDSIZE &&
+        // FIXME: wallpaper for bug 1603088
+        !(Style()->GetPseudoType() == PseudoStyleType::columnContent ||
+          Style()->GetPseudoType() == PseudoStyleType::columnSet) &&
+        aState.mConsumedBSize + bSize - borderPadding.BStart(wm) > maxBSize) {
+      nscoord bEnd = std::max(0, maxBSize - aState.mConsumedBSize) +
+                     borderPadding.BStart(wm);
+      // Note that |borderPadding| has GetSkipSides applied, so we ask
+      // aReflowInput for the actual value we'd use on a last fragment here:
+      bEnd += aReflowInput.ComputedLogicalBorderPadding().BEnd(wm);
+      if (bEnd <= aReflowInput.AvailableBSize()) {
+        // We actually fit after applying `max-size` so we should be
+        // Overflow-Incomplete instead.
+        bSize = bEnd;
+        aState.mReflowStatus.SetOverflowIncomplete();
+      }
+    }
+    finalSize.BSize(wm) = bSize;
   }
 
   if (IS_TRUE_OVERFLOW_CONTAINER(this)) {
     if (aState.mReflowStatus.IsIncomplete()) {
       // Overflow containers can only be overflow complete.
       // Note that auto height overflow containers have no normal children
       NS_ASSERTION(finalSize.BSize(wm) == 0,
                    "overflow containers must be zero-block-size");
--- a/layout/generic/nsSplittableFrame.cpp
+++ b/layout/generic/nsSplittableFrame.cpp
@@ -181,16 +181,24 @@ void nsSplittableFrame::RemoveFromFlow(n
   }
 
   aFrame->SetPrevInFlow(nullptr);
   aFrame->SetNextInFlow(nullptr);
 }
 
 nscoord nsSplittableFrame::ConsumedBSize(WritingMode aWM) const {
   nscoord bSize = 0;
+
+  // FIXME: wallpaper the bogus max-block-size:100% in ua.css (bug 1603088)
+  const auto& pseudoType = Style()->GetPseudoType();
+  if (pseudoType == PseudoStyleType::columnContent ||
+      pseudoType == PseudoStyleType::columnSet) {
+    return bSize;
+  }
+
   for (nsIFrame* prev = GetPrevContinuation(); prev;
        prev = prev->GetPrevContinuation()) {
     bSize += prev->ContentBSize(aWM);
   }
   return bSize;
 }
 
 nscoord nsSplittableFrame::GetEffectiveComputedBSize(
new file mode 100644
--- /dev/null
+++ b/layout/reftests/pagination/block-max-height-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-paged">
+<head>
+  <title>Reference: max-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
+  <meta name="flags" content="paged">
+  <style>
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font:0.5in/1 monospace; padding:0; margin:0;
+}
+</style>
+</head>
+<body>
+  BEFORE
+  <div style="height:2in">
+    <div style="height:3in; width:1in; border:solid"></div>
+  </div>
+  AFTER
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/pagination/block-max-height-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-paged">
+<head>
+  <title>CSS Test: max-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
+  <meta name="flags" content="paged">
+  <style>
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font:0.5in/1 monospace; padding:0; margin:0;
+}
+</style>
+</head>
+<body>
+  BEFORE
+  <div style="max-height:2in">
+    <div style="height:3in; width:1in; border:solid"></div>
+  </div>
+  AFTER
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/pagination/block-max-height-002.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-paged">
+<head>
+  <title>CSS Test: min/max-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
+  <meta name="flags" content="paged">
+  <style>
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font:0.5in/1 monospace; padding:0; margin:0;
+}
+</style>
+</head>
+<body>
+  BEFORE
+  <div style="min-height:1.8in; max-height:2in">
+    <div style="height:3in; width:1in; border:solid"></div>
+  </div>
+  AFTER
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/pagination/block-min-height-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-paged">
+<head>
+  <title>Reference: min-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
+  <meta name="flags" content="paged">
+  <style>
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font:0.5in/1 monospace; padding:0; margin:0;
+}
+</style>
+</head>
+<body>
+  BEFORE
+  <div style="height:3in">
+    <div style="height:2in; width:1in; border:solid"></div>
+  </div>
+  AFTER
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/pagination/block-min-height-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-paged">
+<head>
+  <title>CSS Test: max-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
+  <meta name="flags" content="paged">
+  <style>
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font:0.5in/1 monospace; padding:0; margin:0;
+}
+</style>
+</head>
+<body>
+  BEFORE
+  <div style="min-height:3in">
+    <div style="height:2in; width:1in; border:solid"></div>
+  </div>
+  AFTER
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/pagination/block-min-height-002.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="reftest-paged">
+<head>
+  <title>CSS Test: min/max-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
+  <meta name="flags" content="paged">
+  <style>
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font:0.5in/1 monospace; padding:0; margin:0;
+}
+</style>
+</head>
+<body>
+  BEFORE
+  <div style="min-height:3in; max-height:2in">
+    <div style="height:2in; width:1in; border:solid"></div>
+  </div>
+  AFTER
+</body>
+</html>
--- a/layout/reftests/pagination/reftest.list
+++ b/layout/reftests/pagination/reftest.list
@@ -155,16 +155,21 @@ pref(layout.css.column-span.enabled,true
 == fieldset-00H-grid.html fieldset-00H-ref.html
 == fieldset-00I.html fieldset-00I-ref.html
 == fieldset-00I-grid.html fieldset-00I-ref.html
 == fieldset-00J.html fieldset-00J-ref.html
 == fieldset-00J-grid.html fieldset-00J-ref.html
 == fieldset-00K.html fieldset-00K-ref.html
 == fieldset-00L.html fieldset-00L-ref.html
 
+== block-max-height-001.html block-max-height-001-ref.html
+== block-max-height-002.html block-max-height-001-ref.html
+== block-min-height-001.html block-min-height-001-ref.html
+== block-min-height-002.html block-min-height-001-ref.html
+
 == bfc-001.html bfc-001-ref.html
 == bfc-002.html bfc-001-ref.html
 == bfc-003.html bfc-001-ref.html
-fails == bfc-004.html bfc-004-ref.html # bug 1602430 and bug 1602484
+fails == bfc-004.html bfc-004-ref.html # bug 1602484
 == bfc-005.html bfc-004-ref.html
 == bfc-006.html bfc-006-ref.html
-fails == bfc-007.html bfc-006-ref.html # bug 1602430
-fails == bfc-008.html bfc-006-ref.html # bug 1602430
+== bfc-007.html bfc-006-ref.html
+== bfc-008.html bfc-006-ref.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-max-height-001-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Reference: max-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+    color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+    width: 300px;
+}
+.columns {
+  columns: 3;
+  background: grey;
+  margin-bottom: 1em;
+}
+.columns > div { height:160px; background: yellow; }
+.columns > div > div { height:200px; width:50px; border:solid; }
+  </style>
+</head>
+<body>
+<div class="columns">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:100px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:70px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:50px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-max-height-001.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Test: max-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
+  <link rel="help" href="https://drafts.csswg.org/css-break">
+  <link rel="match" href="block-max-height-001-ref.html">
+  <style>
+html,body {
+    color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+    width: 300px;
+}
+.columns {
+  columns: 3;
+  background: grey;
+  margin-bottom: 1em;
+}
+.columns > div { max-height:160px; background: yellow; }
+.columns > div > div { height:200px; width:50px; border:solid; }
+  </style>
+</head>
+<body>
+<div class="columns">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:100px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:70px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:50px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-max-height-001b-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Reference: max-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+    color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+    width: 300px;
+}
+.columns {
+  columns: 3;
+  background: grey;
+  margin-bottom: 1em;
+}
+.columns > div {
+  height: 128px;
+  background: yellow;
+  border: solid;
+  border-width:10px 0 6px 0;
+  padding: 5px 0 3px 0;
+}
+.columns > div > div { height:200px; width:50px; border:solid; }
+  </style>
+</head>
+<body>
+<div class="columns">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:100px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:70px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:50px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-max-height-001b.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Test: max-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
+  <link rel="help" href="https://drafts.csswg.org/css-break">
+  <link rel="match" href="block-max-height-001b-ref.html">
+  <style>
+html,body {
+    color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+    width: 300px;
+}
+.columns {
+  columns: 3;
+  background: grey;
+  margin-bottom: 1em;
+}
+.columns > div {
+  max-height: 128px;
+  background: yellow;
+  border: solid;
+  border-width:10px 0 6px 0;
+  padding: 5px 0 3px 0;
+}
+.columns > div > div { height:200px; width:50px; border:solid; }
+  </style>
+</head>
+<body>
+<div class="columns">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:100px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:70px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:50px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-max-height-002.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Test: min/max-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
+  <link rel="help" href="https://drafts.csswg.org/css-break">
+  <link rel="match" href="block-max-height-001-ref.html">
+  <style>
+html,body {
+    color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+    width: 300px;
+}
+.columns {
+  columns: 3;
+  background: grey;
+  margin-bottom: 1em;
+}
+.columns > div { min-height:120px; max-height:160px; background: yellow; }
+.columns > div > div { height:200px; width:50px; border:solid; }
+  </style>
+</head>
+<body>
+<div class="columns">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:100px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:70px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:50px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-max-height-002b.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Test: min/max-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
+  <link rel="help" href="https://drafts.csswg.org/css-break">
+  <link rel="match" href="block-max-height-001b-ref.html">
+  <style>
+html,body {
+    color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+    width: 300px;
+}
+.columns {
+  columns: 3;
+  background: grey;
+  margin-bottom: 1em;
+}
+.columns > div {
+  min-height: 112px;
+  max-height: 128px;
+  background: yellow;
+  border: solid;
+  border-width:10px 0 6px 0;
+  padding: 5px 0 3px 0;
+}
+.columns > div > div { height:200px; width:50px; border:solid; }
+  </style>
+</head>
+<body>
+<div class="columns">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:100px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:70px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:50px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-max-height-003.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Test: min/max-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
+  <link rel="help" href="https://drafts.csswg.org/css-break">
+  <link rel="match" href="block-max-height-001-ref.html">
+  <style>
+html,body {
+    color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+    width: 300px;
+}
+.columns {
+  columns: 3;
+  background: grey;
+  margin-bottom: 1em;
+}
+.columns > div { min-height:160px; max-height:110px; background: yellow; }
+.columns > div > div { height:200px; width:50px; border:solid; }
+  </style>
+</head>
+<body>
+<div class="columns">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:100px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:70px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:50px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-max-height-003b.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Test: min/max-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
+  <link rel="help" href="https://drafts.csswg.org/css-break">
+  <link rel="match" href="block-max-height-001b-ref.html">
+  <style>
+html,body {
+    color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+    width: 300px;
+}
+.columns {
+  columns: 3;
+  background: grey;
+  margin-bottom: 1em;
+}
+.columns > div {
+  min-height: 128px;
+  max-height: 112px;
+  background: yellow;
+  border: solid;
+  border-width:10px 0 6px 0;
+  padding: 5px 0 3px 0;
+}
+.columns > div > div { height:200px; width:50px; border:solid; }
+  </style>
+</head>
+<body>
+<div class="columns">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:100px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:70px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:50px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-min-height-001-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Reference: min-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+    color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+    width: 300px;
+}
+.columns {
+  columns: 3;
+  background: grey;
+  margin-bottom: 1em;
+}
+.columns > div { height:200px; background: yellow; }
+.columns > div > div { height:160px; width:50px; border:solid; }
+  </style>
+</head>
+<body>
+<div class="columns">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:100px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:70px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:50px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-min-height-001.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Test: min-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
+  <link rel="help" href="https://drafts.csswg.org/css-break">
+  <link rel="match" href="block-min-height-001-ref.html">
+  <style>
+html,body {
+    color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+    width: 300px;
+}
+.columns {
+  columns: 3;
+  background: grey;
+  margin-bottom: 1em;
+}
+.columns > div { min-height:200px; background: yellow; }
+.columns > div > div { height:160px; width:50px; border:solid; }
+  </style>
+</head>
+<body>
+<div class="columns">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:100px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:70px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:50px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-min-height-001b-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Reference: min-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+    color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+    width: 300px;
+}
+.columns {
+  columns: 3;
+  background: grey;
+  margin-bottom: 1em;
+}
+.columns > div {
+  height: 172px;
+  background: yellow;
+  border: solid;
+  border-width:10px 0 6px 0;
+  padding: 5px 0 3px 0;
+}
+.columns > div > div { height:150px; width:50px; border:solid; }
+  </style>
+</head>
+<body>
+<div class="columns">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:100px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:70px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:50px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/block-min-height-001b.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Test: min-height block fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430">
+  <link rel="help" href="https://drafts.csswg.org/css-break">
+  <link rel="match" href="block-min-height-001b-ref.html">
+  <style>
+html,body {
+    color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+    width: 300px;
+}
+.columns {
+  columns: 3;
+  background: grey;
+  margin-bottom: 1em;
+}
+.columns > div {
+  min-height: 172px;
+  background: yellow;
+  border: solid;
+  border-width:10px 0 6px 0;
+  padding: 5px 0 3px 0;
+}
+.columns > div > div { height:150px; width:50px; border:solid; }
+  </style>
+</head>
+<body>
+<div class="columns">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:100px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:70px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+<div class="columns" style="height:50px">
+  BEFORE
+  <div>
+    <div></div>
+  </div>
+  AFTER
+</div>
+</body>
+</html>