summaryrefslogtreecommitdiffstats
path: root/layout/reftests/flexbox/pagination
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/flexbox/pagination')
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html99
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1a.html105
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1b.html105
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1c.html105
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1d.html105
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1e.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1f.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1g.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-1h.html109
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html136
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2a.html138
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2b.html138
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2c.html138
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-empty-2d.html138
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html28
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html62
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html68
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html66
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html68
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html66
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html69
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html67
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html70
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html68
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html83
-rw-r--r--layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html82
-rw-r--r--layout/reftests/flexbox/pagination/reftest-stylo.list31
-rw-r--r--layout/reftests/flexbox/pagination/reftest.list30
28 files changed, 2501 insertions, 0 deletions
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html
new file mode 100644
index 000000000..2f002b63b
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1a.html b/layout/reftests/flexbox/pagination/flexbox-empty-1a.html
new file mode 100644
index 000000000..ae7297f59
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1a.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ and with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1b.html b/layout/reftests/flexbox/pagination/flexbox-empty-1b.html
new file mode 100644
index 000000000..40cdcbe40
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1b.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ and with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1c.html b/layout/reftests/flexbox/pagination/flexbox-empty-1c.html
new file mode 100644
index 000000000..16dd69748
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1c.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ and with the flex container having "flex-direction: column".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1d.html b/layout/reftests/flexbox/pagination/flexbox-empty-1d.html
new file mode 100644
index 000000000..086b3b006
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1d.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ and with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1e.html b/layout/reftests/flexbox/pagination/flexbox-empty-1e.html
new file mode 100644
index 000000000..d631c1857
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1e.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ with the flex container overflowing its fixed-height-block parent,
+ and with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .fixedHeightBlock {
+ height: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div></div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div></div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1f.html b/layout/reftests/flexbox/pagination/flexbox-empty-1f.html
new file mode 100644
index 000000000..4879d1527
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1f.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ with the flex container overflowing its fixed-height-block parent,
+ and with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .fixedHeightBlock {
+ height: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div></div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div></div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1g.html b/layout/reftests/flexbox/pagination/flexbox-empty-1g.html
new file mode 100644
index 000000000..40b7a2ef8
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1g.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ with the flex container overflowing its fixed-height-block parent,
+ and with the flex container having "flex-direction: column".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .fixedHeightBlock {
+ height: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div></div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div></div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-1h.html b/layout/reftests/flexbox/pagination/flexbox-empty-1h.html
new file mode 100644
index 000000000..8d2be34b2
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-1h.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ various combinations of margin/border/padding helping it to be too tall,
+ with the flex container overflowing its fixed-height-block parent,
+ and with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ }
+ .fixedHeightBlock {
+ height: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- NO BORDERS/PADDING -->
+ <!-- ================== -->
+ <!-- content fits exactly into 1 column: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 10px"></div>
+ </div></div>
+
+ <!-- content fits, but margin-top pushes it to overflow: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ margin-top: 2px;"></div>
+ </div></div>
+
+ <!-- content is too tall, by 1px: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 11px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP -->
+ <!-- ====================== -->
+ <!-- content fits, but border-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-top make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ padding-top: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON BOTTOM -->
+ <!-- ========================= -->
+ <!-- content fits, but border-bottom-width makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-bottom makes us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-bottom: 2px"></div>
+ </div></div>
+
+ <!-- content fits, but border/padding-bottom make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-bottom-width: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ <!-- BORDERS/PADDING ON TOP AND BOTTOM -->
+ <!-- ================================= -->
+ <!-- content fits, but border-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ border-top-width: 1px;
+ border-bottom-width: 1px"></div>
+ </div></div>
+
+ <!-- content fits, but padding-top/bottom combined make us too tall: -->
+ <div class="multicol"><div class="fixedHeightBlock">
+ <div class="flexContainer" style="height: 9px;
+ padding-top: 1px;
+ padding-bottom: 1px"></div>
+ </div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html
new file mode 100644
index 000000000..0697416b7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2-ref.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2a.html b/layout/reftests/flexbox/pagination/flexbox-empty-2a.html
new file mode 100644
index 000000000..31ee91cf3
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2a.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2b.html b/layout/reftests/flexbox/pagination/flexbox-empty-2b.html
new file mode 100644
index 000000000..10cd9b22d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2b.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2c.html b/layout/reftests/flexbox/pagination/flexbox-empty-2c.html
new file mode 100644
index 000000000..3e606df23
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2c.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: column".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-empty-2d.html b/layout/reftests/flexbox/pagination/flexbox-empty-2d.html
new file mode 100644
index 000000000..e45df0ffa
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-empty-2d.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment an empty fixed-height flex container, with
+ margin/border/padding that are larger than the available height,
+ and with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 2px;
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ background: teal;
+ /* border-width is 0 by default; some sub-testcases will increase it. */
+ border: 0 dashed black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- margin-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 10px"></div>
+ </div>
+
+ <!-- margin-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-top: 11px"></div>
+ </div>
+
+ <!-- margin-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 10px"></div>
+ </div>
+
+ <!-- margin-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ margin-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =================================== -->
+ <!-- border-top-width is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 10px"></div>
+ </div>
+
+ <!-- border-top-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top-width: 11px"></div>
+ </div>
+
+ <!-- border-bottom-width is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 10px"></div>
+ </div>
+
+ <!-- border-bottom-width is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom-width: 11px"></div>
+ </div>
+
+ <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- ==================================== -->
+ <!-- padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 10px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-top: 11px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 10px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ padding-bottom: 11px"></div>
+ </div>
+
+ <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
+ <!-- =========================================== -->
+ <!-- border+padding-top is the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 5px;
+ padding-top: 5px"></div>
+ </div>
+
+ <!-- padding-top is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-top: 6px;
+ padding-top: 6px"></div>
+ </div>
+
+ <!-- padding-bottom is exactly the available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 5px;
+ padding-bottom: 5px"></div>
+ </div>
+
+ <!-- padding-bottom is larger than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px;
+ border-bottom: 6px;
+ padding-bottom: 6px"></div>
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html b/layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html
new file mode 100644
index 000000000..586b51db7
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-multicol-vert-empty-2.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <style>
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ border: 2px dotted black;
+ height: 298px;
+ }
+ .multicol {
+ height: 100px;
+ width: 200px;
+ -moz-column-width: 20px;
+ -moz-column-fill: auto;
+ border: 4px solid orange;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="multicol">
+ <div class="flexContainer">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html
new file mode 100644
index 000000000..d0231e2f5
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ display: block;
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html
new file mode 100644
index 000000000..4b917aa18
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row" and
+ "flex-wrap: wrap".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html
new file mode 100644
index 000000000..8164a5aa3
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html
new file mode 100644
index 000000000..3d2ae7e13
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row-reverse" and
+ "flex-wrap: wrap".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ flex-wrap: wrap;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html
new file mode 100644
index 000000000..0b0aef653
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: row-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: row-reverse;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html
new file mode 100644
index 000000000..ae31d0898
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column" and
+ "flex-wrap: wrap".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html
new file mode 100644
index 000000000..bfd2fde16
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html
new file mode 100644
index 000000000..1e3e9ff8c
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column-reverse"
+ and "flex-wrap: wrap".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html
new file mode 100644
index 000000000..317e625d0
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with a single unbreakable
+ child, with the flex container having "flex-direction: column-reverse".
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 10px;
+ width: 100px;
+ -moz-column-width: 30px;
+ -moz-column-fill: auto;
+ border: 2px solid orange;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: flex-end;
+ background: teal;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 100%;
+ height: 20px;
+ flex: none;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, smaller than available height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 8px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, between available height and child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 15px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, same as child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 20px">
+ <img src="" class="item">
+ </div>
+ </div>
+
+ <!-- fixed-height container, larger than child height: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 24px">
+ <img src="" class="item">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html
new file mode 100644
index 000000000..163234dea
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2-ref.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with several children in a
+ multi-line vertical flexbox.
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 40px;
+ width: 100px;
+ -moz-column-width: 60px;
+ -moz-column-fill: auto;
+ border: 2px solid purple;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ background: yellow;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 40px;
+ height: 15px;
+ border: 1px dotted teal;
+ margin: 1px;
+ font: 10px serif;
+ float: left;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 38px">
+ <div class="item">1</div>
+ <div class="item">3</div>
+ <div class="item">2</div>
+ </div>
+ </div>
+
+ <!-- auto-height container, with enough children that our last flex line
+ overflows (in the cross axis) -->
+ <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the
+ overflowing flex line to a continuation of the flex container -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 38px">
+ <div style="width: 132px">
+ <div class="item">1</div>
+ <div class="item">3</div>
+ <div class="item">5</div>
+ <div class="item">2</div>
+ <div class="item">4</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- fixed-height container-->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 70px">
+ <div class="item">1</div>
+ <div class="item">3</div>
+ <div class="item">2</div>
+ </div>
+ </div>
+
+ <!-- fixed-height container, with enough children that our last flex line
+ overflows (in the cross axis) -->
+ <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the
+ overflowing flex line to a continuation of the flex container -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 70px">
+ <div style="width: 132px">
+ <div class="item">1</div>
+ <div class="item">3</div>
+ <div class="item">5</div>
+ <div class="item">2</div>
+ <div class="item">4</div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html
new file mode 100644
index 000000000..b006e9718
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-2.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- Testcase for how we fragment a flex container with several children in a
+ multi-line vertical flexbox.
+-->
+<html>
+ <head>
+ <style>
+ .multicol {
+ height: 40px;
+ width: 100px;
+ -moz-column-width: 60px;
+ -moz-column-fill: auto;
+ border: 2px solid purple;
+ margin-bottom: 15px; /* (just for spacing between testcases) */
+ }
+ .flexContainer {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ background: yellow;
+ border: 1px dashed black;
+ }
+ .item {
+ width: 40px;
+ height: 15px;
+ border: 1px dotted teal;
+ margin: 1px;
+ font: 10px serif;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- auto-height container: -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ </div>
+ </div>
+
+ <!-- auto-height container, with enough children that our last flex line
+ overflows (in the cross axis) -->
+ <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the
+ overflowing flex line to a continuation of the flex container -->
+ <div class="multicol">
+ <div class="flexContainer">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ <div class="item">4</div>
+ <div class="item">5</div>
+ </div>
+ </div>
+
+ <!-- fixed-height container-->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 70px">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ </div>
+ </div>
+
+ <!-- fixed-height container, with enough children that our last flex line
+ overflows (in the cross axis) -->
+ <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the
+ overflowing flex line to a continuation of the flex container -->
+ <div class="multicol">
+ <div class="flexContainer" style="height: 70px">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+ <div class="item">4</div>
+ <div class="item">5</div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/flexbox/pagination/reftest-stylo.list b/layout/reftests/flexbox/pagination/reftest-stylo.list
new file mode 100644
index 000000000..47156fa3a
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/reftest-stylo.list
@@ -0,0 +1,31 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Tests with an empty flex container being fragmented:
+== flexbox-empty-1a.html flexbox-empty-1a.html
+== flexbox-empty-1b.html flexbox-empty-1b.html
+== flexbox-empty-1c.html flexbox-empty-1c.html
+== flexbox-empty-1d.html flexbox-empty-1d.html
+
+# Tests with an empty flex container that overflows a short fixed-height block
+# being fragmented:
+== flexbox-empty-1e.html flexbox-empty-1e.html
+== flexbox-empty-1f.html flexbox-empty-1f.html
+== flexbox-empty-1g.html flexbox-empty-1g.html
+== flexbox-empty-1h.html flexbox-empty-1h.html
+
+# Tests with an empty flex container being fragmented, with margin, border,
+# and/or padding being taller than the available height:
+== flexbox-empty-2a.html flexbox-empty-2a.html
+== flexbox-empty-2b.html flexbox-empty-2b.html
+== flexbox-empty-2c.html flexbox-empty-2c.html
+== flexbox-empty-2d.html flexbox-empty-2d.html
+
+# Tests for how we fragment a flex container with one unbreakable child
+== flexbox-unbreakable-child-1a.html flexbox-unbreakable-child-1a.html
+== flexbox-unbreakable-child-1a-wrap.html flexbox-unbreakable-child-1a-wrap.html
+== flexbox-unbreakable-child-1b.html flexbox-unbreakable-child-1b.html
+== flexbox-unbreakable-child-1b-wrap.html flexbox-unbreakable-child-1b-wrap.html
+== flexbox-unbreakable-child-1c.html flexbox-unbreakable-child-1c.html
+== flexbox-unbreakable-child-1c-wrap.html flexbox-unbreakable-child-1c-wrap.html
+== flexbox-unbreakable-child-1d.html flexbox-unbreakable-child-1d.html
+== flexbox-unbreakable-child-1d-wrap.html flexbox-unbreakable-child-1d-wrap.html
+== flexbox-unbreakable-child-2.html flexbox-unbreakable-child-2.html
diff --git a/layout/reftests/flexbox/pagination/reftest.list b/layout/reftests/flexbox/pagination/reftest.list
new file mode 100644
index 000000000..31842d43d
--- /dev/null
+++ b/layout/reftests/flexbox/pagination/reftest.list
@@ -0,0 +1,30 @@
+# Tests with an empty flex container being fragmented:
+== flexbox-empty-1a.html flexbox-empty-1-ref.html
+== flexbox-empty-1b.html flexbox-empty-1-ref.html
+== flexbox-empty-1c.html flexbox-empty-1-ref.html
+== flexbox-empty-1d.html flexbox-empty-1-ref.html
+
+# Tests with an empty flex container that overflows a short fixed-height block
+# being fragmented:
+== flexbox-empty-1e.html flexbox-empty-1-ref.html
+== flexbox-empty-1f.html flexbox-empty-1-ref.html
+== flexbox-empty-1g.html flexbox-empty-1-ref.html
+== flexbox-empty-1h.html flexbox-empty-1-ref.html
+
+# Tests with an empty flex container being fragmented, with margin, border,
+# and/or padding being taller than the available height:
+== flexbox-empty-2a.html flexbox-empty-2-ref.html
+== flexbox-empty-2b.html flexbox-empty-2-ref.html
+== flexbox-empty-2c.html flexbox-empty-2-ref.html
+== flexbox-empty-2d.html flexbox-empty-2-ref.html
+
+# Tests for how we fragment a flex container with one unbreakable child
+== flexbox-unbreakable-child-1a.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1a-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1b.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1b-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1c.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1c-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1d.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-1d-wrap.html flexbox-unbreakable-child-1-ref.html
+== flexbox-unbreakable-child-2.html flexbox-unbreakable-child-2-ref.html